/* =====================================================================
   Layout de la aplicación (shell autenticado) y páginas específicas
   ===================================================================== */

.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
}

/* --- Sidebar --- */
.sidebar {
  /* Vidrio esmerilado en vez de panel opaco: el aurora de fondo se
     nota a través, en vez de quedar tapado por completo detrás de
     un bloque sólido — es lo que le da a la interfaz esa sensación
     de "vivo" que tienen paneles como el de seenode.com. */
  background: rgba(14, 20, 32, 0.78);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-right: 1px solid var(--line-soft);
  padding: var(--space-5) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  /* Sin esto, el sidebar crecía junto con el contenido principal (ej.
     una grilla de 200 expedientes) en vez de quedarse fijo en
     pantalla. */
  position: sticky;
  top: 0;
  height: 100vh;
  /* Antes el overflow-y vivía acá, en el sidebar entero — con una
     lista de nav larga (el panel admin tiene 10 secciones), el botón
     de usuario/cerrar sesión quedaba empujado fuera del viewport y
     había que adivinar que hacía falta scrollear DENTRO del drawer
     para encontrarlo. Ahora la marca y el botón de usuario quedan
     fijos (ver .sidebar-brand y .sidebar-footer con flex-shrink:0);
     solo el nav del medio scrollea si no entra completo — el botón
     de usuario está siempre a la vista, sin buscarlo. */
  overflow: hidden;
}
.sidebar-brand {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-2);
}
.sidebar-brand .seal-mark { width: 32px; height: 32px; flex-shrink: 0; }
.sidebar-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.sidebar-brand-text strong { font-family: var(--font-display); font-size: var(--text-md); letter-spacing: 0.01em; }
.sidebar-brand-text span { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }

.nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Esta es la única parte que scrollea ahora — marca y footer
     quedan fijos fuera de este contenedor. min-height:0 es
     imprescindible: sin eso, un hijo flex con overflow-y ignora el
     límite del padre y sigue creciendo con el contenido en vez de
     scrollear (bug clásico de flexbox). */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.nav-group-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 0 var(--space-3);
  margin-bottom: var(--space-2);
}
.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-link:hover { background: var(--ink-800); color: var(--text-primary); }
.nav-link.active { background: var(--accent-glow); color: var(--accent-400); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(76,126,243,0.25); }
.nav-link .icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; }
.nav-link .count {
  margin-left: auto;
  background: var(--ink-700);
  color: var(--text-secondary);
  font-size: 11px;
  padding: 1px 7px;
  border-radius: var(--radius-full);
}

