/* ==========================================================================
   Reporte Diario — hoja de estilos
   Montserrat · títulos centrados · paleta sobria de herramienta financiera
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root{
  --fondo:       #f2f1ee;
  --panel:       #ffffff;
  --panel-alt:   #f8f7f4;
  --barra:       #1c2b33;

  --tinta:       #1f2225;
  --tinta-media: #575c61;
  --tinta-suave: #878c91;

  --linea:       #dedbd5;
  --linea-fuerte:#c2beb6;

  --acento:      #17505f;
  --acento-claro:#e2eef1;
  --acento-hover:#0f3d49;

  --ok:          #40663a;  --ok-fondo:     #e9f0e6;
  --aviso:       #8f6c18;  --aviso-fondo:  #f7efd8;
  --mal:         #94382c;  --mal-fondo:    #f9e7e3;
  --neutro:      #6d7175;  --neutro-fondo: #eeecE8;

  --radio: 3px;
  --sombra: 0 1px 2px rgba(31,34,37,.07);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:'Montserrat','Segoe UI',Tahoma,sans-serif;
  font-size:13.5px; line-height:1.5;
  color:var(--tinta); background:var(--fondo);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ margin:0; font-weight:600; letter-spacing:-.012em; }

/* ---------- aviso ---------- */
.franja{
  background:#2f2a26; color:#e6e0d6;
  font-size:11.5px; text-align:center; padding:5px 12px; letter-spacing:.02em;
}
.franja strong{ color:#fff; }

/* ---------- barra ---------- */
.barra{
  display:flex; align-items:center; gap:14px;
  background:#fff; border-bottom:1px solid var(--linea);
  height:54px; padding:0 22px; position:sticky; top:0; z-index:30;
}
.barra-titulo{
  font-size:14px; font-weight:600; color:var(--tinta); letter-spacing:-.01em;
}
.barra-der{ margin-left:auto; display:flex; align-items:center; gap:10px; }


select.sel-barra, select.sel-idioma{
  height:31px; padding:0 9px; background:#fff; color:var(--tinta);
  border:1px solid var(--linea-fuerte); border-radius:var(--radio);
  font-family:inherit; font-size:12px; cursor:pointer;
}
select.sel-barra:hover, select.sel-idioma:hover{ border-color:var(--acento); }

/* ---------- estructura ---------- */
.principal{ max-width:1180px; margin:0 auto; padding:24px 22px 70px; width:100%; }

.cabecera{ text-align:center; margin-bottom:22px; }
.cabecera h1{ font-size:22px; font-weight:700; }
.cabecera .sub{ font-size:12.5px; color:var(--tinta-media); margin-top:4px; }
.cabecera::after{
  content:''; display:block; width:48px; height:2px;
  background:var(--acento); margin:12px auto 0; opacity:.55;
}

.titulo-seccion{
  text-align:center; font-size:13.5px; font-weight:600;
  margin:28px 0 13px; padding-bottom:8px; border-bottom:1px solid var(--linea);
}

/* ---------- botones ---------- */
.boton{
  display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 13px;
  background:var(--panel); color:var(--tinta);
  border:1px solid var(--linea-fuerte); border-radius:var(--radio);
  font-family:inherit; font-size:12.5px; font-weight:500; cursor:pointer;
}
.boton:hover{ background:var(--panel-alt); border-color:var(--tinta-suave); }
.boton.primario{ background:var(--acento); color:#fff; border-color:var(--acento); font-weight:600; }
.boton.primario:hover{ background:var(--acento-hover); }
.boton.chico{ height:27px; padding:0 10px; font-size:11.5px; }
.boton:disabled{ opacity:.45; cursor:not-allowed; }

.acciones{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--linea);
}
.acciones .sep{ flex:1; }

select.filtro, input.filtro{
  height:32px; padding:0 9px; background:var(--panel); color:var(--tinta);
  border:1px solid var(--linea-fuerte); border-radius:var(--radio);
  font-family:inherit; font-size:12.5px;
}
select.filtro:focus, input.filtro:focus{ outline:none; border-color:var(--acento); }

/* ---------- tarjetas de número ---------- */
.tarjetas{ display:grid; gap:13px; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); }
.tarjeta{
  background:var(--panel); border:1px solid var(--linea);
  border-top:3px solid var(--linea-fuerte);
  border-radius:var(--radio); padding:15px 16px; box-shadow:var(--sombra);
}
.tarjeta.acento{ border-top-color:var(--acento); }
.tarjeta.ok{ border-top-color:var(--ok); }
.tarjeta.aviso{ border-top-color:var(--aviso); }
.tarjeta.mal{ border-top-color:var(--mal); }

.t-rotulo{
  font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--tinta-suave);
}
.t-numero{
  font-size:27px; font-weight:700; letter-spacing:-.025em;
  margin-top:7px; font-variant-numeric:tabular-nums; line-height:1.1;
}
.t-numero.grande{ font-size:33px; }
.t-numero .mon{ font-size:15px; font-weight:600; color:var(--tinta-suave); margin-right:3px; }
.t-numero.ok{ color:var(--ok); }
.t-numero.mal{ color:var(--mal); }
.t-numero.aviso{ color:var(--aviso); }
.t-pie{ font-size:11.5px; color:var(--tinta-media); margin-top:7px; }
.t-pie b{ color:var(--tinta); }

