/* ============================================================
   CONTROL INTERNO - PRADERAS PILAR
   Paleta: verde oscuro / verde / crema / blanco / naranja
   ============================================================ */
:root{
  --verde-900:#14311F;
  --verde-800:#1F4A2F;
  --verde-700:#2A6640;
  --verde-600:#357F4F;
  --verde-300:#8FBFA0;
  --verde-100:#E3EFE6;
  --crema:#F7F2E6;
  --crema-2:#EFE7D5;
  --papel:#FFFDF8;
  --blanco:#FFFFFF;
  --naranja:#E07C2C;
  --naranja-100:#FBEBD9;
  --rojo:#C0392B;
  --rojo-100:#FAE3E0;
  --tinta:#22271F;
  --tinta-2:#5A6257;
  --tinta-3:#8A9185;
  --linea:#E2DCCB;
  --radio:14px;
  --radio-sm:10px;
  --sombra:0 1px 2px rgba(20,49,31,.06), 0 8px 24px rgba(20,49,31,.07);
  --sombra-alta:0 12px 40px rgba(20,49,31,.18);
  --ff:"Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--ff);
  color:var(--tinta);
  background:var(--crema);
  -webkit-font-smoothing:antialiased;
  font-size:15px;
  line-height:1.45;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
[hidden]{display:none !important}
.screen{min-height:100dvh}
.hide-sm{display:inline}
.ico{width:18px;height:18px;display:block}

h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.01em}
.muted{color:var(--tinta-2)}
.tiny{font-size:12px}

/* ============================================================
   PANTALLAS DE ACCESO (seleccion + login)
   ============================================================ */
.screen--gate{
  display:flex;align-items:center;justify-content:center;
  padding:28px 18px 40px;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(47,125,74,.18), transparent 60%),
    repeating-linear-gradient(135deg, rgba(31,74,47,.035) 0 2px, transparent 2px 11px),
    var(--crema);
}
.gate{width:100%;max-width:720px}
.gate--narrow{max-width:440px}
.gate__head{text-align:center;margin-bottom:26px}
/* Sin marco ni recuadro (30/09/2026): el logo ya viene con su propio
   circulo y fondo transparente, ponerle borde+radio encima le agregaba
   una caja que no pintaba bien a tamanos chicos. */
.gate__logo{
  width:92px;height:92px;object-fit:contain;margin-bottom:16px;
}
.gate__title{font-size:clamp(26px,6vw,36px);color:var(--verde-800);letter-spacing:.04em}
.gate__brand{
  margin:2px 0 0;font-size:clamp(15px,3.6vw,19px);font-weight:800;
  color:var(--naranja);letter-spacing:.22em;
}
.gate__sub{margin:14px 0 0;color:var(--tinta-2);font-size:16px}
.gate__foot{text-align:center;margin-top:26px;color:var(--tinta-3);font-size:12.5px;letter-spacing:.06em}

