/* Tema del panel de La N Burgers Club (2026-11-13). Sale del manual de aplicaciones de marca: negro de fondo,
   crema de las letras y la textura de sello, naranja de "Combos" y "Bebidas", serif retro para los títulos y
   sans geométrica para el texto. Fuentes libres (OFL) servidas desde el propio panel: Fraunces y Montserrat.
   Este archivo solo carga para La N (clientes/la-n/marca/tema.css); los demás paneles no lo ven. */

@font-face{font-family:"N Display";src:url(/marca/fraunces.woff2) format("woff2");font-weight:600 900;font-display:swap}
@font-face{font-family:"N Texto";src:url(/marca/montserrat.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{
  --n-negro:#0c0b0d; --n-negro-2:#161418; --n-negro-3:#211e24;
  --n-crema:#ece1c7; --n-crema-2:#d9cba9; --n-crema-3:#a8997c;
  --n-naranja:#e0662a; --n-naranja-2:#f08a4b;
  --n-grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --n-titulo:"N Display",Georgia,"Times New Roman",serif;

  /* Lienzo claro: papel crema, como la carta impresa */
  --fondo:#f3ead8; --placa:#fffaf1; --placa-2:#f9f1e2; --hundido:#ebe0c9;
  --linea:#e2d4b8; --linea-2:#cdbb98;
  --tinta:#151215; --tinta-2:#4e463c; --tinta-3:#7a6d5b;
  --sobre-tinta:#f6eedd; --tinta-hover:#2d2724; --pista:#d6c8aa; --barra-baja:#d9cbaa;
  --sombra:rgba(40,25,10,.14); --velo:rgba(12,11,13,.55);
  --riel:var(--n-negro); --riel-2:var(--n-negro-2); --riel-linea:#2a2629; --riel-texto:var(--n-crema); --riel-suave:var(--n-crema-3);
  --marca-texto:#b84a14; --marca-suave:#fbe3d3; --marca-borde:#f0b48f;
  --letra:"N Texto","Plex",system-ui,-apple-system,"Segoe UI",sans-serif;
  --radio:16px;
}
:root[data-aspecto="oscuro"]{
  /* Lienzo oscuro: el negro de la carta */
  --fondo:#0d0c0e; --placa:#171519; --placa-2:#1c1a1e; --hundido:#221f24;
  --linea:#2c2830; --linea-2:#3d3741;
  --tinta:#efe5cf; --tinta-2:#cbbea3; --tinta-3:#9b8f7a;
  --sobre-tinta:#121014; --tinta-hover:#ffffff; --pista:#3d3741; --barra-baja:#332e36;
  --sombra:rgba(0,0,0,.5); --velo:rgba(0,0,0,.66);
  --marca-texto:var(--n-naranja-2); --marca-suave:#2e1b12; --marca-borde:#6b3418;
  --riel:#070608;
}

body{font-family:var(--letra);background-color:var(--fondo)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background-image:var(--n-grano);opacity:.05;mix-blend-mode:multiply}
:root[data-aspecto="oscuro"] body::before{opacity:.09;mix-blend-mode:screen}
.lienzo,main{position:relative;z-index:1}

/* ============ Panel: riel con el logo grande y el perro de la marca ============ */
.riel{background-color:var(--riel);background-image:var(--n-grano);background-blend-mode:screen;border-top:0!important;
  box-shadow:inset -1px 0 0 #1f1c20}
.identidad{flex-direction:column;align-items:flex-start;gap:10px;padding:10px 10px 20px}
.identidad .sello{display:none}
.identidad::before{content:"";width:64px;height:112px;background:url(/marca/logo.png) no-repeat left center/contain}
.identidad b{font:800 21px/1.1 var(--n-titulo);letter-spacing:.005em;color:var(--n-crema);white-space:normal}
.identidad small{color:var(--n-crema-3);font-size:12px;letter-spacing:.02em}
.grupo{color:var(--n-naranja);letter-spacing:.14em;font-weight:600;font-size:10.5px}
.nav{color:#d8ccb2;border-radius:999px;padding:8px 14px}
.nav:hover{background:#1c191d;color:#fff}
.nav[aria-current="page"]{background:rgba(224,102,42,.16);color:#fff;box-shadow:inset 0 0 0 1px rgba(224,102,42,.45)}
.nav[aria-current="page"]::before{display:none}
.nav[aria-current="page"] svg{color:var(--n-naranja)}
html[data-modo] .insignia{background:var(--n-naranja);color:#1a0f08;font-weight:700}
.riel-pie{border-top:1px dashed #3a3438}
.riel-pie::before{content:"";display:block;height:118px;margin:-4px 0 6px;background:url(/marca/perro.png) no-repeat center bottom/contain;opacity:.92}
.tema-opciones{background:#141215;border-color:#2a2629;border-radius:999px}
.tema-opciones button{border-radius:999px}
.tema-opciones button[aria-pressed="true"]{background:var(--n-crema);color:var(--n-negro)}
.salir{border-radius:999px;border-color:#3a3438;color:var(--n-crema)}
.salir:hover{background:#1c191d}
.punto{background:#7fc28f}

/* ============ Barra de arriba ============ */
.barra{background:color-mix(in oklch,var(--fondo) 86%,transparent)}
.periodo,.filtros{border-radius:999px}
.periodo button,.filtros button{border-radius:999px}
.interruptor{border-radius:999px}
.interruptor[aria-checked="true"] .pista{background:var(--n-naranja)}

/* ============ Títulos con la voz de la carta ============ */
.encabezado h1{font:900 clamp(30px,2.2rem + .8vw,44px)/1.02 var(--n-titulo);letter-spacing:-.01em;color:var(--tinta)}
.encabezado h1::before{content:"\2731";color:var(--n-naranja);font-size:.62em;margin-right:.32em;vertical-align:.32em}
.encabezado p{color:var(--tinta-2);max-width:70ch}
.placa h2,.placa h3,.placa-cab h2{font:800 19px/1.2 var(--n-titulo);letter-spacing:.005em}

/* ============ Tarjetas y cifras ============ */
.placa,.tarjeta,.cifras,.tabla{border-radius:var(--radio);border-color:var(--linea);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 10px 30px -18px var(--sombra)}
:root[data-aspecto="oscuro"] :is(.placa,.tarjeta,.cifras,.tabla){box-shadow:0 0 0 1px rgba(236,225,199,.03) inset,0 14px 34px -20px #000}
.clave{background:var(--n-negro);color:var(--n-crema);border-color:#2a2629;background-image:var(--n-grano);background-blend-mode:screen;position:relative;overflow:hidden}
.clave::after{content:"";position:absolute;right:-6px;bottom:-10px;width:150px;height:112px;background:url(/marca/perro.png) no-repeat right bottom/contain;opacity:.16;pointer-events:none}
.clave .cifra{font:900 clamp(60px,7vw,92px)/.9 var(--n-titulo);color:var(--n-naranja);letter-spacing:-.02em}
.clave .cifra small{color:var(--n-crema-3)}
.clave .de b{color:var(--n-crema)} .clave .de span{color:var(--n-crema-2)} .clave .de i{color:var(--n-crema-3)}
.clave .medidor{background:#2a2629}
.cifras dd{font:800 30px/1 var(--n-titulo);letter-spacing:-.01em}
.cifras dt{text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;font-weight:600}
.cifras .fuerte dd{color:var(--marca-texto)}
.tarjeta.pendiente{border-color:var(--marca-borde);box-shadow:inset 4px 0 0 var(--n-naranja),0 10px 30px -18px var(--sombra)}
.t-num{font-family:var(--letra);font-weight:600;letter-spacing:.04em}
.t-quien b{font:800 18px/1.2 var(--n-titulo)}
.linea.gran .plata{font:800 18px var(--n-titulo);color:var(--marca-texto)}
.t-pie{background:var(--placa-2)}
.estado{border-radius:999px;padding:2px 10px;font-weight:600;letter-spacing:.01em}

/* ============ Botones: píldoras como los sellos de la carta ============ */
.b{border-radius:999px}
.b.primario{background:var(--n-naranja);border-color:var(--n-naranja);color:#170d07;font-weight:700}
.b.primario:hover{background:var(--n-naranja-2);border-color:var(--n-naranja-2)}
:focus-visible{outline-color:var(--n-naranja)}
.burbuja.cliente{border-radius:16px 16px 16px 4px}

/* ============ Celular ============ */
@media (max-width:900px){
  .barra{background:var(--n-negro);background-image:var(--n-grano);background-blend-mode:screen;
    border-bottom:2px solid var(--n-naranja)}
  html[data-modo] .barra-marca .sello{width:28px;height:46px;border-radius:0;background:none;border:0;overflow:visible}
  .barra-marca .sello img{object-fit:contain}
  .barra-marca b{font:800 17px/1.1 var(--n-titulo);color:var(--n-crema)}
  .periodo{background:#1a171b}
  .periodo button[aria-pressed="true"]{background:var(--n-crema);color:var(--n-negro)}
  .pestanas{background:color-mix(in oklch,var(--placa) 94%,transparent);backdrop-filter:blur(12px)}
  .tab[aria-current="page"]{color:var(--marca-texto)}
  .tab[aria-current="page"]::after{height:3px;background:var(--n-naranja)}
  .tab .insignia{background:var(--n-naranja);color:#1a0f08}
  .encabezado h1{font-size:32px}
}

@media (max-width:640px){
  .clave::after{display:none}
  .encabezado h1{font-size:30px}
}

/* ============ Pantalla de entrada (entrar.html no tiene data-modo) ============ */
html:not([data-modo]) body{background:var(--n-negro);background-image:var(--n-grano);background-blend-mode:screen;color:var(--n-crema)}
html:not([data-modo]) body::before{display:none}
html:not([data-modo]) main{padding:40px 16px 24px}
html:not([data-modo]) form{width:min(400px,100%)}
html:not([data-modo]) .marca{flex-direction:column;align-items:center;text-align:center;gap:16px;margin-bottom:26px}
html:not([data-modo]) .marca .sello{display:none}
html:not([data-modo]) .marca::before{content:"";width:92px;height:160px;background:url(/marca/logo.png) no-repeat center/contain}
html:not([data-modo]) h1{font:900 34px/1 var(--n-titulo);color:var(--n-crema);letter-spacing:-.005em}
html:not([data-modo]) .lema{color:var(--n-crema-3);font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-top:8px}
html:not([data-modo]) .caja{background:var(--n-crema);color:var(--n-negro);border:0;border-radius:22px;padding:26px 24px 24px;
  box-shadow:0 30px 80px -30px rgba(224,102,42,.45),0 0 0 1px rgba(255,255,255,.05)}
html:not([data-modo]) .caja h2{font:900 22px/1.15 var(--n-titulo);color:var(--n-negro)}
html:not([data-modo]) .caja h2::before{content:"\2731";color:var(--n-naranja);margin-right:.3em;font-size:.8em}
html:not([data-modo]) .caja p{color:#5a4f41}
html:not([data-modo]) label{color:#2b241d}
html:not([data-modo]) input{background:#fffaf1;border-color:#cdbb98;color:var(--n-negro);border-radius:12px}
html:not([data-modo]) input:focus{border-color:var(--n-negro);box-shadow:0 0 0 3px rgba(224,102,42,.35)}
html:not([data-modo]) button[type="submit"]{background:var(--n-naranja);color:#170d07;border-radius:999px;font:700 16px var(--letra);letter-spacing:.02em}
html:not([data-modo]) button[type="submit"]:hover{background:var(--n-naranja-2)}
html:not([data-modo]) footer{color:var(--n-crema-3)}
html:not([data-modo]) footer::before{content:"";width:min(320px,80vw);height:80px;background:url(/marca/lema.png) no-repeat center/contain;opacity:.85}
html:not([data-modo]) .tema{background:#1a171b;border-radius:999px}
html:not([data-modo]) .tema button{color:var(--n-crema-3);border-radius:999px}
html:not([data-modo]) .tema button[aria-pressed="true"]{background:var(--n-crema);color:var(--n-negro);box-shadow:none}
html:not([data-modo]) :focus-visible{outline-color:var(--n-naranja)}