/* ==========================================================
   Storyboard – Control horario y gestión de ausencias
   Estilo de wireframe + overlay de caso de uso
   ========================================================== */
:root {
  --sb-ink: #212529;
  --sb-muted: #6c757d;
  --sb-line: #dee2e6;
  --sb-paper: #f6f7f9;
  --sb-accent: #0d6efd;
  --sb-overlay-bg: rgba(22, 27, 38, .94);
  --sb-overlay-w: 400px;
}

[hidden] { display: none !important; }

body {
  background: var(--sb-paper);
  color: var(--sb-ink);
  min-height: 100vh;
}

/* ---------- Shell de la aplicación ---------- */
.sb-topbar {
  background: #fff;
  border-bottom: 1px solid var(--sb-line);
}
.sb-brand { font-weight: 700; letter-spacing: .02em; }
.sb-brand .bi { color: var(--sb-accent); }

.sb-sidebar {
  width: 240px;
  background: #fff;
  border-right: 1px solid var(--sb-line);
}
@media (min-width: 992px) {
  .sb-sidebar { min-height: calc(100vh - 57px); position: sticky; top: 0; }
}
.sb-sidebar .nav-link {
  color: var(--sb-ink);
  border-radius: .5rem;
  padding: .55rem .75rem;
  display: flex; align-items: center; gap: .6rem;
}
.sb-sidebar .nav-link:hover { background: #f1f3f5; }
.sb-sidebar .nav-link.active { background: #e7f1ff; color: #0a58ca; font-weight: 600; }
.sb-sidebar .sb-section {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--sb-muted); margin: 1rem .75rem .35rem;
}

.sb-main { min-width: 0; }
.sb-footer { font-size: .85rem; color: var(--sb-muted); border-top: 1px solid var(--sb-line); }

/* Cuando el overlay está abierto en pantallas anchas, deja sitio a la derecha */
@media (min-width: 1400px) {
  body.sb-overlay-open .sb-app { margin-right: var(--sb-overlay-w); }
}

/* ---------- Componentes de wireframe ---------- */
.sb-card { background: #fff; border: 1px solid var(--sb-line); border-radius: .75rem; }
.sb-placeholder {
  background: repeating-linear-gradient(45deg, #f1f3f5, #f1f3f5 8px, #e9ecef 8px, #e9ecef 16px);
  border: 1px dashed #adb5bd; border-radius: .5rem; color: var(--sb-muted);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.sb-readonly { background: #f1f3f5 !important; }
.sb-clock { font-variant-numeric: tabular-nums; font-size: 2.5rem; font-weight: 700; line-height: 1; }
.sb-big-btn { min-height: 64px; font-size: 1.15rem; font-weight: 600; }
.sb-kpi { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }

/* Estado de presencia */
.sb-status-dot { width: .75rem; height: .75rem; border-radius: 50%; display: inline-block; }

/* Calendario mensual */
.sb-cal { table-layout: fixed; }
.sb-cal th { font-size: .75rem; text-transform: uppercase; color: var(--sb-muted); text-align: center; }
.sb-cal td { height: 76px; vertical-align: top; font-size: .78rem; padding: .3rem; }
.sb-cal td .d { font-weight: 600; font-size: .8rem; }
.sb-cal td.out { background: #f8f9fa; color: #adb5bd; }
.sb-cal td.today { outline: 2px solid var(--sb-accent); outline-offset: -2px; }
.sb-cal .ev { display: block; border-radius: .25rem; padding: 0 .25rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Barras sencillas para estadísticas */
.sb-bar { height: .6rem; background: #e9ecef; border-radius: 1rem; overflow: hidden; }
.sb-bar > span { display: block; height: 100%; background: var(--sb-accent); }
.sb-vbars { display: flex; align-items: flex-end; gap: .5rem; height: 160px; }
.sb-vbars > div { flex: 1; background: #9ec5fe; border-radius: .25rem .25rem 0 0; position: relative; }
.sb-vbars > div span { position: absolute; bottom: -1.4rem; left: 0; right: 0; text-align: center; font-size: .72rem; color: var(--sb-muted); }

/* Modal "estático" del storyboard (se muestra según el estado) */
.sb-fake-modal {
  position: fixed; inset: 0; z-index: 1050;
  background: rgba(0, 0, 0, .45);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.sb-fake-modal > .card { width: 100%; max-width: 520px; box-shadow: 0 1rem 3rem rgba(0,0,0,.25); }
.sb-fake-modal.lg > .card { max-width: 760px; }

/* ---------- Overlay del caso de uso ---------- */
.sb-overlay {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1080;
  width: var(--sb-overlay-w); max-width: 100vw;
  background: var(--sb-overlay-bg); color: #e9ecef;
  backdrop-filter: blur(4px);
  box-shadow: -0.5rem 0 2rem rgba(0,0,0,.3);
  display: flex; flex-direction: column;
  transform: translateX(0); transition: transform .25s ease;
  font-size: .9rem;
}
.sb-overlay.collapsed { transform: translateX(100%); }
.sb-overlay header { padding: 1rem 1.1rem .75rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.sb-overlay .sb-ov-body { padding: .9rem 1.1rem; overflow-y: auto; flex: 1; }
.sb-overlay footer { padding: .75rem 1.1rem; border-top: 1px solid rgba(255,255,255,.12); }
.sb-overlay h2 { font-size: 1.15rem; margin: .25rem 0 0; color: #fff; }
.sb-overlay h3 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: #9ec5fe; margin: 1.1rem 0 .4rem;
}
.sb-overlay h3:first-child { margin-top: 0; }
.sb-overlay ul, .sb-overlay ol { padding-left: 1.1rem; margin-bottom: .25rem; }
.sb-overlay li { margin-bottom: .2rem; }
.sb-overlay del { color: #adb5bd; }
.sb-overlay .sb-ov-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #0d6efd; color: #fff; border-radius: .35rem; padding: .05rem .45rem; font-size: .8rem;
}
.sb-overlay .sb-notes {
  background: #fff8db; color: #3d3200; border-radius: .5rem; padding: .65rem .8rem;
  box-shadow: 0 2px 0 rgba(0,0,0,.15); font-family: "Segoe Print", "Comic Sans MS", cursive, sans-serif; font-size: .85rem;
}
.sb-overlay .sb-notes del { color: #8a7a3a; }
.sb-overlay .sb-notes .src { font-family: system-ui, sans-serif; font-size: .72rem; color: #7a6a20; display: block; margin-bottom: .25rem; }
.sb-overlay .sb-design { border-left: 3px solid #9ec5fe; padding-left: .7rem; }
.sb-overlay .badge { font-weight: 500; }
.sb-overlay .btn-state { margin: 0 .3rem .4rem 0; }
.sb-overlay a:not(.btn) { color: #9ec5fe; }
.sb-overlay .btn-close { filter: invert(1); }
.sb-overlay kbd { background: rgba(255,255,255,.15); font-size: .72rem; }

.sb-ov-toggle {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 1079;
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.25);
}

@media (max-width: 575.98px) {
  .sb-overlay { top: auto; height: 70vh; width: 100vw; border-radius: 1rem 1rem 0 0; }
  .sb-overlay.collapsed { transform: translateY(100%); }
}