.gate__roles{display:grid;gap:14px}
.rolecard{
  display:flex;align-items:center;gap:16px;width:100%;
  padding:20px 18px;border-radius:18px;cursor:pointer;text-align:left;
  background:var(--papel);border:2px solid var(--linea);
  box-shadow:var(--sombra);transition:transform .15s, box-shadow .15s, border-color .15s;
}
.rolecard:hover{transform:translateY(-2px);box-shadow:var(--sombra-alta)}
.rolecard:active{transform:translateY(0)}
.rolecard__icon{
  flex:0 0 auto;width:56px;height:56px;border-radius:16px;
  display:grid;place-items:center;color:var(--blanco);
}
.rolecard__icon svg{width:28px;height:28px}
.rolecard__text{display:flex;flex-direction:column;min-width:0}
.rolecard__text strong{font-size:19px;letter-spacing:.08em;color:var(--verde-900)}
.rolecard__text em{font-style:normal;font-weight:700;color:var(--tinta);font-size:15px}
.rolecard__text small{color:var(--tinta-2);font-size:13px}
.rolecard__arrow{margin-left:auto;font-size:22px;color:var(--tinta-3)}
.rolecard--jefe{border-color:var(--verde-700)}
.rolecard--jefe .rolecard__icon{background:linear-gradient(160deg,var(--verde-700),var(--verde-900))}
.rolecard--encargado{border-color:var(--naranja)}
.rolecard--encargado .rolecard__icon{background:linear-gradient(160deg,#EE9A4D,var(--naranja))}
.rolecard--admin{border-color:var(--verde-300)}
.rolecard--admin .rolecard__icon{background:linear-gradient(160deg,var(--verde-600),var(--verde-700))}
/* Franco es de otra empresa (Fit Fruit), no del personal de Praderas: se
   distingue con el rojo, que ningun otro acceso usa, sin salirse de la
   paleta. */
.rolecard--fit{border-color:var(--rojo)}
.rolecard--fit .rolecard__icon{background:linear-gradient(160deg,#D98077,var(--rojo))}
/* Cuenta tecnica de GuIA: se distingue de las tres operativas con la tinta
   gris en lugar del verde o el naranja, sin salirse de la paleta. */
.rolecard--soporte{border-color:var(--tinta-3)}
.rolecard--soporte .rolecard__icon{background:linear-gradient(160deg,var(--tinta-2),var(--tinta))}
.rolecard--soporte .rolecard__text strong{color:var(--tinta)}
/* Lucia trabaja el circuito de Fit Fruit (etiquetado) pero no es la cuenta
   de Fit: un dorado/naranja oscuro propio, sin salirse de la paleta. */
.rolecard--lucia{border-color:#B8862E}
.rolecard--lucia .rolecard__icon{background:linear-gradient(160deg,#D9A954,#B8862E)}

.linkback{
  background:none;border:0;color:var(--verde-700);font-weight:700;
  cursor:pointer;padding:8px 0;margin-bottom:8px;
}
.loginbox{
  background:var(--papel);border:1px solid var(--linea);border-radius:20px;
  padding:28px 22px;box-shadow:var(--sombra);text-align:center;
}
.loginbox__logo{width:66px;height:66px;object-fit:contain;margin-bottom:12px}
.loginbox__kicker{margin:0;color:var(--tinta-3);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase}
.loginbox__role{font-size:26px;color:var(--verde-800);letter-spacing:.06em}
.loginbox__desc{margin:2px 0 20px;color:var(--tinta-2);font-size:14px}
.loginbox__hint{margin:16px 0 0;font-size:12px;color:var(--tinta-3);line-height:1.5}

.field{display:block;text-align:left;margin-bottom:14px}
.field > span{display:block;font-size:12.5px;font-weight:700;color:var(--tinta-2);margin-bottom:6px;letter-spacing:.04em}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;border-radius:var(--radio-sm);
  border:1.5px solid var(--linea);background:var(--blanco);outline:none;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--verde-600);box-shadow:0 0 0 3px rgba(53,127,79,.15)}
.field textarea{min-height:76px;resize:vertical}
/* Campo de hora a teclado (ver montarInputHora en app.js): letra grande y
   monoespaciada, como un reloj, para que "06:00" se lea de un vistazo. */
.input-hora{ font-size:20px; font-weight:700; letter-spacing:.04em;
             font-variant-numeric:tabular-nums; text-align:center; }
/* "6:99" no existe: el campo se pone en rojo apenas se termina de escribir,
   y el formulario no deja guardar hasta que se corrija. No se inventa un
   valor "parecido" en su lugar. */
.input-hora--mal{ border-color:var(--rojo) !important; background:var(--rojo-100);
                   color:var(--rojo); }
.formerror{
  background:var(--rojo-100);color:var(--rojo);border:1px solid rgba(192,57,43,.25);
  padding:10px 12px;border-radius:var(--radio-sm);font-size:13.5px;font-weight:600;margin:0 0 14px;
}
.formwarn{
  background:var(--naranja-100);color:#9A5411;border:1px solid rgba(224,124,44,.3);
  padding:10px 12px;border-radius:var(--radio-sm);font-size:13.5px;font-weight:600;margin:0 0 14px;
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:520px){.grid2{grid-template-columns:1fr}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 16px;border-radius:var(--radio-sm);border:1.5px solid transparent;
  font-weight:700;cursor:pointer;background:var(--blanco);color:var(--tinta);
  border-color:var(--linea);transition:filter .15s, transform .1s;
}
.btn:hover{filter:brightness(.97)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--verde-700);color:#fff;border-color:var(--verde-700)}
.btn--orange{background:var(--naranja);color:#fff;border-color:var(--naranja)}
.btn--danger{background:var(--rojo);color:#fff;border-color:var(--rojo)}
.btn--ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.btn--block{width:100%}
.btn--lg{padding:15px 18px;font-size:16px;letter-spacing:.04em}
.btn--sm{padding:7px 11px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

.bigactions{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:18px 0 6px}
.bigaction{
  display:flex;align-items:center;gap:14px;padding:18px;border-radius:16px;cursor:pointer;
  border:2px solid var(--linea);background:var(--papel);text-align:left;box-shadow:var(--sombra);
  transition:transform .15s, box-shadow .15s;
}
.bigaction:hover{transform:translateY(-2px);box-shadow:var(--sombra-alta)}
.bigaction__ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff;flex:0 0 auto;font-size:20px}
.bigaction strong{display:block;font-size:15.5px;letter-spacing:.03em}
.bigaction small{color:var(--tinta-2);font-size:12.5px}
.bg-verde{background:linear-gradient(160deg,var(--verde-600),var(--verde-800))}
.bg-naranja{background:linear-gradient(160deg,#EE9A4D,var(--naranja))}
.bg-oscuro{background:linear-gradient(160deg,#3E4A40,var(--verde-900))}

/* ============================================================
   APP - topbar / layout / nav
   ============================================================ */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:12px;
  padding:10px 16px;color:#fff;
  background:linear-gradient(100deg,var(--verde-900),var(--verde-700));
  box-shadow:0 2px 12px rgba(20,49,31,.25);
}
.topbar__menu{display:none;background:none;border:0;color:#fff;padding:6px;cursor:pointer}
.topbar__menu svg{width:24px;height:24px;display:block}
.topbar__logo{width:38px;height:38px;object-fit:contain}
.topbar__brand{display:flex;flex-direction:column;line-height:1.15}
.topbar__brand strong{font-size:14px;letter-spacing:.14em}
.topbar__brand span{font-size:11.5px;opacity:.8;letter-spacing:.06em}
.topbar__spacer{flex:1}
.topbar__date{font-size:12.5px;opacity:.9;white-space:nowrap}
.topbar__user{display:flex;align-items:center;gap:9px;padding-left:12px;border-left:1px solid rgba(255,255,255,.2)}
.topbar__user-txt{display:flex;flex-direction:column;line-height:1.15}
.topbar__user-txt strong{font-size:13.5px}
.topbar__user-txt small{font-size:11.5px;opacity:.8}
.avatar{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--naranja);color:#fff;font-weight:800;font-size:15px;
}

.layout{display:flex;align-items:flex-start;min-height:calc(100dvh - 58px)}
.sidebar{
  position:sticky;top:58px;flex:0 0 224px;width:224px;
  height:calc(100dvh - 58px);overflow-y:auto;padding:16px 12px;
  background:var(--papel);border-right:1px solid var(--linea);
}
.navitem{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:11px 13px;margin-bottom:4px;border-radius:11px;
  background:none;border:0;cursor:pointer;text-align:left;
  font-weight:700;font-size:13.8px;color:var(--tinta-2);letter-spacing:.04em;
}
.navitem:hover{background:var(--verde-100);color:var(--verde-800)}
.navitem.is-active{background:var(--verde-800);color:#fff}
.navitem__ico{width:20px;text-align:center;font-size:15px}
.navitem__badge{
  margin-left:auto;background:var(--rojo);color:#fff;border-radius:99px;
  font-size:11px;padding:1px 7px;font-weight:800;
}
.navitem.is-active .navitem__badge{background:var(--naranja)}
.navgroup{
  display:flex;align-items:center;justify-content:space-between;
  font-size:11px;letter-spacing:.16em;color:var(--tinta-3);padding:14px 13px 6px;font-weight:800;
}
/* La X solo aparece en el celular, donde el menu tapa la pantalla. En la
   computadora el menu esta siempre a la vista y no hay nada que cerrar. */
.navgroup__x{
  display:none;background:none;border:0;cursor:pointer;
  color:var(--tinta-2);font-size:16px;line-height:1;padding:6px 8px;margin:-6px -8px -6px 0;
  border-radius:8px;
}
.navgroup__x:hover{background:var(--verde-100);color:var(--verde-800)}

.main{flex:1;min-width:0;padding:22px 24px 40px;max-width:1280px}
.bottomnav{display:none}
.scrim{display:none}

@media(max-width:900px){
  .topbar__menu{display:block}
  .topbar__date{display:none}
  .topbar__brand span{display:none}
  .hide-sm{display:none}
  .sidebar{
    position:fixed;top:0;left:0;height:100dvh;z-index:60;width:250px;flex-basis:250px;
    transform:translateX(-100%);transition:transform .22s ease;padding-top:20px;
  }
  .sidebar.is-open{transform:translateX(0);box-shadow:var(--sombra-alta)}
  .navgroup__x{display:block}
  .scrim{display:block;position:fixed;inset:0;background:rgba(20,49,31,.45);z-index:50;opacity:0;pointer-events:none;transition:opacity .2s}
  .scrim.is-open{opacity:1;pointer-events:auto}
  .main{padding:16px 14px 96px}
  .bottomnav{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:45;
    background:var(--papel);border-top:1px solid var(--linea);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -4px 18px rgba(20,49,31,.09);
  }
  .bnitem{
    flex:1;background:none;border:0;cursor:pointer;padding:7px 2px;border-radius:10px;
    display:flex;flex-direction:column;align-items:center;gap:3px;
    font-size:10.5px;font-weight:700;color:var(--tinta-3);letter-spacing:.03em;
  }
  .bnitem span:first-child{font-size:18px;line-height:1}
  .bnitem.is-active{color:var(--verde-800);background:var(--verde-100)}
  /* El badge fijo de Netlify se superpone abajo: le dejamos su franja */
  body.con-badge .bottomnav{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  body.con-badge .main{padding-bottom:160px}
}

/* ============================================================
   Bloques de contenido
   ============================================================ */
.page__head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.page__title{font-size:23px;color:var(--verde-900);letter-spacing:.02em}
.page__sub{margin:3px 0 0;color:var(--tinta-2);font-size:13.5px}
.page__actions{display:flex;gap:8px;flex-wrap:wrap}

.section{margin-top:26px}
.section__title{
  font-size:12.5px;letter-spacing:.16em;color:var(--tinta-3);font-weight:800;
  margin-bottom:10px;display:flex;align-items:center;gap:10px;
}
.section__title::after{content:"";flex:1;height:1px;background:var(--linea)}

/* Desplegable de "terminadas y anuladas" en PRODUCCION (02/10/2026): el
   resumen reusa .section__title pero necesita quitarle la marca nativa del
   navegador y agregarle el cursor, que si no queda invisible. */
.desplegable > summary{ cursor:pointer; list-style:none; }
.desplegable > summary::-webkit-details-marker{ display:none; }
.desplegable > summary::before{ content:"\25B8"; margin-right:2px; color:var(--tinta-3); }
.desplegable[open] > summary::before{ content:"\25BE"; }

/* Lista de etiqueta + valor de las fichas de pedido web. */
.deflist{display:flex;flex-direction:column;gap:7px;margin:12px 0 10px}
.deflist>div{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;font-size:.9rem;line-height:1.4;
}
.deflist>div>span:first-child{flex:none;color:var(--tinta-3)}
.deflist>div>span:last-child{text-align:right;color:var(--tinta);font-weight:600;min-width:0}
@media(max-width:480px){
  .deflist>div{flex-direction:column;gap:1px}
  .deflist>div>span:last-child{text-align:left}
}

/* Aviso de pedidos web sin ver. Va arriba del tablero de Claudio y solo
   aparece cuando hay alguno: es lo unico que espera respuesta de alguien
   de afuera de la fabrica. Naranja, que en este sistema es "mira esto". */
.avisoweb{
  width:100%;display:flex;align-items:center;gap:14px;
  background:var(--naranja-100);border:1px solid var(--naranja);
  border-radius:var(--radio);padding:14px 18px;margin-bottom:14px;
  font-family:inherit;text-align:left;cursor:pointer;
  transition:background .15s ease,transform .15s ease;
}
.avisoweb:hover{background:#F8DFC4;transform:translateY(-1px)}
.avisoweb__ico{font-size:1.5rem;line-height:1;flex:none}
.avisoweb__txt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.avisoweb__txt strong{color:var(--tinta);font-size:1.02rem}
.avisoweb__txt span{color:var(--tinta-2);font-size:.86rem}
.avisoweb__ver{
  flex:none;background:var(--naranja);color:#fff;font-weight:800;
  font-size:.74rem;letter-spacing:.1em;padding:8px 14px;border-radius:999px;
}
@media(max-width:520px){
  .avisoweb{padding:12px 14px;gap:11px}
  .avisoweb__txt strong{font-size:.95rem}
}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.card{
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  padding:16px;box-shadow:var(--sombra);
}
.card--pad0{padding:0;overflow:hidden}
.card__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.card__title{font-size:12px;letter-spacing:.14em;color:var(--tinta-3);font-weight:800}
.card__chip{font-size:11px;font-weight:800;padding:3px 9px;border-radius:99px;background:var(--verde-100);color:var(--verde-800)}

.kpis{display:grid;gap:9px}
.kpi{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kpi__label{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--tinta-2);font-weight:600}
.kpi__value{font-size:22px;font-weight:800;letter-spacing:-.02em}
.kpi--big .kpi__value{font-size:30px}
.dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.dot--ok{background:var(--verde-600)}
.dot--low{background:var(--naranja)}
.dot--out{background:var(--rojo)}

.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat{
  background:var(--papel);border:1px solid var(--linea);border-left:5px solid var(--verde-600);
  border-radius:var(--radio);padding:14px 16px;box-shadow:var(--sombra);
}
.stat--low{border-left-color:var(--naranja)}
.stat--out{border-left-color:var(--rojo)}
.stat--info{border-left-color:var(--verde-800)}
.stat__label{font-size:11.5px;letter-spacing:.1em;color:var(--tinta-3);font-weight:800;text-transform:uppercase}
.stat__value{font-size:29px;font-weight:800;letter-spacing:-.02em;margin-top:4px}
.stat__foot{font-size:12px;color:var(--tinta-2)}
.stat--click{cursor:pointer;text-align:left;width:100%;font-family:inherit}
.stat--click:hover{box-shadow:0 0 0 2px var(--verde-600) inset}

.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radio);border:1px solid var(--linea);background:var(--papel);box-shadow:var(--sombra)}
table{width:100%;border-collapse:collapse;min-width:560px}
thead th{
  text-align:left;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-3);font-weight:800;padding:12px 14px;background:var(--crema-2);
  border-bottom:1px solid var(--linea);white-space:nowrap;
}
tbody td{padding:12px 14px;border-bottom:1px solid var(--linea);vertical-align:middle;font-size:14px}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--verde-100)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.t-strong{font-weight:700}
.t-sub{display:block;font-size:12px;color:var(--tinta-3)}

.badge{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;
  font-size:11.5px;font-weight:800;letter-spacing:.05em;white-space:nowrap;
  background:var(--verde-100);color:var(--verde-800);
}
.badge--ok{background:var(--verde-100);color:var(--verde-800)}
.badge--low{background:var(--naranja-100);color:#9A5411}
.badge--out{background:var(--rojo-100);color:var(--rojo)}
.badge--neutral{background:var(--crema-2);color:var(--tinta-2)}
.badge--dark{background:var(--verde-800);color:#fff}
.badge--owner-pp{background:var(--verde-100);color:var(--verde-800)}
.badge--owner-ff{background:var(--naranja-100);color:#9A5411}

.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.searchbox{flex:1;min-width:190px}
.searchbox input{width:100%;padding:11px 14px;border-radius:var(--radio-sm);border:1.5px solid var(--linea);background:var(--blanco);outline:none}
.segmented{display:inline-flex;background:var(--crema-2);border-radius:99px;padding:3px;gap:2px;flex-wrap:wrap;margin-bottom:16px}
.seg{
  border:0;background:none;cursor:pointer;padding:8px 14px;border-radius:99px;
  font-weight:700;font-size:12.5px;color:var(--tinta-2);letter-spacing:.04em;
}
.seg.is-active{background:var(--verde-800);color:#fff}
select.filter{padding:10px 12px;border-radius:var(--radio-sm);border:1.5px solid var(--linea);background:var(--blanco)}

.feed{display:flex;flex-direction:column}
.feeditem{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--linea)}
.feeditem:last-child{border-bottom:0}
.feeditem__ico{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--verde-100);color:var(--verde-800);font-size:15px;flex:0 0 auto;
}
.feeditem__ico.is-out{background:var(--rojo-100);color:var(--rojo)}
.feeditem__ico.is-in{background:var(--verde-100);color:var(--verde-700)}
.feeditem__ico.is-move{background:var(--naranja-100);color:#9A5411}
.feeditem__body{min-width:0;flex:1}
.feeditem__txt{font-size:14px}
.feeditem__meta{font-size:12px;color:var(--tinta-3);margin-top:2px}

.empty{
  text-align:center;padding:40px 20px;color:var(--tinta-3);
  background:var(--papel);border:1px dashed var(--linea);border-radius:var(--radio);
}
.empty__ico{font-size:34px;margin-bottom:8px}

.convert{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.convert__cell{background:var(--crema-2);border-radius:12px;padding:12px;text-align:center}
.convert__cell strong{display:block;font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--verde-900)}
.convert__cell small{font-size:11.5px;letter-spacing:.1em;color:var(--tinta-3);font-weight:800;text-transform:uppercase}

.formcard{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:20px;box-shadow:var(--sombra);max-width:680px}
.formcard__foot{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}

.toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:26px;z-index:90;
  background:var(--verde-900);color:#fff;padding:13px 20px;border-radius:99px;
  font-weight:700;font-size:14px;box-shadow:var(--sombra-alta);max-width:92vw;text-align:center;
}
.toast.is-error{background:var(--rojo)}
.toast.is-warn{background:var(--naranja)}

.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:rgba(20,49,31,.5)}
.modal__box{background:var(--papel);border-radius:18px;width:100%;max-width:520px;max-height:88dvh;overflow:auto;box-shadow:var(--sombra-alta)}
.modal__box--ancho{max-width:900px}
.modal__head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--linea);position:sticky;top:0;background:var(--papel)}
.modal__head h3{font-size:16px;color:var(--verde-900)}
.modal__close{background:none;border:0;font-size:18px;cursor:pointer;color:var(--tinta-2)}
.modal__body{padding:18px}

.rowactions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.linkbtn{background:none;border:0;color:var(--verde-700);font-weight:700;cursor:pointer;font-size:13px;padding:4px 6px;border-radius:8px}
.linkbtn:hover{background:var(--verde-100)}
.linkbtn--danger{color:var(--rojo)}
.linkbtn--danger:hover{background:var(--rojo-100)}

.bar{height:7px;border-radius:99px;background:var(--crema-2);overflow:hidden;margin-top:6px;min-width:80px}
.bar__fill{height:100%;border-radius:99px;background:var(--verde-600)}
.bar__fill.is-low{background:var(--naranja)}
.bar__fill.is-out{background:var(--rojo)}

/* ---------- Pantalla de carga (conexion con la base) ---------- */
.cargando{
  position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:20px;
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(47,125,74,.18), transparent 60%),
    var(--crema);
}
.cargando__box{text-align:center;max-width:340px}
.cargando__box img{
  width:78px;height:78px;object-fit:cover;border-radius:20px;
  border:3px solid var(--blanco);box-shadow:var(--sombra);
  animation:latido 1.4s ease-in-out infinite;
}
.cargando__box p{margin:16px 0 14px;color:var(--tinta-2);font-weight:600}
@keyframes latido{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.06);opacity:1}}
@media (prefers-reduced-motion:reduce){.cargando__box img{animation:none}}

/* ---------- Ranuras de conteo ---------- */
.conteo-input{
  width:118px;padding:10px 12px;border-radius:var(--radio-sm);
  border:1.5px solid var(--linea);background:var(--blanco);outline:none;
  text-align:right;font-weight:800;font-variant-numeric:tabular-nums;
}
.conteo-input:focus{border-color:var(--verde-600);box-shadow:0 0 0 3px rgba(53,127,79,.15)}
.conteo-input.is-ok{border-color:var(--verde-600);background:var(--verde-100);color:var(--verde-900)}
.conteo-input::placeholder{color:var(--tinta-3);font-weight:600}
@media(max-width:520px){.conteo-input{width:92px;padding:9px 10px}}

/* ---------- Conteo: una fila por producto (comodo en el celular) ---------- */
.conteo-progreso{
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  padding:14px 16px;box-shadow:var(--sombra);
}
.conteo-progreso__nums{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--tinta-2)}
.conteo-progreso__nums strong{font-size:19px;color:var(--verde-900);letter-spacing:-.02em}
.conteo-progreso__pct{margin-left:auto;font-weight:800;color:var(--tinta-3)}
.conteo-progreso .bar{margin-top:10px;height:9px}

.conteo-lista{
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  box-shadow:var(--sombra);overflow:hidden;
}
.conteo-fila{
  display:flex;align-items:center;gap:12px;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--linea);
}
.conteo-fila:last-child{border-bottom:0}
.conteo-fila:hover{background:var(--verde-100)}
.conteo-fila__txt{min-width:0}
.conteo-fila__txt strong{display:block;font-size:15px;letter-spacing:-.01em}
.conteo-fila__txt span{font-size:12.5px;color:var(--tinta-3)}
.conteo-fila__acc{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.conteo-fila--multi{align-items:flex-end;flex-wrap:wrap}
.conteo-fila__props{display:flex;gap:10px;flex:0 0 auto}
.conteo-prop{display:flex;flex-direction:column;gap:4px}
.conteo-prop > span{
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:800;color:var(--tinta-3);text-align:right;
}
@media(max-width:520px){
  .conteo-fila{padding:11px 13px;gap:8px}
  .conteo-fila__txt strong{font-size:14px}
  .conteo-fila--multi{flex-direction:column;align-items:stretch}
  .conteo-fila__props{width:100%}
  .conteo-prop{flex:1}
  .conteo-prop .conteo-input{width:100%}
}

/* ---------- Cantidad con - y + ---------- */
.cantidad{display:flex;align-items:stretch;gap:8px}
.cantidad__btn{
  flex:0 0 auto;width:52px;border:1.5px solid var(--linea);background:var(--blanco);
  border-radius:var(--radio-sm);font-size:24px;font-weight:800;line-height:1;
  color:var(--verde-800);cursor:pointer;touch-action:manipulation;
}
.cantidad__btn:hover{background:var(--verde-100)}
.cantidad__btn:active{background:var(--verde-100);transform:translateY(1px)}
.cantidad__input{flex:1;min-width:0;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
/* fuera las flechitas del navegador: en el celular son imposibles de acertar */
.cantidad__input::-webkit-outer-spin-button,
.cantidad__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cantidad__input{-moz-appearance:textfield;appearance:textfield}
.conteo-input::-webkit-outer-spin-button,
.conteo-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.conteo-input{-moz-appearance:textfield;appearance:textfield}

.field__ayuda{display:block;margin-top:6px;font-size:12px;color:var(--tinta-3);line-height:1.4;font-weight:400}

/* En celular: 16px evita que el navegador haga zoom al tocar un campo,
   y los botones quedan comodos para el dedo. */
@media(max-width:900px){
  .field input,.field select,.field textarea,
  .conteo-input,.cantidad__input,.searchbox input{font-size:16px}
  .cantidad__btn{width:56px;font-size:26px}
  .btn{min-height:44px}
  .linkbtn{min-height:38px}
}

/* ---------- Bloque explicativo (que es esta pantalla) ---------- */
.explica{border-left:5px solid var(--naranja);margin-bottom:18px}
.explica__titulo{
  font-size:12px;letter-spacing:.14em;color:var(--naranja);
  text-transform:uppercase;margin-bottom:8px;
}
.explica p{margin:0 0 10px;font-size:14px;line-height:1.55;color:var(--tinta-2)}
.explica p:last-child{margin-bottom:0}
.explica__ej{background:var(--crema-2);border-radius:var(--radio-sm);padding:11px 13px}
.explica__no{color:var(--tinta)}

/* ============================================================
   CELULAR: que nada empuje la pagina a lo ancho
   El encabezado se desbordaba cuando el telefono tiene la letra
   grande (ajuste de accesibilidad de Android): la pagina quedaba
   mas ancha que la pantalla y se veia todo corrido.
   ============================================================ */
html,body{max-width:100%;overflow-x:hidden}
.topbar,.main,.layout,.page__head,.card,.formcard{min-width:0}
.topbar__brand,.topbar__user,.topbar__user-txt{min-width:0}
.topbar__brand strong,.topbar__brand span,
.topbar__user-txt strong,.topbar__user-txt small{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.page__title{overflow-wrap:anywhere}

@media(max-width:600px){
  .topbar{padding:10px 12px;gap:10px}
  .topbar__logo{width:34px;height:34px}
  .topbar__brand{display:none}          /* con el logo alcanza */
  .topbar__user{padding-left:0;border-left:0;margin-left:auto}
  .topbar__user-txt strong{font-size:13px;max-width:88px}
  .topbar__user-txt small{font-size:11px;max-width:88px}
  .avatar{width:32px;height:32px;font-size:14px}
  .page__title{font-size:21px}
  .page__head{gap:10px}
  .page__actions{width:100%}
  .page__actions .btn{flex:1 1 auto}
}
@media(max-width:380px){
  /* En los telefonos mas angostos se cae el rol, pero el nombre queda:
     es lo que confirma con que usuario estan cargando. */
  .topbar__user-txt small{display:none}
  .topbar__user-txt strong{max-width:72px}
  .topbar{gap:8px}
}

/* ---------- Cierre diario ---------- */
.diafecha{margin-bottom:4px}

.dia-fila{
  display:flex;gap:12px;justify-content:space-between;align-items:center;
  padding:12px 16px;border-bottom:1px solid var(--linea);flex-wrap:wrap;
}
.dia-fila:last-child{border-bottom:0}
.dia-fila__txt{min-width:120px}
.dia-fila__txt strong{display:block;font-size:15px}
.dia-fila__txt span{font-size:12.5px;color:var(--tinta-3)}
.dia-fila__nums{display:flex;gap:8px;flex-wrap:wrap;flex:1;justify-content:flex-end}
.dia-celda{
  display:flex;flex-direction:column;gap:2px;min-width:86px;
  background:var(--crema-2);border-radius:10px;padding:7px 10px;text-align:right;
}
.dia-celda small{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3);font-weight:800}
.dia-celda b{font-size:14px;font-variant-numeric:tabular-nums}
.dia-celda i{font-style:normal;font-size:10.5px;color:var(--tinta-3)}
.dia-celda.is-fuerte b{color:var(--verde-900);font-size:15px}
.dia-celda.is-gris b{color:var(--tinta-3);font-weight:600}
.dia-celda.is-rojo b{color:var(--rojo)}
.dia-celda.is-naranja b{color:var(--naranja)}
@media(max-width:600px){
  .dia-fila{padding:11px 13px}
  .dia-fila__nums{justify-content:flex-start}
  .dia-celda{flex:1;min-width:72px;text-align:left}
}

/* ---------- Cuanto hay ahora (entradas y salidas) ---------- */
.stockmini{
  background:var(--crema-2);border-radius:var(--radio-sm);
  padding:12px 14px;margin:0 0 14px;
}
.stockmini--vacio,.stockmini--nuevo{
  font-size:13px;color:var(--tinta-2);margin:0 0 14px;
}
.stockmini--nuevo{background:var(--naranja-100);color:#9A5411;font-weight:600}
.stockmini__fila{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stockmini__fila strong{font-size:19px;letter-spacing:-.02em}
.stockmini__rot{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3);font-weight:800}
.stockmini__fila--sub{margin-top:8px}
.stockmini__queda{
  margin-left:auto;display:flex;align-items:center;gap:8px;
  font-weight:800;font-size:13.5px;color:var(--verde-900);
}

/* ---------- Estado en la fila del conteo ---------- */
.conteo-estado{display:block;margin-top:6px}

/* ---------- Campanita de novedades ---------- */
.topbar__campana{position:relative;padding:7px 9px}
.campana__badge{
  position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;
  border-radius:99px;background:var(--naranja);color:#fff;
  font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 5px;
  border:2px solid var(--verde-800);
}
@media(max-width:600px){
  .stockmini__queda{margin-left:0;width:100%}
}

/* ---------- Fila del conteo: que no se parta el texto ---------- */
.conteo-fila{align-items:center}
.conteo-fila__txt{flex:1 1 auto}
.conteo-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:3px}
.conteo-meta em{font-style:normal;font-size:12px;color:var(--tinta-3);white-space:nowrap}
.conteo-fila__acc{flex-direction:column;align-items:flex-end;gap:5px}
.conteo-fila__acc .linkbtn{padding:2px 6px;font-size:12px}
@media(max-width:520px){
  .conteo-fila__txt strong{font-size:14.5px}
  .conteo-fila__acc .conteo-input{width:104px}
}

/* ---------- Fila del conteo: "Hay [n] unidad" + comentario ---------- */
.conteo-fila{flex-wrap:wrap}
.conteo-fila__acc{flex-direction:row;align-items:center;gap:8px;flex-wrap:wrap}
.conteo-hay{font-size:13px;font-weight:800;color:var(--tinta-2);letter-spacing:.04em}
.conteo-unidad{font-size:13px;color:var(--tinta-2);min-width:44px}
.conteo-notabtn{white-space:nowrap}
.conteo-nota{flex-basis:100%;margin-top:8px}
.conteo-nota input{
  width:100%;padding:10px 12px;border-radius:var(--radio-sm);
  border:1.5px dashed var(--linea);background:var(--blanco);outline:none;font-size:14px;
}
.conteo-nota input:focus{border-style:solid;border-color:var(--verde-600);box-shadow:0 0 0 3px rgba(53,127,79,.15)}
.dia-nota{display:block;font-size:12.5px;color:var(--naranja);font-style:italic;margin-top:2px}

@media(max-width:600px){
  .conteo-fila__txt{flex-basis:100%}
  .conteo-fila__acc{flex-basis:100%;justify-content:flex-start;margin-top:8px}
  .conteo-fila__acc .conteo-input{flex:1;min-width:80px;width:auto}
  .conteo-notabtn{margin-left:auto}
}

/* ---------- Barra de confirmar el conteo (fija abajo) ---------- */
.barraconf{
  position:fixed;left:224px;right:0;bottom:0;z-index:36;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px 24px;background:var(--papel);border-top:1px solid var(--linea);
  box-shadow:0 -6px 20px rgba(20,49,31,.12);
}
.barraconf__txt{font-size:14px;color:var(--tinta-2)}
.barraconf__txt strong{font-size:20px;color:var(--verde-900);letter-spacing:-.02em}
.barraconf__txt span{color:var(--tinta-3)}
.barraconf__acc{display:flex;gap:10px;align-items:center;margin-left:auto}
.barraconf__hueco{height:92px}

@media(max-width:900px){
  .barraconf{left:0;bottom:calc(60px + env(safe-area-inset-bottom));padding:10px 14px}
  body.con-badge .barraconf{bottom:calc(122px + env(safe-area-inset-bottom))}
  .barraconf__acc{width:100%}
  .barraconf__acc .btn--lg{flex:1;padding:13px 14px;font-size:15px}
  .barraconf__hueco{height:150px}
}

/* ---------- Contador en los botones de propietario ---------- */
.seg b{
  display:inline-block;margin-left:4px;padding:0 6px;border-radius:99px;
  background:rgba(20,49,31,.10);font-size:11.5px;
}
.seg.is-active b{background:rgba(255,255,255,.22)}

/* ---------- Empleados: planillas de horarios ---------- */
.planilla-dia{margin-bottom:22px}
.planilla-dia__fecha{
  font-size:13px;letter-spacing:.1em;color:var(--verde-800);
  text-transform:uppercase;margin-bottom:10px;
}
.planillas{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.planilla{
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  overflow:hidden;box-shadow:var(--sombra);display:flex;flex-direction:column;
}
.planilla img{
  width:100%;height:190px;object-fit:cover;background:var(--crema-2);display:block;
}
.planilla img.is-error{height:60px;object-fit:contain}
.planilla__pie{padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.planilla__pie strong{font-size:14.5px}
.planilla__nota{font-size:13px;color:var(--tinta-2)}
.planilla__pie .rowactions{justify-content:flex-start;margin-top:6px}

.field input[type=file]{
  padding:11px 12px;background:var(--blanco);font-size:14px;
  border:1.5px dashed var(--linea);
}

/* ---------- Dos caminos en un mismo aviso ---------- */
.opcion{
  border:1.5px solid var(--linea);border-radius:var(--radio);
  padding:14px;margin-bottom:12px;background:var(--papel);
}
.opcion strong{display:block;font-size:15px;margin-bottom:4px}
.opcion p{margin:0 0 12px;font-size:13.5px;color:var(--tinta-2);line-height:1.5}
.opcion--peligro{border-color:rgba(192,57,43,.35);background:var(--rojo-100)}
.opcion--peligro p{color:#8C2F24}

/* ---------- Documento PDF en empleados ---------- */
.planilla__pdf{
  height:190px;display:grid;place-items:center;background:var(--crema-2);
  color:var(--rojo);font-weight:800;letter-spacing:.18em;font-size:22px;
}

/* ---------- Cierre del conteo (al final de la lista) ---------- */
.cierre{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
  padding:16px;margin-top:16px;box-shadow:var(--sombra);
}
.cierre.is-listo{border-color:var(--verde-600);background:var(--verde-100)}
.cierre__txt strong{display:block;font-size:16px;color:var(--verde-900)}
.cierre__txt span{font-size:13px;color:var(--tinta-2)}
.cierre__acc{display:flex;gap:10px;align-items:center;margin-left:auto}
@media(max-width:600px){
  .cierre__acc{width:100%;margin-left:0}
  .cierre__acc .btn--lg{flex:1}
}

/* ---------- Tarjetas del tablero que abren su seccion ---------- */
.card--link{cursor:pointer;transition:transform .15s, box-shadow .15s, border-color .15s;position:relative}
.card--link:hover{transform:translateY(-2px);box-shadow:var(--sombra-alta);border-color:var(--verde-300)}
.card--link:active{transform:translateY(0)}
.card--link .card__head::after{
  content:"›";margin-left:8px;color:var(--tinta-3);font-size:20px;line-height:1;font-weight:800;
}

/* ---------- Aviso de guardado ---------- */
.guardando-chip{
  position:fixed;top:70px;left:50%;transform:translateX(-50%);z-index:95;
  display:flex;align-items:center;gap:9px;
  background:var(--verde-900);color:#fff;padding:10px 18px;border-radius:99px;
  font-weight:700;font-size:13.5px;box-shadow:var(--sombra-alta);
}
.guardando-chip__punto{
  width:9px;height:9px;border-radius:50%;background:var(--naranja);
  animation:latir 1s ease-in-out infinite;
}
@keyframes latir{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@media (prefers-reduced-motion:reduce){.guardando-chip__punto{animation:none}}

/* Mientras guarda, no se puede volver a tocar: evita duplicados */
body.guardando .btn--primary,
body.guardando .btn--orange,
body.guardando .btn--danger,
body.guardando .bigaction,
body.guardando .linkbtn{opacity:.55;pointer-events:none}
body.guardando{cursor:progress}

/* ---------- Registros anulados: se ven, no cuentan ---------- */
tr.is-anulado{background:repeating-linear-gradient(135deg, rgba(192,57,43,.05) 0 6px, transparent 6px 12px)}
tr.is-anulado td:not(:last-child){opacity:.62}
tr.is-anulado .t-strong{text-decoration:line-through}

/* ============================================================
   PERSONAL Y PAGOS
   ============================================================ */
.asistencia{margin-bottom:12px}
.asistencia__cab{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:12px;
}
.asistencia__cab strong{display:block;font-size:15.5px}
.asistencia__cab .tiny{display:block}
.asistencia__tot{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:13.5px}
.asistencia__tot strong{font-size:18px;color:var(--verde-900)}
.is-tarde-txt{color:var(--naranja);font-weight:800}

.dias{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.diachip{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:9px 4px;border-radius:12px;cursor:pointer;
  border:1.5px solid var(--linea);background:var(--blanco);text-align:center;
  min-height:62px;justify-content:center;
}
.diachip small{font-size:10px;letter-spacing:.04em;color:var(--tinta-3);font-weight:800;text-transform:uppercase}
.diachip strong{font-size:14px;line-height:1.1}
.diachip em{font-style:normal;font-size:10px;color:var(--tinta-3)}
.diachip__vacio{font-size:11px;color:var(--tinta-3)}
.diachip:hover{border-color:var(--verde-600);background:var(--verde-100)}
.diachip.is-ok{background:var(--verde-100);border-color:var(--verde-300)}
.diachip.is-tarde{background:var(--naranja-100);border-color:var(--naranja)}
.diachip.is-tarde strong{color:#9A5411}
.diachip.is-falta{background:var(--rojo-100);border-color:var(--rojo)}
.diachip.is-falta strong{color:var(--rojo)}
.diachip.is-neutro{background:var(--crema-2)}
@media(max-width:600px){
  .dias{grid-template-columns:repeat(3,1fr)}
  .asistencia__tot{width:100%;justify-content:space-between}
}

/* Vista previa del comprobante dentro de la app */
.reciboprev{background:var(--crema-2);border-radius:var(--radio-sm);padding:12px 14px}
.reciboprev__fila{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:13.5px}
.reciboprev__fila + .reciboprev__fila{border-top:1px dotted var(--linea)}
.reciboprev__total{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:10px;padding-top:10px;border-top:2px solid var(--verde-800);
  font-weight:800;color:var(--verde-900);
}
.reciboprev__total strong{font-size:19px}
.ajuste-fila{
  display:flex;align-items:center;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--linea);font-size:13.5px;
}
.ajuste-fila strong{margin-left:auto}

/* ---------- Personal: retoques para el celular ---------- */
.asistencia__tot > span{white-space:nowrap}
@media(max-width:600px){
  .asistencia__cab{gap:8px}
  .asistencia__tot{gap:10px;font-size:13px}
  .asistencia__tot strong{font-size:16px}
}

/* el <strong> del nombre va en bloque, pero el de los totales no: partia "0 h" en dos */
.asistencia__tot strong{display:inline}

/* pasos numerados de una explicacion */
.pasos{margin:0 0 12px;padding-left:20px;font-size:13.5px;color:var(--tinta-2);line-height:1.6}
.pasos li{margin-bottom:6px}

/* ===== Aviso "abrila en Chrome" (solo dentro de WhatsApp/Instagram) ===== */
.avisonav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:10px 14px; background:var(--verde-oscuro,#1F4A2F); color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.avisonav__txt{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 200px; }
.avisonav__txt strong{ font-size:14px; letter-spacing:.02em; }
.avisonav__txt span{ font-size:12px; opacity:.85; line-height:1.35; }
.avisonav__acciones{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.avisonav .btn--primary{ padding:8px 14px; font-size:12px; }
.avisonav .linkbtn{ color:#fff; opacity:.85; font-size:12px; }
.avisonav__x{
  background:none; border:0; color:#fff; opacity:.7;
  font-size:15px; line-height:1; padding:6px; cursor:pointer;
}
.avisonav__x:hover{ opacity:1; }
/* Con el aviso arriba, el contenido baja para que no quede tapado. */
body.con-avisonav .topbar{ top:var(--alto-avisonav,74px); }
body.con-avisonav{ padding-top:var(--alto-avisonav,74px); }

.btn--instalar{ width:100%; margin-top:14px; font-size:12px; }

@media (max-width:600px){
  .avisonav{ padding:9px 12px; }
  .avisonav__txt span{ font-size:11px; }
  .avisonav__acciones{ width:100%; justify-content:space-between; }
}

/* =========================================================
   REVISION DE LA PLANILLA LEIDA
   Pensado para el celular: un bloque por dia, botones grandes y
   los problemas con un borde de color que se ve de lejos.
   verde = listo | naranja = revisar o llego tarde | rojo = falta un dato
   ========================================================= */
.leyendo{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center;
  background:rgba(20,49,31,.55); padding:20px;
}
.leyendo__caja{
  background:var(--papel); border-radius:var(--radio); padding:22px 26px;
  box-shadow:var(--sombra-alta); text-align:center; max-width:320px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-weight:600; color:var(--verde-900);
}
.leyendo__punto{
  width:22px; height:22px; border-radius:50%;
  border:3px solid var(--verde-100); border-top-color:var(--verde-700);
  animation:girar .8s linear infinite;
}
@keyframes girar{ to{ transform:rotate(360deg); } }

.revcab__ok{ margin:0; color:var(--verde-800); }
.dudas{ margin:0; padding-left:18px; color:var(--tinta-2); font-size:13px; line-height:1.5; }
.dudas li{ margin-bottom:4px; }

.tablarev td, .tablarev th{ padding:8px 10px; }

.revemp{ padding-bottom:8px; }
.revtot{
  margin-top:10px; padding-top:10px; border-top:1px solid var(--linea);
  font-size:12px; letter-spacing:.04em; color:var(--tinta-2); text-align:right;
}
.revtot strong{ color:var(--verde-800); font-size:14px; }

.revfila{
  border:1px solid var(--linea); border-left:4px solid var(--verde-300);
  border-radius:var(--radio-sm); padding:12px; margin-bottom:10px;
  background:var(--blanco);
}
.revfila--tarde{ border-left-color:var(--naranja); background:var(--naranja-100); }
.revfila--falta{ border-left-color:var(--rojo); background:var(--rojo-100); }
.revfila--conflicto{ border-left-color:var(--rojo); }

.revfila__cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.revfila__tilde{ display:flex; align-items:center; gap:10px; font-weight:700; cursor:pointer; }
.revfila__tilde input{ width:22px; height:22px; accent-color:var(--verde-700); }
.revfila__crudo{ margin:8px 0 0; }
.revfila__emp{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.revfila__emp select{ width:100%; }
.revfila__aviso{
  margin:8px 0 0; font-size:13px; font-weight:600; color:var(--rojo);
}
.revfila__campos{
  display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:10px; margin-top:10px;
}
.revfila__campos .field{ margin:0; }
.revfila__campos .field.is-oculto{ display:none; }
.revfila__calc{ margin:10px 0 0; font-size:14px; color:var(--tinta); }
.revfila__ok{ color:var(--verde-700); font-weight:700; }
.revfila__falta{ color:var(--rojo); font-weight:700; }

/* Semaforo de confianza de la lectura */
.conf{
  display:inline-flex; align-items:center; gap:4px;
  font-size:10px; letter-spacing:.04em; color:var(--tinta-3);
}
.conf::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--verde-600); }
.conf--media::before{ background:var(--naranja); }
.conf--baja::before{ background:var(--rojo); }

/* Conflicto con lo que ya estaba cargado */
.revconf{
  margin-top:10px; padding:10px; border-radius:var(--radio-sm);
  background:var(--blanco); border:1px solid var(--rojo);
}
.revconf__tit{ margin:0 0 8px; font-weight:700; color:var(--rojo); font-size:13px; }
.revconf__cols{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:10px; }
.revconf__cols div{ display:flex; flex-direction:column; gap:2px; }
.revconf__acciones{ display:flex; gap:8px; }
.revconf__acciones .btn{ flex:1; font-size:12px; padding:10px 8px; }

@media (max-width:600px){
  .revfila__campos{ grid-template-columns:1fr 1fr; }
  .revfila__campos .field:first-child{ grid-column:1 / -1; }
  .revfila__cab{ flex-wrap:wrap; }
  .revconf__acciones{ flex-direction:column; }
  .revfila input[type=time], .revfila select{ font-size:16px; padding:12px 10px; }
}

/* ===== Descuentos y bonos de la semana, en la tarjeta del empleado ===== */
.ajustes{
  margin-top:12px; padding-top:10px; border-top:1px dashed var(--linea);
}
.ajustes__cab{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.ajustes__tit{
  font-size:10px; letter-spacing:.12em; font-weight:800; color:var(--tinta-3);
}
.ajustes__vacio{ margin:6px 0 0; font-size:12px; color:var(--tinta-3); }
.ajustes__lista{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.ajuste{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 10px; border-radius:var(--radio-sm); background:var(--crema);
  border-left:3px solid var(--verde-300);
}
.ajuste--menos{ border-left-color:var(--rojo); }
.ajuste--mas{ border-left-color:var(--verde-600); }
.ajuste__txt{ display:flex; flex-direction:column; gap:1px; font-size:13px; min-width:0; }
.ajuste__txt strong{ font-variant-numeric:tabular-nums; }
.ajuste__txt em{ font-style:normal; font-size:11px; color:var(--tinta-3); }
.ajustes__pie{ margin:8px 0 0; font-size:12px; color:var(--tinta-2); }

@media (max-width:600px){
  .ajuste{ flex-wrap:wrap; }
  .ajustes__cab .linkbtn{ font-size:13px; padding:4px 0; }
}

/* ===== Auditoria de celular =====
   En el telefono los botones chicos se erran con el dedo. Lo minimo comodo
   son 44 px de alto; las pestanas de filtro quedaban en 32. */
@media (max-width:900px){
  .seg{ padding:12px 16px; font-size:13px; min-height:44px; }
  .segmented{ width:100%; justify-content:stretch; }
  .segmented .seg{ flex:1 1 auto; text-align:center; }
  .linkbtn{ min-height:38px; padding:8px 2px; }
  .rowactions{ gap:14px; flex-wrap:wrap; }
}

/* ===== Tardanzas del mes, vista rapida en ASISTENCIA ===== */
.tardchips{ display:flex; flex-wrap:wrap; gap:8px; }
.tardchip{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 11px; border-radius:99px; font-size:13px;
  background:var(--crema); border:1px solid var(--linea); color:var(--tinta-2);
}
.tardchip b{ font-variant-numeric:tabular-nums; color:var(--naranja); }
.tardchip--perdio{ background:var(--rojo-100); border-color:var(--rojo); }
.tardchip--perdio b{ color:var(--rojo); }

/* ===== Campo de contraseña con el ojito ===== */
.campopass{ position:relative; display:block; }
.campopass input{ width:100%; padding-right:74px; }
.campopass__ver{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:var(--crema); border:1px solid var(--linea); border-radius:8px;
  padding:7px 11px; font-size:12px; font-weight:700; letter-spacing:.04em;
  color:var(--verde-800); cursor:pointer;
}
.campopass__ver:hover{ background:var(--verde-100); }

/* ===== Accesos (pantalla de usuarios) ===== */
.accesos{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.acceso{
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--radio);
  padding:14px 16px; box-shadow:var(--sombra);
}
.acceso--off{ opacity:.65; }
.acceso__cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.acceso__cab strong{ font-size:16px; margin-right:8px; }
.acceso__cab .badge{ margin-right:4px; }
.acceso__datos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px;
  padding:10px 0 12px; border-top:1px solid var(--linea); border-bottom:1px solid var(--linea);
  margin-bottom:12px;
}
.acceso__datos > div{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.acceso__datos strong{ font-size:14px; word-break:break-word; }
.acceso__pie{ margin-top:12px; }

.clavebox{
  display:grid; gap:10px; padding:14px; border-radius:var(--radio-sm);
  background:var(--verde-100); border:1px solid var(--verde-300); margin-bottom:6px;
}
.clavebox > div{ display:flex; flex-direction:column; gap:2px; }
.clavebox strong{ font-size:18px; letter-spacing:.02em; word-break:break-all; color:var(--verde-900); }

/* =========================================================
   CELULAR: ARREGLOS DE ENCUADRE
   Reportado desde un telefono real (369 px de ancho):
   - las 5 pestanas de PERSONAL se partian en dos renglones y la ultima
     quedaba centrada y suelta;
   - "NO CORRESPONDE" se salia de su tarjeta;
   - los importes cortaban el "$" del numero.
   ========================================================= */
@media (max-width:900px){
  /* Las pestanas van en una sola fila que se desliza con el dedo. */
  .segmented{
    display:flex; flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; border-radius:99px;
  }
  .segmented::-webkit-scrollbar{ display:none; }
  .segmented .seg{ flex:0 0 auto; white-space:nowrap; }
}

/* Tarjetas de numeros: una por fila en pantallas angostas, para que el texto
   largo entre entero y no quede cortado. */
@media (max-width:430px){
  .statgrid{ grid-template-columns:1fr; gap:10px; }
  .stat{ padding:12px 14px; }
  .stat__value{ font-size:24px; }
}
.stat__value{ overflow-wrap:anywhere; line-height:1.15; }

/* Se difumina el borde derecho de la tira de pestanas: es la pista de que hay
   mas para el costado. Sin esto, una pestana escondida parece que no existe. */
@media (max-width:900px){
  .segmented{
    -webkit-mask-image:linear-gradient(to right, #000 82%, transparent 100%);
            mask-image:linear-gradient(to right, #000 82%, transparent 100%);
  }
  .segmented:not(.tienemas){
    -webkit-mask-image:none; mask-image:none;
  }
}


/* =========================================================
   CLIENTES
   Los nombres van grandes y en mayusculas: es lo que Claudio busca con la
   vista, y la lista se usa con el telefono en una mano.
   ========================================================= */
.field--busca{ flex:1 1 260px; }
.field--busca input{ font-size:16px; }

.clientes{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
}
.clicard{
  display:flex; flex-direction:column; gap:5px; text-align:left; cursor:pointer;
  background:var(--papel); border:1px solid var(--linea); border-left:5px solid var(--verde-600);
  border-radius:var(--radio); padding:14px 16px; box-shadow:var(--sombra);
  transition:transform .12s ease, box-shadow .12s ease;
}
.clicard:hover{ transform:translateY(-2px); box-shadow:var(--sombra-alta); }
.clicard--off{ opacity:.6; border-left-color:var(--tinta-3); }
.clicard__nombre{
  font-size:19px; font-weight:800; letter-spacing:.01em; color:var(--verde-900);
  text-transform:uppercase; line-height:1.15; overflow-wrap:anywhere;
}
.clicard__sub{ font-size:13px; color:var(--tinta-2); }
.clicard__sub em{ color:var(--tinta-3); font-style:normal; }
.clicard__chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }

/* ---- ficha del cliente ---- */
.fichanombre{
  margin:6px 0 0; font-size:30px; font-weight:800; letter-spacing:-.01em;
  color:var(--verde-900); text-transform:uppercase; line-height:1.1; overflow-wrap:anywhere;
}
.fichabotones{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }

.datos{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
}
.dato{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.dato__rot{
  font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--tinta-3); font-weight:800;
}
.dato__val{ font-size:15px; overflow-wrap:anywhere; }
.dato__val em{ color:var(--tinta-3); font-style:normal; font-weight:400; font-size:14px; }

.obsbox{
  margin-top:14px; padding-top:12px; border-top:1px solid var(--linea);
}
.obsbox p{ margin:4px 0 0; font-size:13px; color:var(--tinta-2); line-height:1.5; }

@media (max-width:600px){
  .clientes{ grid-template-columns:1fr; }
  .clicard__nombre{ font-size:21px; }
  .fichanombre{ font-size:26px; }
  .fichabotones .btn{ flex:1 1 100%; }
}


/* =========================================================
   SELECTOR DE CLIENTE DENTRO DEL PEDIDO
   El cliente se elige de la lista, no se vuelve a escribir. El nombre va
   grande y en mayusculas, como en la pantalla de CLIENTES.
   ========================================================= */
.selcli{
  border:1px solid var(--linea); border-radius:var(--radio-sm);
  background:var(--crema); padding:10px;
}
.selcli__busca{
  width:100%; font-size:16px; padding:11px 13px; border-radius:var(--radio-sm);
  border:1.5px solid var(--linea); background:var(--blanco); color:var(--tinta);
  font-family:var(--ff);
}
.selcli__busca:focus{ border-color:var(--verde-600); box-shadow:0 0 0 3px rgba(53,127,79,.15); outline:none; }

/* con 45 clientes, la lista tiene su propio scroll: si creciera para
   abajo, producto y cajas quedaban a media pantalla de distancia. */
.selcli__ops{
  display:grid; gap:6px; margin:8px 0;
  max-height:214px; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding-right:2px;
}
.selcli__op{
  display:flex; flex-direction:column; gap:2px; text-align:left; cursor:pointer;
  background:var(--papel); border:1px solid var(--linea);
  border-left:4px solid var(--verde-600); border-radius:var(--radio-sm);
  padding:10px 12px; min-height:52px; font-family:var(--ff);
}
.selcli__op:hover{ background:var(--verde-100); }
.selcli__opnom{
  font-size:16px; font-weight:800; color:var(--verde-900);
  text-transform:uppercase; line-height:1.15; overflow-wrap:anywhere;
}
.selcli__opsub{ font-size:12.5px; color:var(--tinta-2); }
.selcli__opsub em{ color:var(--tinta-3); font-style:normal; }
.selcli__nota{ margin:8px 2px; font-size:12.5px; color:var(--tinta-3); line-height:1.4; }
.selcli__nuevo{ width:100%; margin-top:2px; }

.selcli__elegido{
  display:flex; flex-direction:column; gap:3px;
  background:var(--papel); border:1px solid var(--linea);
  border-left:5px solid var(--naranja); border-radius:var(--radio-sm);
  padding:12px 14px;
}
.selcli__nombre{
  font-size:20px; font-weight:800; color:var(--verde-900);
  text-transform:uppercase; line-height:1.15; overflow-wrap:anywhere;
}
.selcli__sub{ font-size:13px; color:var(--tinta-2); }
.selcli__sub em{ color:var(--tinta-3); font-style:normal; }
.selcli__elegido .linkbtn{ align-self:flex-start; margin-top:4px; padding-left:0; }

/* el nombre del cliente en la tabla de pedidos abre su ficha */
.linkbtn--nombre{
  display:block; padding:0; font-size:15px; font-weight:800;
  color:var(--verde-900); text-transform:uppercase; text-align:left;
  text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere;
}

@media (max-width:600px){
  .selcli__opnom{ font-size:17px; }
  .selcli__nombre{ font-size:22px; }
}

/* el campo para escribir el proveedor a mano, debajo del buscador:
   Nancy no da de alta proveedores, asi que nunca se queda sin donde
   anotar quien trajo la mercaderia */
.selcli__libre{ display:block; margin-top:10px; }
.selcli__libre > span{
  display:block; font-size:12px; font-weight:700; color:var(--tinta-2);
  margin-bottom:5px; letter-spacing:.03em;
}
.selcli__libre input{
  width:100%; font-size:16px; padding:11px 13px; border-radius:var(--radio-sm);
  border:1.5px solid var(--linea); background:var(--blanco); color:var(--tinta);
  font-family:var(--ff);
}
.selcli__libre input:focus{
  border-color:var(--verde-600); box-shadow:0 0 0 3px rgba(53,127,79,.15); outline:none;
}


/* =========================================================
   REMITOS
   Una linea del remito es una tarjeta: en el celular, cuatro campos en fila
   no entran, y la cuenta de cada linea tiene que quedar a la vista mientras
   se carga el precio.
   ========================================================= */
.rlinea{
  border:1px solid var(--linea); border-left:4px solid var(--verde-600);
  border-radius:var(--radio-sm); background:var(--crema);
  padding:12px 14px; margin-bottom:12px;
}
.rlinea__cab{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px;
}
.rlinea__n{
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  background:var(--verde-700); color:#fff; font-size:13px; font-weight:800;
}
.rlinea__libre{ margin-top:6px; }
.rlinea .field{ margin-bottom:10px; }
.rlinea__total{
  border-top:1px solid var(--linea); padding-top:8px; font-size:13px;
  color:var(--tinta-2); text-align:right;
}
.rlinea__total strong{ font-size:16px; color:var(--verde-900); }

.remito__total{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--verde-900); color:#fff; border-radius:var(--radio-sm);
  padding:14px 16px; margin:14px 0;
}
.remito__total span{
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.85;
}
.remito__total strong{ font-size:22px; font-variant-numeric:tabular-nums; }

@media (max-width:600px){
  .remito__total{ flex-direction:column; align-items:flex-start; gap:4px; }
  .remito__total strong{ font-size:26px; }
}


/* =========================================================
   HORARIOS (pantalla de Guido)
   Se usa con el telefono en la mano y de a un dia: los nombres van grandes y
   en mayusculas, y cada tarjeta es un boton grande.
   ========================================================= */
.horarios{ display:grid; gap:10px; }
.horario{
  display:flex; flex-direction:column; gap:4px; text-align:left; cursor:pointer;
  background:var(--papel); border:1px solid var(--linea);
  border-left:6px solid var(--tinta-3); border-radius:var(--radio);
  padding:14px 16px; min-height:78px; box-shadow:var(--sombra);
  font-family:var(--ff); transition:transform .12s ease, box-shadow .12s ease;
}
.horario:hover{ transform:translateY(-2px); box-shadow:var(--sombra-alta); }
.horario--ok{ border-left-color:var(--verde-600); }
.horario--tarde{ border-left-color:var(--naranja); }
.horario--falta{ border-left-color:var(--rojo); }
.horario--neutro{ border-left-color:var(--verde-300); }

.horario__nombre{
  font-size:20px; font-weight:800; letter-spacing:.01em; color:var(--verde-900);
  text-transform:uppercase; line-height:1.15; overflow-wrap:anywhere;
}
.horario__datos{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; }
.horario__horas{ font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; }
.horario__total{ font-size:13.5px; color:var(--tinta-2); }
.horario__estado{ font-size:16px; font-weight:700; color:var(--tinta-2); }
.horario__falta{ font-size:15px; color:var(--tinta-3); }
.horario__pie{ font-size:12px; color:var(--tinta-3); }

/* el boton AHORA, pegado al campo de hora */
#hor-horas .field .btn--sm{ margin-top:6px; width:100%; }

/* en la planilla de Claudio, los dias que cargo otra persona */
.diachip.is-deotro{ position:relative; }
.diachip.is-deotro::after{
  content:''; position:absolute; top:5px; right:5px;
  width:6px; height:6px; border-radius:50%; background:var(--naranja);
}

@media (max-width:600px){
  .horario__nombre{ font-size:22px; }
  .horario__horas{ font-size:21px; }
}


/* el selector de dia de HORARIOS: flecha, fecha, flecha */
.diadia{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:end; }
.diadia .field{ min-width:0; }
.diadia .field input{ width:100%; min-width:0; }
/* El selector nativo de mes (input type="month") muestra el nombre del mes
   en minuscula por defecto; esto lo pone en mayuscula junto con el resto
   del encabezado de FIN DE MES. */
#mes-fecha, #finanzas-mes-fecha{ text-transform:uppercase; }
.diadia__flecha{
  height:48px; width:48px; min-width:40px; flex-shrink:0; border-radius:var(--radio-sm);
  border:1.5px solid var(--linea); background:var(--papel); color:var(--verde-900);
  font-size:26px; line-height:1; cursor:pointer; font-family:var(--ff);
}
.diadia__flecha:hover{ background:var(--verde-100); }
.diadia .field input{ text-align:center; }

/* ===== Reglas de presentismo ===== */
.regchips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.regchip{
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  padding:4px 9px; border-radius:99px; font-size:12px;
  background:var(--crema); border:1px solid var(--linea); color:var(--tinta-2);
}
.regchip b{ font-variant-numeric:tabular-nums; }
.regchip--mal{ background:var(--rojo-100); border-color:var(--rojo); color:var(--rojo); }
.regmotivos{ margin:6px 0 0; padding-left:18px; font-size:12.5px; color:var(--rojo); }
.regmotivos li{ margin:2px 0; }

/* ===== FIN DE MES en el celular: una tarjeta por empleado ===== */
.mescard{ background:var(--blanco); border:1px solid var(--linea);
          border-left:4px solid var(--verde-600); border-radius:var(--radio-sm);
          padding:13px 15px; margin-bottom:10px; }
.mescard__cab{ display:flex; align-items:center; justify-content:space-between;
               gap:10px; margin-bottom:4px; }
.mescard__monto{ font-weight:700; }
.mescard__datos{ font-size:12.5px; color:var(--tinta-2); margin-bottom:2px; }
.mescard--total{ border-left-color:var(--tinta-3); background:var(--crema-2); }

/* ===== PRODUCTOS Y PRECIOS: la tarjeta del celular ===== */
.preciocard{ background:var(--blanco); border:1px solid var(--linea);
             border-left:4px solid var(--verde-600); border-radius:var(--radio-sm);
             padding:13px 15px; margin-bottom:10px; }
.preciocard--off{ border-left-color:var(--linea); opacity:.72; }
.preciocard__cab{ display:flex; align-items:center; justify-content:space-between;
                   gap:10px; margin-bottom:2px; }
.preciocard__pres{ font-size:12.5px; color:var(--tinta-2); margin-bottom:4px; }
.preciocard__precio{ font-size:17px; font-weight:700; font-variant-numeric:tabular-nums;
                      margin-bottom:8px; }

.reglacard{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 0; border-bottom:1px solid var(--linea);
}
.reglacard:last-of-type{ border-bottom:0; }
.reglacard__texto{ flex:1; min-width:180px; display:flex; flex-direction:column; gap:2px; }
.reglacard__texto strong{ font-size:15px; }
.reglacard__acciones{ display:flex; gap:8px; flex-shrink:0; }
.reglacard--off .reglacard__texto strong{ color:var(--tinta-2); text-decoration:line-through; }

@media (max-width:520px){
  .reglacard__acciones{ width:100%; flex-wrap:wrap; }
  .reglacard__acciones .btn{ flex:1 1 90px; }
}

/* ===== Ficha y planilla de empleados ===== */

/* La misma informacion se dibuja dos veces: planilla en la compu, tarjetas en
   el celular. Es mas codigo, pero una tabla de ocho columnas en 390 px no se
   lee: se adivina. */
.solo-angosto{ display:none; }
@media (max-width:700px){
  .solo-ancho{ display:none; }
  .solo-angosto{ display:block; }
  .empcards.solo-angosto{ display:flex; }
}

.monochip{
  display:inline-block; padding:3px 9px; border-radius:99px;
  font-size:11.5px; font-weight:600; letter-spacing:.02em; white-space:nowrap;
  background:var(--crema); border:1px solid var(--linea); color:var(--tinta-2);
}
/* El importe va AL LADO de la etiqueta, no debajo: si va debajo, la fila del
   que tiene monotributo queda mas alta que las otras y la planilla se ve
   despareja. */
.monocelda{ display:flex; align-items:center; gap:8px; white-space:nowrap; }
.monocelda .t-sub{ display:inline; margin:0; }
.celda-horario{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.rowactions .linkbtn{ white-space:nowrap; }
.monochip--ok{ background:var(--verde-100); border-color:var(--verde); color:var(--verde); }
.monochip--pend{ background:var(--naranja-100); border-color:var(--naranja); color:var(--naranja); }

.empcards{ flex-direction:column; gap:10px; }
.empcard{
  display:flex; flex-direction:column; gap:3px; width:100%;
  padding:13px 15px; text-align:left; cursor:pointer;
  background:var(--blanco); border:1px solid var(--linea);
  border-left:4px solid var(--verde); border-radius:var(--radio-sm);
  font:inherit; color:inherit;
}
.empcard--off{ border-left-color:var(--linea); opacity:.72; }
.empcard__nombre{ font-weight:700; font-size:15px; }
.empcard__puesto{ font-size:12.5px; color:var(--tinta-2); }
.empcard__datos{ font-size:12.5px; color:var(--tinta-2); }
.empcard__pie{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:5px; }

/* --- la ficha --- */
.ficha__secc{ margin-top:18px; }
.ficha__datos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px 20px;
}
.ficha__valorhora{
  display:flex; flex-direction:column; gap:2px;
  padding:14px 16px; margin-bottom:14px;
  background:var(--verde-100); border:1px solid var(--verde); border-radius:var(--radio-sm);
}
.ficha__valorhora span{ font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--verde); }
.ficha__valorhora strong{ font-size:26px; line-height:1.1; }
.formsecc{
  margin:18px 0 0; padding-top:14px; border-top:1px solid var(--linea);
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-2);
}
.formsecc:first-of-type{ margin-top:0; padding-top:0; border-top:0; }

/* ===== Asistencia de la semana (pantalla de Guido) ===== */
.diadia__texto{ display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center; }
.diadia__texto strong{ font-size:15px; }

.diahor{ margin-top:16px; }
.diahor--hoy .section__title{ color:var(--verde); }
.diahor__cuenta{ font-weight:600; color:var(--tinta-2); }
.is-pendiente td{ color:var(--tinta-2); }

.horcards{ flex-direction:column; gap:8px; }
@media (max-width:700px){ .horcards.solo-angosto{ display:flex; } }
.horcard{
  display:flex; flex-direction:column; gap:8px;
  padding:13px 14px; background:var(--blanco);
  border:1px solid var(--linea); border-left:4px solid var(--verde);
  border-radius:var(--radio-sm);
}
.horcard--vacia{ border-left-color:var(--linea); }
.horcard__arriba{ display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.horcard__nombre{ font-weight:700; font-size:16px; }
/* Entrada y salida en dos bloques que ocupan todo el ancho de la tarjeta,
   no un renglon de texto chico: se leen de lejos, sin entrecerrar el ojo. */
.horcard__horas{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.horcard__hora{
  display:flex; flex-direction:column; gap:2px;
  background:var(--crema); border-radius:8px; padding:7px 10px;
}
.horcard__hora span{ font-size:10.5px; font-weight:700; letter-spacing:.05em;
                      text-transform:uppercase; color:var(--tinta-3); }
.horcard__hora strong{ font-size:17px; font-variant-numeric:tabular-nums; }
.horcard .rowactions{ margin-top:2px; justify-content:flex-start; gap:8px; }
/* El boton OK es la accion principal: ocupa el renglon entero solo, y
   Cargar/Editar/Borrar quedan chicos debajo, no apretados contra el borde. */
.horcard .rowactions .btn--primary{ flex:1 1 100%; }

.linkbtn--rojo{ color:var(--rojo); }

/* ============================================================
   PREFERENCIAS DE CADA USUARIO
   ------------------------------------------------------------
   Todo el diseno usa variables de color, asi que el modo oscuro es
   redefinirlas: no hay una sola regla duplicada. Si manana se agrega una
   pantalla nueva, sale en oscuro sola siempre que use las variables.

   El tamano va con `zoom` en el documento. Suena burdo, pero es lo correcto
   aca: el CSS esta escrito en px, asi que cambiar el font-size de la raiz
   agrandaria solo algunos textos y dejaria los botones, los espacios y las
   tarjetas igual. `zoom` agranda TODO en la misma proporcion, que es lo que
   pide alguien que no ve bien. Probado: no rompe el menu fijo, la barra de
   arriba ni la de abajo, en celular y en computadora.
   ============================================================ */
:root[data-tema="oscuro"]{
  /* Los dos verdes oscuros se usan 38 veces como TEXTO y 10 como fondo. En
     modo oscuro pesa mas el texto, asi que se dan vuelta: pasan a ser verdes
     claros, que es lo que se lee sobre fondo oscuro. Los diez fondos que
     necesitan seguir oscuros se corrigen abajo, uno por uno. Ir al reves
     -- dejarlos oscuros y arreglar 38 textos -- era perseguir selectores para
     siempre: cada pantalla nueva traia uno nuevo. */
  --verde-900:#9FD9B5;
  --verde-800:#8FD3A8;
  --verde-fondo:#12291C;
  --verde-fondo-2:#1B3D29;
  --verde-700:#2E7A4B;
  --verde-600:#3E9460;
  --verde-300:#6FA383;
  --verde-100:#1B3A28;
  --crema:#141713;
  --crema-2:#1D211C;
  --papel:#1A1E19;
  --blanco:#22271F;
  --naranja:#E89A56;
  --naranja-100:#3A2A18;
  --rojo:#E3776A;
  --rojo-100:#3A201D;
  --tinta:#E8E9E4;
  --tinta-2:#AAB2A6;
  --tinta-3:#7E877B;
  --linea:#333A31;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
  --sombra-alta:0 12px 40px rgba(0,0,0,.55);
}
/* Las capas oscuras de los modales sobre un fondo ya oscuro tapaban todo. */
:root[data-tema="oscuro"] .modal{ background:rgba(0,0,0,.66); }
:root[data-tema="oscuro"] .scrim{ background:rgba(0,0,0,.6); }
/* Los fondos que SI tienen que seguir oscuros, ahora que los verdes se dieron
   vuelta. Son los diez. */
:root[data-tema="oscuro"] .topbar{
  background:linear-gradient(100deg,var(--verde-fondo),var(--verde-fondo-2));
}
:root[data-tema="oscuro"] .navitem.is-active,
:root[data-tema="oscuro"] .seg.is-active,
:root[data-tema="oscuro"] .badge--dark{ background:var(--verde-fondo-2); color:#EAF4EE; }
:root[data-tema="oscuro"] .toast,
:root[data-tema="oscuro"] .remito__total{ background:var(--verde-fondo-2); color:#EAF4EE; }
:root[data-tema="oscuro"] .conteo-input.is-ok{ color:var(--verde-900); }
:root[data-tema="oscuro"] .bg-verde{
  background:linear-gradient(160deg,var(--verde-600),var(--verde-fondo-2));
}
:root[data-tema="oscuro"] .bg-oscuro{
  background:linear-gradient(160deg,#2B332C,var(--verde-fondo));
}
:root[data-tema="oscuro"] .rolecard--jefe .rolecard__icon{
  background:linear-gradient(160deg,var(--verde-700),var(--verde-fondo));
}
:root[data-tema="oscuro"] .badge--low,
:root[data-tema="oscuro"] .badge--owner-ff,
:root[data-tema="oscuro"] .feeditem__ico.is-move{ color:var(--naranja); }
:root[data-tema="oscuro"] .feeditem__ico{ color:var(--tinta-2); }
:root[data-tema="oscuro"] .badge--neutral{ color:var(--tinta); }
:root[data-tema="oscuro"] .btn--orange{ color:#1A1206; }
:root[data-tema="oscuro"] .monochip--ok{ color:#8FD3A8; }
:root[data-tema="oscuro"] .tardchip b{ color:var(--naranja); }

/* El logo sobre fondo oscuro pierde contraste en los bordes. */
:root[data-tema="oscuro"] .topbar__logo,
:root[data-tema="oscuro"] .gate__logo,
:root[data-tema="oscuro"] .loginbox__logo{ filter:brightness(1.08); }

/* La hoja impresa NO cambia: el papel es blanco siempre. */
@media print{
  :root[data-tema="oscuro"]{ color-scheme:light; }
}

/* --- la pantalla de preferencias --- */
.prefgrupo{ margin-top:16px; }
.prefgrupo:first-of-type{ margin-top:0; }
.prefgrupo__tit{
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--tinta-2); margin-bottom:8px;
}
.prefopts{ display:flex; flex-wrap:wrap; gap:8px; }
.prefopt{
  flex:1 1 130px; min-width:120px;
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:12px 14px; cursor:pointer; text-align:left; font:inherit; color:inherit;
  background:var(--blanco); border:1.5px solid var(--linea); border-radius:var(--radio-sm);
}
.prefopt strong{ font-size:14px; }
.prefopt span{ font-size:12px; color:var(--tinta-2); }
.prefopt.is-active{ border-color:var(--verde-700); background:var(--verde-100); }
.prefopt.is-active strong{ color:var(--verde-700); }


/* --- MONOTRIBUTO: la barra del mes y las tarjetas del celular --- */
/* La barra queda en una sola linea en la computadora y se parte sola en el
   celular, donde el nombre del mes ya ocupa casi todo el ancho. */
.periodonav{ display:flex; align-items:center; justify-content:space-between;
             gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.periodonav__mes{ font-size:17px; letter-spacing:.5px; flex:1; text-align:center;
                  min-width:160px; }
/* Las tarjetas NO llevan display propio: se muestran y se esconden con
   `.solo-angosto`, que ya decide eso mas arriba. Ponerle un display aca las
   dejaba a la vista tambien en la computadora. */
.monocard{ background:var(--blanco); border:1px solid var(--linea);
           border-left:4px solid var(--verde-600); border-radius:var(--radio-sm);
           padding:13px 15px; margin-bottom:10px; }
.monocard__cab{ display:flex; align-items:center; justify-content:space-between;
                gap:10px; margin-bottom:6px; }
.monocard__datos{ font-size:12.5px; color:var(--tinta-2); margin-bottom:10px; }


/* --- REMITO: donde se entrega --- */
.entrega{ border:1px solid var(--linea); border-left:4px solid var(--verde-600);
          border-radius:var(--radio-sm); padding:12px 14px; background:var(--blanco);
          display:flex; flex-direction:column; gap:4px; }
/* Naranja cuando NO es la de siempre: es la senal de que hay que mirar el
   renglon antes de cargar el camion. */
.entrega--otra{ border-left-color:var(--naranja); background:var(--naranja-100); }
.entrega__tit{ font-size:11px; letter-spacing:.6px; font-weight:700; color:var(--tinta-2); }
.entrega--otra .entrega__tit{ color:var(--naranja); }
.entrega__dir{ font-size:14.5px; }
.entrega__pie{ font-size:12px; color:var(--tinta-2); }
.entrega .rowactions{ margin-top:4px; }