:root{color-scheme:light}
:root{--marca:#2666a5;--marca-osc:#1b4c7d;--marca-claro:#e4eef8;--fondo:#eef2f7;--borde:#cfd6e0;--texto:#1f2933;--gris:#5f6b7a;--ok:#1d7a46;--rojo:#b42318;--amarillo:#fff4c2}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,Arial,sans-serif;font-size:13.5px;color:var(--texto);background:var(--fondo);display:flex;flex-direction:column;min-height:100vh}
a{color:var(--marca)}
.tabs{display:flex;align-items:flex-end;gap:2px;background:var(--marca);padding:8px 12px 0;color:#fff;flex-wrap:wrap}
.tabs .logo{font-weight:600;font-size:14px;padding:0 14px 10px 4px;color:#fff;text-decoration:none;cursor:pointer}
.tabs .logo:hover{text-decoration:underline}
.tab{padding:7px 16px;border-radius:6px 6px 0 0;cursor:pointer;color:#dbe7f5;text-decoration:none}
.tab:hover{background:var(--marca-osc);color:#fff}
.tab.activa{background:#fff;color:var(--marca);font-weight:600}
.tabs .derecha{margin-left:auto;font-size:12px;padding:0 4px 10px;color:#dbe7f5}
.tabs .derecha a{color:#fff}
.cinta{display:flex;align-items:stretch;background:#fff;border-bottom:1px solid var(--borde)}
.cinta-botones{flex:1;min-width:0}
.ribbon{display:flex;gap:10px;background:#fff;padding:8px 12px 6px;overflow-x:auto}
/* Operación del día y Efectivo: fijos a la derecha en todas las pestañas */
.cinta-fija{display:flex;gap:10px;padding:8px 12px 6px;border-left:1px solid var(--borde);background:#fafcfe;flex:none}
/* arriba y a la misma altura siempre, aunque la pestaña tenga 2 o 3 renglones de botones */
.cinta-fija .grupo .fila{flex:none;align-items:flex-start}
.cinta-fija .dia{align-self:flex-start}
.grupo{display:flex;flex-direction:column;border-right:1px solid var(--borde);padding-right:10px}
.grupo:last-child{border-right:0}
.grupo .fila{display:flex;gap:2px;flex:1;align-items:stretch}
.grupo .titulo{text-align:center;color:var(--gris);font-size:11px;margin-top:4px}
.col{display:flex;flex-direction:column;gap:1px;justify-content:center}
.btn{display:flex;align-items:center;gap:6px;padding:5px 9px;border-radius:6px;cursor:pointer;color:var(--texto);text-decoration:none;white-space:nowrap;font-size:13px}
.btn:hover{background:var(--marca-claro)}
.btn.activo{background:var(--marca-claro);outline:1px solid var(--marca);font-weight:600}
.btn.grande{flex-direction:column;justify-content:center;min-width:70px;text-align:center;white-space:normal;line-height:1.15;padding:6px 8px}
.dia{display:grid;grid-template-columns:auto auto;gap:1px 10px;padding:4px 8px;font-size:12px;align-self:center}
.dia b{font-weight:600;text-align:right}
.contenido{flex:1;padding:12px 14px;overflow:auto}
.card{background:#fff;border:1px solid var(--borde);border-radius:8px;padding:10px 12px;margin-bottom:10px}
h2{margin:0 0 8px;font-size:17px;font-weight:600;color:var(--marca)}
h3{margin:12px 0 6px;font-size:14px;font-weight:600}
.barra{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:10px;flex-wrap:wrap}
.acciones{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.subtabs{display:flex;border-bottom:1px solid var(--borde);margin-bottom:8px}
.subtab{padding:6px 14px;cursor:pointer;color:var(--gris);border-bottom:2px solid transparent;text-decoration:none}
.subtab.activa{color:var(--marca);border-bottom-color:var(--marca);font-weight:600}
label{display:block;font-size:11px;color:var(--gris);margin-bottom:2px}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=email],select,textarea{width:100%;padding:6px 8px;border:1px solid var(--borde);border-radius:4px;font-size:13.5px;background:#fff;font-family:inherit}
input.clave{background:var(--amarillo)}
textarea{min-height:60px}
.form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 10px}
.form.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
.form .ancho{grid-column:span 2}
.form .todo{grid-column:1/-1}
.check{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--texto)}
.check input{width:auto}
table{width:100%;border-collapse:collapse;background:#fff;font-size:12.5px}
th,td{border-bottom:1px solid var(--borde);padding:5px 8px;text-align:left;vertical-align:top}
th{background:#f3f6fa;font-weight:600;color:var(--gris);font-size:12px;white-space:nowrap}
td.n,th.n{text-align:right;white-space:nowrap}
tr:hover td{background:#f8fafc}
.tabla-scroll{overflow-x:auto;background:#fff;border:1px solid var(--borde);border-radius:8px}
.tabla-scroll table{border:0}
.tasa{border:1px solid var(--marca);border-radius:6px;padding:6px 8px;margin-bottom:6px;cursor:pointer;font-size:12px;line-height:1.35;background:#fff}
.tasa b{color:var(--marca)}
.tasa.sel{background:var(--marca-claro);outline:2px solid var(--marca)}
.tasa span{color:var(--gris)}
.cotiz .num{font-size:24px;font-weight:600;color:var(--rojo);text-align:right;background:#f7f9fc;border:1px solid var(--borde);border-radius:6px;padding:4px 10px;margin:2px 0 8px}
.cotiz .tit{font-size:14px;color:var(--marca);font-weight:600;text-align:right}
.cotiz table td{border:0;padding:3px 0}
.primario{background:var(--marca);color:#fff;border:0;border-radius:6px;padding:8px 14px;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block}
.primario:hover{background:var(--marca-osc)}
.primario.todo{width:100%}
.sec{background:#fff;color:var(--marca);border:1px solid var(--marca);border-radius:6px;padding:6px 12px;font-size:13px;cursor:pointer;text-decoration:none;display:inline-block}
.sec:hover{background:var(--marca-claro)}
.peligro{background:#fff;color:var(--rojo);border:1px solid var(--rojo);border-radius:6px;padding:6px 12px;font-size:13px;cursor:pointer}
.pie{display:flex;gap:24px;background:var(--marca);color:#dbe7f5;font-size:12px;padding:5px 14px;flex-wrap:wrap}
.pie b{color:#fff;font-weight:600}
.pill{display:inline-block;padding:1px 7px;border-radius:9px;font-size:11px;background:#eef2f7;color:var(--gris);white-space:nowrap}
.pill.ok{background:#e6f4ea;color:var(--ok)}.pill.rojo{background:#fdecea;color:var(--rojo)}.pill.amb{background:#fff1d6;color:#8a5a00}.pill.azul{background:var(--marca-claro);color:var(--marca)}
.total{background:#dbe7f5;padding:6px 10px;border-radius:6px;display:flex;gap:24px;font-weight:600;margin-top:8px;flex-wrap:wrap}
.aviso{padding:9px 14px;border-radius:6px;margin-bottom:10px}
.aviso.ok{background:#e6f4ea;color:var(--ok);border:1px solid #b7e1c1}
.aviso.error{background:#fdecea;color:var(--rojo);border:1px solid #f5c2c0}
.ayuda{color:var(--gris);font-size:12px}
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.tarjeta{background:#fff;border:1px solid var(--borde);border-radius:8px;padding:12px 14px;text-decoration:none;color:var(--texto)}
.tarjeta .numero{font-size:24px;font-weight:600;color:var(--marca)}
.tarjeta .etiqueta{color:var(--gris);font-size:12px}
.login{max-width:380px;margin:80px auto}
.login h1{color:var(--marca);font-size:20px}
.permisos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:6px 18px}
.lista-busqueda{position:absolute;background:#fff;border:1px solid var(--borde);border-radius:6px;z-index:10;max-height:260px;overflow:auto;width:100%;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.lista-busqueda div{padding:6px 10px;cursor:pointer;border-bottom:1px solid #eef2f7}
.lista-busqueda div:hover{background:var(--marca-claro)}
.modal-fondo{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);align-items:center;justify-content:center;z-index:20}
.modal-fondo.abierto{display:flex}
.modal{background:#fff;border-radius:8px;padding:16px 18px;width:440px;max-width:95vw}
.imprimible{background:#fff;padding:24px;max-width:720px;margin:0 auto;font-size:13px;line-height:1.4}
.imprimible h1{font-size:18px;margin:0 0 4px;color:var(--marca)}
.imprimible .dos{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
@media (max-width:820px){.form,.form.tres{grid-template-columns:repeat(2,minmax(0,1fr))}.form .ancho,.form .todo{grid-column:1/-1}.pie{gap:12px}}
@media print{.tabs,.ribbon,.cinta,.pie,.no-imprimir,.aviso{display:none!important}body{background:#fff}.contenido{padding:0}.imprimible{padding:0;max-width:none}}

/* Pantallas de cobro: lista a la izquierda, panel de cobro pegado a la derecha */
.con-panel{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:12px;align-items:start}
.panel{position:sticky;top:10px}
.panel .card{margin-bottom:10px}
.panel .tit{font-size:14px;color:var(--marca);font-weight:600;text-align:right}
.panel .num{font-size:26px;font-weight:600;color:var(--rojo);text-align:right;background:#f7f9fc;border:1px solid var(--borde);border-radius:6px;padding:4px 10px;margin:2px 0 8px}
.panel .num.verde{color:var(--ok);background:#eef7f0;border-color:#c9e6d3}
.panel table{font-size:13px}
.panel table td{border:0;padding:3px 0}
.panel table td.n{font-weight:600}
.cliente-caja{border:1px solid var(--borde);border-radius:8px;padding:10px 12px;background:#fff}
.cliente-caja.elegido{border-color:var(--ok);background:#eef7f0}
.cliente-caja .nombre{font-size:16px;font-weight:600;color:var(--ok)}
@media (max-width:1100px){.con-panel{grid-template-columns:1fr}.panel{position:static}}

/* Celular y tabletas: menu plegable y todo en una columna */
@media (max-width:900px){
  body{font-size:15px}
  .tabs{flex-wrap:wrap;padding:6px 8px 0;gap:4px;align-items:center}
  .tabs .logo{font-size:15px;padding:6px 4px;flex:1}
  .tabs .derecha{order:3;width:100%;padding:4px 0;margin:0;font-size:12px;text-align:right}
  .tab{padding:8px 12px;font-size:14px;border-radius:6px 6px 0 0}
  .menu-boton{display:inline-block;background:rgba(255,255,255,.18);color:#fff;border:0;border-radius:6px;
    padding:8px 12px;font-size:18px;line-height:1;cursor:pointer}
  .ribbon{display:none !important;flex-direction:column;padding:8px;gap:0}
  .ribbon.abierto{display:flex !important}
  .cinta{flex-direction:column}
  .cinta-fija{border-left:0;border-top:1px solid var(--borde);padding:6px 8px;justify-content:space-around}
  .grupo{border-right:0;border-bottom:1px solid var(--borde);padding:6px 0;width:100%;min-width:0}
  .grupo:last-child{border-bottom:0}
  .grupo .fila{flex-wrap:wrap;gap:6px}
  .grupo .titulo{text-align:left;margin:0 0 4px;font-size:11px;text-transform:uppercase;color:var(--marca)}
  .btn,.btn.grande{flex-direction:row;min-width:0;text-align:left;padding:10px 12px;width:100%;justify-content:flex-start;
    border:1px solid var(--borde);border-radius:6px;background:#fff}
  .operacion{width:100%;justify-content:space-between}
  .contenido{padding:10px}
  .form,.form.tres{grid-template-columns:1fr}
  .form .ancho,.form .todo{grid-column:1}
  .con-panel{grid-template-columns:1fr}
  .panel{position:static}
  .tarjetas{grid-template-columns:1fr 1fr}
  .barra{flex-direction:column;align-items:flex-start;gap:6px}
  .acciones{width:100%;flex-wrap:wrap}
  .acciones .primario,.acciones .sec{flex:1 1 auto;text-align:center}
  table{font-size:13px}
  th,td{padding:8px 6px}
  input[type=text],input[type=password],input[type=number],input[type=date],input[type=email],select,textarea{font-size:16px;padding:10px;width:100%}
  .primario,.sec,.peligro{padding:10px 14px;font-size:15px}
  .panel .num,.num{font-size:24px}
  .imprimible{padding:12px}
  .pie{font-size:11px;gap:8px;flex-wrap:wrap}
  .lista-filtro{position:static;max-height:none;min-width:0;width:100%}
}
@media (min-width:901px){.menu-boton{display:none}}
@media (max-width:520px){.tarjetas{grid-template-columns:1fr}}

/* Lista para elegir una, varias o todas las sucursales en los reportes */
.lista-filtro{display:none;position:absolute;z-index:40;background:#fff;border:1px solid var(--borde);border-radius:8px;
  box-shadow:0 8px 24px rgba(16,32,56,.16);max-height:340px;overflow-y:auto;min-width:280px;margin-top:4px}
.lista-filtro.abierta{display:block}
.lista-filtro .check{display:flex;gap:8px;align-items:center;font-weight:400}
.lista-filtro .check:hover{background:var(--marca-claro)}

/* Boleta oficial: carátula del contrato registrado ante PROFECO */
.boleta{font-size:10px;line-height:1.25;max-width:1000px}
.boleta .marco{width:100%;border:3px double var(--marca);padding:6px;border-collapse:separate}
.boleta .marca{font-size:17px;font-weight:700;letter-spacing:1px;color:var(--marca)}
.boleta .titulo{font-size:12px;font-weight:700}
.boleta .chico{font-size:8.5px}
.boleta .grande{font-size:12pt;font-weight:700}   /* CAT y tasa: la NOM pide 12 puntos y diferenciados */
.boleta table.datos{width:100%;border-collapse:collapse;margin:3px 0}
.boleta table.datos th,.boleta table.datos td{border:1px solid #333;padding:3px 4px;font-size:9px;vertical-align:top}
.boleta table.datos th{background:#eef2f7;font-size:8.5px;text-align:center}
.boleta table.enc{width:100%;border-collapse:collapse;margin-bottom:4px}
.boleta table.enc td{vertical-align:top;padding:2px}
.boleta .parrafo{margin:4px 0;text-align:justify}
.boleta .leyenda{border:1px solid #333;padding:4px;margin:4px 0;text-align:center;font-weight:600}
.boleta .talon{border-top:2px dashed #333;margin-top:8px;padding-top:6px}
.boleta .n{text-align:right}
@media print{.boleta{font-size:9px}.boleta .marco{border-color:#000}}

/* Reporte mensual: una fila por día, como el Excel que se llenaba a mano */
table.mensual{font-size:11px}
/* El reporte del mes usa todo el ancho de la pantalla, con el día y los títulos fijos al moverse */
.imprimible.reporte-ancho{max-width:none;padding:14px}
.reporte-ancho .tabla-scroll{max-height:calc(100vh - 230px);overflow:auto}
table.mensual th{position:sticky;top:0;z-index:2;background:#f4f7fb}
table.mensual td:first-child,table.mensual th:first-child{position:sticky;left:0;z-index:1;background:#fff}
table.mensual tr:first-child th:first-child{z-index:3;background:#f4f7fb}
table.mensual tr.totales th{position:sticky;top:auto;bottom:0}
@media print{.reporte-ancho .tabla-scroll{max-height:none;overflow:visible}table.mensual th,table.mensual td{position:static}}
table.mensual th,table.mensual td{padding:3px 5px;white-space:nowrap}
table.mensual th.ingreso{background:#eef7f0}
table.mensual th.egreso{background:#fdf0ef}
table.mensual tr.sin-corte td{color:#9aa4b2}
table.mensual tr.totales th{background:var(--marca-claro);border-top:2px solid var(--marca)}

/* Pestañas de segundo nivel (Tabuladores de joyería) */
.tabs-sec{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--borde);margin:10px 0 12px}
.tabs-sec .tab-sec{padding:7px 14px;border:1px solid transparent;border-bottom:0;border-radius:8px 8px 0 0;color:var(--marca);text-decoration:none;font-size:14px}
.tabs-sec .tab-sec.activo{background:#fff;border-color:var(--borde);font-weight:600;margin-bottom:-1px}

/* Calificador de joyería: opciones en botones, como el programa de escritorio */
.opciones-joy{display:flex;flex-wrap:wrap;gap:6px}
.op-joy{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--borde);border-radius:8px;padding:5px 10px;
  background:#fff;cursor:pointer;font-size:13px}
.op-joy:hover{border-color:var(--marca)}
.op-joy:has(input:checked){background:var(--marca-claro);border-color:var(--marca);font-weight:600}

/* Tabulador de joyería, con la misma forma que el programa de escritorio */
table.tabulador{border-collapse:collapse;font-size:13px;white-space:nowrap}
table.tabulador th,table.tabulador td{border:1px solid #cfd8e3;padding:5px 9px;text-align:center}
table.tabulador tr:first-child th,table.tabulador tr:nth-child(2) th{background:var(--marca);color:#fff;font-weight:600}
table.tabulador tr:nth-child(2) th{background:#dce8f6;color:var(--marca-osc)}
table.tabulador th.kil{background:var(--marca);color:#fff;text-align:left;position:sticky;left:0;z-index:2}
table.tabulador td.precio{background:#fdf6e3}
table.tabulador td.promo{background:#eef4fb}
table.tabulador td.desc{color:#b00}
table.tabulador td.vacio{background:#f0f2f5}

/* Campanita de recados */
.campanita{position:relative;text-decoration:none;font-size:17px;margin-right:10px}
.campanita .globo{position:absolute;top:-7px;right:-9px;background:#b00020;color:#fff;font-size:10px;
  border-radius:999px;padding:0 5px;font-weight:600}
.fondo-recado{position:fixed;inset:0;background:rgba(15,25,40,.5);display:grid;place-items:center;z-index:900}

/* Buscador de arriba: una sola caja para encontrar todo */
.buscador-arriba{flex:1;max-width:560px;margin:0 12px}
.buscador-arriba input{width:100%;border:0;border-radius:8px;padding:6px 12px;font:inherit;font-size:14px}

/* Barra de demostración (solo administradores) y marca alterna */
.barra-demo{display:flex;gap:14px;align-items:center;background:#fff7e6;border-bottom:1px solid #f0dcb8;
  padding:5px 12px;font-size:13px;color:#7a5b12;flex-wrap:wrap}
.barra-demo select{font:inherit;padding:2px 6px;border-radius:6px;border:1px solid #e2d0a8}
.barra-demo .aviso-demo{font-weight:600}
html[data-marca="dr"]{--marca:#5d7f22;--marca-osc:#46611a;--marca-claro:#eef5e2}

/* ---------- Panel de gestión: menú de lado y colores propios ---------- */
html[data-panel="1"]{--marca:#12243b;--marca-osc:#0c1929;--marca-claro:#e7ecf3}
html[data-panel="1"] .tabs{background:var(--marca);border-bottom:3px solid #f0a500}
html[data-panel="1"] .logo .sello{font-size:11px;background:rgba(240,165,0,.22);color:#f6c667;padding:1px 9px;
  border-radius:999px;margin-left:8px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
html[data-panel="1"] .cinta{display:none}          /* en el panel no hay cinta de botones: el menú va de lado */
html[data-panel="1"] .tabs .tab{display:none !important}      /* en el panel manda el menú de lado, no las pestañas */
html[data-panel="1"] .con-lado{display:flex;flex:1;min-height:calc(100vh - 46px);align-items:stretch;background:#f3f6fa}
html[data-panel="1"] .contenido{flex:1;min-width:0;max-width:none}
.lado{position:sticky;top:0;align-self:stretch;width:210px;min-height:100vh;max-height:100vh;overflow-y:auto;background:#101a2b;
  color:#c9d6e8;padding:8px 8px 20px;flex:none}
.lado-bloque{margin-bottom:2px}
.lado-seccion{width:100%;display:flex;align-items:center;gap:6px;background:transparent;border:0;color:#c9d6e8;
  font:inherit;font-size:13.5px;font-weight:600;text-align:left;padding:8px 10px;border-radius:8px;cursor:pointer}
.lado-seccion:hover{background:#1c2b45;color:#fff}
.lado-seccion .flecha{margin-left:auto;transition:transform .15s;opacity:.7}
.lado-bloque.abierto .lado-seccion{background:#1c2b45;color:#fff}
.lado-bloque.abierto .lado-seccion .flecha{transform:rotate(90deg)}
.lado-items{display:none;padding:2px 0 6px 6px}
.lado-bloque.abierto .lado-items{display:block}
.lado-item{display:block;padding:5px 10px;border-radius:8px;font-size:13px;color:#9fb4cc;text-decoration:none}
.lado-item:hover{background:#1c2b45;color:#fff}
.lado-item.activo{background:#1c2b45;color:#fff;font-weight:600;border-left:3px solid #f0a500}
@media (max-width:900px){
  /* En el celular el menú del panel vive en el cajón (botón ☰) y abajo quedan los cuatro accesos:
     las pestañas de arriba siguen ocultas, para no repetir el menú dos veces. */
  html[data-panel="1"] .con-lado{display:block}
}

/* Renglón antifraude de la boleta: visible pero sin romper el formato */
.resumen-dia{border:1.5px solid #000;padding:5px 8px;margin:8px 0;text-align:center;font-size:11px}
@media print{.resumen-dia{border:1.5px solid #000}}

/* ================== Menú "Noche con ámbar" (sucursal) ==================
   Mismo menú de siempre: pestañas arriba y botones por grupos. Solo cambia cómo se ve, para que nadie confunda
   el menú con la pantalla de trabajo. El panel de gestión tiene sus propios colores y no se toca. */
html:not([data-panel="1"]) .tabs{background:#0d1b2a}
html:not([data-panel="1"]) .tab{color:#8fa6bd}
html:not([data-panel="1"]) .tab:hover{background:#16324f;color:#fff}
html:not([data-panel="1"]) .tab.activa{background:#16324f;color:#fff;box-shadow:inset 0 3px 0 #ffb703}
html:not([data-panel="1"]) .tabs .derecha{color:#bcd0e2}
html:not([data-panel="1"]) .cinta{background:#16324f;border-bottom:0}
html:not([data-panel="1"]) .ribbon{background:transparent}
html:not([data-panel="1"]) .grupo{border-right:1px solid rgba(255,255,255,.14)}
html:not([data-panel="1"]) .grupo .titulo{color:#93aec8;text-transform:uppercase;letter-spacing:.5px;font-size:10.5px}
html:not([data-panel="1"]) .btn{color:#eaf3fb}
html:not([data-panel="1"]) .btn:hover{background:rgba(255,255,255,.12)}
html:not([data-panel="1"]) .btn.activo{background:rgba(255,183,3,.18);outline:1px solid #ffb703;color:#fff}
html:not([data-panel="1"]) .cinta-fija{background:rgba(255,255,255,.06);border-left:1px solid rgba(255,255,255,.14);color:#dbe9f5}
html:not([data-panel="1"]) .cinta-fija .titulo{color:#93aec8}
html:not([data-panel="1"]) .contenido{background:#f3f6fa}
/* El contenido es "el papel" sobre el que se trabaja */
html:not([data-panel="1"]) .card{box-shadow:0 1px 6px rgba(20,40,70,.06)}
html:not([data-panel="1"]) .tabla-scroll{background:#fff;border-radius:8px}
/* Los grupos ya no se estiran: los botones quedan juntos y el espacio sobrante se va al final */
.ribbon{align-items:stretch}
.ribbon::after{content:"";flex:1}
.grupo{flex:none}

/* Selector de sucursal (modo web): en qué sucursal está trabajando quien ve varias */
.selector-sucursal{margin:0 10px}
.selector-sucursal select{font:inherit;font-size:13px;padding:4px 8px;border-radius:8px;border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.12);color:#fff;max-width:260px}
.selector-sucursal select option{color:#1f2933}

/* En qué sucursal se está trabajando (modo web): al centro de la barra, imposible de pasar por alto */
.donde-estoy{position:absolute;left:50%;transform:translateX(-50%);top:6px;display:inline-flex;align-items:center;
  gap:8px;padding:6px 16px;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;white-space:nowrap;
  box-shadow:0 2px 10px rgba(0,0,0,.25);z-index:5}
.donde-estoy strong{font-size:15px;letter-spacing:.3px}
.donde-estoy .codigo{background:rgba(255,255,255,.22);border-radius:6px;padding:1px 7px;font-size:12px;font-weight:600}
.donde-estoy .etiqueta{font-size:11px;text-transform:uppercase;letter-spacing:.6px;opacity:.85}
.donde-estoy.de-oficina{background:#f0a500;color:#12243b}
.donde-estoy.de-oficina .codigo{background:rgba(0,0,0,.14)}
.tabs{position:relative}
@media (max-width:1100px){.donde-estoy{position:static;transform:none;margin:4px 8px}}

/* Logo de la empresa arriba (se usa si existe app/static/logo.png) */
.logo-img{height:26px;width:auto;display:block}


/* El buscador de arriba: más largo, que hay espacio de sobra */
.buscador-arriba input{width:clamp(240px, 26vw, 420px)}
@media (max-width:1100px){.buscador-arriba input{width:200px}}

/* Selector de sucursales dentro del Resumen general (panel) */
.selector-suc{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}
.pastilla{border:1px solid var(--borde);border-radius:999px;padding:4px 12px;font-size:12.5px;background:#fff;
  text-decoration:none;color:var(--texto);white-space:nowrap}
.pastilla:hover{border-color:#2666a5;color:#12243b}
.pastilla.on{background:#12243b;color:#fff;border-color:#12243b;font-weight:600}


/* ============ El panel en el celular ============
   El menú de lado se guarda en un cajón que se abre con el botón de arriba, y abajo quedan cuatro accesos fijos. */
.abrir-menu{display:none;background:none;border:0;color:#fff;font-size:20px;padding:4px 8px;cursor:pointer}
.cerrar-menu{display:none;width:100%;background:#1c2b45;color:#fff;border:0;border-radius:8px;padding:8px;
  font:inherit;font-size:13px;margin-bottom:6px;cursor:pointer}
@media (max-width:820px){
  html[data-panel="1"] .abrir-menu{display:block;order:9;margin-left:auto}
  html[data-panel="1"] .menu-boton{display:none !important}   /* el del sistema instalado no aplica en el panel */
  /* El cajón del menú abre por la DERECHA: casi todos son diestros y ahí llega el pulgar. */
  html[data-panel="1"] .lado{position:fixed;right:0;left:auto;top:0;bottom:0;z-index:60;width:250px;
    min-height:0;max-height:none;transform:translateX(100%);transition:transform .2s;
    box-shadow:-4px 0 18px rgba(0,0,0,.4)}
  html[data-panel="1"].menu-abierto .lado{transform:none}
  html[data-panel="1"] .cerrar-menu{display:block}
  html[data-panel="1"].menu-abierto::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:55}
  .selector-suc{max-height:96px;overflow:auto}
  .tabla-scroll{overflow-x:auto}
}

/* Elegir qué se hace con cada contrato al cobrar varios */
.elige-mov{display:flex;flex-wrap:wrap;gap:6px}
.elige-mov .mov{display:flex;flex-direction:column;align-items:flex-start;gap:1px;border:1px solid var(--borde);
  background:#fff;border-radius:10px;padding:7px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  color:var(--texto);min-width:120px}
.elige-mov .mov span{font-weight:400;font-size:11.5px;color:var(--gris)}
.elige-mov .mov:hover{border-color:var(--marca)}
.elige-mov .mov.elegido{background:var(--marca);border-color:var(--marca);color:#fff}
.elige-mov .mov.elegido span{color:rgba(255,255,255,.85)}
.elige-mov .mov.apagado{color:var(--gris)}

/* Qué se ve en computadora y qué en celular */
.solo-celular{display:none}
@media (max-width:820px){
  .solo-pc{display:none !important}
  .solo-celular{display:block}
  .elegir-varias{width:100%;display:flex;gap:6px;align-items:flex-start;margin-top:4px}
  .elegir-varias select{flex:1;font:inherit;font-size:13px;border-radius:8px;border:1px solid var(--borde);padding:4px}
  .no-imprimir-celular{display:none !important}
}

/* Filtro de fechas: botones rápidos y campos parejos */
.filtro-fechas{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:#fff;border:1px solid var(--borde);
  border-radius:12px;padding:7px 10px}
.filtro-fechas .rapidos{display:flex;gap:4px}
.filtro-fechas .rapido{border:1px solid var(--borde);border-radius:999px;padding:4px 12px;font-size:12.5px;
  text-decoration:none;color:var(--texto);background:#fff;white-space:nowrap}
.filtro-fechas .rapido:hover{border-color:var(--marca);color:var(--marca-osc)}
.filtro-fechas .rapido.on{background:var(--marca);border-color:var(--marca);color:#fff;font-weight:600}
.filtro-fechas .campos{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--gris)}
.filtro-fechas input[type=date]{font:inherit;font-size:12.5px;padding:4px 8px;border-radius:8px;border:1px solid var(--borde)}
@media (max-width:820px){.filtro-fechas{width:100%}.filtro-fechas .campos{width:100%}}

/* Calificador de joyería: acomodo apretado, como el programa de escritorio que ya usan */
.vip-arriba{display:inline-flex;align-items:center;gap:6px;background:#fff6e0;border:1px solid #f0c24a;
  border-radius:8px;padding:5px 12px;margin-bottom:8px}
.opciones-joy{display:flex;flex-wrap:wrap;gap:4px 6px}
.op-joy{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--borde);border-radius:7px;
  padding:3px 9px;font-size:12.5px;background:#fff;cursor:pointer;white-space:nowrap}
.op-joy:hover{border-color:var(--marca)}
.op-joy:has(input:checked){background:var(--marca-claro);border-color:var(--marca);font-weight:600}
[data-campo] > label{font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--gris);
  margin-bottom:2px;display:block}
[data-campo]{margin-bottom:6px}
.aviso-joy{background:#fdecea;border:1px solid #f5c6c2;color:var(--rojo);border-radius:8px;padding:5px 10px;
  font-size:12.5px;margin:4px 0}

/* El menú de arriba se queda fijo al bajar: solo hace scroll el contenido */
.tabs{position:sticky;top:0;z-index:40}
html:not([data-panel="1"]) .cinta{position:sticky;top:46px;z-index:39}
@media (max-width:900px){html:not([data-panel="1"]) .cinta{position:static}}
@media print{.tabs,.cinta{position:static}}

/* Ver una foto en grande sin salir de la pantalla */
.visor-foto{position:fixed;inset:0;z-index:200;background:rgba(10,20,35,.88);display:flex;align-items:center;
  justify-content:center;padding:20px;cursor:zoom-out}
.visor-foto img{max-width:95vw;max-height:92vh;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.5);background:#fff}
.visor-foto .cerrar{position:absolute;top:14px;right:18px;background:rgba(255,255,255,.15);color:#fff;border:0;
  border-radius:999px;width:38px;height:38px;font-size:17px;cursor:pointer}
.visor-foto .cerrar:hover{background:rgba(255,255,255,.3)}

/* Quién compra: público en general o un cliente registrado */
.quien-compra{display:flex;gap:6px;margin-bottom:8px}
.quien-compra .quien{flex:1;border:1px solid var(--borde);background:#fff;border-radius:9px;padding:7px 10px;
  font:inherit;font-size:13px;cursor:pointer;color:var(--texto)}
.quien-compra .quien:hover{border-color:var(--marca)}
.quien-compra .quien.on{background:var(--marca);border-color:var(--marca);color:#fff;font-weight:600}

/* Cinta como Prendaflex (v1.57): los botones grandes parten su nombre en dos renglones y, en las pantallas de
   sucursal más comunes (1366 px), todo cabe sin tener que recorrer la cinta de lado. */
.ribbon .btn.grande{max-width:118px}
@media (min-width:901px) and (max-width:1600px){
  .ribbon .btn{font-size:12px;padding:4px 5px}
  .ribbon .btn.grande{max-width:88px;padding:5px 5px}
  .ribbon{gap:4px;padding-left:6px;padding-right:6px}
  .grupo{padding-right:6px}
  .cinta-fija .dia{font-size:11px}
  /* los nombres largos (Aportación y Retiro Sucursal) se parten en dos renglones para que quepa todo */
  .ribbon .col .btn{white-space:normal;max-width:128px;line-height:1.15}
}

/* Títulos de grupo en el menú de lado del panel (v1.60): "De inventario", "De dinero", "De caja"... */
.lado-grupo{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:#e0a100;opacity:.9;margin:10px 0 2px 14px}
.lado-items .lado-grupo:first-child{margin-top:4px}

/* Calificador de joyería (v1.63, opción 3 aprobada por Manuel): tarjetas con dibujo, metal con color, kilates pegados */
.tarjetas-joy{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.tarjeta-joy{display:flex;flex-direction:column;align-items:center;gap:3px;border:1px solid var(--borde);border-radius:8px;padding:8px 4px 6px;cursor:pointer;font-size:12px;text-align:center;background:#fff}
.tarjeta-joy svg{width:30px;height:30px}
.tarjeta-joy:hover,.metal-joy:hover,.pegado-joy:hover{border-color:var(--marca)}
.tarjeta-joy:has(input:checked){border:2px solid var(--marca);background:var(--marca-claro);color:var(--marca);font-weight:600}
.tarjeta-joy input,.metal-joy input,.pegado-joy input{position:absolute;opacity:0;pointer-events:none}
.metales-joy{display:flex;flex-wrap:wrap;gap:6px}
.metal-joy{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--borde);border-radius:999px;padding:5px 12px;cursor:pointer;font-size:12.5px;background:#fff}
.metal-joy:has(input:checked){border:2px solid var(--marca);background:var(--marca-claro);font-weight:600}
.muestra-joy{width:15px;height:15px;border-radius:50%;border:1px solid rgba(0,0,0,.2);display:inline-block}
.pegados-joy{display:inline-flex !important;flex-wrap:wrap;gap:0 !important;border:1px solid var(--borde);border-radius:8px;overflow:hidden;background:#fff}
.pegado-joy{padding:6px 13px;cursor:pointer;font-size:12.5px;border-right:1px solid var(--borde)}
.pegado-joy:last-child{border-right:0}
.pegado-joy:has(input:checked){background:var(--marca-claro);color:var(--marca);font-weight:600}
.medidas-joy{display:flex;flex-wrap:wrap;gap:5px}
.medidas-joy .pegado-joy{border:1px solid var(--borde);border-radius:999px;background:#fff}
.medidas-joy .pegado-joy:has(input:checked){border-color:var(--marca)}
.fila-joy{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}

.cal-joy input[readonly]{background:#eef1f5;color:#555;cursor:not-allowed}

/* Selector de sucursales del panel (v1.63): Todas / GDL / MZT / Ninguna y filas de 5 */
.chips-suc{background:#fff;border:1px solid var(--borde);border-radius:10px;padding:10px 12px;margin-bottom:12px}
.chips-fila{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.chip-suc{display:inline-block;min-width:150px;text-align:center;font-size:12.5px;padding:5px 12px;border:1px solid var(--borde);border-radius:999px;color:var(--texto);text-decoration:none;background:#fff}
.chip-suc.fijo{min-width:auto}
.chip-suc:hover{border-color:var(--marca)}
.chip-suc.activo{background:#10213a;color:#fff;border-color:#10213a}
.chips-sede{font-size:11.5px;color:#666;margin:4px 0 4px 2px}

.tarjetas.cinco{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.tarjeta-resumen{display:block;text-decoration:none;color:inherit}
.tarjeta-resumen:hover{border-color:var(--marca)}
@media (max-width:900px){.tarjetas.cinco{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tarjeta-resumen .numero{font-size:22px;font-weight:700;margin:2px 0}
.tarjeta-resumen .etiqueta{font-size:12.5px;color:#555}
.barra .rapidos{display:flex;gap:6px}
.barra .rapidos .rapido{font-size:12.5px;padding:5px 12px;border:1px solid var(--borde);border-radius:999px;text-decoration:none;color:var(--texto);background:#fff}
.barra .rapidos .rapido.on{background:var(--marca-claro);border-color:var(--marca);color:var(--marca);font-weight:600}

/* v1.64: la cinta queda justo debajo de la barra de arriba, mida lo que mida (antes se metía debajo al bajar) */
html:not([data-panel="1"]) .cinta{top:var(--alto-tabs,46px)}
html:not([data-panel="1"]) .panel{top:calc(var(--alto-arriba,0px) + 10px)}
.sin-corte{white-space:nowrap}

/* Reportes del panel por tipo (v1.64): las pestañas del grupo arriba */
.pestanas-reporte{display:flex;flex-wrap:wrap;gap:2px;align-items:flex-end;border-bottom:2px solid var(--borde);margin-bottom:12px}
.pestanas-reporte .titulo-grupo{font-weight:700;color:var(--marca);margin-right:12px;padding:6px 0}
.pestana-rep{padding:7px 12px;font-size:13px;color:#555;text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-2px}
.pestana-rep:hover{color:var(--marca)}
.pestana-rep.activa{color:var(--marca);border-bottom-color:var(--marca);font-weight:600}

/* v1.68: el folio de la bolsa y la indicación especial se notan (Manuel, 28 sep) */
input[name=bolsa]{background:#e8f1ff !important;border-color:#8fb3e8 !important}
input[name=indicacion]{background:#fff6d6 !important;border-color:#e6c65c !important}
/* v1.68: la campana se mueve cuando llega algo nuevo y el número palpita mientras haya pendientes */
@keyframes timbrar{0%,100%{transform:rotate(0)}15%{transform:rotate(18deg)}30%{transform:rotate(-16deg)}45%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}75%{transform:rotate(4deg)}}
.campanita.timbra{display:inline-block;animation:timbrar 1s ease-in-out}
@keyframes palpita{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.campanita .globo{animation:palpita 1.6s ease-in-out infinite}
/* v1.68: en el panel, Resumen y Solicitudes se ven como principales */
.lado-grupo.principal > .lado-titulo, .lado-principal{font-size:15.5px !important;font-weight:700 !important}

/* v1.70: el cierre de caja usa la mitad de la pantalla (antes era una columna angosta con mucho espacio en blanco) */
.con-panel.cierre-ancho{grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important}
.cierre-ancho .panel{position:static}
.conteo-dos{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.conteo-dos table{width:100%}

/* v1.73: en el panel, lo que no le toca a cada quien se ve con candado y no se puede abrir */
.lado-item.bloqueado{opacity:.45;cursor:not-allowed}

/* (30 sep) Ícono de la huella (opción B elegida por Manuel): huella blanca en un círculo de color. Reemplaza la manita ☝.
   Dibujo de la huella: Tabler Icons «fingerprint» (licencia MIT). */
.ic-huella{display:inline-block;width:1.35em;height:1.35em;border-radius:50%;background:var(--ch,#1f3c68);vertical-align:-.32em;position:relative;flex:none}
.ic-huella::after{content:"";position:absolute;inset:16%;background:#fff;-webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.9 7a8 8 0 0 1 1.1 5v1a6 6 0 0 0 .8 3'/%3E%3Cpath d='M8 11a4 4 0 0 1 8 0v1a10 10 0 0 0 2 6'/%3E%3Cpath d='M12 11v2a14 14 0 0 0 2.5 8'/%3E%3Cpath d='M8 15a18 18 0 0 0 1.8 6'/%3E%3Cpath d='M4.9 19a22 22 0 0 1 -.9 -7v-1a8 8 0 0 1 12 -6.95'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.9 7a8 8 0 0 1 1.1 5v1a6 6 0 0 0 .8 3'/%3E%3Cpath d='M8 11a4 4 0 0 1 8 0v1a10 10 0 0 0 2 6'/%3E%3Cpath d='M12 11v2a14 14 0 0 0 2.5 8'/%3E%3Cpath d='M8 15a18 18 0 0 0 1.8 6'/%3E%3Cpath d='M4.9 19a22 22 0 0 1 -.9 -7v-1a8 8 0 0 1 12 -6.95'/%3E%3C/svg%3E") center/contain no-repeat}
.ic-huella.verde{--ch:#1b7f3b}.ic-huella.naranja{--ch:#c77700}.ic-huella.rojo{--ch:#c62828}.ic-huella.grande{width:56px;height:56px;vertical-align:middle}
.primario .ic-huella,.btn-primario .ic-huella{background:#fff}.primario .ic-huella::after,.btn-primario .ic-huella::after{background:#1f3c68}
/* (1 oct) Pantallas chicas (laptops, o con el navegador agrandado): nada se encima */
@media (max-width:1600px){
  .donde-estoy{position:static;transform:none;margin:4px 8px;padding:3px 10px}
  .donde-estoy strong{font-size:13px}
}
@media (max-width:1450px){
  html:not([data-panel="1"]) .ribbon{flex-wrap:wrap;overflow-x:visible;row-gap:4px}
  .cinta-fija{display:none !important}       /* el resumen del día se ve completo en Inicio y en Caja */
}