:root{
  --bg:#f5f7fa; --card:#ffffff; --ink:#1d2430; --muted:#6b7688;
  --line:#e3e7ee; --primary:#2563eb; --primary-ink:#ffffff;
  --danger:#dc2626; --danger-bg:#fee2e2; --danger-line:#fca5a5;
  --ok:#16a34a; --ok-bg:#dcfce7;
  --warning:#a16207; --warning-bg:#fef3c7; --warning-line:#fcd34d;
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}
body{
  margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.4;
}
header{
  padding:20px 24px; background:linear-gradient(135deg,#1e3a8a,#2563eb); color:#fff;
}
.header-row{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
header h1{margin:0; font-size:1.5rem;}
.subtitle{margin:4px 0 0; opacity:.85; font-size:.9rem;}
.header-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.header-row .btn.secondary{background:rgba(255,255,255,.15); color:#fff;}
.header-row .btn.secondary:hover{background:rgba(255,255,255,.25);}
.user-email{font-size:.8rem; opacity:.85;}

/* ---------- login / elegir proyecto ---------- */
#login-screen, #proyecto-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#1e3a8a,#2563eb); padding:20px;
}
.login-card{
  background:var(--card); border-radius:14px; padding:32px 28px; width:min(380px,100%);
  box-shadow:0 20px 50px rgba(0,0,0,.25); display:flex; flex-direction:column; gap:14px;
}
.login-card h1{margin:0; font-size:1.4rem; text-align:center;}
.login-card .subtitle{color:var(--muted); opacity:1; text-align:center; margin:0 0 6px;}
.login-card label{font-size:.82rem;}
.login-card input{padding:10px 12px;}
.login-card .btn{width:100%; padding:11px;}
.login-note{font-size:.74rem; color:var(--muted); text-align:center; margin:4px 0 0; font-weight:400;}
.login-switch{font-size:.82rem; text-align:center; margin:10px 0 0;}
.proyecto-item{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:12px 14px; border:1px solid var(--line); border-radius:10px; cursor:pointer; text-align:left;
  background:none; font:inherit; width:100%;
}
.proyecto-item:hover{border-color:#2563eb; background:rgba(37,99,235,.06);}
.proyecto-item .proyecto-rol{font-size:.72rem; color:var(--muted); text-transform:capitalize;}
main{max-width:1100px; margin:0 auto; padding:20px; display:flex; flex-direction:column; gap:18px;}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px 20px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.card h2{margin:0 0 14px; font-size:1.05rem;}
.card-header{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;}
.card-header h2{margin:0;}
.grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px 16px; margin-bottom:12px;
}
label{display:flex; flex-direction:column; font-size:.8rem; color:var(--muted); gap:4px; font-weight:600;}
label.inline{flex-direction:row; align-items:center; gap:8px;}
input,select{
  font:inherit; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink);
}
input:focus,select:focus{outline:2px solid var(--primary); outline-offset:1px;}
.btn{
  border:none; padding:9px 16px; border-radius:8px; font-weight:600; cursor:pointer; font-size:.85rem;
}
.btn.primary{background:var(--primary); color:var(--primary-ink);}
.btn.primary:hover{background:#1d4ed8;}
.btn.secondary{background:#eef1f6; color:var(--ink);}
.btn.secondary:hover{background:#e2e6ee;}
.btn.danger-link{background:transparent; color:var(--danger); padding:4px 8px; font-size:.8rem;}

.alert{
  padding:12px 16px; border-radius:10px; font-size:.88rem; font-weight:600;
}
.alert.error{background:var(--danger-bg); color:var(--danger); border:1px solid var(--danger-line);}
.alert.ok{background:var(--ok-bg); color:var(--ok); border:1px solid #86efac;}
.alert.warning{background:var(--warning-bg); color:var(--warning); border:1px solid var(--warning-line);}

.table-wrap{overflow-x:auto;}
/* border-collapse:separate (en vez de collapse) es necesario para que el encabezado
   sticky de .tbl-scroll funcione bien — con collapse, Chromium a veces "descuadra"
   la posición del thead sticky. Con un solo border-bottom por celda (no hay bordes
   izq/der que puedan duplicarse), separate se ve idéntico a collapse. */
table{width:100%; border-collapse:separate; border-spacing:0; font-size:.85rem;}
th,td{padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap;}
th{color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.03em;}
tbody tr:hover{background:#fafbfd;}
/* Cada tabla marcada con .tbl-scroll es su propia caja con scroll propio (puede
   crecer mucho, ej. Historial de cambios con hasta 100 filas) y encabezado fijo
   arriba — así nunca se pierden los títulos de columna al bajar, y el encabezado
   de una tabla nunca se arrastra hacia la siguiente al cambiar de sección. */
.tbl-scroll{ max-height:420px; overflow-y:auto; }
.tbl-scroll table thead th{
  position:sticky; top:0; background:var(--card); z-index:2;
}
.badge{
  padding:2px 8px; border-radius:999px; font-size:.72rem; font-weight:700; color:#fff;
  background:var(--badge-color, var(--primary));
}

.hint{color:var(--muted); font-size:.8rem; font-weight:400;}

/* ---------- maestro de entidades ---------- */
/* Nombre y Tipo quedan fijos (sticky) al deslizar horizontalmente por Configuración,
   que puede ser muy ancha (tarifas + horarios + comisión) — así siempre se sabe de
   qué entidad se está hablando sin tener que devolverse hasta el borde izquierdo.
   El encabezado (position:sticky arriba) ya lo cubre la regla genérica .tbl-scroll;
   aquí solo hace falta subir su z-index en las columnas que además son sticky-left,
   para que el rincón superior-izquierdo se dibuje por encima de todo lo demás. */
#tbl-entidades th:nth-child(1), #tbl-entidades td:nth-child(1){
  position:sticky; left:0; background:var(--card); width:150px; min-width:150px;
}
#tbl-entidades th:nth-child(2), #tbl-entidades td:nth-child(2){
  position:sticky; left:150px; background:var(--card); width:130px; min-width:130px;
  box-shadow:2px 0 6px -2px rgba(0,0,0,.15);
}
#tbl-entidades td:nth-child(1), #tbl-entidades td:nth-child(2){ z-index:2; }
#tbl-entidades thead th:nth-child(1), #tbl-entidades thead th:nth-child(2){ z-index:4; }
#tbl-entidades td:nth-child(3){min-width:260px;}
#tbl-entidades input[type=text]{width:100%;}
#tbl-entidades input[type=color]{width:44px; height:30px; padding:2px; border:1px solid var(--line); border-radius:6px; cursor:pointer;}
#tbl-entidades td.center{text-align:center;}
#tbl-entidades select{width:100%;}

/* En celular, Nombre+Tipo fijos a su ancho de escritorio (150+130=280px) dejaban
   casi sin espacio visible el resto de la tabla en una pantalla de ~360-400px de
   ancho — parecía que no se podía deslizar. Se angostan (manteniendo el texto
   del tipo, solo más compacto y en varias líneas si hace falta — el ícono queda
   de apoyo visual, no como reemplazo del texto) para devolverle espacio real a
   la zona que sí hay que deslizar. */
@media (max-width:640px){
  #tbl-entidades th:nth-child(1), #tbl-entidades td:nth-child(1){ width:86px; min-width:86px; }
  #tbl-entidades th:nth-child(2), #tbl-entidades td:nth-child(2){ left:86px; width:92px; min-width:92px; padding-left:6px; padding-right:6px; }
  #tbl-entidades td:nth-child(1) input[type=text]{ font-size:.78rem; padding:6px 7px; }
  #tbl-entidades .badge{ padding:3px 6px; white-space:normal; line-height:1.2; text-align:center; }
}
/* Sombra fija en el borde derecho de toda tabla con scroll horizontal, para que
   en celular quede claro a simple vista que hay más columnas si se desliza —
   sin esto, el corte abrupto de la tabla se confundía con "no hay más nada". */
@media (max-width:640px){
  .table-wrap{ box-shadow:inset -10px 0 8px -8px rgba(0,0,0,.18); -webkit-overflow-scrolling:touch; }
}
.ent-config-grid{display:flex; flex-direction:column; gap:6px; font-size:.78rem;}
.ent-config-grid label{flex-direction:row; align-items:center; justify-content:space-between; gap:6px; font-weight:400; color:var(--ink);}
.ent-config-grid input[type=time],.ent-config-grid input[type=date]{font-size:.78rem; padding:4px 6px;}
.ent-config-grid input[type=number]{width:100px; text-align:right;}
.ent-dias{display:flex; flex-wrap:wrap; gap:6px;}
.chip-check{
  background:#eef1f6; border-radius:6px; padding:2px 7px; font-size:.72rem; font-weight:600; gap:4px !important;
}

.resumen-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px;}
.resumen-item{
  border:1px solid var(--line); border-radius:10px; padding:14px; background:#fafbfd;
}
.resumen-item h3{margin:0 0 8px; font-size:.9rem;}
.resumen-item .row{display:flex; justify-content:space-between; font-size:.82rem; color:var(--muted); margin:2px 0;}
.resumen-item .total{font-size:1.15rem; font-weight:800; margin-top:8px; color:var(--ink);}

/* ---------- settings dialog ---------- */
dialog.app-dialog{
  border:none; border-radius:14px; padding:0; margin:auto; width:min(640px,92vw); max-height:86vh;
  background:var(--card); color:var(--ink); box-shadow:0 20px 50px rgba(0,0,0,.25);
}
dialog.app-dialog::backdrop{background:rgba(15,23,42,.55);}
dialog.app-dialog .dlg-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--card); border-radius:14px 14px 0 0;
}
dialog.app-dialog .dlg-header h2{margin:0; font-size:1.05rem;}
dialog.app-dialog .dlg-close{
  background:transparent; border:none; font-size:1rem; line-height:1; cursor:pointer; color:var(--muted);
  padding:6px 10px; border-radius:8px;
}
dialog.app-dialog .dlg-close:hover{background:#eef1f6;}
dialog.app-dialog .dlg-body{padding:18px 20px 22px; display:flex; flex-direction:column; gap:24px; overflow-y:auto;}
dialog.app-dialog .dlg-section h3{margin:0 0 4px; font-size:.95rem;}
dialog.app-dialog .hint{margin:0 0 10px; display:block;}
dialog.dialog-wide{width:min(760px,94vw);}

/* ---------- importador masivo ---------- */
.imp-textarea{
  width:100%; min-height:130px; resize:vertical; font-family:monospace; font-size:.8rem;
  padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink);
  line-height:1.5;
}
.tbl-import{width:100%; border-collapse:separate; border-spacing:0; font-size:.8rem;} /* separate: ver nota de sticky más arriba */
.tbl-import th{
  background:#f5f7fa; text-align:left; padding:7px 10px; font-size:.7rem; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line); white-space:nowrap;
}
.tbl-scroll .tbl-import thead th{ background:#f5f7fa; } /* conserva su fondo propio aunque sea sticky */
.tbl-import td{padding:7px 10px; border-bottom:1px solid var(--line); white-space:nowrap;}
.tbl-import tr:last-child td{border-bottom:none;}
.imp-status{
  display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; font-size:.72rem; font-weight:700;
}
.imp-status.ok{background:var(--ok-bg); color:var(--ok);}
.imp-status.conflict{background:var(--danger-bg); color:var(--danger);}
.imp-status.invalid{background:#eef1f6; color:var(--muted);}

/* ---------- calendario mensual ---------- */
.cal-nav{display:flex; align-items:center; gap:8px;}
.cal-nav .btn{padding:6px 11px; font-size:.8rem;}
.cal-label{font-weight:700; font-size:.88rem; min-width:130px; text-align:center;}
/* En pantallas angostas (celular), 7 columnas con chips no caben sin aplastarse:
   en vez de deformar la grilla, este contenedor scrollea horizontalmente y
   .cal-weekdays/.cal-grid mantienen un ancho mínimo razonable por columna. */
.cal-scroll{overflow-x:auto;}
.cal-weekdays{
  display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-bottom:none; border-radius:10px 10px 0 0; overflow:hidden;
  min-width:700px;
}
.cal-weekdays > div{
  background:#fafbfd; padding:7px 4px; text-align:center; font-size:.68rem; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; color:var(--muted);
}
.cal-grid{
  display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:0 0 10px 10px; overflow:hidden;
  min-width:700px;
}
.cal-cell{background:#fff; min-height:104px; padding:5px; display:flex; flex-direction:column; gap:3px; min-width:0;}
.cal-cell-out{background:var(--bg);}
.cal-cell-out .cal-daynum{opacity:.45;}
.cal-cell-today .cal-daynum{
  background:var(--primary); color:#fff; border-radius:50%; width:20px; height:20px;
  display:flex; align-items:center; justify-content:center;
}
.cal-cell-franja{box-shadow: inset 0 3px 0 var(--franja-color, var(--primary));}
.cal-daynum{font-size:.75rem; font-weight:700; align-self:flex-start;}
.cal-chips{display:flex; flex-direction:column; gap:2px;}
.cal-chip{
  all:unset; box-sizing:border-box; cursor:pointer; display:block; width:100%;
  font-size:.64rem; font-weight:600; line-height:1.25;
  padding:2px 5px; border-radius:5px; white-space:normal; word-break:keep-all;
  background:color-mix(in srgb, var(--chip-color, var(--primary)) 16%, white);
  color:var(--chip-color, var(--primary));
}
.cal-chip:hover{text-decoration:line-through; filter:brightness(.96);}
.cal-chip:focus-visible{outline:2px solid var(--primary); outline-offset:1px;}
/* Chip informativo del bloque fijo (franja horaria): no es un turno registrado, no se elimina. */
.cal-chip-block{
  background:transparent; border:1px dashed var(--chip-color, var(--primary)); cursor:default; font-weight:700;
}
.cal-chip-block:hover{text-decoration:none; filter:none;}

/* ---------- remitentes por agenda ---------- */
.eps-label{display:block; margin:2px 0 6px;}
#f-agenda-rows{display:flex; flex-direction:column; gap:8px; margin-bottom:10px;}
.eps-row{display:grid; grid-template-columns:1.3fr 1fr 110px auto; gap:8px; align-items:center;}
.eps-row select{min-width:0;}
.btn-sm{padding:6px 12px; font-size:.78rem;}
.btn.ghost-icon{
  background:transparent; color:var(--danger); border:1px solid var(--line); padding:6px 10px;
  border-radius:8px; line-height:1;
}
.btn.ghost-icon:hover{background:var(--danger-bg);}
#tbl-remitentes td:first-child{min-width:220px;}
#tbl-remitentes input[type=text]{width:100%;}
#tbl-remitentes input[type=number]{width:130px; text-align:right;}
.resumen-item .row b{color:var(--ink);}