.sidebar-footer { flex-shrink: 0; }
.user-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--ink-800);
  border: 1px solid var(--line);
}
.user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent-glow);
  color: var(--accent-400);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: var(--text-sm);
  flex-shrink: 0;
}
.user-chip-info { flex: 1; min-width: 0; }
.user-chip-info strong { display: block; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip-info span { display: block; font-size: 11px; color: var(--text-muted); }

/* --- Contenido principal --- */
.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.topbar {
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(14, 20, 32, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.topbar-page-row {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  gap: var(--space-3);
}
.topbar h1 { font-size: var(--text-lg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar-actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink:0; }

/* --- Franja de marca del header móvil ---
   En escritorio la marca ya vive en el sidebar, así que esta franja
   queda oculta. En mobile el sidebar arranca fuera de pantalla
   (transform: translateX(-100%)), así que sin esta franja el logo no
   se veía en absoluto hasta abrir el menú — la marca no tenía
   ninguna presencia en la experiencia real del celular. */
.topbar-brand-row { display: none; }
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--ink-800);
  border: 1px solid var(--line);
  color: var(--text-primary);
  flex-shrink: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.btn-icon:hover { background: var(--ink-700); border-color: var(--accent-500); }
.btn-icon .icon { width: 19px; height: 19px; }

@media (max-width: 960px) {
  .topbar-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--line-soft);
  }
  .topbar-brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
  .topbar-brand strong { font-family: var(--font-display); font-size: var(--text-md); letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .topbar-page-row {
    height: auto;
    min-height: 56px;
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    row-gap: var(--space-3);
  }
  .topbar h1 { white-space: normal; font-size: var(--text-md); }
  .topbar-actions { width: 100%; }
}
@media (max-width: 480px) {
  /* Antes forzaba .btn a flex:1 (ancho completo) — Victor lo sintió
     invasivo, un botón gigante gritando en la cara. También probé
     alinear el grupo a la derecha, pero en páginas con dos botones
     (ej. Sincronizar ahora / Archivar en el detalle de expediente)
     eso los empujaba lejos del título. Flex-start (izquierda, el
     valor por defecto) es el que funciona bien en todos los casos:
     botón único o par de botones, siempre pegados al título. */
  .topbar-actions { flex-wrap: wrap; }
}
/* Caso especial de Expedientes: "Seleccionar" y "Agregar expediente"
   son dos acciones de estatus distinto (una alterna un modo, la otra
   crea) — separarlas a los extremos dice eso mismo visualmente en
   vez de amontonarlas juntas a la derecha como el resto de páginas. */
.acciones-expedientes { display: flex; gap: var(--space-2); }
@media (max-width: 960px) {
  .acciones-expedientes { width: 100%; justify-content: space-between; }
}
/* Mismo criterio en el detalle de expediente: Sincronizar (acción
   frecuente, de rutina) a la izquierda; Archivar (acción de cierre,
   menos frecuente) a la derecha — quedan lejos entre sí a propósito. */
.acciones-expediente-detalle { display: flex; gap: var(--space-2); }
@media (max-width: 960px) {
  .acciones-expediente-detalle { width: 100%; justify-content: space-between; }
}

.main-content {
  padding: var(--space-6);
  flex: 1;
  max-width: 1280px;
  width: 100%;
  overflow-x: hidden; /* respaldo: ningún elemento ancho debe desbordar toda la página, aunque olvide manejarlo puntualmente */
}

/* --- Grid de estadísticas (Dashboard) --- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
@media (max-width: 640px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .stat-card { padding: var(--space-4); }
  .stat-card .stat-value { font-size: var(--text-lg); }
}
.stat-card {
  cursor: pointer;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.stat-card:hover { border-color: var(--accent-500); transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(76,126,243,0.25), var(--shadow-card); }
.stat-card .stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.stat-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--accent-glow);
  color: var(--accent-400);
}
.stat-icon .icon { width: 19px; height: 19px; }
.stat-icon.tone-success { background: var(--success-glow); color: var(--success-500); }
.stat-icon.tone-warning { background: var(--warning-glow); color: var(--warning-500); }
.stat-icon.tone-danger { background: var(--danger-glow); color: var(--danger-500); }
.stat-icon.tone-seal { background: var(--seal-glow); color: var(--seal-400); }
.stat-trend { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: 700; color: var(--text-muted); }
.stat-trend .icon { width: 13px; height: 13px; }
.stat-trend.up { color: var(--success-500); }
.stat-trend.down { color: var(--danger-500); }
.stat-card .stat-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: var(--space-1);
}
.stat-card .stat-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--text-primary);
}
.stat-card .stat-value.accent { color: var(--accent-400); }

/* --- Grid de tarjetas de expediente (§12) --- */
.expedientes-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.expedientes-toolbar .search-box { flex: 1; min-width: 220px; position: relative; display: flex; align-items: center; }
.expedientes-toolbar .search-box .icon {
  position: absolute;
  left: 14px;
  width: 16px; height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}
.expedientes-toolbar .search-box input {
  width: 100%;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px 10px 40px;
  color: var(--text-primary);
  font-size: var(--text-sm);
}
.expedientes-toolbar .search-box input:focus { border-color: var(--accent-500); outline: none; }

/* Selects de filtro: alinear con el resto de la barra de herramientas
   y dar espacio para un ícono de chevron consistente entre navegadores. */
.expedientes-toolbar select {
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  cursor: pointer;
}
.expedientes-toolbar select:focus { border-color: var(--accent-500); outline: none; }

@media (max-width: 720px) {
  /* Compacidad en mobile: el mismo padding "de escritorio" (24px)
     en una pantalla de 375px de ancho es lo que hacía sentir todo
     enorme — tarjetas, íconos y texto ocupando el triple del
     espacio necesario para la misma información. */
  .card { padding: var(--space-4); }
  .stat-card { gap: var(--space-2); }
  .stat-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); }
  .stat-icon .icon { width: 16px; height: 16px; }
  .stat-card .stat-value { font-size: var(--text-xl); }
  .stat-card .stat-label { margin-bottom: 0; }
}

