/* ══════════════════════════════════════════════════════════════════════
   Kontu — piezas que la app real necesita y no estaban en las maquetas:
   ventanas modales, tarjetas de ajustes, campos de formulario y el reparto
   de carga del equipo. Todo con los mismos tokens: ni un hex suelto.
   ══════════════════════════════════════════════════════════════════════ */

/* ---------- Campos ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--fs-12); color: var(--text-2); font-weight: 500; }
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--fs-14); color: var(--text);
  padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); width: 100%;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: var(--focus); border-color: var(--accent); }
.rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hint { margin: 6px 0 0; font-size: var(--fs-12); color: var(--text-3); line-height: 1.45; }
.check { display: flex; align-items: flex-start; gap: 9px; font-size: var(--fs-13); color: var(--text-2); cursor: pointer; }
.check input { margin-top: 2px; accent-color: var(--accent); }

/* ---------- Ventana modal ---------- */
#modal-scrim { position: fixed; inset: 0; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--t-base); z-index: 44; }
#modal-scrim.on { opacity: 1; pointer-events: auto; }
.modal {
  position: fixed; left: 50%; top: 8vh; transform: translate(-50%, -6px) scale(.99);
  width: min(560px, calc(100vw - 32px)); max-height: 84vh; overflow: auto;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-overlay);
  opacity: 0; pointer-events: none; transition: opacity var(--t-base), transform var(--t-base) var(--ease-out); z-index: 45;
}
.modal.on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0) scale(1); }
.modal.ancho { width: min(760px, calc(100vw - 32px)); }
.md-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.md-head h2 { margin: 0; font-size: var(--fs-16); font-weight: 600; color: var(--heading); }
.md-head .icon-btn { margin-left: auto; }
.md-body { padding: 18px 20px; }
.md-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface-2); }
/* ── Interruptor ──
   Para decisiones que se encienden y se apagan, no para marcar de una lista:
   una casilla dice "seleccionado", un interruptor dice "activo". */
.sw { position: relative; width: 38px; height: 22px; border-radius: 11px; border: 1px solid var(--line-strong);
  background: var(--surface-2); cursor: pointer; flex: 0 0 auto; padding: 0;
  transition: background var(--t-fast), border-color var(--t-fast); }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 1px 2px rgba(20,33,61,.28); transition: transform var(--t-fast); }
.sw.on { background: var(--ok); border-color: var(--ok); }
.sw.on::after { transform: translateX(16px); }
.sw:focus-visible { outline: none; box-shadow: var(--focus); }
.sw[disabled] { opacity: .5; cursor: default; }

/* Un bloque de ajuste que no estorba: la pestaña se abre mostrando lo del día
   —lo pendiente— y la configuración queda a un clic, no encima. */
.sec.plegable > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px;
  padding: 2px 0 10px; }
.sec.plegable > summary::-webkit-details-marker { display: none; }
.sec.plegable > summary .t { font-size: var(--fs-13); font-weight: 600; color: var(--heading); }
.sec.plegable > summary .s { font-size: var(--fs-12); color: var(--text-3); }
.sec.plegable > summary .mas { margin-left: auto; font-size: var(--fs-12); color: var(--accent); }
.sec.plegable[open] > summary .mas::after { content: " ▴"; }
.sec.plegable:not([open]) > summary .mas::after { content: " ▾"; }

