/* ============================================================
   LAYOUT — App Shell
   Template base: sidebar fijo + main-content.
   Mobile: top-bar + bottom-nav.
   Depende de: atoms/avatar.css, organisms/sidebar.css, tokens.css
   ============================================================ */

/* ── Theme icon toggle — luna en light, sol en dark ── */
.theme-icon-sun  { display: none; }
.theme-icon-moon { display: block; }
[data-theme="dark"] .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-sun  { display: block; }

/* ── Skip to content (keyboard nav) ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 9999;
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-decoration: none;
  transition: top 0.1s;
}
.skip-link:focus {
  top: var(--space-4);
}

/* ── Reset base ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  background-color: var(--color-bg); /* fallback base — las waves van encima */
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: transparent; /* waves visibles a través del body */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }
img, svg { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* ── Glass Blur Layer — capa única de desenfoque para todo el viewport ── */
/* z-index: 0 → mismo nivel que wave-bg, DOM order lo pone encima.          */
/* app-shell tiene z-index: auto → no crea stacking context propio.         */
/* Esto permite que los elementos fixed dentro de app-shell (sidebar,       */
/* footer, etc.) participen en el root stacking context con sus z-indexes   */
/* reales, y que el backdrop-filter del sidebar capture esta capa           */
/* directamente (blurred waves) en todas las páginas sin importar el        */
/* contenido que haya detrás del sidebar.                                   */
.glass-blur-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  background: transparent;
  pointer-events: none;
}

/* ── App Shell ── */
/* Sin z-index → no crea stacking context. El orden visual (app-shell sobre */
/* glass-blur-layer) lo garantiza el DOM order (app-shell viene después).   */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  position: relative;
}

/* ── Main Content ── */
/* Flex column: el gap da ritmo vertical a todas las secciones de la página.  */
/* Ningún hijo directo necesita margin propio — el gap lo maneja.              */
/* El background va directamente en el elemento — sin ::before ni backdrop-filter.
   El desenfoque lo provee .glass-blur-layer; aquí solo una tinta semi-transparente. */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: var(--space-2);
  padding: var(--space-4);
  padding-bottom: calc(var(--space-12) + var(--space-8));
  overflow-x: hidden;
  border-radius: var(--radius-xl);
  position: relative;
  background: var(--glass-bg);
  box-shadow: 0 2px 24px rgba(62, 95, 230, 0.07), 0 1px 4px rgba(0,0,0,0.04);
}

/* ── Top Bar (mobile only) ── */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background-color: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--glass-border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.top-bar-logo {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  letter-spacing: -0.02em;
}

.top-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ── Bottom Nav (mobile only) ── */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: stretch;
  background-color: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-top: 1px solid var(--glass-border);
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -4px 24px rgba(62, 95, 230, 0.08);
}

.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  text-decoration: none;
  min-height: 56px;
  transition: color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

.bottom-nav-item i { font-size: 1.25rem; }

.bottom-nav-item.active,
.bottom-nav-item:hover { color: var(--color-primary); }

/* ── Main Wrapper — columna derecha del app-shell ── */
.main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  min-width: 0;
  overflow-x: hidden;
}

/* ── Tablet / Desktop ── */
@media (min-width: 768px) {
  .app-shell { flex-direction: row; }

  .top-bar    { display: none; }
  .bottom-nav { display: none; }

  /* El sidebar es position:fixed. El main-wrapper desplaza
     todo el contenido (header + main + footer) a la derecha.
     El margin exacto lo gestiona sidebar.css según data-sidebar. */
  .main-wrapper {
    margin-left: var(--sidebar-width-icon); /* default: colapsado */
  }

  .main-content {
    margin: var(--space-3);
    margin-bottom: calc(44px + var(--space-3)); /* footer fijo + gap visual */
    padding: var(--space-6);
    padding-bottom: var(--space-6);
    padding-top: var(--space-4);
  }
}

@media (min-width: 1024px) {
  .main-content { margin: var(--space-4); margin-bottom: calc(44px + var(--space-4)); padding: var(--space-8); padding-top: var(--space-4); padding-bottom: var(--space-8); }
}

/* ============================================================
   CONTENT HEADER — barra superior del área de contenido
   Sticky, máx 72px, nunca tiene color propio.
   ============================================================ */

.content-header {
  display: none; /* oculto en mobile */
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  position: sticky;
  top: 0;
  z-index: 50;
  height: 64px;
  padding: 0 var(--space-6);
  background: var(--glass-bg);
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .content-header {
    display: flex;
  }
}

.content-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex: 1;
}

.content-header-context {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  max-width: 380px;
}