/* --- Fila de filtros con ícono ---
   Cada filtro es un ícono + <select> nativo (sin dependencias), igual
   patrón visual que el buscador. En mobile se acomodan en una grilla
   de 2 columnas en vez de apilarse uno debajo del otro a lo largo de
   toda la pantalla — antes 4 selects de ancho completo hacían que la
   página fuera casi solo formulario antes de llegar a un resultado. */
.filtros-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.filtro-field { position: relative; flex: 1 1 190px; display: flex; align-items: center; min-width: 0; }
.filtro-field .icon {
  position: absolute;
  left: 13px;
  width: 15px; height: 15px;
  color: var(--text-muted);
  pointer-events: none;
}
.filtro-field select { width: 100%; padding-left: 36px; }
.filtro-field.activo {
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1px var(--accent-500);
}
/* Los <select> nativos renderizan mal un fondo translúcido (rgba) —
   varios navegadores de escritorio lo ignoran y caen a blanco/gris
   del sistema en vez de mezclarlo con lo que hay debajo (bug
   reportado: el filtro activo se veía "en blanco" en computadora,
   aunque en el celular se veía bien). Se usa un color sólido en su
   lugar, sin transparencia, así no hay nada que el navegador pueda
   interpretar mal. */
.filtro-field.activo select { color: var(--text-primary); border-color: var(--accent-500); background: #1c2c4d; }
.filtro-field.activo .icon { color: var(--accent-400); }

/* --- Chip de filtro booleano (ej. "Solo con problemas") ---
   Mismo criterio visual que .filtro-field.activo: se enciende con
   borde + fondo de acento cuando está activo, en vez de un checkbox
   nativo suelto flotando al lado de una etiqueta — más consistente
   con el resto de la barra de filtros y más fácil de tocar en mobile. */
.filtro-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  white-space: nowrap;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.filtro-chip .icon { width: 16px; height: 16px; color: var(--text-muted); }
.filtro-chip:hover { border-color: var(--accent-500); }
.filtro-chip.activo { border-color: var(--warning-500); background: var(--warning-glow); color: var(--text-primary); }
.filtro-chip.activo .icon { color: var(--warning-500); }

@media (max-width: 720px) {
  .expedientes-toolbar { flex-direction: column; align-items: stretch; }
  .filtros-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); width: 100%; }
  .filtro-field { flex: unset; min-width: 0; }
  .filtro-field select { font-size: var(--text-xs); padding: 9px 8px 9px 32px; }
  .filtro-field .icon { left: 10px; }
}

.expedientes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}

.expediente-card {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
  position: relative;
}
.expediente-card:hover { border-color: var(--accent-500); transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(76,126,243,0.25), var(--shadow-card); }
.expediente-card .exp-numero { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent-400); }
.expediente-card .exp-recurso { font-size: var(--text-sm); color: var(--text-secondary); }
.exp-estado-pill {
  display: inline-block;
  align-self: flex-start;
  padding: 7px 16px;
  border-radius: var(--radius-full);
  background: var(--accent-500);
  color: #ffffff;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.3;
  box-shadow: 0 0 0 1px rgba(76,126,243,0.35), 0 3px 14px -2px rgba(76,126,243,0.5);
}
/* Variante "anterior" para la Cronología: mismo pill, pero apagado —
   el ojo tiene que ir derecho al estado nuevo (a la derecha), no
   competir en brillo con el que ya quedó atrás. */
.exp-estado-pill-anterior {
  background: var(--ink-700);
  color: var(--text-secondary);
  box-shadow: none;
  border: 1px solid var(--line);
}
.timeline-cambio-estado {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: 8px;
}
.timeline-cambio-estado-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.timeline-cambio-estado-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.timeline-cambio-flecha {
  display: flex;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-top: 16px; /* alinea con la píldora, no con la etiqueta de arriba */
}
.timeline-cambio-flecha .icon { width: 16px; height: 16px; }
.expediente-card .exp-referencia {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}
.expediente-card .exp-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-muted);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
}
.expediente-card .exp-meta strong { color: var(--text-secondary); }
.expediente-card .novedad-dot {
  position: absolute;
  top: var(--space-4); right: var(--space-4);
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent-500);
  box-shadow: 0 0 0 4px var(--accent-glow);
}

