/* NextShift · Pantallas propias (grilla de turnos, disponibilidad, estructura, roles). Colores y medidas: tema.css */
.page { max-width: none; }
.small { font-size: var(--fs-footnote); }
.mono { font-family: var(--font-mono); }
.actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
form.inline { display: inline; margin: 0; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-subhead); white-space: nowrap; min-height: var(--tap-compact); cursor: pointer; }

/* ---------------------------------------------------------------- Grilla de turnos (compacta a propósito: un mes completo en pantalla) */
.grid-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin: var(--sp-1) 0 var(--sp-3); }
.seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--fill); border-radius: var(--r-btn); }
.seg-btn { background: transparent; border: 0; min-height: var(--tap-compact); padding: 0 var(--sp-3); font-size: var(--fs-footnote); font-weight: 500; color: var(--label); border-radius: 7px; cursor: pointer; font-family: var(--font-sans); }
.seg-btn.active { background: var(--seg-on); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); font-weight: 600; }
.pincel { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.input-sm, select.input.input-sm { min-height: var(--tap-compact); padding: 0 var(--sp-2); font-size: var(--fs-footnote); width: auto; }
select.input.input-sm { padding-right: 28px; }
.legend-inline { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-left: auto; }
.lg { font-size: var(--fs-caption2); padding: 3px var(--sp-2); border-radius: var(--r-sm); color: var(--label); }
.lg-err { box-shadow: inset 0 0 0 2px var(--sys-red); }
.lg-alt { box-shadow: inset 0 0 0 2px var(--sys-orange); }

.grid-wrap { overflow: auto; max-height: 72vh; border-radius: var(--r-card); background: var(--bg-elevated); box-shadow: 0 0 0 .5px var(--separator); }
.tgrid { border-collapse: separate; border-spacing: 0; font-size: var(--fs-caption); color: var(--label); }
.tgrid th, .tgrid td { border-right: .5px solid var(--grid-line); border-bottom: .5px solid var(--grid-line); }
.tgrid thead th { position: sticky; top: 0; z-index: 3; background: var(--grid-head); font-weight: 500; }
.tgrid .sticky-col { position: sticky; left: 0; z-index: 2; background: var(--bg-elevated); }
.tgrid thead .sticky-col { z-index: 4; background: var(--grid-head); }
.hcol { min-width: 230px; text-align: left; padding: var(--sp-2) 10px; font-size: var(--fs-caption); font-weight: 600; color: var(--label-2); }
.dcol { min-width: 38px; padding: var(--sp-1) 2px; text-align: center; }
.dcol span { display: block; font-size: 10px; color: var(--label-2); text-transform: uppercase; }
.dcol b { font-size: var(--fs-footnote); font-weight: 600; }
.dcol.we { background: var(--grid-weekend); }
.dcol.fer b { color: var(--sys-red); }
.dcol.fuera, td.c.fuera { opacity: .5; }
.lun { border-left: 2px solid var(--grid-week) !important; }
.hcol-h { min-width: 44px; font-size: 10px; padding: var(--sp-1); color: var(--label-2); }

.pcol { padding: 5px 10px; min-width: 230px; max-width: 260px; }
.pcol b { display: block; font-size: var(--fs-caption); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcol span { display: block; font-size: var(--fs-caption2); color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fam-row td { background: var(--bg-secondary) !important; color: var(--label-2); font-size: var(--fs-caption2); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: 6px 10px; }

td.c { text-align: center; height: 34px; min-width: 38px; padding: 0 2px; font-family: var(--font-mono); font-size: 11.5px; cursor: default; position: relative; white-space: nowrap; }
.tgrid[data-edit="1"] td.c { cursor: pointer; }
.tgrid[data-edit="1"] td.c:hover { outline: 2px solid var(--sys-blue); outline-offset: -2px; }
.vista-ancha td.c { min-width: 84px; font-size: var(--fs-caption2); }
td.c.f-dia { background: var(--f-dia); }
td.c.f-tarde { background: var(--f-tarde); }
td.c.f-noche { background: var(--f-noche); }
td.c.f-saliente { background: var(--f-saliente); color: var(--label-2); }
td.c.f-libre { background: var(--f-libre); color: var(--f-libre-text); }
td.c.f-ausencia { background: var(--f-ausencia); color: var(--f-ausencia-text); }
td.c.f-desconocido { background: repeating-linear-gradient(45deg, transparent, transparent 4px, var(--tint-red) 4px, var(--tint-red) 8px); color: var(--sys-red-text); }
.lg.f-dia { background: var(--f-dia); } .lg.f-tarde { background: var(--f-tarde); } .lg.f-noche { background: var(--f-noche); }
.lg.f-saliente { background: var(--f-saliente); } .lg.f-libre { background: var(--f-libre); } .lg.f-ausencia { background: var(--f-ausencia); }
td.c.v-error { box-shadow: inset 0 0 0 2px var(--sys-red); }
td.c.v-alerta { box-shadow: inset 0 0 0 2px var(--sys-orange); }
td.c.lock::after { content: ''; position: absolute; top: 2px; right: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--label); opacity: .45; }
td.c.saving { opacity: .4; }
td.flash { animation: flash 1.6s ease; }
@keyframes flash { 0%, 60% { outline: 3px solid var(--sys-blue); outline-offset: -3px; } 100% { outline: 0; } }

.hcell { text-align: right; font-family: var(--font-mono); font-size: var(--fs-caption2); padding: 0 6px; color: var(--label-2); }
.cob-row .pcol b { font-size: var(--fs-caption2); }
td.cob { text-align: center; font-family: var(--font-mono); font-size: 11.5px; }
td.cob.ok { color: var(--sys-green-text); }
td.cob.bad { background: var(--tint-red); color: var(--sys-red-text); font-weight: 700; }
td.cob.exc { background: var(--tint-orange); color: var(--sys-orange-text); font-weight: 700; }
/* Hoy y días pasados: bloqueados (rayado) */
td.c.pasado { background-image: repeating-linear-gradient(135deg, var(--fill) 0 3px, transparent 3px 7px); cursor: not-allowed; }
.tgrid[data-desbloq="1"] td.c.pasado { cursor: pointer; outline: 1px dashed var(--sys-red); outline-offset: -2px; }

.two-col { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-4); margin-top: var(--sp-4); }
.two-col > div > .card + .card { margin-top: var(--sp-4); }
@media (max-width: 1000px) { .two-col { grid-template-columns: 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--sp-2) 0 10px; }
.chip-f { border: 0; background: var(--fill); color: var(--label); min-height: var(--tap-compact); padding: 0 var(--sp-3); border-radius: var(--r-pill); font-size: var(--fs-footnote); font-weight: 500; cursor: pointer; font-family: var(--font-sans); }
.chip-f.active { background: var(--sys-blue); color: var(--on-accent); }
.hallazgos { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow: auto; }
.hallazgos li { padding: var(--sp-2) var(--sp-1); border-bottom: .5px solid var(--separator); font-size: var(--fs-footnote); cursor: pointer; border-radius: var(--r-sm); }
.hallazgos li:hover { background: var(--fill); }
.log-list { margin: var(--sp-2) 0 0; padding-left: 18px; font-size: var(--fs-subhead); max-height: 300px; overflow: auto; color: var(--label); }
.log-list li { margin-bottom: var(--sp-1); }

/* Editor de celda */
.pop { position: absolute; z-index: 50; width: 300px; background: var(--bg-elevated); border-radius: var(--r-card); box-shadow: var(--shadow-pop); padding: var(--sp-3); color: var(--label); }
.pop-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-2); font-size: var(--fs-footnote); }
.pop-x { border: 0; background: var(--fill); color: var(--label-2); width: 28px; height: 28px; border-radius: 50%; font-size: 16px; cursor: pointer; line-height: 1; }
.pop-info { margin: 6px 0; min-height: 16px; }
.pop-quick { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.pop-quick .q { border: 0; min-height: var(--tap-compact); min-width: 40px; padding: 0 var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-caption); cursor: pointer; background: var(--fill); color: var(--label); border-radius: var(--r-sm); }
.pop-quick .q.f-dia { background: var(--f-dia); } .pop-quick .q.f-tarde { background: var(--f-tarde); } .pop-quick .q.f-noche { background: var(--f-noche); }
.pop-quick .q.f-saliente { background: var(--f-saliente); } .pop-quick .q.f-libre { background: var(--f-libre); } .pop-quick .q.f-ausencia { background: var(--f-ausencia); }
.pop-quick .q:hover { outline: 2px solid var(--sys-blue); }

