/* ═══ Cyron Tiendas · la identidad de Cyron (panel y admin) ═══
   Los tokens son los de docs/IDENTIDAD.md de Cyron: claro de día, oscuro
   opcional, azul = acción, el dato en mono. La marca del cliente (--cliente)
   tiñe solo detalles. */
:root{
  --tinta:#0B1424;--tinta-2:#122138;--tinta-3:#1A2E4A;--azul:#2F6BFF;--azul-claro:#5B8CFF;--sobre-tinta:#EAF2F8;
  --pagina:#F2F5F8;--caja:#fff;--caja-hundida:#EEF0ED;--borde:#D8E0E8;--borde-suave:#E6EBF1;--texto:#0E1A2C;--texto-2:#5E6E84;--texto-3:#9FB0C4;
  --bien:#13995E;--bien-fondo:#E8F7F0;--bien-borde:#BFE5D2;--bien-texto:#0C5A36;
  --atencion:#B56C00;--atencion-fondo:#FFF4E5;--atencion-borde:#F3D9A6;--atencion-texto:#6B4300;
  --problema:#C9363E;--problema-fondo:#FBEAEB;--problema-borde:#F0BFC3;--problema-texto:#7A1E24;
  --info-fondo:#EEF4FF;--wa:#25D366;--cliente:#2F6BFF;
  --sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--titulo:"Bricolage Grotesque",Inter,system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
[data-tema="oscuro"]{
  --pagina:#0B1424;--caja:#122138;--caja-hundida:#0B1424;--borde:#1A2E4A;--borde-suave:#1A2E4A;--texto:#EAF2F8;--texto-2:#9FB0C4;--texto-3:#5E6E84;
  --bien:#3DDC97;--bien-fondo:#12382C;--bien-borde:#1D5A45;--bien-texto:#3DDC97;
  --atencion:#F0A830;--atencion-fondo:#3A2C12;--atencion-borde:#5C4517;--atencion-texto:#F0A830;
  --problema:#FF7B84;--problema-fondo:#3D1A1E;--problema-borde:#66282E;--problema-texto:#FF7B84;--info-fondo:#122B5C;
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{font:15px/1.5 var(--sans);color:var(--texto);background:var(--pagina);min-height:100vh}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--azul)}
[hidden]{display:none!important}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.rotulo{font:500 11px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--texto-2)}
h1,h2,h3{font-family:var(--titulo);line-height:1.15}
h1{font-size:24px}h2{font-size:20px}h3{font-size:17px}
.suave{color:var(--texto-2)}.chico{font-size:13px}