.content-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ── Toggle del sidebar dentro del header ── */
.content-header-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast), background var(--transition-fast);
  flex-shrink: 0;
}
.content-header-toggle:hover { color: var(--color-text); background: var(--color-surface); }

/* ── Breadcrumbs dentro del header ── */
.header-breadcrumb ul {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  padding: 0;
  margin: 0;
}

.bc-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
}

.bc-link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.bc-link:hover { color: var(--color-primary); }

.bc-sep {
  font-size: 0.55rem;
  color: var(--color-text-soft);
  margin: 0 var(--space-2);
}

.bc-current {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

/* ── Header context (datos dinámicos de la vista) ── */
.header-patient-context {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-1) var(--space-3);
  border-left: 1px solid var(--color-divider);
}

.header-patient-name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  white-space: nowrap;
}

.header-patient-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ── User menu ── */
.user-menu {
  position: relative;
}

.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-lg);
  padding: var(--space-1) var(--space-2);
  transition: background var(--transition-fast);
}
.user-menu-trigger:hover { background: var(--color-surface); }

.user-menu-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.user-menu-name {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
  white-space: nowrap;
  line-height: 1;
}

.user-menu-role {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1;
}

.user-menu-caret {
  font-size: 0.6rem;
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}

/* Dropdown panel */
.user-menu-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 220px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 200;
}

[data-theme="dark"] .user-menu-dropdown {
  background: rgba(20, 26, 50, 0.88);
  border-color: rgba(255, 255, 255, 0.10);
}

.user-menu-dropdown.dropdown-open { display: block; }

.user-menu-dropdown-header {
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}

.user-menu-dropdown-name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0;
}

.user-menu-dropdown-email {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: var(--space-1) 0 0;
}

.user-menu-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text);
  text-decoration: none;
  transition: background var(--transition-fast);
}
.user-menu-dropdown-item:hover { background: var(--color-surface); color: var(--color-text); }
.user-menu-dropdown-item i { width: 16px; text-align: center; color: var(--color-text-muted); }

.user-menu-dropdown-item-danger { color: var(--color-error); }
.user-menu-dropdown-item-danger i { color: var(--color-error); }
.user-menu-dropdown-item-danger:hover { background: var(--color-error-soft); color: var(--color-error); }

.user-menu-dropdown-divider {
  height: 1px;
  background: var(--color-divider);
  margin: var(--space-1) 0;
}

/* ============================================================
   APP FOOTER — firma fija en bottom, panel sube sobre contenido
   ============================================================ */

/* Solo visible en desktop */
.app-footer { display: none; }

@media (min-width: 768px) {
  .app-footer {
    display: flex;
    align-items: stretch;
    min-height: 44px;
    position: fixed;
    bottom: 0;
    left: var(--sidebar-width-icon);
    right: 0;
    z-index: 80;
    /* El panel expandido (.app-footer-expanded) es sibling en el DOM, fuera de este
       elemento, por lo que su propio backdrop-filter ve el contenido real de la página
       sin quedar atrapado en el stacking context del footer bar. */
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    background: rgba(255, 255, 255, 0.72);
    border-top: 1px solid var(--glass-border);
  }
}

[data-theme="dark"] .app-footer {
  background: rgba(26, 31, 40, 0.78);
}

.app-footer-details {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
}

.app-footer-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-6);
  font-size: var(--text-xs);
  font-family: inherit;
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  user-select: none;
  transition: color var(--transition-fast);
}

.app-footer-summary:hover { color: var(--color-text); }
.app-footer-summary i { font-size: 0.7rem; }

.app-footer-brand {
  font-weight: var(--font-semibold);
  color: var(--color-primary);
}

.app-footer-sep { color: var(--color-text-soft); }

.app-footer-chevron {
  margin-left: auto;
  transition: transform var(--transition-base);
}

/* Chevron rota cuando el panel está abierto — usa :has() para detectar el sibling */
.app-footer-wrapper:has(.dropdown-open) .app-footer-chevron {
  transform: rotate(180deg);
}

/* Panel expandido: sibling fijo que sube sobre el contenido.
   Posición exacta se completa con las reglas de sidebar.css (left según ancho del sidebar). */
.app-footer-expanded {
  display: none;
  position: fixed;
  bottom: 44px; /* altura del footer bar */
  left: var(--sidebar-width-icon); /* default: sidebar colapsado */
  right: 0;
  z-index: 81; /* sobre el footer bar (z-index: 80) */
  padding: var(--space-4) var(--space-6) var(--space-5);
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.08);
}

.app-footer-expanded.dropdown-open {
  display: block;
  animation: footer-rise 0.2s ease;
}