/* ---------------------------------------------------------------- Tablas simples (filas tipo lista) */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: var(--fs-caption); font-weight: 600; color: var(--label-2); padding: 10px var(--sp-3); border-bottom: .5px solid var(--separator); background: var(--bg-elevated); white-space: nowrap; }
.table td { padding: var(--sp-2) var(--sp-3); border-bottom: .5px solid var(--separator); font-size: var(--fs-subhead); vertical-align: middle; color: var(--label); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--bg-secondary); }

/* «Powered by NextDrive» */
.powered-by {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; box-sizing: border-box; padding: 18px 14px; margin-top: 10px;
    background: transparent; border-top: .5px solid var(--separator); text-decoration: none;
}
.powered-by-label { font-size: var(--fs-caption2); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--label-2); }
.powered-by-logo { height: 26px; width: auto; display: block; }
.powered-by:hover { opacity: .75; }
/* En el ingreso, el «Powered by» lo estiliza login-apple.css (enlace pequeño, sin franja) */
.login-screen .powered-by-label { text-transform: none; letter-spacing: 0; font-weight: 400; }
.login-screen .powered-by { width: auto; margin-left: 0; margin-right: 0; margin-bottom: 0; border-top: 0; background: transparent; }
@media print { .powered-by { display: none !important; } }