/* La fila de cada tipo de obligación en la ficha del cliente. */
.tipo-fila { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.tipo-fila:last-child { border-bottom: 0; }
.tipo-fila .qu { flex: 1 1 auto; min-width: 0; }
.tipo-fila .qu b { display: block; font-size: var(--fs-13); font-weight: 500; }
.tipo-fila .qu span { font-size: var(--fs-12); color: var(--text-3); }
.tipo-fila.off .qu b, .tipo-fila.off .qu span { color: var(--text-3); }

/* El botón que se aparta del grupo (borrar, eliminar): a la izquierda. */
.md-foot .aparte { margin-right: auto; }
/* En el teléfono tres botones no caben en una fila: el de la izquierda se sale
   de la pantalla y queda cortado. Se baja a su propia línea. */
@media (max-width: 480px) {
  .md-foot { flex-wrap: wrap; }
  .md-foot .aparte { margin-right: 0; order: 3; width: 100%; justify-content: center; }
}
.md-err { display: none; margin-top: 12px; font-size: var(--fs-13); color: var(--risk); }
.md-err.on { display: block; }
.btn.danger { color: var(--risk); border-color: var(--risk-line); }
.btn.danger:hover { background: var(--risk-bg); }
.btn.sm { height: 28px; padding: 0 10px; font-size: var(--fs-12); }
.pasos { margin: 0; padding-left: 20px; font-size: var(--fs-13); line-height: 1.6; color: var(--text-2); }
.pasos li { margin-bottom: 6px; }

/* ---------- Tarjetas de ajustes ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 16px; overflow: hidden; }
.card-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.card-head h2 { margin: 0; font-size: var(--fs-14); font-weight: 600; color: var(--heading); }
.card-head .btn { margin-left: auto; }
.card-body { padding: 16px; }
.matriz td, .matriz th { vertical-align: middle; }
.fer-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.fer-head b { font-size: var(--fs-14); color: var(--heading); }
.feriado { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-13); cursor: pointer; }
.feriado:last-child { border-bottom: 0; }
.feriado .f-fecha { color: var(--text-3); font-size: var(--fs-12); min-width: 150px; }

/* ---------- Reparto de carga del equipo ---------- */
.reparto { display: inline-flex; align-items: center; gap: 4px; }
.barrita { height: 8px; border-radius: 2px; display: inline-block; }
.reparto .muted { margin-left: 6px; font-size: var(--fs-12); }

/* ---------- Detalles ---------- */
.page { display: block; }
.ph .brief .r { color: var(--risk); font-weight: 600; }
.icon-btn[disabled] { opacity: .5; pointer-events: none; }
.av { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink-800); color: #fff; font-size: 10px; font-weight: 700; }
.side .av { background: var(--ink-700); }
.dp-row .lvl { flex: none; }

@media (max-width: 1100px) {
  .col-rut, .col-docs { display: none; }
  .cal-layout { grid-template-columns: minmax(0, 1fr); }
  .daypanel { position: static; }
  .rejilla { grid-template-columns: 1fr; }
}
/* El botón de menú y su velo solo existen en pantallas chicas. El velo va
   SIEMPRE fijo: si queda en el flujo, entra como una columna más de la grilla
   y desarma el layout de escritorio. */
#b-menu { display: none; }
#menu-scrim { position: fixed; inset: 0; background: var(--scrim); opacity: 0; pointer-events: none;
  transition: opacity var(--t-base); z-index: 45; }

@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  /* La barra lateral se convierte en un panel que entra desde la izquierda.
     Sin esto no hay forma de cambiar de vista en el teléfono. */
  .side { display: flex; position: fixed; top: 0; left: 0; bottom: 0; width: 260px; z-index: 46;
    transform: translateX(-100%); transition: transform var(--t-slow) var(--ease-out); box-shadow: var(--shadow-overlay); }
  .side.abierta { transform: none; }
  #menu-scrim.on { opacity: 1; pointer-events: auto; }
  #b-menu { display: inline-grid; }
  .top { padding: 0 12px; gap: 8px; }
  .cmdk { min-width: 0; }
  .col-lvl, .col-next, .col-fees, .col-act, .col-sii { display: none; }
  .horizon .hz-stats { grid-template-columns: 1fr 1fr; }
  .bulk { left: 50%; width: calc(100% - 24px); }
  .drawer { width: calc(100vw - 16px); }
}

/* Un mes sin obligaciones no es "presentado a tiempo": va en gris, no en verde. */
.hist i.none { background: var(--line); }

/* ══════════ Correcciones de ancho ══════════
   Entre 860 y 1100 px la barra de filtros no envolvía y empujaba la página.
   La tabla, además, se cortaba en seco: es preferible que se pueda arrastrar. */
