/* ============================================================
   GAT · patrones de interfaz tomados del SGS y del Flujo de Fee
   (shell con barra inferior, panel de control, saludo, focos,
   tablero, pills de etapa, visor de fotos). Solo presentación.
   ============================================================ */
:root { --topbar-h: 46px; }
[hidden] { display: none !important; }   /* .login, .o-app, etc. no deben ganarle al atributo hidden */

/* ── Shell (o-app fill) ── */
.o-app.fill > .o-body { padding: 18px 24px 28px; display: grid; gap: 16px; align-content: start; grid-auto-rows: max-content; grid-template-columns: minmax(0, 1fr); }
.o-body > * { width: 100%; max-width: 1500px; margin-inline: auto; }
.o-app.fill > .o-body > * { margin-block: 0; min-width: 0; }
.o-app.fill > .o-cp { flex: none; }
.screen { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.screen > * { min-width: 0; }
.o-brand { gap: 9px; text-decoration: none; }
.o-brand img { width: 28px; height: 28px; object-fit: contain; }
.o-tabs .tab { display: inline-flex; align-items: center; gap: 6px; }
.o-tabs .tab i { font-size: 16px; }
.userbtn .avatar { font: 700 11px var(--f); overflow: hidden; }
.dd-menu .umi { display: grid; gap: 2px; padding: 8px 12px; }
.dd-menu .umi small { color: var(--mute); }
.dd-menu button i { margin-right: 6px; color: var(--mute); }
@media (max-width: 767px) { .o-brand span { display: none; } }
@media print { .o-nav, .o-cp, .bottom-nav { display: none !important; } }
.bottom-nav li { flex: 1; display: flex; }
/* Celular: la página completa hace scroll (estable en iOS con teclado abierto) */
@media (max-width: 767px) {
  .o-app.fill { height: auto; min-height: 100dvh; overflow: visible; }
  .o-app.fill > .o-nav { position: sticky; top: 0; z-index: var(--z-nav); }
  .o-app.fill > .o-body { overflow: visible; flex: none; min-height: 0; padding: 14px 14px calc(var(--bottom-nav-h) + 28px + env(safe-area-inset-bottom)); }
}

/* ── Panel de control: [botón · miga] [búsqueda / facetas] [controles] ── */
.o-cp .crumb b { font-weight: 600; }
.cp-l, .cp-r { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cp-r { justify-self: end; white-space: nowrap; }
.cp-r .btn { white-space: nowrap; }
.o-search { flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.o-search::-webkit-scrollbar { display: none; }
.o-search .facet { flex: none; }
.o-search .facet select { max-width: 130px; }
.o-search input[type="search"] { flex: 1 0 160px; min-width: 160px; }
.o-search .facet select { border: 0; background: var(--line-2); color: var(--ink); font: 12px var(--f); padding: 1px 2px; outline: 0; cursor: pointer; max-width: 170px; }
.o-search .facet select:focus-visible { outline: 2px solid var(--teal); }
.o-search .sp { flex: 1; }
.views button, .views a { display: inline-flex; align-items: center; gap: 5px; }
.views a { background: var(--surface); padding: 5px 10px; color: var(--ink-2); font: 500 13px var(--f); text-decoration: none; }
.views a + a, .views a + button { border-left: 1px solid var(--line); }
.views a:hover { background: var(--line-2); color: var(--ink); }
.views a.on { background: var(--line-2); color: var(--brand); font-weight: 600; }
@media (max-width: 900px) { .cp-r { justify-self: start; flex-wrap: wrap; white-space: normal; } .cp-date { display: none; } }
@media (max-width: 767px) {
  .o-cp { min-width: 0; }
  .o-cp .o-search { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .o-cp .o-search::-webkit-scrollbar { display: none; }
  .o-search .facet { flex: none; }
  .o-search input[type="search"] { flex: 1 0 150px; min-width: 150px; }
  .cp-l { flex-wrap: wrap; }
  .views span { display: none; }
}

/* ── Login (igual al SGS, SGD y Flujo de Fee) ── */
.login-app-logo { width: 84px; height: 84px; display: block; margin: 0 auto 8px; object-fit: contain; animation: float 4s ease-in-out infinite; filter: drop-shadow(0 8px 14px rgba(16,24,40,.18)); }
@keyframes float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
.login .card { display: block; gap: 0; }   /* ancho de nubi (400 px), igual al SGS */
.login #lAdmin { padding: 0; box-shadow: var(--sh-1); border-radius: var(--r-lg); }
.login .login-card { padding: 1.75rem; margin-bottom: 1rem; box-shadow: var(--sh-3); border-radius: var(--r-xl); overflow: visible; }
.lbl-f { display: block; font: 600 12px var(--f); color: var(--ink-2); margin-bottom: 6px; }
.lg-pwd { display: flex; }
.lg-pwd .inp-box { flex: 1; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.lg-pwd .btn { flex-shrink: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.lg-combo { position: relative; text-align: left; }
.lg-field { position: relative; display: flex; align-items: center; }
.lg-field > i { position: absolute; left: 11px; color: var(--mute); pointer-events: none; font-size: 16px; }
.lg-field input { padding-left: 34px; padding-right: 36px; width: 100%; }
.lg-field.sel input { border-color: var(--teal); background: var(--teal-50); font-weight: 600; }
.lg-clear { position: absolute; right: 5px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: none; color: var(--mute); cursor: pointer; display: grid; place-items: center; }
.lg-clear:hover { background: var(--line-2); color: var(--ink); }
.lg-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); max-height: 264px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-2); padding: 4px; overscroll-behavior: contain; }
.lg-group { font: 600 11px var(--f); text-transform: uppercase; letter-spacing: .06em; color: var(--mute); padding: 8px 10px 3px; }
.lg-item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; text-align: left; padding: 7px 10px; border-radius: var(--r-sm); cursor: pointer; font: 600 13px var(--f); color: var(--ink); }
.lg-item .avatar { width: 28px; height: 28px; font-size: 10px; }
.lg-item:hover, .lg-item.on { background: var(--brand-50); color: var(--brand); }
.lg-empty { padding: 14px 10px; text-align: center; color: var(--mute); font-size: 13px; }
.login-foot { margin-top: 18px; text-align: center; display: grid; justify-items: center; gap: 8px; }
.login-foot p { font-size: 12px; margin: 0; line-height: 1.5; color: var(--mute); }

/* ── Modales: hoja inferior en el celular ── */
@media (max-width: 767px) {
  dialog.modal, dialog.modal.lg, #mForm { width: 100vw; max-width: 100vw !important; max-height: 92vh; margin: auto 0 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .drawer { width: 100vw; }
}
.modal-h h3 { display: flex; align-items: center; gap: 8px; }
.modal-h h3 i { color: var(--brand); }

/* ── Carga y vacío ── */
.gat-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 160px; color: var(--mute); }
.gat-spinner { width: 22px; height: 22px; border: 2.5px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty .ill i { font-size: 38px; color: var(--brand); opacity: .75; }

/* ── Inicio: saludo, etapas, KPIs, paneles ── */
#hero { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.statusbar { overflow-x: auto; scrollbar-width: none; }
.statusbar::-webkit-scrollbar { display: none; }
@media (max-width: 767px) { .statusbar button { flex: 1 0 auto; } .res-hello h1 { font-size: 21px; } .res-hello .hand { font-size: 1.2rem; } }
.dash-date { margin: 0; }
.dash-date::first-letter { text-transform: uppercase; }
.res-hello { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: -8px; }
.res-hello h1 { font-size: 24px; font-weight: 800; margin: 0; }
.res-hello .hand { font-size: 1.45rem; }
.statusbar button { flex: 1 1 0; }
.statusbar button em { font: normal 11px var(--f-mono); color: var(--mute); margin-left: 8px; }
.statusbar button.done em, .statusbar button.cur em { color: var(--ink-2); }
.statusbar button:hover { background: var(--line-2); }
.dash-section { display: flex; align-items: baseline; gap: 12px; margin-bottom: -6px; }
.kpis.kpis-5 { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kpis.kpis-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kpis.kpis-5 > .kpi.big { grid-column: 1 / -1; } }
@media (max-width: 700px) { .kpis.kpis-5 { grid-template-columns: 1fr 1fr; } }
.kpi small { display: flex; align-items: center; gap: 6px; }
.kpi small i { color: var(--kc, var(--brand)); font-size: 15px; }
.kpi .bar i { background: var(--kc, var(--brand)); }
.kpi.big .bar i { background: linear-gradient(90deg, var(--brand), var(--teal)); }
.dash-row { display: grid; gap: 16px; }
.dash-row-2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.dash-row-2b { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .dash-row-2, .dash-row-2b { grid-template-columns: 1fr; } }
.pnl h3 { font-size: 15px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
.pnl h3 i { color: var(--brand); font-size: 17px; }
.pnl h3 .sp { flex: 1; }
.rank-list { display: grid; gap: 10px; }
.rk { display: grid; grid-template-columns: minmax(0, 34%) 1fr auto; align-items: center; gap: 10px; }
.rk-n { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk .bar { display: flex; overflow: hidden; }
.rk .bar i { background: var(--brand); }
.rk .bar i.l { background: var(--teal); }
.rk b { font-size: 12.5px; min-width: 6ch; text-align: right; }
.rk-leg { display: flex; gap: 14px; font-size: 12px; color: var(--ink-2); }
.rk-leg i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; background: var(--c); }
.dash-empty { text-align: center; padding: 24px 0; margin: 0; }
.dash-note { border-left: 3px solid var(--brand); }
.dash-note-in { display: flex; gap: 10px; align-items: flex-start; }
.dash-note-in i { color: var(--brand); font-size: 18px; flex: none; margin-top: 1px; }
.dash-note-in p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.55; }

/* ── Bandeja de acción: focos (Flujo de Fee) ── */
.focos { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.foco { min-width: 0; }
.foco { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; border-left: 3px solid var(--line); }
.foco-ok { border-left-color: var(--ok); } .foco-warn { border-left-color: var(--warn); } .foco-crit { border-left-color: var(--crit); } .foco-info { border-left-color: var(--brand); }
.foco-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; cursor: pointer; user-select: none; }
.foco-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--ink); }
.foco-title i { font-size: 17px; color: var(--ink-2); }
.foco-caret { font-size: 14px !important; transition: transform .15s; }
.foco:not(.collapsed) .foco-caret { transform: rotate(90deg); }
.foco.collapsed .foco-panel, .foco.collapsed .foco-sub { display: none; }
.foco-count { background: var(--line-2); color: var(--ink-2); border-radius: 99px; font-size: 12px; font-weight: 700; padding: 1px 8px; min-width: 26px; text-align: center; }
.foco-ok .foco-count { background: var(--ok-bg); color: var(--ok-ink); }
.foco-warn .foco-count { background: var(--warn-bg); color: var(--warn-ink); }
.foco-crit .foco-count { background: var(--crit-bg); color: var(--crit-ink); }
.foco-info .foco-count { background: var(--brand-50); color: var(--brand); }
.foco-monto { font: 600 12px var(--f-mono); color: var(--mute); }
.foco-sub { font-size: 12.5px; color: var(--mute); margin: 6px 0 0; }
.foco-panel { margin-top: 8px; overflow-x: auto; }
.foco-panel table { width: 100%; font-size: 13px; border-collapse: collapse; }
.foco-panel td { padding: 6px 8px; border-top: 1px solid var(--line-2); white-space: nowrap; }
.foco-panel tr:hover td { background: var(--line-2); cursor: pointer; }
.foco-empty { font-size: 13px; color: var(--mute); margin: 6px 0 0; }