/* Detalle «¿Dónde están los errores?» */
.det-card { margin-bottom: var(--sp-4); }
.det-nivel { margin-top: 10px; }
.det-nivel > summary { cursor: pointer; font-weight: 600; padding: 6px 0; list-style-position: inside; min-height: var(--tap-compact); }
.det-error > summary b { color: var(--sys-red-text); }
.det-alerta > summary b { color: var(--sys-orange-text); }
.det-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; margin-top: 6px; }
.det-regla { border-radius: var(--r-card); padding: 10px var(--sp-3); background: var(--bg-secondary); }
.det-error .det-regla { box-shadow: inset 3px 0 0 var(--sys-red); }
.det-alerta .det-regla { box-shadow: inset 3px 0 0 var(--sys-orange); }
.det-head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 2px; }
.det-n { margin-left: auto; font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-subhead); }
.det-locs { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-2); }
.det-personas { list-style: none; margin: var(--sp-2) 0 0; padding: 0; max-height: 220px; overflow: auto; }
.det-personas li { padding: var(--sp-1) 0; border-top: .5px solid var(--separator); font-size: var(--fs-footnote); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.det-persona { font-weight: 600; margin-right: var(--sp-1); }
.loc { border: 0; background: var(--bg-elevated); border-radius: var(--r-sm); padding: 3px var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-caption2); cursor: pointer; color: var(--sys-blue); }
.loc:hover { background: var(--tint-blue); }

.dias-chk { display: flex; flex-wrap: wrap; gap: var(--sp-1) 10px; align-items: center; }
.rehacer-form { display: inline-flex; align-items: center; gap: 6px; }
.rehacer-form .input { width: 150px; }
.user-pill { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.user-rol { font-size: var(--fs-footnote); color: var(--label-2); font-weight: 500; }

/* Dotación: dar de baja */
.baja-det { margin-top: var(--sp-1); }
.baja-det > summary { list-style: none; cursor: pointer; display: inline-flex; }
.baja-det > summary::-webkit-details-marker { display: none; }
.baja-form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: var(--sp-2); border-radius: var(--r-btn); background: var(--bg-secondary); min-width: 220px; }
.baja-form label { display: flex; flex-direction: column; gap: 2px; }
.baja-form label.chk { flex-direction: row; align-items: center; gap: 6px; }

/* ---------------------------------------------------------------- Barra superior: todo en una fila; si falta ancho se ocultan
   textos (quedan íconos con su nombre al pasar el mouse) y en celular el menú baja a una segunda fila. */