.toolbar { flex-wrap: wrap; }
.filters { flex-wrap: wrap; }
.table-wrap { overflow: auto hidden; }
/* La ficha cerrada vive fuera de la pantalla: si además es "visible",
   suma ancho al documento y aparece una barra de scroll horizontal fantasma. */
.drawer { visibility: hidden; }
.drawer.on { visibility: visible; }

@media (max-width: 1100px) {
  .col-sii, .col-resp { display: none; }
  .filters { margin-left: 0; width: 100%; }
  .search { flex: 1 1 200px; width: auto; }
}

@media (max-width: 860px) {
  /* El control de vistas se arrastra dentro de sí mismo en vez de empujar la
     página, que es lo que produce el scroll horizontal fantasma en el teléfono. */
  .views { overflow-x: auto; max-width: 100%; }
  .views::-webkit-scrollbar { height: 0; }
  .bulk { max-width: calc(100vw - 24px); overflow-x: auto; }
  .bulk button { flex: none; }
}

/* Cerrar sesión: un botón con su nombre, no una equis suelta. */
.btn-salir { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-300);
  font-size: var(--fs-13); font-weight: 500; cursor: pointer; }
.btn-salir:hover { background: var(--ink-800); color: #fff; }

/* ── Obligación con acciones ── */
.ob-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: var(--fs-13); }
.ob-row:last-child { border-bottom: 0; }
.ob-row.lista { background: var(--surface-2); }
.ob-verif:empty { display: none; }
.ob-datos b { font-weight: 600; display: block; }
.ob-datos .s { display: block; font-size: var(--fs-12); color: var(--text-3); }
.ob-acciones { display: flex; gap: 6px; }
.ob-docs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.doc-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 220px; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; padding: 2px 8px; border: 1px solid var(--line);
  border-radius: var(--r-xs); background: var(--surface); font-size: var(--fs-12); color: var(--text-2); }
.doc-chip:hover { border-color: var(--accent); color: var(--accent); }
.doc-chip svg { width: 13px; height: 13px; }
@media (max-width: 620px) {
  .ob-row { grid-template-columns: 1fr; }
  .ob-acciones { justify-content: flex-start; }
}

/* Indicadores del calendario: misma franja unida que en la cartera. */
.kpis-cal { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); margin-bottom: 16px; }
.kpis-cal .hz-stat { border-right: 1px solid var(--line); }
.kpis-cal .hz-stat:last-child { border-right: 0; }
.grupo-cab .cuenta { display: flex; gap: 8px; align-items: center; }
.job-done #job-ver { margin-left: auto; }
.job-done .btn.primary { margin-left: 8px; }

/* ══════════ Calendario: trámites agrupados ══════════
   Cada grupo es un trámite ("F29 de septiembre") y adentro van los clientes a
   los que les falta. El contador trabaja así: hace todos los F29 juntos. */
.grupo { border-bottom: 1px solid var(--line); }
.grupo:last-child { border-bottom: 0; }
.grupo-cab { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  text-align: left; background: none; border: 0; cursor: pointer; transition: background var(--t-fast); }
.grupo-cab:hover { background: #F6F9FF; }
.grupo.abierto .grupo-cab { background: var(--surface-2); }
.grupo-cab .tit { font-weight: 600; font-size: var(--fs-14); color: var(--heading); }
.grupo-cab .det { font-size: var(--fs-12); color: var(--text-3); }
.grupo-cab .cuenta { margin-left: auto; display: flex; gap: 8px; align-items: center; flex: none; }
.flecha { color: var(--text-3); transition: transform var(--t-fast); display: inline-block; flex: none; font-size: 16px; line-height: 1; }
.grupo.abierto .flecha { transform: rotate(90deg); }
.grupo-cuerpo { display: none; border-top: 1px solid var(--line); }
.grupo.abierto .grupo-cuerpo { display: block; }
.grupo-cuerpo .ob-row { padding-left: 46px; }

/* Punto de semáforo: el color acompaña siempre a un texto, nunca va solo. */
.punto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; background: var(--idle); }
.punto.ok { background: var(--ok); }
.punto.warn { background: var(--warn); }
.punto.stop { background: var(--risk); }
.punto.none { background: var(--line-strong); }