/* Botones: 44 px, un solo principal por caja. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:6px;border:1px solid var(--borde);background:var(--caja);color:var(--texto);font-weight:600;font-size:15px;cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--texto-3)}
.btn:focus-visible,.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(47,107,255,.25)}
.btn.principal{background:var(--azul);border-color:var(--azul);color:#fff}
.btn.principal:hover{background:var(--azul-claro);border-color:var(--azul-claro)}
.btn.peligro{color:var(--problema);border-color:var(--problema-borde)}
.btn.wa{background:var(--wa);border-color:var(--wa);color:#06301A}
.btn.pildora{min-height:36px;border-radius:999px;padding:0 14px;font-size:13px;font-weight:600}
.btn.pildora.activa{background:var(--tinta);border-color:var(--tinta);color:var(--sobre-tinta)}
[data-tema="oscuro"] .btn.pildora.activa{background:var(--azul);border-color:var(--azul);color:#fff}
.btn[disabled]{opacity:.55;cursor:default}
.btn svg{width:18px;height:18px;flex:none}
.btn.ancho{width:100%}

/* Campos: label de verdad. */
.campo{display:block;margin-top:12px}
.campo>span{display:block;font-size:13px;font-weight:600;margin-bottom:4px}
.campo small{display:block;font-size:12px;color:var(--texto-2);margin-top:4px}
.campo input,.campo select,.campo textarea{width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--borde);border-radius:6px;background:var(--caja)}
.campo textarea{min-height:88px;resize:vertical}
.campo input[type=color]{padding:4px;height:44px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Cajas y filas. */
.caja{background:var(--caja);border:1px solid var(--borde);border-radius:10px;padding:16px;margin-top:16px}
.caja-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.fila{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--borde-suave);min-height:44px}
.fila:first-child{border-top:0}
.fila .crece{flex:1;min-width:0}
.fila .crece b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila .crece span{display:block;font-size:13px;color:var(--texto-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
button.fila{width:100%;background:none;border:0;border-top:1px solid var(--borde-suave);text-align:left;cursor:pointer;border-radius:0}
button.fila:first-child{border-top:0}
button.fila:hover{background:var(--caja-hundida)}
.miniatura{width:44px;height:44px;border-radius:8px;object-fit:cover;background:var(--caja-hundida);flex:none;display:grid;place-items:center;color:var(--texto-3);font-weight:700}
.pild{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid var(--borde);color:var(--texto-2);white-space:nowrap}
.pild.bien{background:var(--bien-fondo);border-color:var(--bien-borde);color:var(--bien-texto)}
.pild.atencion{background:var(--atencion-fondo);border-color:var(--atencion-borde);color:var(--atencion-texto)}
.pild.problema{background:var(--problema-fondo);border-color:var(--problema-borde);color:var(--problema-texto)}
.pild.info{background:var(--info-fondo);border-color:var(--info-fondo);color:var(--azul)}
[data-tema="oscuro"] .pild.info{color:var(--sobre-tinta)}
.vacio{padding:24px 12px;text-align:center;color:var(--texto-2)}
.vacio .btn{margin-top:12px}
.cargando{padding:24px;text-align:center;color:var(--texto-2);font-size:13px}

/* Avisos (y el que aparece abajo). */
.aviso{display:flex;gap:8px;align-items:flex-start;padding:12px;border-radius:8px;border:1px solid var(--borde);font-size:13px;margin-top:12px}
.aviso svg{width:18px;height:18px;flex:none;margin-top:1px}
.aviso.bien{background:var(--bien-fondo);border-color:var(--bien-borde);color:var(--bien-texto)}
.aviso.atencion{background:var(--atencion-fondo);border-color:var(--atencion-borde);color:var(--atencion-texto)}
.aviso.problema{background:var(--problema-fondo);border-color:var(--problema-borde);color:var(--problema-texto)}
#cy-tostada{position:fixed;left:12px;right:12px;bottom:84px;z-index:60;display:flex;justify-content:center;pointer-events:none}
#cy-tostada .aviso{max-width:480px;box-shadow:0 8px 24px rgba(11,20,36,.18);pointer-events:auto;margin:0}

/* Hojas y preguntas (lo único con sombra). */
.cy-velo{position:fixed;inset:0;background:rgba(11,20,36,.5);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.cy-hoja{background:var(--caja);color:var(--texto);width:100%;max-width:560px;max-height:92vh;overflow:auto;border-radius:12px 12px 0 0;padding:16px 16px 24px;box-shadow:0 -8px 32px rgba(11,20,36,.25)}
.cy-hoja-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.cy-hoja .acciones{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.cy-hoja .acciones .btn{flex:1}
@media (min-width:761px){.cy-velo{align-items:center}.cy-hoja{border-radius:12px}}

/* El ingreso. */
.entrar{max-width:400px;margin:0 auto;padding:48px 16px}
.entrar .marca{display:flex;align-items:center;gap:8px;font:700 20px/1 var(--titulo);margin-bottom:24px}
.punto{width:8px;height:8px;border-radius:50%;background:var(--bien);display:inline-block}

/* Las cifras del panel. */
.cifras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
@media (min-width:761px){.cifras{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cifra{background:var(--caja);border:1px solid var(--borde);border-radius:10px;padding:12px}
.cifra b{display:block;font:600 24px/1.2 var(--mono);font-variant-numeric:tabular-nums;margin-top:4px;overflow-wrap:anywhere}
.cifra small{display:block;font-size:12px;color:var(--texto-2);margin-top:4px}
.cifra small.sube{color:var(--bien-texto)}.cifra small.baja{color:var(--problema-texto)}
.dias{display:flex;align-items:flex-end;gap:2px;height:96px;margin-top:8px}
.dias i{flex:1;min-width:2px;background:var(--texto-3);border-radius:2px 2px 0 0;min-height:2px}
.dias i.hoy{background:var(--cliente)}
.dias-pie{display:flex;justify-content:space-between;font:500 11px/1.3 var(--mono);color:var(--texto-2);margin-top:4px}

/* Un sí o no con su texto (a la venta, acepto los términos). */
.interruptor{display:flex;align-items:center;gap:10px;margin-top:16px;min-height:44px;cursor:pointer}
.interruptor input{width:20px;height:20px;accent-color:var(--azul);flex:none}

/* Los botones chicos que van debajo de un formulario o de una lista. */
.despues{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}

/* Un respiro arriba (para no poner estilos a mano en cada botón). */
.sep{margin-top:16px}.sep12{margin-top:12px}