.topbar .brand-mark { height: 32px; width: auto; display: block; }
.ns-word { font-family: var(--font-display); font-style: italic; font-weight: 800; letter-spacing: -.01em; font-size: 19px !important; line-height: 1.05; color: var(--label); }
.ns-word em { font-style: italic; background: linear-gradient(90deg, #7c4dff 0%, #4f7dff 55%, #22d3ee 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* colores del logo NextShift */
.login-card .ns-login-logo { max-width: 260px; margin-bottom: var(--sp-4); }
@media (max-width: 1320px) { .topbar .brand-text { display: none; } }
@media (max-width: 1220px) {
    .topbar .navlink span { display: none; }
    .topbar .navlink { padding: 0 10px; min-height: 40px; }
    .topbar .navlink svg { width: 20px; height: 20px; }
    .user-rol { display: none; }
}
@media (max-width: 600px) {
    .topbar { flex-wrap: wrap; padding: var(--sp-1) var(--sp-3) var(--sp-1); }
    .topbar-left { display: contents; }
    .topbar .brand { order: 1; }
    .topbar-right { order: 2; margin-left: auto; }
    .topbar .navlinks { order: 3; width: 100%; justify-content: space-between; gap: 0; }
    .topbar .navlink { padding: 0; min-height: var(--tap); min-width: 0; flex: 1 1 0; max-width: 56px; justify-content: center; }
}

/* ---------------------------------------------------------------- Disponibilidad */
.dsp-barra { align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; }
.dsp-tabs { display: inline-flex; padding: 2px; gap: 2px; background: var(--fill); border-radius: var(--r-btn); }
.dsp-tab { display: inline-flex; align-items: center; min-height: var(--tap-compact); padding: 0 var(--sp-4); font-weight: 500; font-size: var(--fs-footnote); color: var(--label); text-decoration: none; border-radius: 7px; }
.dsp-tab.on { background: var(--seg-on); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); font-weight: 600; }
.dsp-nav { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
.dsp-heat, .dsp-sem { border-collapse: separate; border-spacing: 2px; width: 100%; font-size: var(--fs-caption); }
.dsp-heat thead th { font-family: var(--font-mono); font-weight: 500; color: var(--label-2); text-align: center; padding: 2px 0; }
.dsp-cargo { text-align: left; white-space: nowrap; padding: var(--sp-1) var(--sp-2) var(--sp-1) 0; font-weight: 600; min-width: 170px; }
.dsp-cargo .small { display: block; font-weight: 400; }
.dsp-hh { text-align: right; padding-right: 6px; font-family: var(--font-mono); font-weight: 700; }
.dsp-c { text-align: center; min-width: 26px; height: 30px; border-radius: var(--r-sm); cursor: pointer; font-weight: 600; font-family: var(--font-mono);
    background: color-mix(in srgb, var(--sys-blue) calc(var(--a) * 70% + 8%), transparent); color: var(--label); }
.dsp-c.cero { background: transparent; color: var(--label-2); font-weight: 400; border: 1px dashed var(--separator); }
.dsp-c.falta { box-shadow: inset 0 0 0 2px var(--sys-red); }
.dsp-c.cero.falta { background: var(--tint-red); color: var(--sys-red-text); }
.dsp-c.sel, .dsp-c:focus-visible { outline: 2px solid var(--label); outline-offset: 1px; }
.dsp-quien { margin-top: 10px; padding: var(--sp-2) 10px; background: var(--bg-secondary); border-radius: var(--r-btn); }
.dsp-ley { margin-left: 10px; white-space: nowrap; }
.dsp-ley-falta { display: inline-block; width: 12px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 2px var(--sys-red); vertical-align: -2px; }
.dsp-reglas { display: flex; flex-wrap: wrap; gap: 6px; }
.dsp-gantt { font-size: var(--fs-caption); overflow-x: auto; }
.dsp-g-row { display: grid; grid-template-columns: 220px minmax(520px, 1fr); align-items: center; min-height: 26px; }
.dsp-g-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: var(--sp-2); }
.dsp-g-track { position: relative; height: 22px; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 24 - 1px), var(--separator) calc(100% / 24 - 1px), var(--separator) calc(100% / 24)); }
.dsp-g-head .dsp-g-track { background: none; height: 18px; }
.dsp-g-head span { position: absolute; font-family: var(--font-mono); color: var(--label-2); transform: translateX(-2px); }
.dsp-g-bar { position: absolute; top: 2px; bottom: 2px; border-radius: var(--r-sm); padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-weight: 600; font-size: var(--fs-caption2); line-height: 18px; }
.dsp-g-bar small { font-weight: 400; opacity: .8; }
.dsp-b-dia { background: var(--f-dia); color: var(--dsp-dia); }
.dsp-b-tarde { background: var(--f-tarde); color: var(--dsp-tarde); }
.dsp-b-noche { background: var(--sys-indigo); color: var(--on-accent); }
.dsp-g-bar.ayer { opacity: .55; }
.dsp-g-cargo { margin: var(--sp-3) 0 var(--sp-1); padding-top: var(--sp-2); border-top: .5px solid var(--separator); font-weight: 700; }
.dsp-g-fuera { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin: var(--sp-1) 0 2px 220px; }
.dsp-chip { background: var(--fill); border-radius: var(--r-pill); padding: 2px var(--sp-2); font-size: var(--fs-caption2); color: var(--label-2); }
.dsp-sem th, .dsp-sem td { padding: 6px; vertical-align: top; background: var(--bg-elevated); border: .5px solid var(--separator); border-radius: var(--r-sm); }
.dsp-sem thead th { text-align: center; }
.dsp-sem thead th a { color: var(--label); text-decoration: none; font-weight: 600; }
.dsp-sem th.fds, .dsp-sem td.fds { background: var(--bg-secondary); }
.dsp-sem th.hoy { box-shadow: inset 0 -3px 0 var(--sys-blue); }
.dsp-sem td.falta { border-color: var(--sys-red); background: var(--tint-red); }
.dsp-mtn { display: flex; gap: 6px; font-family: var(--font-mono); font-weight: 700; }
.dsp-mtn .m { color: var(--dsp-dia); } .dsp-mtn .t { color: var(--dsp-tarde); } .dsp-mtn .n { color: var(--dsp-noche); }
.dsp-falta-txt { color: var(--sys-red-text); font-size: var(--fs-caption2); margin-top: 2px; }
.dsp-sem td.sobra { border-color: var(--sys-orange); background: var(--tint-orange); }
.dsp-sobra-txt { color: var(--sys-orange-text); font-size: var(--fs-caption2); margin-top: 2px; }
@media (max-width: 640px) { .dsp-g-row { grid-template-columns: 130px minmax(520px, 1fr); } .dsp-g-fuera { margin-left: 0; } .dsp-nav { margin-left: 0; } }
@media print {
    .dsp-c, .dsp-g-bar, .dsp-sem td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .alert { display: none; }
}

