:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #0c1222; color: #eef3ff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top right, #244b78 0, transparent 34%), #0c1222; }
.auth-screen { min-height: 100vh; display: grid; place-content: center; gap: 24px; padding: 28px 16px; background: radial-gradient(circle at 15% 15%, #245c72 0, transparent 30%), #0c1222; }.auth-brand { text-align: center; }.auth-brand .brand { font-size: 2.4rem; }.auth-brand p:last-child { color: #9caac1; margin-top: -12px; }.auth-card { width: min(450px, 100%); padding: 30px; background: #111a2ef2; border: 1px solid #ffffff1c; border-radius: 22px; box-shadow: 0 30px 80px #0006; }.auth-tabs { display: flex; gap: 8px; margin-bottom: 28px; }.auth-tab { flex: 1; border: 0; border-bottom: 2px solid transparent; color: #8291ad; background: transparent; padding: 10px 3px; cursor: pointer; }.auth-tab.active { border-color: #78e4c1; color: #eff5ff; }.auth-card h1 { font-size: 2rem; letter-spacing: -.04em; margin: 8px 0 24px; }.auth-card label { display: block; color: #b9c6db; font-size: .85rem; margin: 14px 0; }.auth-card input, .auth-card select { width: 100%; margin-top: 7px; padding: 12px; color: #eef3ff; background: #0c1222; border: 1px solid #ffffff1c; border-radius: 8px; }.full { width: 100%; margin-top: 8px; }.auth-note { color: #8291ad; font-size: .8rem; line-height: 1.5; }.demo-login { border: 0; color: #78e4c1; background: transparent; cursor: pointer; padding: 0; }.demo-box { margin: 18px 0; padding: 14px; border: 1px solid #78e4c133; border-radius: 10px; background: #78e4c10b; }.demo-box strong, .demo-box button, .demo-box small { display: block; margin-bottom: 6px; }.auth-capabilities { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; color: #8291ad; font-size: .78rem; }.auth-screen.hidden { display: none; }
.app-shell { display: none; min-height: 100vh; }.app-shell.authenticated { display: flex; }
.worker-mode .nav-item[data-view="empleados"], .worker-mode .nav-item[data-view="periodos"], .worker-mode .nav-item[data-view="calculo"], .worker-mode .nav-item[data-view="plano"], .worker-mode .nav-item[data-view="validacion"] { display: none; }.worker-mode .role-grid, .worker-mode .role-picker { display: none; }
.period-card { display: flex; justify-content: space-between; gap: 22px; align-items: center; padding: 25px; max-width: 850px; background: #111a2ee8; border: 1px solid #ffffff12; border-radius: 16px; }.period-card h3 { margin: 16px 0 10px; }.period-card p { color: #b8c5da; margin: 8px 0; }
.calculation-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; max-width: 1000px; }.calculation-row { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid #ffffff12; color: #c5d1e4; }.calculation-row strong { color: #78e4c1; }.plain-preview { overflow-x: auto; padding: 16px; margin: 20px 0; border-radius: 10px; color: #78e4c1; background: #07101d; font: .75rem ui-monospace, monospace; white-space: nowrap; }
.validation-card.validated { border-color: #78e4c1; opacity: .82; }.validation-action:disabled { cursor: not-allowed; opacity: .5; }.validation-badge { color: #78e4c1; font-size: .8rem; }
.modal { position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; background: #050914cc; z-index: 1000; }.modal.hidden { display: none; }.modal-card { position: relative; z-index: 1001; width: min(520px, 100%); max-height: 90vh; overflow: auto; padding: 28px; background: #111a2e; border: 1px solid #ffffff1c; border-radius: 18px; }.modal-close { position: absolute; top: 12px; right: 16px; border: 0; color: #dce8fa; background: transparent; font-size: 1.6rem; cursor: pointer; }.modal-card label { display: block; margin: 12px 0; color: #b9c6db; font-size: .85rem; }.modal-card input, .modal-card select { width: 100%; margin-top: 6px; padding: 11px; color: #eef3ff; background: #0c1222; border: 1px solid #ffffff1c; border-radius: 8px; }
.upload-zone { display: block; padding: 24px; text-align: center; border: 1px dashed #78e4c1aa; border-radius: 12px; cursor: pointer; background: #78e4c10b; }.upload-zone input { display: none; }
.employee-tools { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; margin: 22px 0 10px; }.employee-tools input, .employee-tools select { padding: 12px; border: 1px solid #ffffff1c; border-radius: 9px; color: #eef3ff; background: #111a2e; }.employee-summary, .pagination { display: flex; justify-content: space-between; align-items: center; color: #8291ad; font-size: .8rem; margin: 12px 0; }.employee-table { overflow: auto; border: 1px solid #ffffff12; border-radius: 14px; background: #111a2ee8; }.employee-row { display: grid; grid-template-columns: 1.7fr 1fr 1.4fr 1fr 1.5fr; gap: 16px; align-items: center; min-width: 850px; padding: 15px 18px; border-bottom: 1px solid #ffffff0e; color: #dce8fa; font-size: .85rem; }.employee-row:last-child { border-bottom: 0; }.employee-row.header { color: #8291ad; background: #ffffff08; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }.employee-row strong, .employee-row small { display: block; }.employee-row small { margin-top: 4px; }.row-actions { display: flex; gap: 5px; }.table-action { border: 1px solid #ffffff1c; border-radius: 6px; padding: 6px 8px; color: #b9f2dc; background: transparent; cursor: pointer; font-size: .72rem; }.table-action:hover { background: #78e4c114; }.table-action.danger { color: #ffb4b4; }.pagination { margin-top: 14px; }.pagination button { padding: 8px 12px; }
.sidebar { width: 250px; padding: 34px 22px; background: #0a1020; border-right: 1px solid #ffffff12; position: fixed; inset: 0 auto 0 0; }
.brand { margin: 0; font-size: 1.65rem; font-weight: 800; letter-spacing: -.06em; }.brand span { color: #78e4c1; }.muted, small { color: #8291ad; }.sidebar nav { display: grid; gap: 8px; margin-top: 58px; }.nav-item { border: 0; text-align: left; color: #9caac1; background: transparent; padding: 13px 14px; border-radius: 10px; cursor: pointer; font-size: .95rem; }.nav-item.active, .nav-item:hover { color: #eaf2ff; background: #ffffff12; }.sidebar-footer { position: absolute; bottom: 32px; color: #b8c5da; font-size: .85rem; line-height: 1.7; }.logout { display: block; margin-top: 12px; border: 1px solid #ffffff1c; border-radius: 8px; padding: 8px 10px; color: #ffb4b4; background: transparent; cursor: pointer; }.status-dot { display: inline-block; width: 8px; height: 8px; background: #78e4c1; border-radius: 50%; margin-right: 6px; }.workspace { margin-left: 250px; width: calc(100% - 250px); padding: 40px clamp(24px, 5vw, 70px); max-width: 1500px; }.topbar, .section-title, .panel-head { display: flex; justify-content: space-between; align-items: center; gap: 18px; }.topbar h1 { font-size: 2.5rem; margin: 6px 0 0; }.role-picker label { display: block; color: #8291ad; font-size: .75rem; margin-bottom: 6px; }.role-picker select { color: #eff5ff; background: #18243d; border: 1px solid #ffffff1c; padding: 11px 15px; border-radius: 9px; }.role-grid.compact { margin: 42px 0 28px; }.role-card { text-align: left; color: #eef3ff; padding: 20px; border: 1px solid #ffffff12; border-radius: 16px; background: #ffffff08; cursor: pointer; transition: .2s; }.role-card.selected, .role-card:hover { border-color: #78e4c1; background: #78e4c112; transform: translateY(-2px); }.role-card span { display: block; color: #78e4c1; font-size: .7rem; font-weight: 700; letter-spacing: .08em; }.role-card strong { display: block; font-size: 1.2rem; margin: 11px 0 5px; }.role-card small { display: block; }.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.stats article, .panel, .clock-card, .validation-card, .shift-list { background: #111a2ee8; border: 1px solid #ffffff12; border-radius: 16px; padding: 22px; }.stats strong { display: block; font-size: 2.4rem; margin: 13px 0 5px; }.stats em { color: #78e4c1; font-size: .8rem; font-style: normal; }.stats em.warn, .pill.orange { color: #ffc675; }.panel-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-top: 16px; }.panel h2, .section-title h2 { margin: 5px 0 22px; }.pill { border-radius: 20px; padding: 6px 10px; background: #78e4c114; color: #78e4c1; font-size: .75rem; }.pill.orange { background: #ffc67516; }.bars { display: grid; gap: 18px; }.bars div { display: grid; grid-template-columns: 145px 1fr 35px; gap: 10px; align-items: center; font-size: .85rem; }.bars b { display: block; height: 8px; background: linear-gradient(90deg,#78e4c1,#5ca9e8); border-radius: 10px; }.action-panel .action { display: flex; align-items: center; gap: 12px; width: 100%; padding: 15px 0; color: #eff5ff; background: transparent; border: 0; border-top: 1px solid #ffffff12; text-align: left; cursor: pointer; font-size: 1.1rem; }.action-panel .action span { flex: 1; }.action-panel .action small { display: block; font-size: .75rem; margin-top: 3px; }.hidden { display: none; }.section-title { margin-bottom: 24px; }.primary, .secondary, .approve, .reject { border: 0; border-radius: 9px; padding: 12px 18px; cursor: pointer; color: #08121f; font-weight: 700; background: #78e4c1; }.secondary, .reject { color: #dce8fa; background: #ffffff12; }.clock-card { max-width: 700px; text-align: center; padding: 60px 24px; }.clock { font-size: clamp(3rem, 10vw, 6rem); letter-spacing: -.08em; font-weight: 800; }.clock-card p { color: #9caac1; max-width: 500px; margin: 0 auto 28px; line-height: 1.5; }.result { min-height: 25px; color: #78e4c1; margin-top: 20px; }.shift-list { display: grid; gap: 0; padding: 0; overflow: hidden; }.shift-list > div, .validation-card { display: flex; align-items: center; gap: 22px; border-bottom: 1px solid #ffffff12; border-radius: 0; }.shift-list > div:last-child { border: 0; }.shift-list strong, .validation-card div { flex: 1; }.shift-list span { color: #dce8fa; }.shift-list em { color: #78e4c1; font-style: normal; font-size: .8rem; }.shift-list em.night { color: #adbbff; }.validation-card { margin-bottom: 12px; }.validation-card p { margin: 6px 0; color: #9caac1; }.validation-card small { font-size: .75rem; }
.hero-card { padding: clamp(28px, 6vw, 72px); border: 1px solid #ffffff1c; border-radius: 28px; background: #111a2ee8; box-shadow: 0 30px 80px #0005; }
.eyebrow { color: #78e4c1; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; }
h1 { max-width: 700px; margin: 12px 0; font-size: clamp(2.7rem, 8vw, 6.5rem); line-height: .95; letter-spacing: -.06em; }
.lead { max-width: 600px; color: #aebbd3; font-size: 1.15rem; line-height: 1.6; }
.role-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.role-grid article { padding: 22px; border-radius: 18px; background: #ffffff0b; border: 1px solid #ffffff12; }
.role-grid span { color: #78e4c1; font-size: .8rem; }
.role-grid h2 { margin: 22px 0 8px; }
.role-grid p { margin: 0; color: #aebbd3; }
@media (max-width: 900px) { .sidebar { width: 70px; padding: 24px 10px; }.sidebar .brand, .sidebar .muted, .sidebar-footer, .nav-item { font-size: 0; }.nav-item::before { content: '•'; font-size: 1.5rem; }.workspace { margin-left: 70px; width: calc(100% - 70px); }.stats { grid-template-columns: repeat(2, 1fr); }.panel-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .workspace { padding: 24px 14px; }.topbar { align-items: flex-start; flex-direction: column; }.topbar h1 { font-size: 2rem; }.role-grid.compact { grid-template-columns: 1fr; }.stats { grid-template-columns: 1fr 1fr; }.stats strong { font-size: 1.8rem; }.bars div { grid-template-columns: 110px 1fr 28px; font-size: .72rem; }.validation-card { flex-wrap: wrap; }.validation-card div { flex-basis: 100%; } }
@media (max-width: 700px) {
  .app-shell.authenticated { display: block; }
  .sidebar { position: sticky; top: 0; z-index: 4; width: 100%; height: auto; padding: 10px 12px; border-right: 0; border-bottom: 1px solid #ffffff12; background: #0a1020f5; backdrop-filter: blur(14px); }
  .sidebar .brand, .sidebar > .muted { display: none; }
  /* En móvil el pie de escritorio no debe desaparecer completo: conserva
     una salida de sesión siempre visible y fácil de pulsar. */
  .sidebar-footer { display: block; position: fixed; right: 12px; bottom: 12px; z-index: 20; color: transparent; font-size: 0; line-height: 1; }
  .sidebar-footer .status-dot, .sidebar-footer small { display: none; }
  .sidebar-footer .logout { display: block; margin: 0; min-height: 42px; padding: 10px 14px; color: #ffd0d0; background: #18243d; border-color: #ffffff2b; box-shadow: 0 8px 24px #0008; font-size: .82rem; font-weight: 700; }
  .sidebar nav { display: flex; gap: 6px; overflow-x: auto; margin: 0; padding-bottom: 2px; scrollbar-width: none; }
  .sidebar nav::-webkit-scrollbar { display: none; }
  .nav-item, .sidebar .nav-item { flex: 0 0 auto; font-size: .76rem; white-space: nowrap; padding: 9px 11px; }
  .sidebar .nav-item::before { display: none; }
  .workspace { margin-left: 0; width: 100%; padding: 20px 14px 32px; }
  .section-title, .panel-head { align-items: flex-start; flex-direction: column; }
  .section-title > div:last-child, .section-title > button { width: 100%; }
  .section-title button { margin-top: 4px; }
  .role-picker { width: 100%; }
  .role-picker select { width: 100%; }
  .period-card, .shift-list > div, .validation-card { align-items: flex-start; flex-direction: column; gap: 12px; }
  .period-card .secondary, .validation-card button { width: 100%; }
  .calculation-grid { grid-template-columns: 1fr; gap: 16px; }
  .employee-tools { grid-template-columns: 1fr; }
  .employee-table { border-radius: 10px; }
  .employee-row { min-width: 760px; padding: 13px 12px; }
  .clock-card { padding: 34px 16px; }
  .clock-card button { width: 100%; margin-top: 8px; }
  .auth-screen { padding: 20px 12px; gap: 16px; }
  .auth-brand .brand { font-size: 2rem; }
  .auth-card { padding: 22px 18px; border-radius: 16px; }
  .auth-card h1 { font-size: 1.65rem; }
  .auth-tabs { margin-bottom: 20px; }
  .auth-capabilities { text-align: center; font-size: .7rem; }
}
.modal-card form button.primary { display: block; width: 100%; min-height: 44px; margin-top: 16px; border: 0; border-radius: 9px; padding: 12px 18px; color: #08121f; background: #78e4c1; font-weight: 700; cursor: pointer; }
.period-select { display: grid; gap: 6px; min-width: 260px; color: #8291ad; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.period-select select { min-width: 260px; padding: 12px 14px; color: #eef3ff; background: #111a2e; border: 1px solid #78e4c155; border-radius: 9px; font-size: .9rem; text-transform: none; letter-spacing: normal; }
.calculation-list { padding: 0; overflow-x: auto; }
.calculation-table { min-width: 900px; }
.calculation-table-head, .calculation-result { display: grid; grid-template-columns: minmax(280px, 2.2fr) repeat(4, minmax(105px, .75fr)) minmax(135px, 1fr); gap: 14px; align-items: center; padding: 16px 22px; }
.calculation-table-head { color: #8291ad; background: #ffffff08; border-bottom: 1px solid #ffffff18; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.calculation-result { color: #dce8fa; border-bottom: 1px solid #ffffff10; font-size: .88rem; }
.calculation-result:last-child { border-bottom: 0; }
.calculation-result > span { color: #b9c6db; font-variant-numeric: tabular-nums; }
.calculation-result > strong { color: #78e4c1; font-size: .95rem; font-variant-numeric: tabular-nums; }
.worker-cell strong, .worker-cell small { display: block; }
.worker-cell strong { color: #f1f6ff; font-size: .9rem; }
.worker-cell small { margin-top: 5px; color: #8291ad; font-size: .75rem; }
.payroll-settings { margin: 18px 0; padding: 14px 18px; color: #dce8fa; background: #111a2ee8; border: 1px solid #ffffff12; border-radius: 12px; }.payroll-settings summary { cursor: pointer; color: #78e4c1; font-weight: 700; }.settings-grid { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 12px; margin-top: 16px; }.settings-grid label { display: grid; gap: 6px; color: #8291ad; font-size: .75rem; }.settings-grid input { width: 100%; box-sizing: border-box; padding: 9px; color: #eef3ff; background: #0c1222; border: 1px solid #ffffff1c; border-radius: 7px; }
@media (max-width: 700px) { .settings-grid { grid-template-columns: 1fr 1fr; } }
.calculation-detail { margin: 14px 0; padding: 20px; background: #0d1729; border: 1px solid #ffffff12; border-radius: 14px; }.calculation-detail header, .hours-summary, .concept-row, .concept-head { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; align-items: center; }.calculation-detail header { padding-bottom: 14px; border-bottom: 1px solid #ffffff12; }.calculation-detail header strong, .calculation-detail header small { display:block; }.calculation-detail header small { margin-top:5px; color:#8291ad; }.status-compliant, .status-under_target { justify-self:end; padding:6px 10px; border-radius:20px; font-size:.75rem; color:#78e4c1; background:#78e4c114; }.status-under_target { color:#ffc675; background:#ffc67516; }.hours-summary { grid-template-columns: repeat(5,1fr); margin:16px 0; }.hours-summary span { color:#8291ad; font-size:.75rem; }.hours-summary b { display:block; margin-top:4px; color:#eef3ff; font-size:.95rem; }.concept-table { overflow:hidden; border:1px solid #ffffff10; border-radius:9px; }.concept-head, .concept-row { grid-template-columns: 2fr 1fr 1fr 1fr; padding:10px 12px; }.concept-head { color:#8291ad; background:#ffffff08; font-size:.7rem; font-weight:800; text-transform:uppercase; }.concept-row { color:#c5d1e4; border-top:1px solid #ffffff0c; font-size:.82rem; }.concept-row strong { color:#78e4c1; text-align:right; } @media (max-width:700px){.hours-summary{grid-template-columns:repeat(2,1fr);gap:12px}.calculation-detail header{grid-template-columns:1fr}.status-compliant,.status-under_target{justify-self:start}.concept-head{display:none}.concept-row{grid-template-columns:1.5fr 1fr 1fr 1fr;font-size:.72rem}}
@media (max-width: 700px) { .section-title:has(.period-select) { align-items: stretch; flex-direction: column; }.period-select, .period-select select { width: 100%; min-width: 0; }.calculation-table { min-width: 0; }.calculation-table-head { display: none; }.calculation-result { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 18px; }.calculation-result .worker-cell { grid-column: 1 / -1; padding-bottom: 6px; border-bottom: 1px solid #ffffff12; }.calculation-result > span::before, .calculation-result > strong::before { content: attr(data-label); display: block; margin-bottom: 3px; color: #8291ad; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }.calculation-result > strong { text-align: left; } }
.calc-toolbar { display:grid; grid-template-columns:2fr 1fr 1fr; gap:12px; margin:18px 0 12px; }.calc-toolbar input,.calc-toolbar select { width:100%; box-sizing:border-box; padding:12px 14px; color:#eef3ff; background:#111a2e; border:1px solid #ffffff1c; border-radius:9px; }.calc-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:12px 0 18px; }.calc-kpis div { padding:16px; background:#111a2e; border:1px solid #ffffff12; border-radius:12px; }.calc-kpis b,.calc-kpis span { display:block; }.calc-kpis b { color:#78e4c1; font-size:1.25rem; }.calc-kpis span { margin-top:4px; color:#8291ad; font-size:.75rem; }.calculation-detail { min-width:0; }.concept-row span,.concept-head span { min-width:0; }.concept-row span:first-child,.concept-head span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @media(max-width:700px){.calc-toolbar,.calc-kpis{grid-template-columns:1fr}.concept-row{grid-template-columns:1.6fr .8fr .8fr .9fr!important;font-size:.7rem}}
.user-admin-panel h3 { margin: 24px 0 12px; }.user-admin-panel h3:first-child { margin-top: 0; }.admin-row { display:grid; grid-template-columns:minmax(220px,1fr) auto auto auto; gap:10px; align-items:center; padding:14px 0; border-top:1px solid #ffffff12; }.admin-row strong,.admin-row small { display:block; }.admin-row small { margin-top:4px; color:#8291ad; }.admin-row select { padding:9px; color:#eef3ff; background:#0c1222; border:1px solid #ffffff1c; border-radius:7px; }.admin-row button { white-space:nowrap; } @media(max-width:700px){.admin-row{grid-template-columns:1fr 1fr}.admin-row>div{grid-column:1/-1}}
.attendance-history-panel { margin-top: 1rem; }.attendance-history { display:grid; gap:.55rem; }.attendance-row { display:grid; grid-template-columns:1.1fr 1.6fr 1.3fr 1fr; gap:.75rem; align-items:center; padding:.8rem 0; border-bottom:1px solid rgba(255,255,255,.08); }.attendance-row a { color:#72e0c1; }.attendance-row small { color:#93a4c8; }@media(max-width:700px){.attendance-row{grid-template-columns:1fr 1fr}.attendance-row span:last-of-type{grid-column:1/-1}}
.scope-editor{grid-column:1/-1;display:flex;gap:8px;align-items:center}.scope-editor input{min-width:0;flex:1;padding:9px;color:#eef3ff;background:#0c1222;border:1px solid #ffffff1c;border-radius:7px}.scope-editor button{padding:9px 12px}@media(max-width:700px){.scope-editor{flex-wrap:wrap}.scope-editor input{flex-basis:100%}}
.attendance-table{overflow:auto}.attendance-table .attendance-row{min-width:760px;background:#111a2e;padding:12px 14px;border:1px solid #ffffff10;border-radius:8px}.attendance-table .attendance-row strong{color:#eef3ff}.attendance-table .attendance-row span,.attendance-table .attendance-row small{font-size:.82rem}.brand-image{display:block}.brand-image img{display:block;width:min(190px,100%);height:auto;max-height:62px;object-fit:contain;object-position:left center}.auth-brand .brand-image img{width:min(270px,100%);max-height:90px}.sidebar .brand-image img{width:190px}@media(max-width:900px){.sidebar .brand-image img{width:48px;object-fit:cover;object-position:left}}
.notifications-panel{display:grid;gap:.6rem;margin-bottom:1rem;padding:1rem;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:#111a2e}.notifications-panel .panel-head{display:flex;justify-content:space-between;align-items:center}.notification-item{display:grid;gap:.2rem;text-align:left;color:#eef3ff;background:#18243a;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:.7rem}.notification-item.read{opacity:.65}.notification-item span,.notification-item small{color:#91a5ca}.clock-card button{margin:.25rem}.map-panel{min-height:300px;border-radius:14px;overflow:hidden}.location-warning{color:#ffbd69}
@media(max-width:700px){.notifications-panel{margin:.5rem}.clock-card{padding:1rem}.clock-card button{width:100%;margin:.25rem 0}.stats{grid-template-columns:1fr 1fr}.panel-head{gap:.6rem;align-items:flex-start}.notification-item{font-size:.9rem}}
/* Botón de salida visible en teléfonos y tabletas. */
.mobile-logout{display:none}
@media(max-width:700px){.mobile-logout{display:none!important}.sidebar-footer{display:block;position:fixed;right:12px;bottom:12px;z-index:30;color:transparent;font-size:0;line-height:1}.sidebar-footer .status-dot,.sidebar-footer small,.sidebar-footer #active-user{display:none}.sidebar-footer .logout{display:block;margin:0;min-height:42px;padding:10px 14px;color:#ffd0d0;background:#18243d;border:1px solid #ffffff2b;border-radius:10px;box-shadow:0 8px 24px #0008;font-size:.82rem;font-weight:700}}
.daily-detail{margin-top:14px;border-top:1px solid #ffffff12;padding-top:10px}.daily-detail summary{cursor:pointer;color:#78e4c1;font-weight:700}.daily-table-wrap{overflow:auto;margin-top:10px}.daily-detail table{width:100%;border-collapse:collapse;min-width:620px;font-size:.78rem}.daily-detail th,.daily-detail td{text-align:left;padding:8px;border-bottom:1px solid #ffffff0d}.daily-detail th{color:#8291ad;text-transform:uppercase;font-size:.68rem}.daily-detail td strong{color:#78e4c1}.weekly-detail{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;color:#8291ad;font-size:.78rem}.weekly-detail b{color:#eef3ff}.weekly-detail span b{color:#78e4c1}
.daily-detail .daily-table-wrap{border:1px solid rgba(255,255,255,.1);border-radius:10px;background:#101b30}.daily-detail table{table-layout:fixed}.daily-detail th:nth-child(1),.daily-detail td:nth-child(1){width:18%}.daily-detail th:nth-child(2),.daily-detail td:nth-child(2){width:25%}.daily-detail th:nth-child(3),.daily-detail td:nth-child(3){width:25%}.daily-detail th:nth-child(4),.daily-detail td:nth-child(4),.daily-detail th:nth-child(5),.daily-detail td:nth-child(5){width:16%}.daily-detail td{white-space:nowrap}.daily-detail tbody tr:hover{background:#ffffff08}.novelty-list{display:grid;gap:10px;margin-top:14px}
.compact-layout .workspace{padding:24px clamp(18px,3vw,42px)}
.compact-layout .role-grid.compact{margin:24px 0 18px;gap:10px}
.compact-layout .role-card{padding:14px 16px;border-radius:12px}
.compact-layout .role-card strong{font-size:1.05rem;margin:7px 0 3px}
.compact-layout .stats{gap:10px}.compact-layout .stats article{padding:15px 16px}.compact-layout .stats strong{font-size:2rem;margin:8px 0 3px}
.compact-layout .panel,.compact-layout .clock-card,.compact-layout .shift-list{padding:16px;border-radius:12px}
.compact-layout .panel-grid{gap:10px;margin-top:10px}.compact-layout .section-title{margin-bottom:14px}
@media(max-width:700px){.compact-layout .workspace{padding:14px 10px 26px}.compact-layout .topbar{gap:8px}.compact-layout .topbar h1{font-size:1.7rem;margin:2px 0}.compact-layout .role-grid.compact{margin:14px 0;gap:8px}.compact-layout .role-card{padding:12px}.compact-layout .role-card span{font-size:.62rem}.compact-layout .role-card strong{font-size:.98rem}.compact-layout .role-card small{font-size:.68rem}.compact-layout .stats{gap:8px}.compact-layout .stats article{padding:12px}.compact-layout .stats strong{font-size:1.55rem}.compact-layout .stats small,.compact-layout .stats em{font-size:.68rem}.compact-layout .panel,.compact-layout .clock-card,.compact-layout .shift-list{padding:13px}.compact-layout .clock-card{max-width:none}.compact-layout .clock{font-size:clamp(2.8rem,15vw,4.5rem)}.compact-layout .panel h2,.compact-layout .section-title h2{margin:3px 0 12px;font-size:1.35rem}.compact-layout .shift-list>div{gap:8px;padding:10px 0;flex-wrap:wrap}.compact-layout .shift-list strong{flex-basis:100%}}
.geo-admin-panel { margin-top: 16px; }.geo-settings-grid { display: grid; grid-template-columns: minmax(260px,.8fr) minmax(360px,1.2fr); gap: 16px; }.geo-box { min-width: 0; padding: 18px; border: 1px solid #ffffff1c; border-radius: 12px; background: #0c122233; }.geo-box h4 { margin: 0 0 14px; }.geo-box label { display: block; margin: 10px 0; color: #b9c6db; font-size: .84rem; }.geo-box input,.geo-box select { width: 100%; margin-top: 6px; padding: 10px; color: #eef3ff; background: #0c1222; border: 1px solid #ffffff1c; border-radius: 8px; }.geo-coordinate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.geo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }.geo-list { display: grid; gap: 10px; margin-top: 16px; }.geo-list-row,.geo-user-row { display: grid; gap: 10px; padding: 12px; border: 1px solid #ffffff16; border-radius: 10px; background: #111a2e; }.geo-list-row { grid-template-columns: minmax(0,1fr) auto; align-items: center; }.geo-list-row small,.geo-user-title small { display: block; margin-top: 4px; color: #9caac1; }.geo-user-row { grid-template-columns: minmax(0,1fr) minmax(140px,.7fr) minmax(240px,1fr) auto; align-items: end; }.geo-user-title { align-self: center; }.geo-user-row label { margin: 0; }.geo-admin-panel .section-title { margin-bottom: 12px; }@media(max-width:900px){.geo-settings-grid{grid-template-columns:1fr}.geo-user-row{grid-template-columns:1fr 1fr}.geo-user-title{grid-column:1/-1}}@media(max-width:560px){.geo-list-row,.geo-user-row{grid-template-columns:1fr}.geo-coordinate-grid{grid-template-columns:1fr}.geo-list-row .geo-actions{justify-content:flex-start}}