: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}
.ribbon{display:flex;gap:10px;background:#fff;border-bottom:1px solid var(--borde);padding:8px 12px 6px;overflow-x:auto}
.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,.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}
  .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)}