/* Sistema de asistencia: columnas del archivo genérico */
.as-cols { display: flex; flex-wrap: wrap; gap: 6px; }
.as-col { border-radius: var(--r-btn); padding: var(--sp-1) var(--sp-2); background: var(--bg-secondary); gap: 6px; }
.as-up { border: 0; background: transparent; cursor: pointer; color: var(--label-2); font-size: var(--fs-footnote); padding: 0 2px; }

/* Usuarios › Roles y permisos */
.rol-matriz tr.rol-mod td { background: var(--bg-secondary); padding-top: 6px; padding-bottom: 6px; font-size: var(--fs-footnote); }
.rol-matriz td, .rol-matriz th { vertical-align: middle; }
.rol-matriz { width: auto; }
.rol-matriz td:first-child { min-width: 280px; }

/* Bloques de código para TI */
pre.mono { background: var(--bg-secondary) !important; color: var(--label); border-radius: var(--r-btn) !important; }
/* Logo NextShift legible en modo oscuro (el «Next» es azul marino): se invierte la luminosidad conservando los tonos */
@media (prefers-color-scheme: dark) { .login-screen .ns-login-logo { filter: invert(1) hue-rotate(180deg) saturate(1.2); } }

/* Ajustes sobre nextshift-apple.css: páginas con grillas/tablas a todo el ancho y logo sin deformar */
#app .page.page-ancha { max-width: none; padding-bottom: 48px; }
#app .topbar .brand-mark { width: auto; height: 32px; border-radius: 0; object-fit: contain; }
#app .switch input[disabled] { cursor: default; }
#app .switch input[disabled] + span { opacity: .5; }
@media (max-width: 760px) {
    /* Filas de la lista: código y valor a los lados del texto (como iOS); solo las filas anchas bajan el campo */
    #app .glist-row:not(.row-ancha) { flex-wrap: nowrap; }
    #app .glist-row:not(.row-ancha) .glist-value { width: auto; }
    /* Barra de pestañas inferior: cada etiqueta en su espacio, sin montarse */
    #app .navlink span { max-width: 70px; overflow: hidden; text-overflow: ellipsis; text-align: center; }
}
@media (max-width: 760px) {
    /* Nombres cortos en la barra de pestañas (como iOS) */
    #app .navlink span[data-corto] { font-size: 0; }
    #app .navlink span[data-corto]::after { content: attr(data-corto); font-size: 10px; }
    #app .navlink { flex-basis: 68px; }
}