/* ── Tablero de comodatos (kanban del SGS) ── */
.kanban-board.kanban.fixed { align-items: stretch; height: calc(100dvh - var(--topbar-h) - 58px - 70px); min-height: 380px; }
.kanban-board .col { flex: 1 1 0; min-width: 230px; display: flex; flex-direction: column; }
.kanban-board .col h4 { box-shadow: inset 0 -2px 0 var(--kc, var(--brand)); display: flex; align-items: center; gap: 8px; padding-bottom: 8px; }
.kanban-board .col h4 i { color: var(--kc, var(--brand)); font-size: 16px; }
.kanban-board .col-cards { flex: 1; overflow-y: auto; min-height: 0; display: grid; gap: 8px; align-content: start; padding-top: 8px; overscroll-behavior: contain; }
.col-empty { display: grid; justify-items: center; gap: 6px; padding: 24px 8px; color: var(--mute); font-size: 12.5px; text-align: center; }
.col-empty i { font-size: 22px; opacity: .6; }
.kc { cursor: pointer; display: grid; gap: 6px; }
.kc-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kc-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.kc-sub { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--mute); }
@media (max-width: 767px) { .kanban-board.kanban.fixed { height: auto; } .kanban-board .col-cards { max-height: 60vh; } }

/* ── Pills de etapa (Flujo de Fee) ── */
.etapa { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.etapa::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.etapa-info { background: var(--info-bg); color: var(--info-ink); }
.etapa-warn { background: var(--warn-bg); color: var(--warn-ink); }
.etapa-ok { background: var(--ok-bg); color: var(--ok-ink); }
.etapa-crit { background: var(--crit-bg); color: var(--crit-ink); }
.etapa-brand { background: var(--brand-50); color: var(--brand); }
.etapa-teal { background: var(--teal-50); color: var(--teal); }
.etapa-mute { background: var(--line-2); color: var(--mute); }

/* ── Tablas: celda principal con ícono de categoría ── */
.cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cell-t { display: grid; gap: 1px; min-width: 0; }
.cell-t b { font-weight: 600; color: var(--ink); }
.cell-t small { color: var(--mute); font-size: 12px; }
.cat-ico { width: 30px; height: 30px; border-radius: var(--r); display: inline-grid; place-items: center; background: var(--brand-50); color: var(--brand); flex: none; font-size: 16px; }
.cat-ico.equipo_frio { background: var(--info-bg); color: var(--info-ink); }
.cat-ico.equipo_display { background: var(--teal-50); color: var(--teal); }
.cat-ico.material_pop { background: var(--warn-bg); color: var(--warn-ink); }
.o-list tbody tr[data-activo]:hover td, .o-list tbody tr[data-ficha]:hover td { background: var(--brand-50); cursor: pointer; }

/* ── Visor de fotos (lightbox del Flujo de Fee) ── */
.lbx { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; }
.lbx[hidden] { display: none; }
.lbx-img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 50px rgba(0,0,0,.6); background: #fff; }
.lbx-x { position: absolute; top: 12px; right: 18px; background: none; border: none; color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer; opacity: .85; }
.lbx-bar { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; gap: 1.25rem; justify-content: center; color: #fff; font-size: 13px; }
.lbx-open { color: #9ccaff; text-decoration: none; }
img.zoom { cursor: zoom-in; }

/* ── Foto (campo y entrega) ── */
.foto-drop { aspect-ratio: 4/3; border: 2px dashed var(--line); border-radius: var(--r-lg); display: grid; place-items: center; text-align: center; cursor: pointer; background-size: cover; background-position: center; color: var(--mute); transition: border-color .15s, background-color .15s; }
.foto-drop:hover { border-color: var(--brand); background-color: var(--brand-50); }
.foto-drop i { font-size: 34px; color: var(--brand); display: block; }
.foto-drop.has { border-style: solid; border-color: var(--teal); }
.foto-drop.has > span { visibility: hidden; }

/* ── Botones de opción (categoría, condición, tipo de cierre): cada uno con su borde completo ── */
.opc { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--min, 110px), 1fr)); gap: 6px; }
.opc button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink-2); font: 500 13px var(--f); cursor: pointer; transition: border-color var(--t), background var(--t), color var(--t); }
.opc button:hover { background: var(--line-2); color: var(--ink); }
.opc button.on { border-color: var(--brand); background: var(--brand-50); color: var(--brand); font-weight: 600; box-shadow: inset 0 0 0 1px var(--brand); }
.opc button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ── Menú de usuario: el encabezado tiene overflow:auto y recortaba el menú; se saca con posición fija ── */
.o-nav .dd.end .dd-menu { position: fixed; top: calc(var(--topbar-h) + 4px); right: 10px; left: auto; bottom: auto; min-width: 230px; max-width: calc(100vw - 20px); z-index: calc(var(--z-nav) + 5); }
.dd-menu .umi { white-space: normal; word-break: break-word; }

/* ── Equipos: color por Jefa Nacional (chips, puntos, login) ── */
.eq-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 99px; font: 600 11px var(--f); letter-spacing: 0; text-transform: none; color: var(--eq, var(--ink-2)); background: color-mix(in srgb, var(--eq, #64748b) 14%, transparent); border: 1px solid color-mix(in srgb, var(--eq, #64748b) 35%, transparent); white-space: nowrap; vertical-align: middle; }
.eq-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--eq, #64748b); }
.eq-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--eq, #64748b); vertical-align: middle; flex: none; box-shadow: 0 0 0 2px var(--surface); }
.lg-group { display: flex; align-items: center; gap: 7px; }
.lg-nom { display: grid; gap: 1px; min-width: 0; }
.lg-nom small { font: 500 11px var(--f); color: var(--mute); }
.lg-item:hover .lg-nom small, .lg-item.on .lg-nom small { color: inherit; opacity: .8; }
.dd-menu .umi #yoEquipo { margin-top: 4px; }
.dd-menu .umi #yoEquipo:empty { display: none; }
.userbtn .avatar { color: #fff; }