:root{--ink:#081018;--muted:#667180;--paper:#f6f7f9;--line:#dfe3e8;--violet:#6d28ff;--pink:#ff3ca6;--green:#18b97b}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--paper)}a{color:inherit;text-decoration:none}button,input{font:inherit}.brand{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:900;letter-spacing:.05em}.brand b{color:var(--violet)}.brand-mark{width:39px;height:39px;border-radius:12px;display:inline-grid;place-items:center;background:linear-gradient(145deg,var(--violet),var(--pink));color:#fff;font-weight:900;font-size:13px;box-shadow:0 12px 28px #6d28ff40}.brand-mark.mini{width:28px;height:28px;border-radius:8px;font-size:9px}.button{min-height:49px;padding:0 22px;border:0;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-weight:900;cursor:pointer}.button.small{min-height:40px}.button.primary{color:#fff;background:linear-gradient(135deg,var(--violet),#913dff);box-shadow:0 14px 30px #6d28ff3f}.button.secondary,.button.ghost{background:#fff;border:1px solid var(--line)}.button.full{width:100%}.button:disabled{opacity:.6}.topbar,.admin-header{height:82px;max-width:1180px;margin:auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between}.nav-links,.admin-header>div{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:800}.hero{min-height:660px;max-width:1180px;margin:auto;padding:75px 24px 95px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:45px}.eyebrow{margin:0 0 18px;color:var(--violet);text-transform:uppercase;letter-spacing:.15em;font-size:12px;font-weight:900;display:flex;align-items:center;gap:9px}.eyebrow.center{justify-content:center}.eyebrow i,.connected i{width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 5px #ff3ca619}.hero h1,.qr-copy h1{margin:0;font-size:clamp(55px,6vw,84px);line-height:.97;letter-spacing:-.065em;font-weight:900}.hero h1 span,.qr-copy h1 span{color:transparent;background:linear-gradient(90deg,var(--violet),var(--pink));background-clip:text}.lead{max-width:550px;margin:28px 0;color:var(--muted);font-size:20px;line-height:1.55}.actions{display:flex;gap:12px;flex-wrap:wrap}.safe{margin:22px 0 0;color:#77818d;font-size:13px}.safe::first-letter{color:var(--green)}.hero-art{min-height:490px;position:relative}.art-card{position:absolute;width:235px;height:385px;border:9px solid #fff;border-radius:29px;background:linear-gradient(145deg,#341058,#d3298a 48%,#ff9d42);box-shadow:0 35px 80px #2513382d}.art-card.back{right:10px;bottom:20px;transform:rotate(9deg);opacity:.78}.art-card.front{left:80px;top:15px;transform:rotate(-4deg);display:flex;flex-direction:column;justify-content:flex-end;padding:18px;color:#fff}.art-card.front>span{position:absolute;right:18px;top:18px;font-size:25px}.art-card.front>div{position:absolute;left:70px;top:85px;width:86px;height:170px;border-radius:50px 50px 18px 18px;background:linear-gradient(#3e132b 0 25%,#f1a570 26% 48%,#17294a 49%)}.art-card.front b,.art-card.front small{position:relative;z-index:2}.art-card.front small{margin-top:5px;color:#efdeec}.steps{padding:90px 24px;background:#fff;text-align:center}.steps h2{margin:0 0 45px;font-size:clamp(35px,4vw,52px);letter-spacing:-.045em}.step-grid{max-width:1050px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.step-grid article{padding:34px;border:1px solid var(--line);border-radius:20px;text-align:left;background:#fafbfc}.step-grid article>span{color:var(--pink);font-size:12px;font-weight:900}.step-grid h3{margin:16px 0 9px;font-size:25px}.step-grid p{margin:0;color:var(--muted);line-height:1.6}.form-shell{min-height:100vh;padding:40px 20px 70px;background:radial-gradient(circle at 50% 0,#eee6ff,transparent 42%),var(--paper)}.form-shell>.brand{display:flex;width:max-content;margin:0 auto 35px}.upload-card{width:min(100%,520px);margin:auto;padding:35px;background:#fff;border:1px solid #e5e8ed;border-radius:25px;box-shadow:0 30px 80px #30185b14;text-align:center}.upload-card h1{margin:0 0 10px;font-size:37px;letter-spacing:-.045em}.intro{margin:0 auto 27px;max-width:420px;color:var(--muted);line-height:1.55}.drop-zone{min-height:240px;border:2px dashed #c9c1dd;border-radius:18px;background:#faf8ff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:pointer;overflow:hidden;position:relative}.drop-zone input{position:absolute;inset:0;opacity:0;cursor:pointer}.drop-zone img{width:100%;height:300px;object-fit:contain;background:#111}.camera{width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:#ede7ff;color:var(--violet);font-size:30px}.drop-zone small{color:var(--muted);font-size:11px}.field{display:block;margin:22px 0 12px;text-align:left;font-size:13px;font-weight:800}.field span{color:#929aa5;font-weight:400}.field input{width:100%;height:50px;margin-top:8px;padding:0 14px;border:1px solid var(--line);border-radius:11px;outline:none}.field input:focus{border-color:var(--violet);box-shadow:0 0 0 3px #6d28ff15}.privacy{margin:16px 0 0;color:#98a0aa;font-size:11px}.error{padding:11px;border-radius:9px;background:#fff0f5;color:#a21a4d;font-size:13px}.success{width:82px;height:82px;margin:12px auto 25px;display:grid;place-items:center;border-radius:50%;background:#e7fbf4;color:var(--green);font-size:38px;font-weight:900}.admin-shell{min-height:100vh}.admin-header{max-width:none;padding:0 max(24px,calc((100vw - 1240px)/2));background:#fff;border-bottom:1px solid var(--line)}.admin-header a{color:var(--violet)}.admin-header .brand{color:var(--ink)}.admin-content{max-width:1240px;margin:auto;padding:46px 24px 80px}.admin-title{display:flex;align-items:end;justify-content:space-between;gap:25px}.admin-title h1{margin:0 0 8px;font-size:42px;letter-spacing:-.045em}.admin-title p:last-child{margin:0;color:var(--muted)}.connected{padding:11px 15px;border:1px solid var(--line);border-radius:99px;background:#fff;display:flex;align-items:center;gap:9px;font-size:12px;font-weight:800}.controls{margin:32px 0;padding:22px;display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:30px;border:1px solid var(--line);border-radius:17px;background:#fff}.controls small{display:block;margin-bottom:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:10px}.controls>div:nth-child(2){padding-left:28px;border-left:1px solid var(--line)}.controls>p{justify-self:end;color:var(--muted);font-size:13px}.switch{padding:4px;border-radius:10px;background:#edf0f3}.switch button{padding:9px 14px;border:0;border-radius:8px;background:transparent;font-size:13px;font-weight:800;cursor:pointer}.switch button.active{background:#fff;color:var(--violet);box-shadow:0 3px 10px #18212c15}.tabs{display:flex;gap:7px;border-bottom:1px solid var(--line)}.tabs button{padding:14px 12px;border:0;border-bottom:3px solid transparent;background:transparent;color:var(--muted);font-weight:900;cursor:pointer}.tabs button.active{color:var(--ink);border-bottom-color:var(--violet)}.tabs span{min-width:22px;height:22px;padding:0 5px;display:inline-grid;place-items:center;border-radius:99px;background:#e9ebee;font-size:11px}.photo-grid{margin-top:24px;display:grid;grid-template-columns:repeat(4,1fr);gap:17px}.photo-card{overflow:hidden;border:2px solid transparent;border-radius:16px;background:#fff;box-shadow:0 8px 25px #1924330d}.photo-card.selected{border-color:var(--violet)}.photo-card>img{width:100%;height:220px;object-fit:cover;display:block;background:#17131f}.photo-meta{padding:14px 14px 7px;display:flex;justify-content:space-between;gap:8px}.photo-meta small{color:var(--muted);font-size:10px}.photo-actions{padding:8px 12px 12px;display:flex;gap:7px}.photo-actions button{min-height:38px;border:0;border-radius:9px;font-weight:900;cursor:pointer}.photo-actions .approve{flex:1;background:#e7fbf4;color:#087c53}.photo-actions .reject{width:40px;background:#fff0f4;color:#c31d57;font-size:20px}.empty{grid-column:1/-1;padding:75px;text-align:center;color:var(--muted)}.empty>span{width:65px;height:65px;margin:auto;display:grid;place-items:center;border-radius:50%;background:#eee8fa;color:var(--violet);font-size:30px}.empty h2{color:var(--ink)}.display-body{overflow:hidden;background:transparent}.display{width:100vw;height:100vh;display:grid;place-items:center;overflow:hidden;background:#050507}.display.transparent{background:transparent}.display-photo{width:100%;height:100%;position:relative;animation:reveal .7s ease}.display-photo>img{width:100%;height:100%;object-fit:contain}.credit{position:absolute;left:30px;bottom:28px;padding:10px 15px 10px 10px;border-radius:13px;display:flex;align-items:center;gap:9px;color:#fff;background:#080b10cc;backdrop-filter:blur(12px);font-size:13px}.display-empty{text-align:center;color:#fff}.display-empty h1{margin:20px 0 10px;font-size:clamp(45px,6vw,88px);letter-spacing:-.055em}.display-empty p{color:#aeb4bf;font-size:22px}@keyframes reveal{from{opacity:.2;transform:scale(1.02)}}.qr-shell{min-height:100vh;padding:38px max(35px,calc((100vw - 1180px)/2));color:#fff;background:radial-gradient(circle at 75% 52%,#6425a1 0,#1d0c39 27%,#070910 58%)}.qr-shell>.brand{color:#fff}.qr-shell>section{min-height:calc(100vh - 120px);display:grid;grid-template-columns:1fr .8fr;gap:80px;align-items:center}.qr-copy>p:not(.eyebrow){max-width:520px;color:#bab8c7;font-size:20px;line-height:1.55}.qr-card{justify-self:end;width:min(100%,450px);padding:30px;border-radius:28px;background:#fff;color:var(--ink);text-align:center;box-shadow:0 35px 100px #0007}.qr-card img{width:100%;display:block}.qr-card b{display:block;margin:14px 0 7px;font-size:25px}.qr-card small{display:block;overflow:hidden;color:var(--muted);text-overflow:ellipsis;white-space:nowrap}@media(max-width:950px){.hero{grid-template-columns:1fr;text-align:center}.hero>div:first-child{display:flex;flex-direction:column;align-items:center}.hero-art{width:min(100%,550px);margin:auto}.step-grid{grid-template-columns:1fr}.photo-grid{grid-template-columns:repeat(3,1fr)}.qr-shell>section{grid-template-columns:1fr;padding:70px 0;text-align:center}.qr-copy .eyebrow{justify-content:center}.qr-card{justify-self:center}.controls{grid-template-columns:1fr 1fr}.controls>p{grid-column:1/-1;justify-self:start}}@media(max-width:680px){.topbar{height:70px}.nav-links>a:first-child{display:none}.hero{min-height:auto;padding:62px 20px 35px}.hero h1{font-size:51px}.lead{font-size:17px}.actions{width:100%}.actions .button{width:100%}.hero-art{min-height:410px;transform:scale(.86)}.art-card.front{left:50%;transform:translateX(-65%) rotate(-4deg)}.art-card.back{right:-10px}.steps{padding:70px 20px}.upload-card{padding:28px 20px}.admin-header{height:70px;padding:0 16px}.admin-header>div{gap:12px;font-size:12px}.admin-content{padding:32px 16px 60px}.admin-title{align-items:start;flex-direction:column}.admin-title h1{font-size:34px}.controls{grid-template-columns:1fr}.controls>div:nth-child(2){padding:0;border:0}.controls>p{grid-column:auto}.photo-grid{grid-template-columns:repeat(2,1fr);gap:10px}.photo-card>img{height:170px}.photo-meta{flex-direction:column}.qr-shell{padding:28px 18px}.qr-shell>section{gap:50px}.qr-copy h1{font-size:63px}.qr-card{padding:20px}}@media(max-width:410px){.photo-grid{grid-template-columns:1fr}.photo-card>img{height:250px}}

/* Mostrar siempre la imagen completa, sin recortar ni deformar */
.display-photo {
    width: 100vw !important;
    height: 100vh !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
}

.display-photo > img {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
}

/* Nombre centrado en pantalla LED */
.credit {
    left: 50% !important;
    right: auto !important;
    bottom: 32px !important;
    transform: translateX(-50%) !important;
    white-space: nowrap !important;
}

/* Ocultar logo CB en el nombre mostrado */
.credit .brand-mark {
    display: none !important;
}

/* Opciones separadas para cámara y galería */
.photo-choices {
    width: 100%;
    max-width: 440px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 18px auto 12px;
}

.photo-choice {
    min-height: 58px;
    padding: 12px 14px;
    border: 2px solid #ddd6fe;
    border-radius: 14px;
    background: #ffffff;
    color: #24143f;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}

.photo-choice:active {
    transform: scale(0.97);
}

.camera-choice {
    border-color: #7c3aed;
    background: #f5f3ff;
}

.gallery-choice {
    border-color: #10b981;
    background: #ecfdf5;
}

@media (max-width: 520px) {
    .photo-choices {
        grid-template-columns: 1fr;
    }
}

/* Campo utilizado internamente por los botones Cámara y Galería */
.hidden-photo-input {
    position: fixed !important;
    inset: auto !important;
    left: -10000px !important;
    top: 0 !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.photo-choices,
.photo-choice {
    position: relative !important;
    z-index: 20 !important;
    pointer-events: auto !important;
}

/* Diseño limpio: eliminar cuadro exterior de selección */
.drop-zone {
    min-height: auto !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    cursor: default !important;
}

.drop-zone .camera {
    display: none !important;
}

.drop-zone > b {
    display: block !important;
    margin: 0 0 16px !important;
    text-align: center !important;
}

.photo-choices {
    margin: 0 auto 12px !important;
}

.drop-zone > small {
    display: block !important;
    margin-top: 8px !important;
    text-align: center !important;
}

/* Retrato minimalista más reconocible */
.art-card.front > div {
    left: 61px !important;
    top: 65px !important;
    width: 104px !important;
    height: 184px !important;
    position: absolute !important;
    overflow: hidden !important;
    border-radius: 58px 58px 23px 23px !important;
    background: linear-gradient(
        to bottom,
        #3e132b 0 28%,
        #f1a570 28% 51%,
        #17294a 51% 100%
    ) !important;
    box-shadow:
        0 0 0 8px rgba(255,255,255,.10),
        0 18px 32px rgba(39,10,49,.20) !important;
}

/* Ojos */
.art-card.front > div::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 66px;
    left: 30px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #35162b;
    box-shadow: 37px 0 0 #35162b;
}

/* Sonrisa */
.art-card.front > div::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 78px;
    left: 40px;
    width: 24px;
    height: 11px;
    border-bottom: 3px solid #8b3c42;
    border-radius: 0 0 50% 50%;
}

/* Texto de confirmación más visible */
.art-card.front > b {
    font-size: 17px;
    letter-spacing: -.01em;
}

.art-card.front > small {
    font-size: 12px;
    opacity: .95;
}

/* Nuevo retrato humano minimalista */
.art-card.front > span {
    display: none !important;
}

.mini-portrait {
    position: absolute;
    left: 31px;
    top: 43px;
    width: 155px;
    height: 205px;
    margin: 0;
    display: grid;
    place-items: end center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 30px;
    background: rgba(255,255,255,.14);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.25),
        0 18px 35px rgba(50,10,60,.18);
}

