/* ═══════════════════════════════════════════════════════════════ Piel del panel para el Heraldo del Reino Real (cumple de Salma). El panel de Ale y este comparten TODO el HTML y el JS: aquí solo se repintan las variables del tema y se ajusta lo que no basta con recolorear. Se activa con . ═══════════════════════════════════════════════════════════════ */ html[data-tema="heraldo"] { --paper: #cfc7b8; --paper-2: #f6f3ea; --ink: #16120f; --ink-soft: #3a342c; --muted: #5c5347; --pink: #efe7d2; /* la tarjeta destacada */ --pink-2: #b3861f; /* filete de la barra superior */ --red: #a5202a; --lilac: #cfc7b8; --cyan: #d9d2c2; --yellow: #e0bd63; --shadow: 0 18px 46px rgba(0, 0, 0, .3); --radius: 18px; --font-title: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-hand: 'EB Garamond', Georgia, 'Times New Roman', serif; --font-accent: 'Limelight', 'Playfair Display', serif; --oro: #b3861f; --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); } /* El fondo de Ale son manchas de cuaderno; el del Heraldo es papel prensa. */ html[data-tema="heraldo"] body.paper::after { display: none; } html[data-tema="heraldo"] body.paper::before { background-image: var(--grano); opacity: 1; } /* Los títulos del Heraldo son de imprenta, no de plumón. */ html[data-tema="heraldo"] h1, html[data-tema="heraldo"] h2, html[data-tema="heraldo"] h3 { font-weight: 900; letter-spacing: -.01em; text-transform: uppercase; } html[data-tema="heraldo"] .topbar h1 { letter-spacing: .02em; } /* ── la entrada: redondeada de verdad, con marco dorado ── */ html[data-tema="heraldo"] .login-card { border: 2px solid var(--ink); border-radius: 28px; position: relative; overflow: hidden; background-image: var(--grano); box-shadow: 0 2px 0 rgba(22,18,15,.45), 0 26px 70px rgba(0,0,0,.32); } html[data-tema="heraldo"] .login-card::before { content: ''; position: absolute; inset: 7px; border: 1px solid rgba(179,134,31,.5); border-radius: 21px; pointer-events: none; } html[data-tema="heraldo"] .login-card h1 { font-size: 1.7rem; text-align: center; margin-bottom: .2em; } html[data-tema="heraldo"] .login-card > .muted { text-align: center; } html[data-tema="heraldo"] .login-card label { font-family: var(--font-title); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: .95rem; } html[data-tema="heraldo"] .login-card input { border-radius: 14px; border: 2px solid var(--ink); box-shadow: none; background: var(--paper-2); } html[data-tema="heraldo"] .login-card input:focus { outline: 2px solid var(--oro); outline-offset: 1px; background: #fff; } html[data-tema="heraldo"] .login-card .btn { border-radius: 999px; } /* corona de la casa sobre el login */ html[data-tema="heraldo"] .login-card h1::before { content: ''; display: block; width: 62px; height: 50px; margin: 0 auto .5rem; background: currentColor; -webkit-mask: var(--corona) center/contain no-repeat; mask: var(--corona) center/contain no-repeat; } html[data-tema="heraldo"] { --corona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 82'%3E%3Cpath d='M12 56V20l19 22L50 10l19 32 19-22v36z'/%3E%3Crect x='10' y='58' width='80' height='16' rx='3'/%3E%3Ccircle cx='12' cy='17' r='6'/%3E%3Ccircle cx='50' cy='7' r='7'/%3E%3Ccircle cx='88' cy='17' r='6'/%3E%3C/svg%3E"); } /* ── botones y controles: sobrios, de tinta ── */ html[data-tema="heraldo"] .btn { font-family: var(--font-title); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } html[data-tema="heraldo"] .btn.red { background: var(--ink); color: var(--paper-2); } /* ── tarjetas y tablas ── */ html[data-tema="heraldo"] .scard { border-width: 2px; border-radius: 14px; box-shadow: 4px 4px 0 rgba(22,18,15,.16); } html[data-tema="heraldo"] .scard b { font-weight: 900; } html[data-tema="heraldo"] .scard.hot { background: var(--pink); border-color: var(--oro); } html[data-tema="heraldo"] .admin-wrap .card { border-width: 2px; border-radius: 14px; box-shadow: 4px 4px 0 rgba(22,18,15,.14); } html[data-tema="heraldo"] th { font-family: var(--font-title); font-weight: 900; letter-spacing: .12em; border-bottom-width: 2px; } html[data-tema="heraldo"] tr.arrived { background: rgba(179, 134, 31, .16); } html[data-tema="heraldo"] .toggle { border-width: 2px; box-shadow: 2px 2px 0 rgba(22,18,15,.3); } html[data-tema="heraldo"] .toggle.on { background: var(--yellow); } html[data-tema="heraldo"] .toggle.on.trajo { background: #cbb98a; } html[data-tema="heraldo"] .mchip { border-width: 2px; box-shadow: 2px 2px 0 rgba(22,18,15,.25); } html[data-tema="heraldo"] .mchip.ok { background: var(--yellow); } html[data-tema="heraldo"] .mchip.warn { background: var(--paper-2); } html[data-tema="heraldo"] .mchip.bad { background: #e8c9c9; } html[data-tema="heraldo"] .bars .track i { background: var(--oro); } /* ── selector de fiesta ── */ html[data-tema="heraldo"] .evento-pick select { border-radius: 999px; border-width: 2px; font-family: var(--font-title); font-weight: 700; } /* ── escáner ── */ html[data-tema="heraldo"] .scanner-card { border-radius: 20px; border-width: 2px; } html[data-tema="heraldo"] .scan-result { border-radius: 14px; }