[data-theme="dark"] .app-footer-expanded {
  background: rgba(18, 24, 48, 0.60);
  border-top-color: rgba(255, 255, 255, 0.10);
}

@keyframes footer-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.app-footer-expanded-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.app-footer-expanded-label {
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.app-footer-link {
  display: block;
  color: var(--color-primary);
  text-decoration: none;
  font-size: var(--text-xs);
}
.app-footer-link:hover { text-decoration: underline; }

/* ============================================================
   GRID SYSTEM — mobile-first
   ============================================================ */

/* ── Base: todas las grids son 1 columna en mobile ── */
.grid-1,
.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

/* ── grid-2: 2 columnas desde tablet ── */
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ── grid-3: 2 columnas en tablet, 3 en desktop ── */
@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ── grid-4: 2 columnas en tablet, 4 en desktop ── */
@media (min-width: 768px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ── Column spans ── */
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }

/* En mobile los spans no aplican (solo hay 1 columna) */
@media (max-width: 767px) {
  .col-span-2,
  .col-span-3 { grid-column: span 1; }
}

/* ============================================================
   CONTENT COLS — dos paneles side-by-side
   (expediente paciente, consulta prenatal)
   ============================================================ */

.content-cols {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.content-cols > .col-left,
.content-cols > .col-right {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

@media (min-width: 1024px) {
  .content-cols {
    flex-direction: row;
    align-items: stretch;   /* ambas columnas adoptan la altura del más alto */
    gap: var(--space-6);
  }

  .content-cols > .col-left  { flex: 0 0 360px; }
  .content-cols > .col-right { flex: 1 1 0; }

  /* El último card de cada columna llena el espacio restante — sin huecos */
  .content-cols > .col-left  > :last-child,
  .content-cols > .col-right > :last-child { flex: 1; }
}

/* ── Stack utilities — flex columns con gap uniforme ──────────── */
/* Principio: el contenedor controla el espacio entre sus hijos.  */
/* Ningún componente hijo (card, alert, etc.) tiene margin propio. */

.stack-1 { display: flex; flex-direction: column; gap: var(--space-1); }
.stack-2 { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-3 { display: flex; flex-direction: column; gap: var(--space-3); }
.stack-4 { display: flex; flex-direction: column; gap: var(--space-4); }
.card-stack { display: flex; flex-direction: column; gap: var(--space-5); }

/* Modificadores de stack */
.stack-shrink { flex-shrink: 0; }
.stack-mb-4   { margin-bottom: var(--space-4); }

/* ============================================================
   RESPONSIVE HELPERS
   ============================================================ */

/* Oculto en mobile (< 768px)
   Sin !important: el elemento define su display (flex/block) en el media
   query de desktop; aquí solo lo ocultamos cuando no aplica. */
.hide-mobile { display: none; }
@media (min-width: 768px) {
  .hide-mobile { display: revert; }
}

/* Oculto en desktop (>= 768px) */
.hide-desktop { display: revert; }   /* mobile: no interfiere con display del elemento */
@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}

/* En mobile fuerza columna aunque sea row en desktop */
.stack-mobile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
@media (min-width: 768px) {
  .stack-mobile {
    flex-direction: row;
    align-items: center;
  }
}

/* ============================================================
   PAGE LAYOUTS — contenedores de página
   ============================================================ */

/* ── Contenedor principal con max-width y padding adaptativo ── */
.content-grid {
  width: 100%;
  max-width: 1200px;
  padding: 0;  /* el padding viene de .main-content */
}

/* ── Page container (alias semántico) ── */
.page-container { max-width: 1200px; }

/* ── Stat grid: 2 cols mobile → 3 cols tablet → 6 cols desktop ── */
.stat-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) {
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .stat-grid { grid-template-columns: repeat(6, 1fr); gap: var(--space-4); }
}

/* ── layout-two-col (alias existente, se mantiene) ── */
.layout-two-col {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .layout-two-col { grid-template-columns: 1fr 1fr; }
}

/* ── Back to top ── */
.back-to-top {
  position: fixed;
  bottom: calc(var(--space-12) + var(--space-8));
  left: var(--space-4);
  z-index: 90;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
}

[data-theme="dark"] .back-to-top {
  background: rgba(30, 38, 70, 0.55);
  border-color: rgba(255, 255, 255, 0.10);
}

.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover { color: var(--color-primary); }

.back-to-top .icon { width: 14px; height: 14px; }

@media (min-width: 768px) {
  .back-to-top {
    bottom: calc(44px + var(--space-4));
    left: calc(var(--sidebar-width-icon) + var(--space-4));
  }
}