/* --- Timeline (§17) --- */
.timeline { display: flex; flex-direction: column; }
.timeline-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  position: relative;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: 13px; top: 26px; bottom: 0;
  width: 1px;
  background: var(--line);
}
.timeline-item:last-child::before { display: none; }
.timeline-marker {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ink-800);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  z-index: 1;
}
.timeline-item.no-revisado .timeline-marker { border-color: var(--accent-500); background: var(--accent-glow); }
.timeline-body { padding-top: 2px; }
.timeline-title { font-size: var(--text-sm); font-weight: 600; margin-bottom: 2px; }
.timeline-item.no-revisado .timeline-title { color: var(--accent-400); }
.timeline-date { font-size: var(--text-xs); color: var(--text-muted); }
.timeline-desc { font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-2); }

/* --- Página de autenticación --- */
.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  position: relative;
  overflow: hidden;
  /* Antes tenía su propio degradé + fondo sólido, duplicando (y
     tapando por completo) el aurora global del body. Se deja
     transparente para que dependa de una única fuente de verdad. */
}
.auth-card {
  width: 100%;
  max-width: 420px;
  position: relative;
  z-index: 1;
}
.auth-seal { width: 56px; height: 56px; margin: 0 auto var(--space-5); display: block; }
.auth-card h1 {
  text-align: center;
  font-size: var(--text-xl);
  margin-bottom: var(--space-1);
}
.auth-card .auth-subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}
.auth-footer { text-align: center; margin-top: var(--space-5); font-size: var(--text-sm); color: var(--text-muted); }
.auth-footer a { color: var(--accent-400); font-weight: 600; }
.auth-footer a:hover { text-decoration: underline; }

.auth-back-link {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: var(--radius-full);
  background: rgba(14, 20, 32, 0.75);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.auth-back-link:hover { color: var(--text-primary); border-color: var(--accent-500); }
.auth-back-link .icon { width: 16px; height: 16px; }

.password-field { position: relative; }
.password-field input { padding-right: 44px; width: 100%; }
.password-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 8px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
}
.password-toggle:hover { color: var(--text-primary); }
.password-toggle .icon { width: 18px; height: 18px; }

.seal-watermark {
  position: absolute;
  width: 640px; height: 640px;
  right: -180px; bottom: -220px;
  opacity: 0.05;
  pointer-events: none;
}

/* --- Tablas (admin) --- */
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
/* Sin esto, una tabla ancha (como Usuarios, con 6+ columnas) forzaba
   a toda la página a desplazarse horizontalmente en pantallas
   angostas, cortando el sidebar — ahora el scroll queda contenido
   dentro de la propia tarjeta. */
.card:has(.data-table) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.data-table { min-width: 640px; }
.data-table th {
  text-align: left;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--line);
}
.data-table td { padding: var(--space-3); border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.data-table tr:hover td { background: var(--ink-800); }
.data-table .row-actions { display: flex; gap: var(--space-2); justify-content: flex-end; flex-wrap: wrap; }

@media (max-width: 960px) {
  /* Tablet: la tabla real se mantiene, pero se ocultan columnas
     secundarias para que quepa sin scroll horizontal larguísimo. */
  .data-table .col-secundaria { display: none; }
}

@media (max-width: 720px) {
  /* Mobile: la tabla deja de ser tabla. En vez de forzar un scroll
     horizontal (que es lo que Victor reportó: columnas cortadas,
     encabezados ilegibles), cada <tr> se convierte en una tarjeta
     propia y cada <td> en un par etiqueta/valor — usando el propio
     atributo data-label que ya trae la celda, sin tocar la lógica JS
     que arma las filas. Es una transformación puramente de
     presentación (CSS), la fuente de datos sigue siendo la misma
     tabla semántica. */
  .card:has(.data-table) { overflow-x: visible; padding: var(--space-3); }
  .data-table { min-width: 0; border-collapse: separate; border-spacing: 0 var(--space-2); }
  .data-table thead { display: none; }
  .data-table tbody { display: block; }
  .data-table tr {
    display: block;
    background: var(--ink-750, var(--ink-700));
    background: color-mix(in srgb, var(--ink-800) 55%, var(--ink-700) 45%);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: var(--space-3);
  }
  /* En modo tarjeta ya no compiten por ancho horizontal, así que las
     columnas secundarias vuelven a mostrarse: ocultarlas ahora solo
     escondería información sin ninguna necesidad real. */
  .data-table .col-secundaria { display: flex; }
  .data-table td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 6px 0;
    border-bottom: 1px solid var(--line-soft);
    text-align: right;
    font-size: var(--text-sm);
  }
  .data-table tr td:first-child { padding-top: 2px; }
  .data-table tr td:last-child { border-bottom: none; padding-bottom: 2px; }
  .data-table td[data-label]::before {
    content: attr(data-label);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    text-align: left;
    flex-shrink: 0;
    padding-top: 1px;
  }
  .data-table td:not([data-label]) { justify-content: flex-end; border-bottom: none; padding-top: var(--space-2); }
  .data-table .row-actions { justify-content: flex-end; width: 100%; }
  .data-table .menu-acciones { width: auto; }
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  gap: var(--space-4);
  flex-wrap: wrap;
}
.section-header h1 { font-size: var(--text-xl); }
.section-header p { color: var(--text-muted); font-size: var(--text-sm); margin-top: 2px; }

.detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.detail-header .exp-numero-lg { font-family: var(--font-mono); color: var(--accent-400); font-size: var(--text-sm); margin-bottom: var(--space-2); }
.detail-header h1 { font-size: var(--text-lg); max-width: 640px; }
.detail-meta { display: flex; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-4); }
.detail-meta div { font-size: var(--text-xs); color: var(--text-muted); }
.detail-meta strong { display: block; font-size: var(--text-sm); color: var(--text-secondary); margin-top: 2px; }

.two-col { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-5); align-items: start; }

@media (max-width: 960px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-width);
    z-index: 200;
    transform: translateX(-100%);
    transition: transform var(--transition-base);
  }
  .sidebar.sidebar-open { transform: translateX(0); box-shadow: var(--shadow-pop); }
  .sidebar-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(5, 6, 10, 0.6);
    z-index: 190;
  }
  .sidebar-backdrop.visible { display: block; }
  .two-col { grid-template-columns: 1fr; }
}
@media (min-width: 961px) {
  .sidebar-backdrop { display: none !important; }
}

/* --- Menú de usuario (sidebar footer) ---
   position:fixed a propósito: el sidebar tiene overflow-y:auto (para
   quedarse fijo en pantalla con muchos expedientes), así que un menú
   position:absolute quedaba recortado por ese overflow — invisible o
   cortado a la mitad. JS (conectarShell) calcula su posición real con
   getBoundingClientRect() para que aparezca siempre completo. */
.user-menu-wrapper { position: relative; }
.user-menu {
  position: fixed;
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  z-index: 500;
}
.user-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  background: none;
  border: none;
  text-align: left;
}
.user-menu-item:hover { background: var(--ink-600); color: var(--text-primary); }
.user-menu-item .icon { width: 16px; height: 16px; }

/* --- Visor de resolución con formato enriquecido ---
   El HTML oficial del TCP a veces trae alineación heredada (ej.
   right-align en párrafos) que perjudica la lectura en pantalla. Se
   fuerza una alineación de lectura razonable para el cuerpo del
   texto, respetando títulos/encabezados que sí suelen ir centrados.

   El HTML oficial del TCP asume una página blanca con texto oscuro.
   Un panel blanco puro dentro de la interfaz oscura de XPEDIENTE se
   ve fuera de lugar — por eso se usa un panel oscuro DEDICADO
   (distinto del fondo general) con texto forzado a un tono claro:
   se resuelve el problema original (texto oscuro invisible sobre
   fondo oscuro) sin romper la coherencia visual del resto de la app. */
/* --- Resumen legal (problema jurídico / fundamentos) ---
   El ⚖️ emoji se veía desalineado con el texto del título (cada
   fuente/plataforma lo renderiza con una caja y baseline distintos).
   Se reemplaza por el ícono SVG de línea (icons.scale), puesto en
   una fila flex junto al texto para una alineación consistente en
   cualquier dispositivo. */
.resumen-legal-summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-400);
  font-weight: 600;
}
.resumen-legal-summary .icon { width: 16px; height: 16px; flex-shrink: 0; }
.resumen-legal-texto { margin-top: 8px; line-height: 1.6; text-align: justify; }
/* El problema jurídico puede ser un párrafo muy largo (varios miles
   de caracteres) — en vez de mostrarlo entero siempre y alargar la
   tarjeta indefinidamente, se limita a 6 líneas con un botón "Ver
   más" que lo expande bajo demanda. */