/* ---------- tablas ---------- */
.marco{
  background:var(--panel); border:1px solid var(--linea);
  border-radius:var(--radio); overflow:auto; box-shadow:var(--sombra);
}
table{ width:100%; border-collapse:collapse; font-size:12.5px; }
thead th{
  position:sticky; top:0; background:var(--panel-alt); text-align:left;
  padding:9px 11px; font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--tinta-media);
  border-bottom:1.5px solid var(--linea-fuerte); white-space:nowrap;
}
tbody td{ padding:8px 11px; border-bottom:1px solid var(--linea); }
tbody tr:hover{ background:var(--panel-alt); }
td.num, th.num{ text-align:right; font-variant-numeric:tabular-nums; }
tbody tr.evento td{ background:#fbf7ec; }
tbody tr.evento:hover td{ background:#f7f1e2; }
tr.total td{ font-weight:700; border-top:1.5px solid var(--linea-fuerte); background:var(--panel-alt); }
.link{ color:var(--acento); cursor:pointer; font-weight:500; }
.link:hover{ text-decoration:underline; }

/* ---------- etiquetas ---------- */
.eti{
  display:inline-block; padding:2px 8px; border-radius:11px;
  font-size:10.5px; font-weight:700; letter-spacing:.02em;
}
.eti-ok{ background:var(--ok-fondo); color:var(--ok); }
.eti-aviso{ background:var(--aviso-fondo); color:var(--aviso); }
.eti-mal{ background:var(--mal-fondo); color:var(--mal); }
.eti-neutro{ background:var(--neutro-fondo); color:var(--neutro); }
.eti-acento{ background:var(--acento-claro); color:var(--acento); }

/* ---------- cajas de aviso ---------- */
.caja{
  padding:11px 14px; border-radius:var(--radio); font-size:12.5px;
  margin-bottom:15px; border-left:3px solid;
}
.caja.gris{ background:var(--panel-alt); border-color:var(--linea-fuerte); color:var(--tinta-media); }
.caja.ok{ background:var(--ok-fondo); border-color:var(--ok); color:#33512e; }
.caja.aviso{ background:var(--aviso-fondo); border-color:var(--aviso); color:#6f5313; }
.caja.mal{ background:var(--mal-fondo); border-color:var(--mal); color:#772d24; }

/* ---------- explicación del cálculo ---------- */
.calculo{
  background:var(--panel); border:1px solid var(--linea); border-radius:var(--radio);
  padding:16px 18px; box-shadow:var(--sombra); font-size:12.5px;
}
.calculo-linea{
  display:flex; gap:12px; align-items:baseline;
  padding:6px 0; border-bottom:1px dotted var(--linea);
}
.calculo-linea:last-child{ border-bottom:none; }
.calculo-desc{ flex:1; }
.calculo-desc small{ display:block; color:var(--tinta-suave); font-size:11px; margin-top:1px; }
.calculo-monto{ font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
.calculo-total{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-top:10px; padding-top:11px; border-top:1.5px solid var(--linea-fuerte);
  font-size:15px; font-weight:700;
}

/* ---------- barra proporcional ---------- */
.mini{ display:flex; height:16px; border-radius:2px; overflow:hidden; background:var(--neutro-fondo); }
.mini span{ display:block; height:100%; }

/* ---------- calendario del mes ---------- */
.calendario{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-dow{
  text-align:center; font-size:10px; font-weight:700; color:var(--tinta-suave);
  text-transform:uppercase; letter-spacing:.05em; padding:4px 0;
}
.cal-dia{
  aspect-ratio:1/.78; border:1px solid var(--linea); border-radius:2px;
  background:var(--panel); padding:5px 6px; font-size:11px; cursor:pointer;
  display:flex; flex-direction:column; justify-content:space-between;
}
.cal-dia:hover{ border-color:var(--acento); }
.cal-dia.vacio{ background:transparent; border:none; cursor:default; }
.cal-dia.sin{ background:repeating-linear-gradient(135deg,#f6f4f1,#f6f4f1 4px,#efece7 4px,#efece7 8px); color:var(--tinta-suave); }
.cal-dia.evento{ background:#fbf5e8; border-color:#e0cfa8; }
.cal-dia.hoy{ border:2px solid var(--acento); }
.cal-num{ font-weight:700; color:var(--tinta-media); }
.cal-monto{ font-size:10.5px; font-variant-numeric:tabular-nums; font-weight:600; }

/* ---------- zona de carga ---------- */
.zona{
  border:2px dashed var(--linea-fuerte); border-radius:var(--radio);
  padding:40px 22px; text-align:center; background:var(--panel); cursor:pointer;
}
.zona:hover,.zona.encima{ border-color:var(--acento); background:var(--acento-claro); }
.zona .icono{ font-size:30px; color:var(--tinta-suave); margin-bottom:10px; }
.zona h3{ font-size:14.5px; margin-bottom:5px; }
.zona p{ font-size:12.5px; color:var(--tinta-media); margin:0; }

.progreso{ height:5px; background:var(--neutro-fondo); border-radius:3px; overflow:hidden; margin:14px 0; }
.progreso span{ display:block; height:100%; background:var(--acento); transition:width .2s; }

/* ---------- comentarios ---------- */
.coment{
  background:var(--panel); border:1px solid var(--linea); border-left:3px solid var(--acento);
  border-radius:var(--radio); padding:12px 14px; margin-bottom:9px; box-shadow:var(--sombra);
}
.coment-alto{
  display:flex; justify-content:space-between; gap:10px;
  font-size:11px; color:var(--tinta-suave); margin-bottom:6px;
}
.coment-texto{ font-size:12.5px; line-height:1.55; }

/* ---------- presentación ---------- */
.hoja{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:30px 34px; box-shadow:0 2px 10px rgba(31,34,37,.09); max-width:900px; margin:0 auto;
}
.hoja-alto{ text-align:center; border-bottom:2px solid var(--barra); padding-bottom:14px; margin-bottom:20px; }
.hoja-alto h2{ font-size:19px; letter-spacing:-.02em; }
.hoja-alto .fecha{ font-size:12.5px; color:var(--tinta-media); margin-top:4px; }
.hoja-alto .hotel{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.13em;
  color:var(--tinta-suave); margin-bottom:7px;
}
.hoja-resumen{
  background:var(--panel-alt); border-left:3px solid var(--acento);
  padding:12px 15px; font-size:13px; margin-bottom:20px; line-height:1.55;
}
.hoja-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
.hoja-kpi{ text-align:center; padding:12px 8px; border:1px solid var(--linea); border-radius:2px; }
.hoja-kpi .rot{ font-size:9.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--tinta-suave); }
.hoja-kpi .val{ font-size:19px; font-weight:700; margin-top:5px; font-variant-numeric:tabular-nums; }
.hoja-kpi .comp{ font-size:10.5px; margin-top:3px; }
.hoja-nota{
  font-size:10.5px; color:var(--tinta-suave); border-top:1px solid var(--linea);
  padding-top:11px; margin-top:20px; line-height:1.5;
}
/* la tabla scrollea adentro de su caja; la página nunca se va para el costado */
.hoja-tabla{ overflow-x:auto; margin-bottom:18px; }
.hoja-tabla table{ min-width:520px; margin-bottom:0; }

/* ---------- vacío ---------- */
.vacio{
  text-align:center; padding:44px 20px; color:var(--tinta-suave);
  background:var(--panel); border:1px dashed var(--linea-fuerte); border-radius:var(--radio);
}
.vacio h3{ font-size:14px; color:var(--tinta-media); margin-bottom:6px; }
.vacio p{ font-size:12.5px; max-width:420px; margin:0 auto 10px; }

/* ---------- campos ---------- */
.campo{ margin-bottom:14px; }
.campo label{ display:block; font-size:11.5px; font-weight:600; color:var(--tinta-media); margin-bottom:5px; }
.campo input, .campo select{
  width:100%; padding:8px 10px; border:1px solid var(--linea-fuerte);
  border-radius:var(--radio); font-family:inherit; font-size:13px;
}
.campo input:focus, .campo select:focus{ outline:none; border-color:var(--acento); }
.campo .pista{ font-size:11px; color:var(--tinta-suave); margin-top:4px; }

/* ---------- avisos flotantes ---------- */
.flotantes{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:90; display:flex; flex-direction:column; gap:7px; align-items:center; }
.flotante{
  background:var(--barra); color:#e8ebec; padding:10px 18px; border-radius:var(--radio);
  font-size:12.5px; font-weight:500; box-shadow:0 3px 12px rgba(31,34,37,.25);
}
.flotante.ok{ background:#3a5c34; }
.flotante.mal{ background:#8a3529; }

/* ---------- pantallas chicas ---------- */
@media (max-width:820px){
  .tabs{ overflow-x:auto; }
  .tabs a{ padding:7px 10px; font-size:12px; }
  .marca span{ display:none; }
  .principal{ padding:16px 13px 60px; }
  .hoja{ padding:20px 16px; }
  .hoja-kpis{ grid-template-columns:repeat(2,1fr); }
  .cabecera h1{ font-size:18px; }
}

/* ---------- impresión ---------- */
@media print{
  @page{ margin:14mm; }
  .franja,.barra,.acciones,.no-imprimir{ display:none !important; }
  .principal{ padding:0; max-width:none; }
  body{ background:#fff; font-size:11.5px; }
  .hoja{ box-shadow:none; border:none; padding:0; max-width:none; }
  .marco,.tarjeta,.calculo{ box-shadow:none; break-inside:avoid; }
  .hoja-kpis{ break-inside:avoid; }
}

/* ---------- semáforo del calendario ---------- */
.cal-dia.sem-verde{ background:#eef4ea; border-color:#bcd2b2; }
.cal-dia.sem-rojo{ background:#fbeeeb; border-color:#e3bcb4; }
.cal-dia.sem-amarillo{ background:#fdf6e0; border-color:#e0cb92; }
.cal-dia.sem-sin{ background:var(--panel); }
.cal-dia.evento{ box-shadow:inset 0 0 0 1px #d8bd7e; }
.cal-pct{ font-size:9.5px; color:var(--tinta-suave); font-variant-numeric:tabular-nums; }
.cal-dia.sem-verde .cal-pct{ color:var(--ok); font-weight:600; }
.cal-dia.sem-rojo .cal-pct{ color:var(--mal); font-weight:600; }
.cal-dia.sem-amarillo .cal-pct{ color:var(--aviso); font-weight:600; }

.punto{
  display:inline-block; width:11px; height:11px; border-radius:2px;
  border:1px solid var(--linea-fuerte); vertical-align:-1px; margin-right:3px;
}
.punto.sem-verde{ background:#eef4ea; border-color:#bcd2b2; }
.punto.sem-rojo{ background:#fbeeeb; border-color:#e3bcb4; }
.punto.sem-amarillo{ background:#fdf6e0; border-color:#e0cb92; }
.punto.sem-sin{ background:repeating-linear-gradient(135deg,#f6f4f1,#f6f4f1 3px,#efece7 3px,#efece7 6px); }

@media print{
  .cal-dia.sem-verde{ background:#eef4ea !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .cal-dia.sem-rojo{ background:#fbeeeb !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .cal-dia.sem-amarillo{ background:#fdf6e0 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* ---------- grilla de carga ---------- */
.grilla input.celda, .grilla select.celda,
table input.celda, table select.celda{
  width:100%; min-width:74px; padding:5px 7px; text-align:right;
  border:1px solid var(--linea); border-radius:2px;
  font-family:inherit; font-size:12.5px; font-variant-numeric:tabular-nums;
  background:var(--panel); color:var(--tinta);
}
table input.celda:focus, table select.celda:focus{
  outline:none; border-color:var(--acento);
  box-shadow:0 0 0 2px var(--acento-claro); background:#fff;
}
table input.celda::placeholder{ color:#c9c5bd; font-style:italic; }
table input.celda[type=time]{ text-align:center; min-width:88px; }
table select.celda{ text-align:left; }
td.calc{ background:var(--panel-alt); font-weight:600; color:var(--tinta-media); }
.grilla tbody td{ padding:5px 7px; }
.grilla tbody tr:hover{ background:transparent; }
/* Chrome pone flechitas en los number: molestan al tabular */
table input.celda[type=number]::-webkit-outer-spin-button,
table input.celda[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
table input.celda[type=number]{ -moz-appearance:textfield; }

/* ---------- carga rápida ---------- */
table input.celda.sospechoso{ border-color:var(--aviso); background:#fdf8e8; }

/* ==========================================================================
   Arreglos de estructura
   Los botones se partían en dos líneas y se salían de la celda; las tablas
   con muchas columnas quedaban apretadas.
   ========================================================================== */

/* Un botón nunca se parte al medio */
.boton, .boton.chico{ white-space:nowrap; flex-shrink:0; }

/* Celdas con más de un botón: que queden en fila y con aire */
td .acciones-celda{
  display:flex; gap:6px; align-items:center; justify-content:flex-end;
  flex-wrap:nowrap;
}

/* Tablas anchas: ancho mínimo y scroll propio en vez de aplastarse */
.marco{ max-width:100%; }
.marco table{ min-width:100%; }
.tabla-ancha table{ min-width:860px; }
.tabla-muy-ancha table{ min-width:1040px; }

/* Aire entre columnas: antes quedaban pegadas */
thead th, tbody td{ padding-left:12px; padding-right:12px; }
thead th:first-child, tbody td:first-child{ padding-left:14px; }
thead th:last-child,  tbody td:last-child{ padding-right:14px; }

/* Los casilleros de la tabla no se estiran ni se aplastan */
table input.celda{ min-width:88px; max-width:150px; }
table select.celda{ min-width:130px; max-width:190px; }
td .celda + .celda{ margin-left:6px; }

/* Filas más altas donde hay campos: antes se tocaban entre sí */
tbody tr:has(input.celda) td,
tbody tr:has(select.celda) td{ padding-top:8px; padding-bottom:8px; }

/* Bloque de configuración: que no se amontone en pantallas medianas */
.config-fila{
  display:flex; gap:20px; flex-wrap:wrap; align-items:flex-end;
}
.config-fila .campo{ margin:0; }
.config-fila .campo.ancho{ flex:1 1 240px; min-width:200px; }
.config-fila .campo.angosto{ flex:0 0 150px; }

/* Separación entre secciones: estaban muy juntas */
.titulo-seccion{ margin-top:34px; }
.titulo-seccion:first-child{ margin-top:8px; }
.marco + .marco{ margin-top:14px; }
.marco + .caja, .caja + .marco{ margin-top:14px; }
.tarjetas + .titulo-seccion{ margin-top:30px; }

/* Barra de pestañas: que no se corte ni se superponga */
.barra{ gap:12px; }
.barra-der{ flex-shrink:0; }

/* Etiquetas de estado: que no se partan */
.eti{ white-space:nowrap; }

/* Pie de las tarjetas: aire entre el número y el texto */
.t-pie{ line-height:1.45; }

@media (max-width:820px){
  thead th, tbody td{ padding-left:9px; padding-right:9px; }
  .config-fila{ gap:13px; }
  .config-fila .campo.angosto{ flex:1 1 130px; }
  .titulo-seccion{ margin-top:26px; }
}

/* La ultima pestana quedaba cortada al hacer scroll */
.tabs{ padding-right:10px; }
.tabs a:last-child{ margin-right:6px; }

/* ---------- WhatsApp ---------- */
.boton.wa{
  background:#1f7a4d; color:#fff; border-color:#1f7a4d; font-weight:600;
}
.boton.wa:hover{ background:#186139; border-color:#186139; }
.vista-wa{ padding:16px 18px; background:#eef2ec; }
.vista-wa pre{
  white-space:pre-wrap; font-family:inherit; font-size:12.5px;
  line-height:1.6; margin:0; color:var(--tinta);
}

/* ---------- staff en la presentación ---------- */
.hoja-seccion{ margin-top:20px; }
.hoja-titulo{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--tinta-media); margin-bottom:9px;
  padding-bottom:5px; border-bottom:1px solid var(--linea);
}
table.hoja-staff{ width:100%; border-collapse:collapse; margin-bottom:12px; font-size:11.5px; }
table.hoja-staff th.area{
  text-align:left; padding:6px 0 4px; font-size:12px; font-weight:700;
  color:var(--tinta); border-bottom:1px solid var(--linea-fuerte); text-transform:none; letter-spacing:0;
}
table.hoja-staff th.area span{ font-weight:400; color:var(--tinta-media); font-size:11px; }
table.hoja-staff thead tr:last-child th{
  font-size:9.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--tinta-suave); padding:4px 6px; border-bottom:1px solid var(--linea);
  background:transparent; position:static;
}
table.hoja-staff td{ padding:3px 6px; border-bottom:1px solid #f0eeea; }
table.hoja-staff td.hora{ color:var(--tinta-media); font-variant-numeric:tabular-nums; }
table.hoja-staff td.hora .desc{ color:var(--tinta-suave); font-size:10px; }
table.hoja-staff td.num{ text-align:right; font-variant-numeric:tabular-nums; }
table.hoja-staff .rec{ color:var(--aviso); font-weight:700; margin-left:2px; }
.hoja-staff-total{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  padding:8px 6px; border-top:1.5px solid var(--linea-fuerte);
  font-size:12px;
}

@media print{
  table.hoja-staff{ break-inside:avoid; }
  .hoja-seccion{ break-inside:avoid; }
}


/* ---------- quién es casual ---------- */
.chip-casual{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border:1px solid var(--linea-fuerte); border-radius:20px;
  font-size:12.5px; cursor:pointer; background:#fff; user-select:none;
}
.chip-casual:hover{ border-color:var(--acento); }
.chip-casual.puesto{
  background:var(--acento); border-color:var(--acento); color:#fff; font-weight:600;
}
.chip-casual input{ margin:0; cursor:pointer; }

/* ---------- que nada desborde en el teléfono ----------
   Las tablas anchas se desplazan dentro de su propio recuadro, en vez de
   estirar la página entera y dejar todo corrido. */
@media (max-width: 640px){
  .hoja-seccion{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table.hoja-staff{ min-width:330px; }
  .calendario{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .hoja-staff-total{ flex-direction:column; gap:4px; }
}

/* ==========================================================================
   Barra lateral

   Trece pantallas en una fila arriba no entran y no dicen nada del orden del
   trabajo. Al costado entran todas, agrupadas por el momento del día en que
   se usan. Se puede achicar a solo íconos, y en el teléfono se abre encima.
   ========================================================================== */

.app{ display:flex; min-height:100vh; align-items:stretch; }
.cuerpo{ flex:1; min-width:0; display:flex; flex-direction:column; }

.lateral{
  width:236px; flex-shrink:0;
  background:var(--barra); color:#c4d2d8;
  display:flex; flex-direction:column;
  padding-bottom:20px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
  transition:width .16s ease;
  scrollbar-width:thin; scrollbar-color:#3a5058 transparent;
}
.lateral::-webkit-scrollbar{ width:5px; }
.lateral::-webkit-scrollbar-thumb{ background:#3a5058; border-radius:3px; }

/* ---------- cabecera de la barra ---------- */
.lat-cabeza{
  display:flex; align-items:center; gap:10px;
  height:54px; padding:0 12px 0 16px; flex-shrink:0;
  border-bottom:1px solid rgba(255,255,255,.07);
  position:sticky; top:0; background:var(--barra); z-index:2;
}
.lat-marca{ display:flex; align-items:center; gap:9px; min-width:0; }
.lat-logo{
  width:26px; height:26px; flex-shrink:0; border-radius:6px;
  background:var(--acento); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700;
}
.lat-nombre{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.lat-nombre b{ font-size:13px; font-weight:700; color:#fff; white-space:nowrap; }
.lat-nombre em{ font-size:10.5px; font-style:normal; color:#8fa3ab; white-space:nowrap; }

.lat-plegar{
  margin-left:auto; flex-shrink:0;
  width:29px; height:29px; padding:0; border:none; border-radius:6px;
  background:transparent; color:#8fa3ab; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.lat-plegar svg{ width:16px; height:16px; }
.lat-plegar:hover{ background:#263a44; color:#e8ebec; }

/* ---------- grupos ---------- */
.lat-grupo{ padding:0 9px; margin-top:15px; }
.lat-titulo{
  display:flex; align-items:center; width:100%;
  padding:4px 7px 5px; border:none; background:transparent; cursor:pointer;
  font-family:inherit; font-size:9.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.09em; color:#7d919a;
  text-align:left;
}
.lat-titulo:hover{ color:#b6c6cd; }
.lat-titulo svg{
  width:13px; height:13px; margin-left:auto; flex-shrink:0;
  transition:transform .16s ease;
}
.lat-grupo.cerrado .lat-titulo svg{ transform:rotate(-90deg); }
.lat-grupo.cerrado .lat-items{ display:none; }

.lat-items{ display:flex; flex-direction:column; gap:1px; margin-top:2px; }
.lat-item{
  display:flex; align-items:center; gap:10px;
  padding:7px 9px; border-radius:6px;
  color:#b6c6cd; text-decoration:none;
  font-size:12.5px; font-weight:500; line-height:1.3;
}
.lat-item svg{ width:16px; height:16px; flex-shrink:0; opacity:.72; }
.lat-item span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lat-item:hover{ background:#263a44; color:#e8ebec; }
.lat-item:hover svg{ opacity:1; }
.lat-item.activo{
  background:var(--acento); color:#fff; font-weight:600;
}
.lat-item.activo svg{ opacity:1; }

/* ---------- achicada a solo íconos ---------- */
.lateral.mini{ width:60px; }
/* Achicada queda solo el botón: si se escondiera, no habría con qué
   volver a abrirla. */
.lateral.mini .lat-marca{ display:none; }
.lateral.mini .lat-cabeza{ padding:0; justify-content:center; }
.lateral.mini .lat-plegar{ margin:0; }
.lateral.mini .lat-grupo{ padding:0 8px; margin-top:9px; }
.lateral.mini .lat-grupo + .lat-grupo{
  border-top:1px solid rgba(255,255,255,.07); padding-top:9px;
}
.lateral.mini .lat-item{ justify-content:center; padding:9px 0; gap:0; }
.lateral.mini .lat-item span{ display:none; }

/* ---------- botón de la barra de arriba (solo teléfono) ---------- */
.abrir-menu{
  display:none; width:32px; height:32px; padding:0; flex-shrink:0;
  border:1px solid var(--linea-fuerte); border-radius:var(--radio);
  background:#fff; color:var(--tinta-media); cursor:pointer;
  align-items:center; justify-content:center;
}
.abrir-menu svg{ width:17px; height:17px; }
.abrir-menu:hover{ border-color:var(--acento); color:var(--acento); }

.lat-capa{ display:none; }

/* ---------- teléfono y tablet angosta ---------- */
@media (max-width: 900px){
  .lateral{
    position:fixed; top:0; left:0; z-index:60;
    transform:translateX(-100%); transition:transform .18s ease;
    box-shadow:2px 0 18px rgba(0,0,0,.22);
  }
  .lateral.abierta{ transform:translateX(0); }
  .abrir-menu{ display:flex; }
  .lat-capa.puesta{
    display:block; position:fixed; inset:0; z-index:55;
    background:rgba(20,28,32,.45);
  }
  .barra-titulo{ font-size:13px; }
  .principal{ padding:20px 16px 60px; }
}

/* En el papel la barra no va. */
@media print{
  .lateral, .barra, .lat-capa, .franja, .flotantes{ display:none !important; }
  .app{ display:block; }
}

/* ---------- en qué días vale una franja ---------- */
.chip-dia{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px; margin:2px 3px 2px 0;
  border:1px solid var(--linea-fuerte); border-radius:14px;
  font-size:11px; cursor:pointer; background:#fff;
  color:var(--tinta-suave); user-select:none;
}
.chip-dia:hover{ border-color:var(--acento); }
.chip-dia.puesto{
  background:var(--acento); border-color:var(--acento); color:#fff; font-weight:600;
}
.chip-dia input{ margin:0; width:11px; height:11px; cursor:pointer; }

.boton.chico{
  padding:3px 9px; font-size:15px; line-height:1.1; min-width:0;
}

/* ==========================================================================
   Entrar
   ========================================================================== */
body.sin-entrar .lateral,
body.sin-entrar .barra,
body.sin-entrar .lat-capa{ display:none; }
body.sin-entrar .app{ display:block; }
body.sin-entrar .principal{ max-width:none; padding:0; }

.entrada{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:30px 20px; background:var(--fondo);
}
.entrada-caja{
  width:100%; max-width:370px;
  background:#fff; border:1px solid var(--linea);
  border-radius:10px; padding:34px 32px 28px;
  box-shadow:0 1px 3px rgba(20,28,32,.05);
}
.entrada-marca{ display:flex; justify-content:center; margin-bottom:18px; }
.entrada-marca .lat-logo{ width:40px; height:40px; border-radius:9px; font-size:20px; }
.entrada-caja h1{
  font-size:21px; font-weight:700; text-align:center;
  letter-spacing:-.015em; margin:0 0 3px;
}
.entrada-sub{
  text-align:center; font-size:12.5px; color:var(--tinta-suave);
  margin:0 0 26px;
}
.entrada-caja .campo{ margin-bottom:15px; }
.entrada-caja .campo label{
  display:block; font-size:12px; font-weight:600;
  color:var(--tinta-media); margin-bottom:5px;
}
.entrada-caja .campo input{
  width:100%; height:38px; padding:0 11px;
  border:1px solid var(--linea-fuerte); border-radius:var(--radio);
  font-family:inherit; font-size:14px; color:var(--tinta); background:#fff;
}
.entrada-caja .campo input:focus{
  outline:none; border-color:var(--acento);
  box-shadow:0 0 0 3px rgba(23,80,95,.1);
}
.boton.ancho{ width:100%; justify-content:center; height:39px; }
.entrada-o{
  display:flex; align-items:center; gap:11px;
  margin:18px 0; color:var(--tinta-suave); font-size:11.5px;
}
.entrada-o::before, .entrada-o::after{
  content:""; flex:1; height:1px; background:var(--linea);
}
.entrada-pie{
  font-size:11.5px; color:var(--tinta-suave);
  text-align:center; line-height:1.5; margin:11px 0 0;
}

/* ---------- estado de guardado, en la barra de arriba ---------- */
.nube{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; color:var(--tinta-suave);
  padding:4px 10px; border-radius:20px; background:var(--fondo-suave, #f3f1ed);
  white-space:nowrap;
}
.punto-nube{
  width:6px; height:6px; border-radius:50%; flex-shrink:0;
  background:var(--tinta-suave);
}
.nube.ok .punto-nube{ background:var(--ok); }
.nube.mandando .punto-nube{ background:var(--acento); animation:latir 1.1s ease-in-out infinite; }
.nube.sin-red .punto-nube{ background:var(--aviso); }
.nube.mal .punto-nube{ background:var(--mal); }
.nube.mal{ color:var(--mal); }

@keyframes latir{ 0%,100%{ opacity:1 } 50%{ opacity:.3 } }
@media (prefers-reduced-motion: reduce){
  .nube.mandando .punto-nube{ animation:none; }
}
@media (max-width:640px){
  .nube{ font-size:0; padding:5px; gap:0; }
  .punto-nube{ width:8px; height:8px; }
}

/* ==========================================================================
   Tuco, el ayudante
   ========================================================================== */
.tuco{
  position:fixed; right:18px; bottom:18px; z-index:80;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
}

.tuco-boton{
  width:58px; height:58px; border-radius:50%; padding:0;
  border:3px solid #fff; background:var(--acento);
  box-shadow:0 3px 10px rgba(20,28,32,.22);
  cursor:pointer; overflow:hidden; flex-shrink:0;
  animation:tuco-respira 3.2s ease-in-out infinite;
}
.tuco-boton img{ width:100%; height:100%; object-fit:cover; transform:scale(1.32); }
.tuco-boton:hover{ animation-play-state:paused; transform:scale(1.05); }
.tuco-boton:focus-visible{ outline:2px solid var(--acento); outline-offset:3px; }

@keyframes tuco-respira{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.045); }
}

/* ---------- el globo ---------- */
.tuco-globo{
  position:relative;
  width:min(320px, calc(100vw - 56px));
  background:#fff; border:1px solid var(--linea-fuerte);
  border-radius:14px; padding:16px 18px 14px;
  box-shadow:0 8px 24px rgba(20,28,32,.16);
  animation:tuco-entra .32s cubic-bezier(.2,1.4,.4,1);
}
.tuco-globo::after{
  content:""; position:absolute; right:26px; bottom:-9px;
  width:18px; height:18px; background:#fff;
  border-right:1px solid var(--linea-fuerte); border-bottom:1px solid var(--linea-fuerte);
  transform:rotate(45deg); border-radius:0 0 3px 0;
}
@keyframes tuco-entra{
  from{ opacity:0; transform:translateY(14px) scale(.96); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.tuco-cerrar{
  position:absolute; top:8px; right:9px; width:22px; height:22px;
  border:none; background:transparent; border-radius:50%;
  color:var(--tinta-suave); font-size:16px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.tuco-cerrar:hover{ background:var(--fondo-suave, #f3f1ed); color:var(--tinta); }

.tuco-figura{
  display:block; width:84px; height:84px; object-fit:contain;
  margin:0 auto 6px;
}
.tuco-globo[data-pose="festejo"] .tuco-figura{ animation:tuco-festejo .6s ease-in-out 2; }
@keyframes tuco-festejo{
  0%, 100%{ transform:translateY(0); }
  30%{ transform:translateY(-9px); }
  55%{ transform:translateY(0); }
}

.tuco-texto{ font-size:12.8px; line-height:1.58; color:var(--tinta-media); }
.tuco-texto p{ margin:0 0 8px; }
.tuco-texto p:last-child{ margin-bottom:0; }

@media (prefers-reduced-motion: reduce){
  .tuco-boton{ animation:none; }
  .tuco-globo{ animation:none; }
  .tuco-globo[data-pose="festejo"] .tuco-figura{ animation:none; }
}

@media (max-width:640px){
  .tuco{ right:12px; bottom:12px; }
  .tuco-boton{ width:50px; height:50px; }
}

/* que no tape la barra de pestañas achicada ni quede debajo del panel de WhatsApp */
@media (max-width:900px){
  .tuco{ z-index:40; }
}

/* ==========================================================================
   Que se vea que quedó guardado
   ========================================================================== */
.campo-g{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.campo-g-cab{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:19px;
}
.campo-g-cab label{
  font-size:12px; font-weight:600; color:var(--tinta-media); margin:0;
}
.campo-g input, .campo-g select{
  width:100%; height:38px; padding:0 11px;
  border:1px solid var(--linea-fuerte); border-radius:var(--radio);
  font-family:inherit; font-size:14px; color:var(--tinta); background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.campo-g input:focus{
  outline:none; border-color:var(--acento); box-shadow:0 0 0 3px rgba(23,80,95,.1);
}
.campo-g .pista{ margin:0; }

.sello{
  display:inline-flex; align-items:center; gap:4px;
  font-size:10.5px; font-weight:600; letter-spacing:.04em;
  padding:2px 7px; border-radius:20px; white-space:nowrap;
  opacity:0; transition:opacity .18s ease;
}
.sello svg{ width:11px; height:11px; }
.sello-guardando, .sello-listo{ display:none; align-items:center; gap:4px; }

.campo-g.guardado .sello{ opacity:1; background:#e8f0e9; color:var(--ok); }
.campo-g.guardado .sello-listo{ display:inline-flex; }
.campo-g.guardado input{ border-color:var(--ok); }

.campo-g.guardando .sello{ opacity:1; background:#f3f1ed; color:var(--tinta-media); }
.campo-g.guardando .sello-guardando{ display:inline-flex; }
.campo-g.guardando .sello-guardando svg{ animation:girar 1s linear infinite; }
@keyframes girar{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .campo-g.guardando .sello-guardando svg{ animation:none; }
}

.config-par{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:20px; align-items:start;
}

/* ==========================================================================
   Buscador del plantel
   ========================================================================== */
.buscador{
  background:#f3f1ed; border:1px solid var(--linea);
  border-radius:9px; padding:13px 14px; margin-bottom:16px;
  position:sticky; top:54px; z-index:20;
}
.buscador-fila{ display:flex; gap:10px; flex-wrap:wrap; }

.lupa{ position:relative; flex:1; min-width:200px; }
.lupa > svg{
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--tinta-suave); pointer-events:none;
}
.lupa input{
  width:100%; height:38px; padding:0 34px;
  border:1px solid var(--linea-fuerte); border-radius:20px;
  font-family:inherit; font-size:13.5px; background:#fff; color:var(--tinta);
  -webkit-appearance:none; appearance:none;
}
.lupa input::-webkit-search-cancel-button{ display:none; }
.lupa input:focus{
  outline:none; border-color:var(--acento); box-shadow:0 0 0 3px rgba(23,80,95,.1);
}
.lupa-limpiar{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border:none; background:transparent;
  color:var(--tinta-suave); font-size:17px; line-height:1; cursor:pointer;
  border-radius:50%; display:none;
}
.lupa.con-texto .lupa-limpiar{ display:block; }
.lupa-limpiar:hover{ background:var(--linea); color:var(--tinta); }

.chips-filtro{ display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border:1px solid var(--linea-fuerte); border-radius:20px;
  background:#fff; color:var(--tinta-media); cursor:pointer;
  font-family:inherit; font-size:12px; font-weight:500;
}
.chip:hover{ border-color:var(--acento); color:var(--acento); }
.chip.puesto{ background:var(--acento); border-color:var(--acento); color:#fff; font-weight:600; }
.chip-n{
  font-size:10.5px; font-weight:700; padding:1px 5px; border-radius:9px;
  background:#f3f1ed; color:var(--tinta-media);
}
.chip.puesto .chip-n{ background:rgba(255,255,255,.24); color:#fff; }
.chip.chip-aviso:not(.puesto){ border-color:var(--aviso); color:var(--aviso); }

.indice-letras{
  display:flex; gap:3px; flex-wrap:wrap; margin-bottom:10px;
  padding-bottom:10px; border-bottom:1px solid var(--linea);
}
.indice-letras button{
  width:25px; height:25px; padding:0; border:none; border-radius:5px;
  background:transparent; color:var(--tinta-suave); cursor:pointer;
  font-family:inherit; font-size:11.5px; font-weight:600;
}
.indice-letras button:hover{ background:var(--acento); color:#fff; }

.sin-resultado{
  text-align:center; padding:26px; color:var(--tinta-suave); font-size:13px;
}

/* ==========================================================================
   La lista del plantel
   ========================================================================== */
.lista-plantel{
  border:1px solid var(--linea); border-radius:9px; overflow:hidden; background:#fff;
}
.fila-p{ border-bottom:1px solid var(--linea); }
.fila-p:last-child{ border-bottom:none; }
.fila-p.resaltada{ animation:destacar 1.2s ease; }
@keyframes destacar{ 0%,70%{ background:#e4edef; } 100%{ background:transparent; } }

.fila-p-cab{
  display:grid; align-items:center; gap:12px; width:100%;
  grid-template-columns:9px minmax(90px,1.3fr) minmax(80px,1fr) minmax(90px,1fr) 108px 24px;
  padding:12px 14px; border:none; background:transparent; cursor:pointer;
  text-align:left; font-family:inherit; font-size:13.5px; color:var(--tinta);
}
.fila-p-cab:hover{ background:#f7f5f2; }
.fila-p.abierta .fila-p-cab{ background:#f3f1ed; }

.punto-estado{ width:9px; height:9px; border-radius:50%; background:var(--ok); }
.fila-p.baja .punto-estado{ background:var(--linea-fuerte); }
.fila-p.por-vencer .punto-estado{ background:var(--aviso); }

.p-nombre{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fila-p.baja .p-nombre{ color:var(--tinta-suave); }
.p-equipo, .p-estado{
  font-size:12px; color:var(--tinta-suave);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fila-p.por-vencer .p-estado{ color:var(--aviso); font-weight:600; }
.fila-p.baja .p-estado{ font-style:italic; }
.p-valor{ text-align:right; font-variant-numeric:tabular-nums; font-weight:600; font-size:13px; }
.p-valor small{ font-weight:400; color:var(--tinta-suave); font-size:10.5px; }
.p-sin{ color:var(--mal); font-weight:600; font-size:11.5px; }
.p-flecha{ text-align:center; color:var(--tinta-suave); font-size:17px; line-height:1; }

.ficha-p{
  padding:16px 16px 18px; background:#f9f8f6;
  border-top:1px solid var(--linea);
}
.ficha-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:14px; margin-bottom:12px;
}
.ficha-grid .campo{ margin:0; }
.ficha-grid label{
  display:block; font-size:11.5px; font-weight:600;
  color:var(--tinta-media); margin-bottom:4px;
}
.ficha-grid input, .ficha-grid select{
  width:100%; height:36px; padding:0 10px;
  border:1px solid var(--linea-fuerte); border-radius:var(--radio);
  font-family:inherit; font-size:13px; background:#fff; color:var(--tinta);
}
.ficha-grid input:focus, .ficha-grid select:focus{
  outline:none; border-color:var(--acento); box-shadow:0 0 0 3px rgba(23,80,95,.1);
}
.campo-nota{
  font-size:11.5px; color:var(--tinta-suave); padding:9px 0; line-height:1.4;
}
.ficha-sub{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--tinta-suave); margin:16px 0 8px;
  padding-top:12px; border-top:1px solid var(--linea);
}
.opcional{ font-weight:400; text-transform:none; letter-spacing:0; font-style:italic; }
.ficha-resuelto{
  font-size:13px; color:var(--tinta-media);
  padding:9px 12px; background:#fff; border:1px solid var(--linea);
  border-radius:6px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}

.plazo{ margin-top:10px; }
.plazo-barra{ height:6px; background:var(--linea); border-radius:4px; overflow:hidden; }
.plazo-barra span{ display:block; height:100%; background:var(--acento); border-radius:4px; }
.plazo-pie{
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; color:var(--tinta-suave); margin-top:5px;
}
.plazo-pie strong{ color:var(--tinta-media); }

.ficha-pie{
  display:flex; justify-content:space-between; align-items:center;
  gap:14px; flex-wrap:wrap; margin-top:16px;
  padding-top:13px; border-top:1px solid var(--linea);
}
.ficha-datos{
  display:flex; gap:14px; flex-wrap:wrap;
  font-size:11.5px; color:var(--tinta-suave);
}
.ficha-datos strong{ color:var(--tinta); }
.ficha-botones{ display:flex; gap:7px; flex-wrap:wrap; }

.titulo-chico{ font-size:13px; font-weight:700; color:var(--tinta); margin-bottom:12px; }
.marco.alta{ border-color:var(--acento); }

/* ==========================================================================
   Niveles dentro de un equipo
   ========================================================================== */
tr.fila-niveles td{ padding:0 14px 12px !important; border-bottom:1px solid var(--linea); }
.niveles{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.niveles-rotulo{
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--tinta-suave);
}
.niveles-vacio{ font-size:11.5px; color:var(--tinta-suave); font-style:italic; }
.nivel{
  display:inline-flex; align-items:center;
  border:1px solid var(--linea-fuerte); border-radius:20px;
  background:#fff; overflow:hidden; height:27px;
}
.nivel input{
  border:none; background:transparent; font-family:inherit; font-size:11.5px;
  color:var(--tinta); height:100%; padding:0 8px;
}
.nivel input:focus{ outline:none; background:#e4edef; }
.nivel-nombre{ width:78px; font-weight:600; }
.nivel-valor{
  width:56px; text-align:right; font-variant-numeric:tabular-nums;
  border-left:1px solid var(--linea) !important;
}
.nivel-x{
  border:none; background:transparent; color:var(--tinta-suave);
  cursor:pointer; padding:0 7px; height:100%; font-size:14px; line-height:1;
}
.nivel-x:hover{ background:var(--mal); color:#fff; }

@media (max-width:720px){
  .fila-p-cab{
    grid-template-columns:9px 1fr auto 22px;
    grid-template-areas:"punto nombre valor flecha" ". equipo estado estado";
    row-gap:3px;
  }
  .punto-estado{ grid-area:punto; }
  .p-nombre{ grid-area:nombre; }
  .p-valor{ grid-area:valor; }
  .p-flecha{ grid-area:flecha; }
  .p-equipo{ grid-area:equipo; }
  .p-estado{ grid-area:estado; text-align:right; }
  .buscador{ position:static; }
}

/* ---------- sacar los días viejos ---------- */
.corte-fila{
  display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap;
  margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--linea);
}
.corte-fila .campo label{
  display:block; font-size:12px; font-weight:600;
  color:var(--tinta-media); margin-bottom:4px;
}
.corte-fila input[type=date]{
  height:38px; padding:0 11px; border:1px solid var(--linea-fuerte);
  border-radius:var(--radio); font-family:inherit; font-size:14px; background:#fff;
}
.corte-atajos{ display:flex; gap:6px; flex-wrap:wrap; }

.corte-balance{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.corte-lado{
  padding:16px; border-radius:8px; text-align:center;
  border:1px solid var(--linea);
}
.corte-lado.se-va{ background:#fbece9; border-color:var(--mal); }
.corte-lado.se-queda{ background:#e8f0e9; border-color:var(--ok); }
.corte-n{
  font-size:31px; font-weight:700; line-height:1;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.corte-lado.se-va .corte-n{ color:var(--mal); }
.corte-lado.se-queda .corte-n{ color:var(--ok); }
.corte-rot{
  font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--tinta-media); margin-top:5px;
}
.corte-det{
  font-size:11.5px; color:var(--tinta-suave); margin-top:8px;
  padding-top:8px; border-top:1px solid rgba(0,0,0,.07); line-height:1.5;
}
.boton.peligro{
  background:var(--mal); border-color:var(--mal); color:#fff; font-weight:600;
}
.boton.peligro:hover{ background:#8a332b; border-color:#8a332b; }

@media (max-width:520px){
  .corte-balance{ grid-template-columns:1fr; }
}

/* ---------- la barra de arriba en el teléfono ----------
   El selector de mes con el nombre completo ("septiembre de 2026") no entra
   y empujaba la barra fuera de la pantalla. Acá se deja que achique. */
@media (max-width:640px){
  .barra{ gap:8px; padding:0 12px; }
  .barra-titulo{
    flex:1; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .barra-der{ min-width:0; gap:6px; }
  select.sel-barra{
    max-width:132px; padding:0 6px; font-size:11.5px;
    text-overflow:ellipsis;
  }
  select.sel-idioma{ padding:0 4px; font-size:11.5px; }
  #marca-nube{ flex-shrink:0; }
}

/* quién hizo cada cambio, en Últimos movimientos */
.quien-chip{
  display:inline-block; padding:2px 9px; border-radius:20px;
  background:#e4edef; color:var(--acento); font-size:11.5px; font-weight:600;
  white-space:nowrap;
}

/* ---------- la cuenta, arriba a la derecha ---------- */
.cuenta{ display:inline-flex; align-items:center; gap:8px; }
.cuenta-nombre{
  font-size:12px; font-weight:600; color:var(--tinta-media);
  max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width:640px){ .cuenta-nombre{ display:none; } }