.mini-portrait svg {
    width: 146px;
    height: auto;
    display: block;
}

/* =====================================================
   TEMA OSCURO GENERAL — CB PRODU FOTOS
   ===================================================== */

body:not(.display-body) {
    color: #f8f7fb;
    background:
        radial-gradient(circle at 82% 22%, #281044 0, #12091f 34%, #070910 70%)
        fixed !important;
}

/* Navegación e inicio */
.topbar {
    color: #f8f7fb;
    background: transparent;
}

.hero {
    color: #f8f7fb;
}

.hero .lead {
    color: #aaa5b8;
}

.safe {
    color: #9892a6;
}

.button.secondary,
.button.ghost {
    color: #f8f7fb;
    border-color: #352c43;
    background: rgba(255,255,255,.055);
}

.button.secondary:hover,
.button.ghost:hover {
    border-color: #6d28ff;
    background: rgba(109,40,255,.12);
}

.steps {
    color: #f8f7fb;
    border-top: 1px solid #211a2c;
    background: rgba(8,7,14,.82);
}

.step-grid article {
    border-color: #2a2335;
    background: rgba(20,17,29,.90);
    box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.step-grid p {
    color: #aaa5b8;
}

/* Página para subir fotos */
.form-shell {
    color: #f8f7fb;
    background:
        radial-gradient(circle at 50% 0, #2b1250 0, transparent 38%),
        #070910 !important;
}

.upload-card {
    border-color: #2d2638;
    background: rgba(18,15,27,.94);
    box-shadow: 0 30px 90px rgba(0,0,0,.34);
}

.upload-card .intro {
    color: #aaa5b8;
}

.photo-choice {
    color: #f8f7fb !important;
    background: #15111f !important;
}

.camera-choice {
    border-color: #7c3aed !important;
    background: rgba(124,58,237,.13) !important;
}

.gallery-choice {
    border-color: #18b97b !important;
    background: rgba(24,185,123,.11) !important;
}

.photo-choice:hover {
    filter: brightness(1.16);
}

.drop-zone > small,
.privacy {
    color: #8e8999 !important;
}

.field {
    color: #f8f7fb;
}

.field span {
    color: #938d9e;
}

.field input {
    color: #f8f7fb;
    border-color: #352e40;
    background: #0d0b13;
}

.field input::placeholder {
    color: #6f697a;
}

.field input:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124,58,237,.18);
}

.error {
    color: #ff8eb5;
    background: rgba(195,29,87,.15);
}

.success {
    color: #55e6af;
    background: rgba(24,185,123,.14);
}

/* Panel de administración */
.admin-shell {
    color: #f8f7fb;
    background:
        radial-gradient(circle at 85% 8%, #271040 0, transparent 34%),
        #08070d;
}

.admin-header {
    color: #f8f7fb;
    border-bottom-color: #282130;
    background: rgba(10,8,15,.94);
}

.admin-header .brand {
    color: #f8f7fb;
}

.admin-title p:last-child,
.controls > p {
    color: #aaa5b8;
}

.connected {
    color: #f8f7fb;
    border-color: #342c40;
    background: #15111d;
}

.connected i {
    background: #55e6af;
    box-shadow: 0 0 0 5px rgba(85, 230, 175, .12);
}

.connected.is-offline {
    color: #aaa5b8;
}

.connected.is-offline i {
    background: #777181;
    box-shadow: 0 0 0 5px rgba(119, 113, 129, .12);
}

.controls {
    border-color: #2e2738;
    background: rgba(19,16,27,.94);
    box-shadow: 0 18px 55px rgba(0,0,0,.18);
}

.controls small {
    color: #948e9f;
}

.controls > div:nth-child(2) {
    border-left-color: #352e40;
}

.switch {
    background: #0b0910;
}

.switch button {
    color: #aaa5b8;
}

.switch button.active {
    color: #fff;
    background: #2a2038;
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
}

.tabs {
    border-bottom-color: #2c2536;
}

.tabs button {
    color: #928c9d;
}

.tabs button.active {
    color: #fff;
}

.tabs span {
    color: #c9c5d0;
    background: #2a2432;
}

.photo-card {
    color: #f8f7fb;
    background: #14111c;
    box-shadow: 0 12px 35px rgba(0,0,0,.26);
}

.photo-card.selected {
    border-color: #8b5cff;
}

.photo-meta small {
    color: #928c9d;
}

.photo-actions .approve {
    color: #59e7b0;
    background: rgba(24,185,123,.14);
}

.photo-actions .reject {
    color: #ff79a7;
    background: rgba(195,29,87,.14);
}

.empty {
    color: #aaa5b8;
}

.empty > span {
    color: #a986ff;
    background: rgba(109,40,255,.15);
}

.empty h2 {
    color: #f8f7fb;
}

/* Mantener las tarjetas del QR claras */
.qr-card {
    color: #081018;
}

.qr-card small {
    color: #667180;
}

/* Accesibilidad, foco y ajustes responsive — v1.3.0 */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

[hidden] {
    display: none !important;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #b99cff;
    outline-offset: 3px;
}

.brand {
    flex-shrink: 0;
}

.nav-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.hidden-photo-input {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

.photo-preview {
    width: 100%;
    margin: 0 auto 16px;
    overflow: hidden;
    border: 1px solid #352e40;
    border-radius: 14px;
    background: #08070d;
}

.photo-preview img {
    width: 100%;
    height: min(42vh, 310px);
    display: block;
    object-fit: contain;
    background: #08070d;
}

.drop-zone > small,
.privacy,
.field span,
.field input::placeholder {
    color: #aaa5b8 !important;
}

.error {
    margin: 12px 0;
    border: 1px solid rgba(255, 121, 167, .34);
    text-align: left;
}

.admin-message {
    margin: 0 0 18px;
    padding: 11px 14px;
    border: 1px solid rgba(89, 231, 176, .28);
    border-radius: 10px;
    color: #8ff2ca;
    background: rgba(24, 185, 123, .12);
}

.admin-message.is-error {
    border-color: rgba(255, 121, 167, .34);
    color: #ff9cbe;
    background: rgba(195, 29, 87, .14);
}

.tabs button,
.switch button,
.photo-actions button {
    min-height: 44px;
}

.pagination {
    margin-top: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.pagination button {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid #342c40;
    border-radius: 11px;
    color: #f8f7fb;
    background: #15111d;
    cursor: pointer;
}

.pagination button:disabled {
    opacity: .45;
    cursor: default;
}

.pagination span {
    color: #aaa5b8;
    font-size: 13px;
}

/* Salida RGBA para Browser/Spout/NDI que conserven canal alpha. */
html.display-alpha,
html.display-alpha body,
body.display-alpha,
.display-alpha .display,
.display.transparent {
    background: transparent !important;
    background-color: transparent !important;
}

.display-alpha .display-empty {
    display: none !important;
}

@media (max-width: 680px) {
    .topbar {
        padding-inline: 16px;
        gap: 12px;
    }

    .nav-links {
        gap: 8px;
    }

    .nav-links > a:first-child,
    .nav-upload {
        display: inline-flex !important;
        padding: 0 4px;
    }

    .nav-panel {
        display: none !important;
    }

    .form-shell {
        padding: 28px 12px calc(48px + env(safe-area-inset-bottom));
    }

    .form-shell > .brand {
        margin-bottom: 26px;
    }

    .upload-card {
        padding: 28px 18px;
        scroll-margin-top: 12px;
    }

    .field input {
        min-height: 52px;
        font-size: 16px;
    }

    .photo-choice {
        min-height: 60px;
    }

    .tabs {
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .tabs button {
        flex: 0 0 auto;
    }

    .pagination {
        gap: 8px;
    }

    .pagination button {
        padding-inline: 12px;
    }

    .qr-shell > section {
        padding-top: 45px;
    }

    .qr-card {
        width: min(100%, 430px);
    }
}

@media (max-width: 390px) {
    .brand {
        gap: 8px;
        font-size: 12px;
    }

    .brand-mark {
        width: 36px;
        height: 36px;
    }

    .hero h1 {
        font-size: 46px;
    }

    .upload-card h1 {
        font-size: 34px;
    }

    .qr-copy h1 {
        font-size: 55px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Panel y QR compactos — v1.3.1 */
.admin-header > nav {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 800;
}

.admin-header > nav a {
    min-height: 42px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid #342c40;
    border-radius: 12px;
    white-space: nowrap;
    background: #15111d;
    transition: border-color .18s ease, background-color .18s ease;
}

.admin-header > nav a:hover {
    border-color: #7c3aed;
    background: rgba(124,58,237,.14);
}

.admin-header > nav a:last-child {
    color: #fff;
    border-color: rgba(124,58,237,.55);
    background: rgba(109,40,255,.18);
}

.qr-shell > section {
    min-height: calc(100svh - 100px);
    grid-template-columns: minmax(0, 1fr) minmax(320px, 440px);
    gap: clamp(48px, 7vw, 110px);
}

.qr-card {
    width: 100%;
    max-width: 440px;
    height: auto !important;
    min-height: 0 !important;
    padding: 22px;
    align-self: center;
    border-radius: 24px;
}

.qr-card > img {
    width: min(100%, 390px);
    height: auto !important;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    object-fit: contain;
}

.qr-card b {
    margin-top: 12px;
}

@media (max-width: 950px) {
    .qr-shell > section {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 44px 0 54px;
        gap: 36px;
    }

    .qr-card {
        max-width: 390px;
        padding: 18px;
        align-self: start;
    }

    .qr-card > img {
        max-width: 350px;
    }
}

@media (max-width: 680px) {
    .admin-header {
        padding-inline: 12px;
    }

    .admin-header > nav {
        gap: 6px;
        font-size: 11px;
    }

    .admin-header > nav a {
        min-height: 40px;
        padding: 0 10px;
        border-radius: 10px;
    }

    .admin-open-prefix {
        display: none;
    }

    .qr-shell {
        padding: 24px 16px;
    }

    .qr-shell > section {
        padding: 38px 0 44px;
        gap: 32px;
    }

    .qr-copy > p:not(.eyebrow) {
        font-size: 17px;
    }

    .qr-card {
        max-width: 360px;
        padding: 16px;
        border-radius: 22px;
    }

    .qr-card > img {
        max-width: 320px;
    }

    .qr-card b {
        margin-top: 10px;
        font-size: 22px;
    }
}