.resumen-legal-texto.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.resolucion-html-wrapper {
  background: var(--ink-950);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  max-height: 520px;
  overflow-y: auto;
}
.resolucion-html {
  text-align: justify;
  color: var(--text-primary);
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 14px;
  line-height: 1.8;
}
.resolucion-html * { color: inherit !important; background: transparent !important; }
.resolucion-html p,
.resolucion-html div,
.resolucion-html span,
.resolucion-html li { text-align: justify !important; }
/* Sin esto, párrafos consecutivos del HTML oficial (que muchas veces
   no trae su propio margen) se veían todos pegados entre sí — un
   bloque de texto único, difícil de leer. */
.resolucion-html p, .resolucion-html div { margin-bottom: 14px; }
.resolucion-html h1, .resolucion-html h2, .resolucion-html h3,
.resolucion-html h4, .resolucion-html center { text-align: center !important; color: var(--accent-400) !important; margin-bottom: 16px; }
/* El texto en negrita (b/strong) del documento oficial se perdía:
   heredaba el mismo color que el resto, así que "resaltar en
   negrita" no se notaba a simple vista con el peso de fuente solo. */
.resolucion-html b, .resolucion-html strong { color: var(--accent-400) !important; font-weight: 700; }
.resolucion-html table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.resolucion-html table, .resolucion-html td, .resolucion-html th { border: 1px solid var(--line); padding: 6px; }
.resolucion-html table, .resolucion-html td, .resolucion-html th { border: 1px solid #ccc; }
.resolucion-html b, .resolucion-html strong { font-weight: 700; }

/* --- Barras horizontales de estadísticas --- */
.stat-bar-row {
  display: grid;
  grid-template-columns: 180px 1fr 36px;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 0;
}
.stat-bar-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stat-bar-track {
  height: 10px;
  background: var(--ink-700);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.stat-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 400ms ease;
}
.stat-bar-value {
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: right;
  color: var(--text-primary);
}
@media (max-width: 600px) {
  .stat-bar-row { grid-template-columns: 110px 1fr 30px; }
}

/* --- Menú de acciones por fila (tablas admin) ---
   <details>/<summary> nativo: sin JS para abrir/cerrar. El panel se
   posiciona con position:fixed (ver menuAcciones.js) para no quedar
   recortado por el overflow-x:auto de la tarjeta que envuelve la
   tabla — mismo problema y mismo arreglo que el menú de usuario. */
.menu-acciones { position: relative; display: inline-block; }
.menu-acciones summary {
  list-style: none;
  cursor: pointer;
}
.menu-acciones summary::-webkit-details-marker { display: none; }
.menu-acciones[open] summary { border-color: var(--accent-500); }
.menu-acciones-panel {
  position: fixed;
  min-width: 200px;
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  z-index: 500;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.menu-acciones-panel .btn { justify-content: flex-start; width: 100%; }

/* --- Selector de fecha propio (components/datePicker.js) ---
   Reemplaza el <input type="date"> nativo: el calendario del
   navegador no se puede traducir de forma confiable (usa el idioma
   del sistema operativo) ni restilizar. Mismo lenguaje visual que el
   resto de menús flotantes de la app (.menu-acciones-panel,
   .user-menu): fondo var(--ink-700), borde var(--line), sombra pop. */
.date-picker { position: relative; }
.date-picker-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  background: var(--ink-900);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  color: var(--text-primary);
  font-size: var(--text-base);
  text-align: left;
  transition: border-color var(--transition-fast);
}
.date-picker-trigger:hover,
.date-picker-trigger:focus-visible { border-color: var(--accent-500); outline: none; }
.date-picker-trigger .icon { color: var(--text-muted); flex-shrink: 0; }
.date-picker-panel {
  position: absolute;
  z-index: 500;
  top: calc(100% + 6px);
  left: 0;
  width: 280px;
  background: var(--ink-700);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  padding: var(--space-4);
}
.date-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.date-picker-month-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: capitalize;
}
.date-picker-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: var(--space-1);
}
.date-picker-weekdays span {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 600;
}
.date-picker-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.date-picker-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--text-secondary);
  background: transparent;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.date-picker-day:hover { background: var(--ink-600); color: var(--text-primary); }
.date-picker-day.fuera-de-mes { color: var(--text-muted); opacity: 0.45; }
.date-picker-day.hoy { box-shadow: inset 0 0 0 1px var(--accent-500); color: var(--accent-400); }
.date-picker-day.seleccionado { background: var(--accent-500); color: #fff; font-weight: 700; }
.date-picker-day.seleccionado:hover { background: var(--accent-600); }
.date-picker-footer { display: flex; justify-content: center; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line-soft); }