/* ==========================================================================
   0. VARIABLES DE TEMA (claro/oscuro)
   El acento de marca (azul) no cambia entre temas -- lo que cambia
   son las superficies (fondo de página/tarjeta/sidebar), los bordes y el
   texto. El toggle (botón sol/luna en el header) alterna
   [data-theme="dark"] en <html>; ver components/header.php y
   admin/components/navbar.php para el botón, y el snippet inline en el
   <head> de cada página que evita el parpadeo de tema al cargar.
   ========================================================================== */
:root {
  --bg-page: #f8f8f8;
  --bg-card: #ffffff;
  --bg-sidebar: #ffffff;
  --bg-surface-alt: #fcfcfc;
  --bg-hover: #f1f2fb;
  --text-primary: #333333;
  --text-heading: #444444;
  --text-secondary: #666666;
  --text-muted: #888888;
  --border-color: #d1d1d1;
  --border-color-soft: #e5e7eb;
  --hover-sweep: #c1c1c1;
  --accent: #007bff;
  --accent-2: #0069d9;
  --accent-soft: rgba(0, 123, 255, 0.12);
  --accent-soft-text: #0062cc;
  --radius-card: 16px;
  --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.05);
}

:root[data-theme="dark"] {
  --bg-page: #1c1a17;
  --bg-card: #26221d;
  --bg-sidebar: #211e1a;
  --bg-surface-alt: #2c2822;
  --bg-hover: #322d2a;
  --text-primary: #f1efec;
  --text-heading: #f1efec;
  --text-secondary: #a9a29a;
  --text-muted: #8a8377;
  --border-color: #3a352e;
  --border-color-soft: #3a352e;
  --hover-sweep: #3a352e;
  --accent-soft: rgba(0, 123, 255, 0.18);
  --accent-soft-text: #6cb2ff;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* View Transitions: crossfade nativo entre cargas de página (navegadores
   Chromium; en el resto simplemente no hace nada, no rompe). El toggle de
   tema usa document.startViewTransition() en JS (ver components/header.php
   y admin/components/navbar.php) para animar el cambio claro/oscuro. */
@view-transition {
  navigation: auto;
}

/* ==========================================================================
   1. RESET Y TIPOGRAFÍA GLOBAL
   ========================================================================== */
* {
  box-sizing: border-box;
  font-family: "Archivo", sans-serif;
}

html,
body {
  width: 100%;
  max-width: 100%;
  /* height:100% (no solo min-height) para que .app/.sidebar/.header (que usan
     height:100% en la sección 2) tengan una altura "definida" en vez de
     encogerse a su contenido -- antes solo lo tenían las páginas con mapa,
     vía resources/qgis2web.css. Se fusiona acá con el resto del reset en vez
     de duplicar el html,body{...} completo de qgis2web.css más abajo, porque
     ese también trae font-family:sans-serif y font-size:small a nivel
     html/body -- eso sí hay que dejarlo fuera de este reset global: encogería
     todo el texto (mucho está en em/rem) en las páginas que nunca cargaban
     qgis2web.css (login, perfil, todo /admin, pagos/detalle). */
  height: 100%;
  overflow-x: hidden;
  background-color: var(--bg-page);
  color: var(--text-primary);
}

h1 {
  font-weight: 900;
  font-size: 3em;
}

/* ==========================================================================
   2. SHELL COMPARTIDO (header + sidebar + main + menu-toggle)
   Usado por todas las páginas con sidebar: /casos, /casos_u, /encargados,
   /fondos, /funcionarios, /oficios, /plazos, /recomendaciones, /reparaciones,
   /reparaciones-dictamenes, /sentencias, /correlativos, /nuevo-correlativo,
   /perfil, / (raíz).

   Ancho de sidebar unificado a 20% (mayoría de páginas). .main usa flex:1
   en vez de un ancho fijo, así se adapta automáticamente al ancho real del
   sidebar sin que ambos números tengan que "coincidir" a mano. El padding u
   overflow específico de cada página vive en su propio wrapper de contenido
   (.table-container, .profile-container, .form-container, etc.), no aquí.
   ========================================================================== */
body {
  margin: 0;
  background-color: var(--bg-page);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app {
  display: flex;
  flex-direction: row;
  flex: 1;
}

.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: var(--bg-card);
  padding: 10px;
  border-bottom: var(--border-color) 1px solid;
}

.header h2 {
  margin: 0;
  font-size: 2em;
  font-weight: 900;
  color: var(--text-heading);
}

.header h5 {
  margin: 0;
  color: var(--text-secondary);
}

.sidebar {
  width: 18%;
  background-color: var(--bg-sidebar);
  border-right: var(--border-color) 1px solid;
  padding: 10px;
  position: sticky;
  height: 100%;
  transition:
    transform 0.3s,
    width 0.3s;
}

.sidebar.hidden {
  transform: translateX(-100%);
  width: 0;
  padding: 0;
  overflow: hidden;
}

.sidebar a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: var(--text-heading);
  font-size: 0.9em;
  width: 100%;
  padding: 5px;
  font-weight: 500;
  transition: 0.1s;
}

.sidebar a::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: var(--hover-sweep);
  transition: transform 0.3s;
  transform-origin: right top;
  transform: scale(0, 1);
}

.sidebar a:hover {
  color: var(--text-primary);
}

.sidebar a:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

.sidebar-buttons {
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  border-bottom: var(--border-color) 1px solid;
  margin-top: 10px;
  margin-bottom: 10px;
}

.sidebar-header h3 {
  margin: 0;
  color: var(--text-heading);
  padding-bottom: 10px;
  font-size: 1.6em;
  line-height: 10px;
}

.main {
  flex: 1;
  min-width: 0;
  transition: width 0.3s;
}

.main.expanded {
  width: 95%;
}

.menu-toggle {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 1001;
  background: #444444;
  border: var(--border-color) 1px solid;
  width: 50px;
  height: 50px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 8px rgba(50, 50, 50, 0.3);
  transition: all 0.3s;
}

.menu-toggle:hover {
  box-shadow: 0 6px 12px rgba(50, 50, 50, 0.7);
}

.menu-toggle span {
  width: 24px;
  height: 3px;
  background: #ffffff;
  border-radius: 2px;
  transition: all 0.3s;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.sidebar-overlay.active {
  display: block;
}

/* Botón de alternar tema claro/oscuro (usado por components/header.php
   y admin/components/navbar.php) */
.theme-toggle {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-heading);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.fa-exclamation-triangle {
  color: orangered;
  font-size: 15px;
}

/* Sidebar deslizable en móvil (drawer) con overlay */
@media (max-width: 968px) {
  .app {
    flex-direction: column;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 280px;
    z-index: 1000;
    transform: translateX(-100%);
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  }

  .sidebar.active {
    transform: translateX(0);
  }

  .sidebar.hidden {
    transform: translateX(-100%);
  }

  .main {
    width: 100% !important;
  }

  .menu-toggle {
    display: flex;
  }

  .sidebar-overlay.active {
    display: block;
  }
}

@media (min-width: 969px) {
  .menu-toggle {
    display: flex;
  }
  .sidebar-overlay {
    display: none !important;
  }
}

/* ==========================================================================
   3. LISTADOS Y TABLAS COMPARTIDOS
   Usado por casi todas las páginas de listado (tabla + popup de detalle).
   ========================================================================== */
.cr-wrapper {
  display: flex;
  flex-direction: column;
  width: fit-content;
  background: var(--bg-card);
  padding: 15px;
}

.table-container {
  background: var(--bg-card);
  padding: 20px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-card);
  width: 100%;
}

.cr-search {
  margin-bottom: 15px;
  padding: 8px;
  width: 100%;
  max-width: 350px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-primary);
}

/* Botón "Buscar" junto al .cr-search de cada listado. Antes duplicado
   inline o en el <style> de cada página (casos, casos_u, funcionarios,
   plazos, encargados, fondos, sentencias, reparaciones, reparaciones-
   dictamenes, recomendaciones); unificado aquí para que un cambio de
   acento no requiera tocar 10 archivos. */
.cr-search-btn {
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s;
}

.cr-search-btn:hover {
  background: var(--accent-2);
}

.cr-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  flex-wrap: wrap;
  width: 100%;
}

.cr-filters select {
  padding: 6px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text-primary);
}

/* Interruptor "Ver todos los casos" de /casos, junto al buscador. */
.cr-ver-todos {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.cr-table {
  width: 100%;
  border-collapse: collapse;
}

.cr-table th,
.cr-table td {
  text-align: left;
  padding: 12px 15px;
  border-bottom: 1px solid var(--border-color-soft);
  vertical-align: top;
  color: var(--text-primary);
  font-size: 0.8em;
}

.cr-table th {
  font-weight: 700;
  color: var(--text-secondary);
  background-color: var(--bg-surface-alt);
  position: sticky;
  top: 0;
}

.cr-table tbody tr:nth-child(even) {
  background-color: var(--bg-surface-alt);
}

.cr-table tr:hover {
  background-color: var(--bg-hover);
  cursor: pointer;
}

/* Filas skeleton (shimmer) mostradas en <tbody> mientras una tabla espera
   su fetch inicial -- ver resources/skeleton-loader.js (función global
   renderSkeletonRows) y skeleton.md/CLAUDE si se documenta el patrón.
   Reemplaza los "Cargando..."/spinners previos de cada página de listado. */
.cr-table tbody tr.cr-skeleton-row:nth-child(even),
.cr-table tbody tr.cr-skeleton-row:hover {
  background-color: transparent;
  cursor: default;
}

.cr-skeleton-bar {
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--bg-surface-alt) 25%,
    var(--bg-hover) 50%,
    var(--bg-surface-alt) 75%
  );
  background-size: 200% 100%;
  animation: cr-skeleton-shimmer 1.4s ease-in-out infinite;
}

.cr-skeleton-bar.short {
  width: 35%;
}
.cr-skeleton-bar.medium {
  width: 60%;
}
.cr-skeleton-bar.long {
  width: 88%;
}

@keyframes cr-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cr-skeleton-bar {
    animation: none;
  }
}

.cr-pagination {
  margin-top: 15px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.cr-pagination button {
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  color: var(--text-primary);
  border-radius: 4px;
  cursor: pointer;
}

.cr-pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cr-page-info {
  font-size: 14px;
  color: var(--text-secondary);
}

/* Menú de tres puntos (acciones por fila), compartido entre todas las tablas */
.menu-trigger {
  background: var(--bg-surface-alt);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 14px;
  transition: background 0.15s;
}

.menu-trigger:hover {
  background: var(--bg-hover);
}

.menu-dropdown {
  position: fixed;
  background: var(--bg-card);
  border: 1px solid var(--border-color-soft);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  min-width: 170px;
  z-index: 1500;
  overflow: hidden;
}

.menu-dropdown button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 11px 14px;
  background: none;
  border: none;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s;
}

.menu-dropdown button:hover {
  background: var(--bg-hover);
}

.menu-dropdown button.danger-item {
  color: #e53e3e;
}

.cr-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

/* Shell de modal unificado en toda la plataforma: tarjeta grande
   redondeada, scroll propio con tope de altura. Las páginas que ya
   dividen su contenido en .cr-popup-header/.cr-popup-body (o
   equivalente) deberían ir migrando ahí el overflow para que el header
   quede fijo -- ver /plazos para el patrón de referencia -- pero esta
   base ya es un salto grande sobre el .cr-popup plano/sin tope de antes. */
.cr-popup {
  background: var(--bg-card);
  color: var(--text-primary);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 36px 40px;
  border-radius: 24px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}
/* Páginas con contenido más denso (detalle + documentos adjuntos) pueden
   pedir más aire con esta clase, igual que /plazos y /correlativos. */
.cr-popup.cr-popup-wide {
  max-width: 950px;
}

.cr-popup h3 {
  margin-top: 0;
}

.cr-popup button {
  margin-top: 15px;
  padding: 10px 20px;
  border: none;
  background: #444444;
  color: white;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
}

.btn-informe {
  padding: 6px 12px;
  background-color: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.3s;
}

.btn-informe:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
}

.cr-docs-container {
  margin-top: 20px;
  border-top: 1px solid var(--border-color-soft);
  padding-top: 15px;
}
.cr-docs-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.cr-docs-title {
  margin: 0;
  font-size: 1.1em;
  font-weight: bold;
  color: var(--text-heading);
}
.cr-docs-btn-carpeta {
  padding: 5px 10px !important;
  margin-top: 0 !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.cr-docs-btn-carpeta:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.cr-docs-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cr-doc-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid var(--border-color-soft);
  margin-bottom: 5px;
}
.cr-doc-link {
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.cr-doc-link:hover {
  text-decoration: underline;
}
.cr-doc-actions {
  display: flex;
  gap: 10px;
}
.cr-doc-move-btn {
  padding: 4px 8px;
  margin-top: 0;
  background-color: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  transition:
    color 0.2s,
    border-color 0.2s;
}
.cr-doc-move-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.cr-doc-delete-btn {
  margin-left: 10px;
  padding: 4px 8px;
  margin-top: 0;
  background-color: #ef4444;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.cr-doc-delete-btn:hover {
  background-color: #dc2626;
}
.cr-docs-form {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.cr-docs-input {
  padding: 6px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  flex: 1;
  background: var(--bg-card);
  color: var(--text-primary);
}
/* !important porque este botón vive dentro de .cr-popup, y `.cr-popup button`
   (1 clase + 1 elemento) tiene más especificidad que una sola clase y
   pisaría el fondo. */
.cr-docs-btn-add {
  padding: 6px 12px;
  background-color: #10b981 !important;
  color: white !important;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}
.cr-docs-btn-add:hover {
  background-color: #059669 !important;
}

.doc-mode-toggle {
  display: flex;
  gap: 6px;
  width: 100%;
}
.doc-mode-btn {
  padding: 6px 14px !important;
  margin-top: 0 !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.doc-mode-btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.doc-mode-btn.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
.cr-details-container p {
  margin: 5px 0;
  font-size: 0.95em;
  color: var(--text-primary);
}

.cr-carpeta-group {
  margin: 10px 0 4px;
}
.cr-carpeta-group:first-child {
  margin-top: 0;
}
.cr-carpeta-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  background: var(--bg-hover, rgba(127, 127, 127, 0.08));
  border-radius: 4px;
  border: 2px dashed transparent;
  font-weight: 600;
  color: var(--text-heading);
  cursor: pointer;
  user-select: none;
  transition:
    border-color 0.15s,
    background-color 0.15s;
}
.cr-carpeta-header.cr-drop-target {
  border-color: var(--accent);
  background: rgba(16, 185, 129, 0.12);
}
.cr-carpeta-chevron {
  transition: transform 0.15s;
}
.cr-carpeta-group.collapsed .cr-carpeta-chevron {
  transform: rotate(-90deg);
}
.cr-carpeta-docs {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cr-carpeta-group.collapsed .cr-carpeta-docs {
  display: none;
}
.cr-doc-item[draggable="true"] {
  cursor: grab;
}
.cr-doc-item[draggable="true"]:active {
  cursor: grabbing;
}
.cr-docs-form {
  border: 2px dashed transparent;
  border-radius: 6px;
  transition:
    border-color 0.15s,
    background-color 0.15s;
}
.cr-docs-form.cr-drag-over {
  border-color: var(--accent);
  background: rgba(16, 185, 129, 0.08);
}
.cr-carpeta-header-name {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cr-carpeta-delete-btn {
  padding: 4px 8px;
  margin-top: 0;
  background: transparent;
  color: var(--text-secondary);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.2s;
}
.cr-carpeta-delete-btn:hover {
  color: #ef4444;
}

@media (max-width: 1200px) {
  .table-container {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .cr-wrapper {
    padding: 10px;
    width: 100%;
  }

  .table-container {
    overflow-x: auto;
  }

  .cr-table {
    min-width: 700px;
  }

  .cr-table th,
  .cr-table td {
    padding: 8px 5px;
    font-size: 13px;
  }

  .btn-informe {
    padding: 4px 8px;
    font-size: 11px;
  }

  .cr-popup {
    width: 90%;
  }
}

/* ==========================================================================
   3.5. SWEETALERT2
   La librería (cargada desde CDN vía <script>) inyecta su propio CSS con
   fondo blanco fijo. Se sobreescribe con !important porque su <style> se
   inyecta en <head> después del nuestro, así que gana por orden aunque la
   especificidad sea igual.
   ========================================================================== */
.swal2-popup {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
}
.swal2-title {
  color: var(--text-heading) !important;
}
.swal2-html-container {
  color: var(--text-primary) !important;
}
.swal2-input,
.swal2-textarea,
.swal2-select {
  background: var(--bg-surface-alt) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
}
.swal2-close {
  color: var(--text-secondary) !important;
}
.swal2-close:hover {
  color: var(--text-heading) !important;
}

/* ==========================================================================
   4. MAPA (OpenLayers) — usado por /casos y / (raíz)
   ========================================================================== */
.map-container {
  border-radius: 12px 0;
  border: #d1d1d1 1px solid;
  width: 90%;
}

#map {
  width: 100%;
  height: 40dvh;
  transition: height 0.3s ease;
}

.map-container.expanded-view {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw !important;
  height: 90vh !important;
  z-index: 10000;
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  border-radius: 12px !important;
}

.map-container.expanded-view #map {
  flex: 1;
  height: auto !important;
  width: 100%;
}

.header-main {
  border-radius: 12px 12px 0px 0px;
  background-color: var(--bg-card);
  padding: 10px;
}
.header-main h2 {
  margin: 0;
  font-size: 1.8em;
  font-weight: 900;
  color: var(--text-heading);
}
.header-main h5 {
  margin: 0;
  color: var(--text-secondary);
}

@media (min-width: 969px) {
  .map-container {
    width: 60%;
  }
}

#popup-content {
  font-size: 12px;
  line-height: 1.2;
  margin-top: 5px;
  max-height: 70vh;
  max-width: 70vw;
  overflow: auto;
}

#popup-content ul {
  list-style-type: none;
  padding-left: 0;
  margin: unset;
}

#popup-content li {
  margin-bottom: 3em;
  border-bottom: #0078a8 1px solid;
  padding-bottom: 2em;
}

#popup-content td:first-child {
  font-size: 25px;
}

#popup-content > ul > li > a {
  display: none;
}

#popup-content > table {
  font-size: 11.4px;
}

.roller-switcher {
  background-image: url(lds-roller.gif);
  background-size: contain;
  height: 19px;
  width: 19px;
  display: inline-block;
}

th,
td {
  vertical-align: top;
  text-align: left;
  color: #333;
}

th {
  min-width: 100px;
}
td {
  min-width: 100px;
}

td img {
  max-height: 60vh !important;
  max-width: 60vw !important;
}

td video {
  max-height: 60vh !important;
  max-width: 60vw !important;
}

.ol-control {
  clear: both;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
}

.ol-selectable {
  z-index: 3;
}

.ol-popup {
  display: none;
  position: absolute;
  background-color: white;
  padding: 15px;
  border-radius: 10px;
  bottom: 10px;
  left: 50%;
  width: 25vw;
  transform: translateX(-50%);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  position: absolute;
}

.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 50%;
  margin-left: -10px;
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 50%;
  margin-left: -11px;
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 4px;
  right: 4px;
  text-align: center;
  width: 19px;
  color: #999;
  font-family: cursive;
  font-weight: bold;
}

.ol-popup-closer:after {
  content: "X";
}

.ol-overlaycontainer-stopevent
  #top-right-container
  .layer-switcher:hover
  ~ .ol-overlaycontainer-stopevent
  .ol-overlay-container
  .ol-popup {
  display: none !important;
}

#top-left-container {
  position: absolute;
  left: 0;
  top: 0;
}
#bottom-left-container {
  position: absolute;
  left: 0;
  bottom: 0;
}
#top-right-container {
  position: absolute;
  right: 0;
  top: 0;
  display: contents;
}
#bottom-right-container {
  position: absolute;
  right: 0;
  bottom: 0;
}

.top-left-title,
.top-left-abstract {
  position: relative;
  float: left;
  margin-top: 8px;
  margin-left: 8px;
}
.bottom-left-title,
.bottom-left-abstract {
  position: relative;
  float: left;
  margin-bottom: 8px;
  margin-left: 8px;
}
.top-right-title,
.top-right-abstract {
  position: relative;
  float: right;
  margin-top: 8px;
  margin-right: 8px;
}
.bottom-right-title,
.bottom-right-abstract {
  position: relative;
  float: right;
  margin-bottom: 8px;
  margin-right: 8px;
}

.project-title {
  margin: 1px;
  padding: 5px;
}

#abstract {
  max-width: 30%;
}
.ol-touch #abstract {
  max-width: 50%;
}

.project-abstract {
  font:
    bold 18px "Lucida Console",
    Monaco,
    monospace;
  width: 20px;
  height: 20px;
  display: block;
  text-align: center;
  cursor: pointer;
  padding: 3px;
}

.project-abstract-uncollapsed {
  width: auto;
  height: auto;
  display: block;
  padding: 3px;
  cursor: default;
  margin: 1px;
}

.ol-zoom {
  position: relative;
  float: left;
  top: unset;
  left: unset;
  margin-top: 8px;
  margin-left: 8px;
}

.measure-control {
  position: relative;
  float: left;
  top: unset !important;
  left: unset !important;
  margin-top: 8px;
  margin-left: 8px;
  display: flex;
}

.tooltip {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  color: white;
  padding: 4px 8px;
  opacity: 0.7;
  white-space: nowrap;
}
.tooltip-measure {
  opacity: 1;
  font-weight: bold;
}
.tooltip-static {
  background-color: #ffcc33;
  color: black;
  border: 1px solid white;
}
.tooltip-measure:before,
.tooltip-static:before {
  border-top: 6px solid rgba(0, 0, 0, 0.5);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: "";
  position: absolute;
  bottom: -6px;
  margin-left: -7px;
  left: 50%;
}
.tooltip-static:before {
  border-top-color: #ffcc33;
}
.ol-touch .measure-control {
  top: 130px;
}
.measure-control label {
  padding: 1px;
  padding-right: 4px;
}

.geolocate {
  position: relative !important;
  float: left;
  top: unset !important;
  left: unset !important;
  margin-top: 8px;
  margin-left: 8px;
}

.ol-geocoder.gcd-gl-container {
  position: relative !important;
  float: left !important;
  top: unset;
  left: unset;
  margin-top: 8px;
  margin-left: 8px;
  clear: both;
}
.gcd-gl-control {
  position: relative !important;
}
.gcd-gl-control button:after {
  display: none;
}

.search-layer {
  position: relative !important;
  float: left;
  top: unset !important;
  left: unset !important;
  margin-top: 8px;
  margin-left: 8px;
}

.search-layer-input-search {
  left: 26px;
  width: 144px;
  top: 3px;
  padding: 3px;
  background-color: #f8f8f8 !important;
}

.search-layer-input-search:after {
  left: 27px;
  width: 139px;
  top: 0px;
  padding: 4px;
  border: 3px solid rgba(255, 255, 255, 0.4) !important;
}

.ol-scale-line {
  background: none !important;
  position: relative;
  float: left;
  bottom: unset;
  left: unset;
  margin-bottom: 8px;
  margin-left: 8px;
}
.ol-scale-line-inner {
  border: 2px solid;
  border-top: none;
  background: rgba(255, 255, 255, 0.5);
  color: black;
  margin: unset;
}

.layer-switcher {
  position: relative;
  float: right;
  top: unset;
  right: 0;
  bottom: unset !important;
  margin-top: 8px;
  margin-right: 8px;
  padding: 3px;
  background-color: rgba(255, 255, 255, 0.4) !important;
}

.layer-switcher:hover {
  background-color: rgba(255, 255, 255, 0.6) !important;
}

.layer-switcher .panel {
  border: unset;
  border-radius: unset;
  float: right;
  width: fit-content;
  margin: 1px;
  max-height: calc(100vh - 200px);
  box-sizing: unset;
}

.layer-switcher.shown {
  align-items: flex-end;
}

.layer-switcher.shown.layer-switcher-activation-mode-click > button {
  position: relative;
  border-radius: 5px;
  font-size: x-large;
  font-family: serif;
  z-index: 2;
}

.layer-switcher img {
  max-width: 22px;
  max-height: 22px;
}

.ol-attribution {
  display: none;
}
.bottom-attribution {
  float: right;
  position: relative;
  display: flex;
  font-size: 0.9rem;
}
.bottom-attribution a {
  color: #0078a8;
  text-decoration: none;
}
.bottom-attribution a:hover {
  text-decoration: underline;
}
.bottom-attribution button {
  display: none;
}
.bottom-attribution ul {
  padding: unset;
  margin: unset;
  display: flex;
  list-style: none;
}
.bottom-attribution > li {
  padding-left: 8px !important;
  list-style: none;
}

.ol-control > * {
  background-color: #f8f8f8 !important;
  color: #444444 !important;
  border-radius: 0px;
}
.ol-attribution a,
.gcd-gl-input::placeholder,
.search-layer-input-search::placeholder {
  color: #444444 !important;
}
.ol-control > *:focus,
.ol-control > *:hover {
  background-color: rgba(248, 248, 248, 0.7) !important;
}
.ol-control {
  background-color: rgba(255, 255, 255, 0.4) !important;
  padding: 2px !important;
}

/* Fix SweetAlert z-index (por encima del mapa) */
.swal2-container {
  z-index: 200000 !important;
}

/* ==========================================================================
   4.5. FORMULARIO EMBEBIDO COMPARTIDO
   Estilo de campos único para todo formulario embebido del sitio: los
   modales de /funcionarios, /oficios y /plazos (clases .cr-form-*) y la
   página de /nuevo-correlativo, que escopa los mismos selectores bajo
   #correlativoForm porque su formulario no vive en un modal y usa
   etiquetas sueltas en vez de clases.
   ========================================================================== */
.cr-form-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cr-form-row {
  margin-bottom: 16px;
}

.cr-form-label,
#correlativoForm label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
}

.cr-form-input,
#correlativoForm select,
#correlativoForm textarea,
#correlativoForm input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  font-size: 14px;
  font-family: inherit;
  background: var(--bg-surface-alt);
  color: var(--text-primary);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.cr-form-input:focus,
#correlativoForm select:focus,
#correlativoForm textarea:focus,
#correlativoForm input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.cr-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 15px;
}

/* ==========================================================================
   4.6. MODAL UNIFICADO (.cr-modal-*)
   Shell de modal "nueva generación": tarjeta grande redondeada, sin
   líneas divisorias, header fijo + body con su propio scroll interno
   (el overflow nunca va en .cr-modal mismo, para que la barra de scroll
   no corte el borde redondeado y el título/botón de cerrar no se muevan
   al hacer scroll). Nació en /plazos, de ahí se llevó a /correlativos y
   es la base para unificar el resto de modales de la plataforma.
   Patrón de uso:
     <div class="cr-modal-overlay" id="...">
       <div class="cr-modal">
         <button class="cr-modal-close">&times;</button>
         <div class="cr-modal-header"><h3>...</h3></div>
         <div class="cr-modal-body">...contenido...</div>
       </div>
     </div>
   ========================================================================== */
.cr-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  z-index: 2000;
  align-items: center;
  justify-content: center;
}
.cr-modal-overlay.open {
  display: flex;
}
.cr-modal {
  background: var(--bg-card);
  color: var(--text-primary);
  border-radius: 24px;
  width: 100%;
  max-width: 950px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  position: relative;
}
@media (max-width: 980px) {
  .cr-modal {
    max-width: 94vw;
  }
}
.cr-modal-header {
  flex-shrink: 0;
  padding: 36px 40px 16px;
}
.cr-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 40px 36px;
}
@media (max-width: 980px) {
  .cr-modal-header {
    padding: 24px 24px 12px;
  }
  .cr-modal-body {
    padding: 0 24px 24px;
  }
}
.cr-modal h3 {
  margin: 0 0 6px 0;
  font-size: 1.4em;
  font-weight: 800;
  color: var(--text-heading);
}
.cr-modal-subtitle {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.cr-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.15s;
  z-index: 1;
}
.cr-modal-close:hover {
  background: var(--bg-hover);
}
.cr-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  margin-bottom: 24px;
}
@media (max-width: 560px) {
  .cr-modal-grid {
    grid-template-columns: 1fr;
  }
}
.cr-modal-field {
  grid-column: span 1;
}
.cr-modal-field.full {
  grid-column: 1 / -1;
}
.cr-modal-field label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 4px;
}
.cr-modal-field span {
  font-size: 14px;
  color: var(--text-primary);
  display: block;
}
.cr-modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

/* ==========================================================================
   5. PANEL ADMIN (/admin/*)
   Admin usa un sistema de diseño propio (navbar superior + panel deslizable
   .side-menu), no el shell de sidebar/.main/.header de arriba. Todo lo de
   esta sección vive bajo el prefijo .admin- para que nombres que hoy
   coinciden por casualidad con otras páginas (menu-toggle, sidebar-overlay,
   pagination, btn-primary, empty-state, badge, stat-card, form-group,
   input-group) no se pisen entre sí al compartir un solo archivo.
   ========================================================================== */
.admin-header {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: white;
  padding: 30px 40px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.admin-header h1 {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 5px;
  letter-spacing: -0.5px;
}
.admin-header p {
  font-size: 13px;
  opacity: 0.85;
  font-weight: 400;
}

.admin-container {
  max-width: 1400px;
  margin: 30px auto;
  padding: 0 20px;
}

/* Navbar superior */
.admin-navbar {
  background: var(--bg-card);
  border-bottom: 2px solid var(--border-color-soft);
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.admin-nav-left {
  display: flex;
  align-items: center;
  gap: 20px;
}
.admin-menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 24px;
  cursor: pointer;
  padding: 5px;
  transition: color 0.2s;
}
.admin-menu-toggle:hover {
  color: var(--accent);
}
.admin-nav-links {
  display: flex;
  gap: 25px;
}
.admin-nav-links a {
  text-decoration: none;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s;
  padding: 8px 0;
  border-bottom: 3px solid transparent;
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-nav-links a:hover,
.admin-nav-links a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.admin-nav-user {
  display: flex;
  align-items: center;
  gap: 20px;
}
.admin-user-info {
  text-align: right;
}
.admin-user-info .username {
  font-weight: 600;
  color: var(--text-heading);
  font-size: 14px;
}
.admin-user-info .role {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
.admin-btn-logout {
  padding: 8px 16px;
  background: #fee2e2;
  color: #ef4444;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.admin-btn-logout:hover {
  background: #ef4444;
  color: white;
}

/* Panel lateral móvil de admin (distinto del drawer de .sidebar) */
.admin-sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.admin-sidebar-overlay.active {
  display: block;
  opacity: 1;
}
.side-menu {
  position: fixed;
  top: 0;
  left: -280px;
  width: 280px;
  height: 100%;
  background: var(--bg-card);
  z-index: 2001;
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
}
.side-menu.active {
  transform: translateX(280px);
}
.side-menu-header {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.side-menu-header h2 {
  font-size: 18px;
  color: var(--text-heading);
}
.close-menu {
  font-size: 20px;
  color: var(--text-muted);
  cursor: pointer;
}
.side-nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.side-nav-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  text-decoration: none;
  color: var(--text-secondary);
  font-weight: 600;
  border-radius: 10px;
  transition: all 0.2s;
}
.side-nav-links a:hover,
.side-nav-links a.active {
  background: var(--bg-hover);
  color: var(--accent);
}
.side-nav-links a i {
  width: 20px;
  text-align: center;
}
.side-menu-footer {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--border-color-soft);
}

/* Barra de controles / búsqueda / botones */
.admin-controls-bar {
  background: var(--bg-card);
  padding: 20px;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}
.admin-table-selector {
  display: flex;
  align-items: center;
  gap: 10px;
}
.admin-table-selector label {
  font-weight: 600;
  color: var(--text-secondary);
}
.admin-table-selector select {
  padding: 10px 15px;
  border: 2px solid var(--border-color-soft);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  background: var(--bg-card);
  color: var(--text-primary);
}
.admin-table-selector select:focus {
  outline: none;
  border-color: var(--accent);
}
.admin-search-container {
  position: relative;
  flex: 1;
  max-width: 400px;
}
.admin-search-input {
  width: 100%;
  padding: 10px 15px 10px 40px;
  border: 2px solid var(--border-color-soft);
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  transition: all 0.3s;
  background: var(--bg-card);
  color: var(--text-primary);
}
.admin-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}
.admin-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 16px;
  pointer-events: none;
}

.admin-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.admin-btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: white;
}
.admin-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
}
.admin-btn-success {
  background: #10b981;
  color: white;
}
.admin-btn-danger {
  background: #ef4444;
  color: white;
}
.admin-btn-secondary {
  background: #6b7280;
  color: white;
}
.admin-btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

.admin-data-table-container {
  background: var(--bg-card);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.admin-table-wrapper {
  overflow-x: auto;
}
.admin-data-table {
  width: 100%;
  border-collapse: collapse;
}
.admin-data-table thead {
  background: var(--bg-surface-alt);
}
.admin-data-table th {
  padding: 15px;
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border-color-soft);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.admin-data-table td {
  padding: 15px;
  border-bottom: 1px solid var(--border-color-soft);
  font-size: 14px;
  color: var(--text-primary);
}
.admin-data-table tbody tr:hover {
  background: var(--bg-hover);
}
.admin-data-table tbody tr.cr-skeleton-row:hover {
  background: transparent;
}
.admin-actions {
  display: flex;
  gap: 8px;
}

.admin-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}
.admin-badge-admin {
  background: #dbeafe;
  color: #1e40af;
}
.admin-badge-user {
  background: #d1fae5;
  color: #065f46;
}
.admin-badge-auditor {
  background: #ede9fe;
  color: #5b21b6;
}
.admin-badge-revisora_plazos {
  background: #fef3c7;
  color: #92400e;
}
.admin-badge-activo {
  background: #d1fae5;
  color: #065f46;
}
.admin-badge-inactivo {
  background: #fee2e2;
  color: #991b1b;
}

.admin-pagination {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.admin-pagination-info {
  color: var(--text-secondary);
  font-size: 14px;
}
.admin-pagination-controls {
  display: flex;
  gap: 10px;
}

/* Modal */
.admin-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  animation: adminFadeIn 0.2s;
}
.admin-modal-overlay.active {
  display: flex;
}
@keyframes adminFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* Mismo shell que el resto de la plataforma (tarjeta grande redondeada,
   sin líneas divisorias). El overflow vive en .admin-modal-body -- que
   ya existía como wrapper propio -- para que header y footer queden
   fijos y el scroll quede contenido adentro de la tarjeta. */
.admin-modal {
  background: var(--bg-card);
  color: var(--text-primary);
  border-radius: 24px;
  width: 90%;
  max-width: 680px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  animation: adminSlideUp 0.3s;
}
.admin-modal.admin-modal-wide {
  max-width: 950px;
}
@keyframes adminSlideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.admin-modal-header {
  flex-shrink: 0;
  padding: 32px 32px 16px;
}
.admin-modal-header h2 {
  font-size: 1.4em;
  font-weight: 800;
  color: var(--text-heading);
}
.admin-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 32px 16px;
}
.admin-modal-footer {
  flex-shrink: 0;
  padding: 16px 32px 32px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.admin-form-group {
  margin-bottom: 20px;
}
.admin-form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
}
.admin-form-group input,
.admin-form-group textarea,
.admin-form-group select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: var(--bg-surface-alt);
  color: var(--text-primary);
}
.admin-form-group input:focus,
.admin-form-group textarea:focus,
.admin-form-group select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.admin-form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.admin-alert {
  padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 14px;
}
.admin-alert-success {
  background: #d1fae5;
  color: #065f46;
  border-left: 4px solid #10b981;
}
.admin-alert-error {
  background: #fee2e2;
  color: #991b1b;
  border-left: 4px solid #ef4444;
}

.admin-loading {
  display: none;
  text-align: center;
  padding: 40px;
  color: var(--text-secondary);
}
.admin-loading.active {
  display: block;
}

.admin-empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.admin-empty-state i {
  font-size: 64px;
  margin-bottom: 20px;
  opacity: 0.3;
}

/* Dashboard (admin/index.php) */
.admin-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}
.admin-stat-card {
  background: var(--bg-card);
  padding: 25px;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  gap: 20px;
  transition: transform 0.3s;
}
.admin-stat-card:hover {
  transform: translateY(-5px);
}
.admin-stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}
.admin-icon-cases {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
}
.admin-icon-repairs {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}
.admin-icon-pending {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.admin-icon-mesas {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}
.admin-stat-info h3 {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.admin-stat-info div {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-heading);
}

/* Configuración de correlativos (admin/correlativos.php) */
.admin-config-card {
  background: var(--bg-card);
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.admin-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
}
.admin-config-item {
  background: var(--bg-surface-alt);
  padding: 25px;
  border-radius: 12px;
  border: 1px solid var(--border-color-soft);
  transition: all 0.3s;
}
.admin-config-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
  border-color: var(--accent);
}
.admin-type-label {
  font-size: 1.2em;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 8px;
  display: block;
}
.admin-type-hint {
  font-size: 0.9em;
  color: var(--text-secondary);
  margin-bottom: 20px;
}
.admin-type-hint strong {
  color: var(--accent);
}
.admin-input-group {
  display: flex;
  gap: 12px;
}
.admin-input-group label {
  display: block;
  font-size: 0.8em;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.admin-input-wrapper {
  flex: 1;
}
.admin-input-group input {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid var(--border-color-soft);
  border-radius: 8px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s;
  background: var(--bg-card);
  color: var(--text-primary);
}
.admin-input-group input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

/* Gestión de usuarios (admin/users.php) */
.admin-permissions-container {
  border: 1px solid var(--border-color-soft);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-surface-alt);
}
.admin-permissions-table {
  width: 100%;
  border-collapse: collapse;
}
.admin-permissions-table th,
.admin-permissions-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color-soft);
  text-align: left;
  color: var(--text-primary);
}
.admin-permissions-table thead th {
  background: var(--bg-hover);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.admin-permissions-table tbody tr:last-child td {
  border-bottom: none;
}
.admin-permission-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
}
.admin-permission-check {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

/* Las 3 páginas admin necesitan <body class="admin-body"> (se agrega en el Lote F) */
.admin-body {
  background: var(--bg-page);
  color: var(--text-primary);
}

@media (max-width: 900px) {
  .admin-navbar {
    padding: 0 20px;
  }
  .admin-nav-links {
    display: none;
  }
  .admin-menu-toggle {
    display: block;
  }
  .admin-user-info {
    display: none;
  }
  .admin-btn-logout span {
    display: none;
  }
}

@media (max-width: 768px) {
  .admin-header {
    padding: 20px;
    text-align: center;
  }
  .admin-container {
    margin: 15px auto;
    padding: 0 15px;
  }
  .admin-config-card {
    padding: 20px;
  }
  .admin-config-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .admin-config-item {
    padding: 20px;
  }
  .admin-dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .admin-stat-card {
    padding: 15px;
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
  .admin-stat-icon {
    width: 45px;
    height: 45px;
    font-size: 18px;
  }
  .admin-stat-info h3 {
    font-size: 10px;
  }
  .admin-stat-info div {
    font-size: 18px;
  }
  .admin-controls-bar {
    padding: 15px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .admin-search-container {
    max-width: none;
  }
  .admin-input-group {
    flex-direction: column;
    gap: 15px;
  }
  .admin-btn {
    width: 100%;
    justify-content: center;
  }
  .admin-data-table th,
  .admin-data-table td {
    padding: 12px 10px;
    font-size: 13px;
  }
  .admin-pagination {
    flex-direction: column;
    gap: 15px;
  }
}

@media (max-width: 480px) {
  .admin-header h1 {
    font-size: 20px;
  }
}

/* ==========================================================================
   6. LOGIN (/auth/login.php)
   Página autocontenida (sin sidebar/app-shell). Sus nombres genéricos
   (.alert, .form-group, .input-group) no chocan con nada más porque admin
   quedó bajo .admin- y las páginas de formulario embebido (nuevo-correlativo)
   escopan los suyos bajo su propio formulario — ver sección 7.
   ========================================================================== */
.login-container {
  background: var(--bg-card);
  border-radius: 20px;
  border: 1px solid var(--border-color-soft);
  width: 100%;
  max-width: 420px;
  overflow: hidden;
}
.login-header {
  background-color: #2b2b2b;
  color: white;
  padding: 40px 30px;
  text-align: center;
}
.login-header h1 {
  font-size: 28px;
  margin-bottom: 10px;
}
.login-header p {
  opacity: 0.9;
  font-size: 14px;
}
.login-body {
  padding: 40px 30px;
}

.alert {
  padding: 12px 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 14px;
  display: none;
}
.alert.show {
  display: block;
}
.alert-error {
  background: #fee2e2;
  color: #991b1b;
  border-left: 4px solid #ef4444;
}
.alert-success {
  background: #d1fae5;
  color: #065f46;
  border-left: 4px solid #10b981;
}

.form-group {
  margin-bottom: 25px;
}
.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 14px;
}
.form-group input {
  width: 100%;
  padding: 12px 15px 12px 45px;
  border: 2px solid var(--border-color-soft);
  border-radius: 10px;
  font-size: 15px;
  transition: all 0.3s;
  background: var(--bg-card);
  color: var(--text-primary);
}
.form-group input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.input-group {
  position: relative;
}
.input-group i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
}

.btn-login {
  width: 100%;
  padding: 14px;
  background-color: #2b2b2b;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 10px;
}
.btn-login:hover {
  background-color: #0c1638ff;
}
.btn-login:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.footer-link {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: var(--text-secondary);
}
.footer-link a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.footer-link a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   7. DESIGN SYSTEM (.ds-*)
   Librería de componentes nueva (botones, tags, accordion, inputs,
   checkboxes/radios, sliders, cells, segmented controls...), namespaced bajo
   .ds- para no chocar con nada de las secciones 1-6. Todavía no está en uso
   en ninguna página del sitio: por ahora solo la consume design-system.html
   como catálogo de referencia. Pensada para ir migrando componentes/páginas
   de forma incremental cuando se decida adoptarla.

   Color de acento: #007bff (ver --ds-accent, ya alineado con --accent de
   la sección 0). El resto de la paleta es neutra (negro casi puro + crema
   cálido), independiente de --bg-page/--bg-card para no heredar el tema
   claro/oscuro del shell mientras la librería vive en su propia página.
   ========================================================================== */

.ds-root {
  --ds-black: #14110f;
  --ds-white: #ffffff;
  --ds-bg: #f7f3ec;
  --ds-card: #ffffff;
  --ds-soft: #efe9de;
  --ds-soft-hover: #e7dfd0;
  --ds-border: #e6ded0;
  --ds-text: #14110f;
  --ds-text-secondary: #6b6459;
  --ds-text-muted: #a39a8a;
  --ds-accent: #007bff;
  --ds-accent-hover: #0069d9;
  --ds-accent-soft: #e6f2ff;
  --ds-accent-soft-text: #0062cc;
  --ds-success: #10b981;
  --ds-radius-full: 999px;
  --ds-radius-lg: 20px;
  --ds-radius-md: 12px;
  --ds-radius-sm: 8px;
  --ds-shadow-card: 0 2px 4px rgba(20, 17, 15, 0.05);

  font-family: "Archivo", sans-serif;
  color: var(--ds-text);
}

.ds-root * {
  box-sizing: border-box;
}

/* -- Card shell usado por cada bloque del showcase -------------------- */
.ds-card {
  background: var(--ds-card);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-card);
  padding: 22px;
}

.ds-card-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-text-secondary);
  margin: 0 0 16px;
}

/* -- Buttons ------------------------------------------------------------ */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--ds-radius-full);
  padding: 12px 26px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
}

.ds-btn-primary {
  background: var(--ds-black);
  color: var(--ds-white);
}
.ds-btn-primary:hover {
  background: #2b2622;
}

.ds-btn-outline {
  background: var(--ds-white);
  color: var(--ds-black);
  border: 1.5px solid var(--ds-black);
}
.ds-btn-outline:hover {
  background: var(--ds-soft);
}

.ds-btn-soft {
  background: var(--ds-soft);
  color: var(--ds-black);
}
.ds-btn-soft:hover {
  background: var(--ds-soft-hover);
}

.ds-btn-accent {
  background: var(--ds-accent);
  color: var(--ds-white);
}
.ds-btn-accent:hover {
  background: var(--ds-accent-hover);
}

.ds-btn-sm {
  padding: 9px 18px;
  font-size: 13px;
}

.ds-btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  flex-shrink: 0;
}

.ds-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* -- Tags & Badges -------------------------------------------------------- */
.ds-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--ds-radius-full);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--ds-soft);
  color: var(--ds-text-secondary);
  border: none;
  cursor: pointer;
}

.ds-tag-active {
  background: var(--ds-accent);
  color: var(--ds-white);
}

.ds-tag-outline {
  background: var(--ds-white);
  border: 1px solid var(--ds-border);
  color: var(--ds-text);
}

.ds-tag-ghost {
  background: transparent;
  color: var(--ds-text-secondary);
}

.ds-tag i {
  font-size: 10px;
}

/* -- Breadcrumb ----------------------------------------------------------- */
.ds-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ds-text-secondary);
}

.ds-breadcrumb .current {
  background: var(--ds-soft);
  color: var(--ds-text);
  padding: 6px 14px;
  border-radius: var(--ds-radius-full);
  font-weight: 600;
}

/* -- Accordion -------------------------------------------------------------- */
.ds-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ds-accordion-item {
  background: var(--ds-soft);
  border-radius: var(--ds-radius-md);
  padding: 16px 18px;
}

.ds-accordion-item.open {
  background: var(--ds-soft);
}

.ds-accordion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
}

.ds-accordion-toggle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ds-black);
  color: var(--ds-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}

.ds-accordion-body {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ds-text-secondary);
}

.ds-accordion-body strong,
.ds-accordion-body a {
  color: var(--ds-accent);
}

/* -- Bullets ---------------------------------------------------------------- */
.ds-bullet {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-soft);
  font-size: 13px;
  font-weight: 600;
}

.ds-bullet-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ds-black);
  color: var(--ds-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  flex-shrink: 0;
}

/* -- Spinners ----------------------------------------------------------- */
.ds-spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid var(--ds-soft);
  border-top-color: var(--ds-black);
  animation: ds-spin 0.8s linear infinite;
}

.ds-spinner-accent {
  border-top-color: var(--ds-accent);
}

@keyframes ds-spin {
  to {
    transform: rotate(360deg);
  }
}

/* -- Checkboxes ----------------------------------------------------------- */
.ds-checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-text);
}

.ds-checkbox {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--ds-border);
  background: var(--ds-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--ds-white);
  flex-shrink: 0;
}

.ds-checkbox.checked {
  background: var(--ds-black);
  border-color: var(--ds-black);
}

.ds-checkbox.indeterminate {
  background: var(--ds-black);
  border-color: var(--ds-black);
}

.ds-checkbox.disabled {
  opacity: 0.45;
}

.ds-checkbox.checked.accent {
  background: var(--ds-accent);
  border-color: var(--ds-accent);
}

/* -- Radios --------------------------------------------------------------- */
.ds-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--ds-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ds-radio.checked {
  border-color: var(--ds-black);
}

.ds-radio.checked::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ds-black);
}

.ds-radio.checked.accent {
  border-color: var(--ds-accent);
}
.ds-radio.checked.accent::after {
  background: var(--ds-accent);
}

.ds-radio.disabled {
  opacity: 0.45;
}

/* -- Text Inputs ------------------------------------------------------------ */
.ds-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.ds-input {
  width: 100%;
  padding: 14px 18px 14px 42px;
  border-radius: var(--ds-radius-full);
  border: 1.5px solid var(--ds-black);
  background: var(--ds-white);
  font-size: 14px;
  color: var(--ds-text);
  outline: none;
  transition: border-color 0.15s;
}

.ds-input.soft {
  border-color: var(--ds-border);
  background: var(--ds-soft);
  border-radius: var(--ds-radius-md);
  padding-left: 18px;
}

.ds-input::placeholder {
  color: var(--ds-text-muted);
}

.ds-input:focus {
  border-color: var(--ds-accent);
  box-shadow: 0 0 0 3px var(--ds-accent-soft);
}

.ds-input-icon {
  position: absolute;
  left: 16px;
  color: var(--ds-text-muted);
  font-size: 14px;
}

.ds-input-trailing {
  position: absolute;
  right: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* -- Info blocks ------------------------------------------------------------ */
.ds-info-block {
  display: flex;
  gap: 12px;
  background: var(--ds-accent-soft);
  border-radius: var(--ds-radius-md);
  padding: 16px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ds-text);
}

.ds-info-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ds-accent);
  color: var(--ds-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
  margin-top: 2px;
}

.ds-info-block strong {
  color: var(--ds-accent-soft-text);
}

/* -- Sliders ------------------------------------------------------------ */
.ds-slider {
  position: relative;
  padding-top: 30px;
}

.ds-slider-track {
  height: 3px;
  background: var(--ds-border);
  border-radius: var(--ds-radius-full);
  position: relative;
}

.ds-slider-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 78%;
  background: var(--ds-black);
  border-radius: var(--ds-radius-full);
}

.ds-slider-thumb {
  position: absolute;
  top: 50%;
  left: 78%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ds-white);
  border: 2px solid var(--ds-black);
  transform: translate(-50%, -50%);
}

.ds-slider-value {
  position: absolute;
  top: -6px;
  left: 78%;
  transform: translate(-50%, -100%);
  background: var(--ds-black);
  color: var(--ds-white);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--ds-radius-sm);
}

.ds-slider-value::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ds-black);
}

.ds-slider.accent .ds-slider-fill {
  background: var(--ds-accent);
}
.ds-slider.accent .ds-slider-thumb {
  border-color: var(--ds-accent);
}
.ds-slider.accent .ds-slider-value {
  background: var(--ds-accent);
}
.ds-slider.accent .ds-slider-value::after {
  border-top-color: var(--ds-accent);
}

/* -- Payments (marcas genéricas, sin logos con derechos de marca) -------- */
.ds-payment-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-width: 46px;
  padding: 0 10px;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-soft);
  color: var(--ds-text-secondary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.ds-payment-chip.icon {
  min-width: 32px;
  padding: 0;
  font-size: 14px;
}

/* -- Flags ---------------------------------------------------------------- */
.ds-flag {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ds-soft);
  color: var(--ds-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  overflow: hidden;
}

.ds-flag-accent {
  background: var(--ds-accent-soft);
  color: var(--ds-accent);
}

/* -- Cells ----------------------------------------------------------------- */
.ds-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ds-soft);
  border-radius: var(--ds-radius-md);
  padding: 12px 14px;
}

.ds-cell + .ds-cell {
  margin-top: 10px;
}

.ds-cell-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--ds-accent-soft);
  color: var(--ds-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.ds-cell-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--ds-border);
}

.ds-cell-body {
  flex: 1;
  min-width: 0;
}

.ds-cell-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-text);
}

.ds-cell-sub {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ds-text-muted);
  text-transform: uppercase;
}

.ds-cell-meta {
  font-size: 12px;
  color: var(--ds-text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ds-cell-trailing {
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-text);
  text-align: right;
  flex-shrink: 0;
}

.ds-cell-arrow {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ds-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

/* -- Segmented Controls ----------------------------------------------------- */
.ds-segmented {
  display: inline-flex;
  padding: 4px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-soft);
  gap: 4px;
}

.ds-segmented button {
  border: none;
  background: transparent;
  width: 38px;
  height: 34px;
  border-radius: var(--ds-radius-full);
  color: var(--ds-text-secondary);
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ds-segmented button.active {
  background: var(--ds-black);
  color: var(--ds-white);
}

.ds-segmented.accent button.active {
  background: var(--ds-accent);
}

.ds-segmented-labels {
  display: inline-flex;
  padding: 4px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-soft);
  gap: 4px;
}

.ds-segmented-labels button {
  border: none;
  background: transparent;
  padding: 8px 18px;
  border-radius: var(--ds-radius-full);
  color: var(--ds-text-secondary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.ds-segmented-labels button.active {
  background: var(--ds-black);
  color: var(--ds-white);
}

/* -- Profile image ------------------------------------------------------ */
.ds-avatar-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
  background: var(--ds-soft);
}

.ds-avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ds-avatar-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: var(--ds-accent);
  color: var(--ds-white);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 5px 12px;
  border-radius: var(--ds-radius-full);
}

/* -- Showcase grid (solo para design-system.html) ------------------------ */
.ds-page {
  background: var(--ds-bg);
  min-height: 100vh;
  padding: 60px 24px;
}

.ds-frame {
  max-width: 1160px;
  margin: 0 auto;
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  border-radius: 28px;
  padding: 56px;
}

.ds-title {
  text-align: center;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 42px;
  margin: 0 0 40px;
}

.ds-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.ds-grid .ds-card {
  grid-column: span 6;
}

@media (min-width: 760px) {
  .ds-grid .span-3 {
    grid-column: span 3;
  }
  .ds-grid .span-2 {
    grid-column: span 2;
  }
  .ds-grid .span-4 {
    grid-column: span 4;
  }
}

.ds-more {
  display: block;
  margin: 44px auto 0;
  width: fit-content;
  padding: 10px 24px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-soft);
  color: var(--ds-text-secondary);
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 640px) {
  .ds-frame {
    padding: 28px 18px;
    border-radius: 18px;
  }
  .ds-title {
    font-size: 30px;
  }
}

/* ==========================================================================
   LIBRERÍAS DE MAPA (OpenLayers / QGIS2Web) -- unificadas aquí desde
   resources/ol-search-layer.min.css, resources/photon-geocoder-autocomplete.min.css,
   resources/ol-layerswitcher.css y resources/qgis2web.css. Antes cada página
   con sidebar enlazaba estos 4 archivos por separado (la mayoría ni usa mapa,
   era boilerplate copiado); ahora viven acá y esos <link> se quitaron de
   todas las páginas. Se conserva el mismo orden interno que tenían como
   <link> (search-layer, photon, layerswitcher, qgis2web) para no alterar en
   qué gana el cascade.

   Nota: gran parte de las reglas de qgis2web.css (.ol-popup, .layer-switcher,
   #popup-content, th/td, etc.) ya estaban copiadas más arriba en este mismo
   archivo desde antes de esta unificación. Se deja qgis2web.css completo acá
   de todos modos, tal cual el archivo original, en vez de intentar
   deduplicar a mano -- así el comportamiento de las páginas con mapa
   (casos, casos_u, inicio) no cambia ni un pixel. Una limpieza más fina de
   esas reglas repetidas queda pendiente como tarea aparte.
   ========================================================================== */

/* ---- resources/ol-search-layer.min.css ---- */
.search-layer {
  top: 65px;
  left: 0.5em;
}
.ol-touch .search-layer {
  top: 80px;
}
.search-layer button {
  background-repeat: no-repeat;
  background-position: center center;
  top: 2px;
  left: 2px;
}
.search-layer-input-search {
  position: absolute;
  top: 2px;
  left: 32px;
  width: 180px;
  padding: 5px;
  border: 1px solid #ccc;
  font-family: inherit;
  font-size: 0.875rem;
}
.search-layer-collapsed {
  display: none;
}

/* ---- resources/photon-geocoder-autocomplete.min.css ---- */
ul.photon-autocomplete {
  position: absolute;
  background-color: white;
  max-width: fit-content;
  z-index: 1000;
  box-shadow: 0 4px 9px #999999;
  display: none;
  margin: 0; /* Remove margins */
  list-style-type: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  font-family: Arial, sans-serif;
  height: 200px;
  overflow: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
}
.photon-autocomplete li {
  min-height: 20px;
  line-height: 1em;
  padding: 5px 10px;
  overflow: hidden;
  /* white-space: nowrap; */
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  font-size: 1em;
}
.photon-autocomplete li strong {
  display: block;
}
.photon-geocoder-autocomplete {
  position: relative !important;
  float: left !important;
  top: unset;
  left: unset;
  margin-top: 8px;
  margin-left: 8px;
  clear: both;
}
.photon-autocomplete li.on {
  background-color: #ff8c9d;
  cursor: pointer;
}
.photon-autocomplete li.photon-no-result {
  text-align: center;
  color: #666;
  font-size: 0.9em;
  line-height: 20px;
  width: fit-content;
  block-size: fit-content;
}
.photon-autocomplete .photon-feedback {
  display: block;
  text-align: right;
  font-size: 0.8em;
  padding: 3px;
  color: #999;
  border-top: 1px solid #eee;
}
.photon-input {
  border-radius: 10px;
}
.photon-input:focus {
  width: 400px;
  border-radius: 10px;
}
@media all and (max-width: 500px) {
  #map .photon-input:focus {
    width: 300px;
    border-radius: 10px;
  }
}
@media all and (max-width: 400px) {
  #map ul.photon-autocomplete {
    position: relative;
    background-color: white;
    max-width: 400;
    z-index: 1000;
    box-shadow: 0 4px 9px #999999;
    display: none;
    margin: 0; /* Remove margins */
    list-style-type: none; /* Remove bullets */
    padding: 0; /* Remove padding */
    font-family: Arial, sans-serif;
  }
  #map .photon-input:focus {
    width: 200px;
    border-radius: 10px;
  }
}
@media all and (max-width: 280px) {
  #map .photon-input:focus {
    width: 150px;
    border-radius: 10px;
  }
}

/* ---- resources/ol-layerswitcher.css ---- */
.layer-switcher {
  position: absolute;
  top: 3.5em;
  right: 0.5em;
  text-align: left;
}

.layer-switcher .panel {
  margin: 0;
  border: 4px solid #eee;
  border-radius: 4px;
  background-color: white;
  display: none;
  max-height: inherit;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
}

.layer-switcher button {
  float: right;
  z-index: 1;
  width: 38px;
  height: 38px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAACE1BMVEX///8A//8AgICA//8AVVVAQID///8rVVVJtttgv98nTmJ2xNgkW1ttyNsmWWZmzNZYxM4gWGgeU2JmzNNr0N1Rwc0eU2VXxdEhV2JqytQeVmMhVmNoydUfVGUgVGQfVGQfVmVqy9hqy9dWw9AfVWRpydVry9YhVmMgVGNUw9BrytchVWRexdGw294gVWQgVmUhVWPd4N6HoaZsy9cfVmQgVGRrytZsy9cgVWQgVWMgVWRsy9YfVWNsy9YgVWVty9YgVWVry9UgVWRsy9Zsy9UfVWRsy9YgVWVty9YgVWRty9Vsy9aM09sgVWRTws/AzM0gVWRtzNYgVWRuy9Zsy9cgVWRGcHxty9bb5ORbxdEgVWRty9bn6OZTws9mydRfxtLX3Nva5eRix9NFcXxOd4JPeINQeIMiVmVUws9Vws9Vw9BXw9BYxNBaxNBbxNBcxdJexdElWWgmWmhjyNRlx9IqXGtoipNpytVqytVryNNrytZsjZUuX210k5t1y9R2zNR3y9V4lp57zth9zdaAnKOGoaeK0NiNpquV09mesrag1tuitbmj1tuj19uktrqr2d2svcCu2d2xwMO63N+7x8nA3uDC3uDFz9DK4eHL4eLN4eIyYnDX5OM5Z3Tb397e4uDf4uHf5uXi5ePi5+Xj5+Xk5+Xm5+Xm6OY6aHXQ19fT4+NfhI1Ww89gx9Nhx9Nsy9ZWw9Dpj2abAAAAWnRSTlMAAQICAwQEBgcIDQ0ODhQZGiAiIyYpKywvNTs+QklPUlNUWWJjaGt0dnd+hIWFh4mNjZCSm6CpsbW2t7nDzNDT1dje5efr7PHy9PT29/j4+Pn5+vr8/f39/f6DPtKwAAABTklEQVR4Xr3QVWPbMBSAUTVFZmZmhhSXMjNvkhwqMzMzMzPDeD+xASvObKePPa+ffHVl8PlsnE0+qPpBuQjVJjno6pZpSKXYl7/bZyFaQxhf98hHDKEppwdWIW1frFnrxSOWHFfWesSEWC6R/P4zOFrix3TzDFLlXRTR8c0fEEJ1/itpo7SVO9Jdr1DVxZ0USyjZsEY5vZfiiAC0UoTGOrm9PZLuRl8X+Dq1HQtoFbJZbv61i+Poblh/97TC7n0neCcK0ETNUrz1/xPHf+DNAW9Ac6t8O8WH3Vp98f5lCaYKAOFZMLyHL4Y0fe319idMNgMMp+zWVSybUed/+/h7I4wRAG1W6XDy4XmjR9HnzvDRZXUAYDFOhC1S/Hh+fIXxen+eO+AKqbs+wAo30zDTDvDxKoJN88sjUzDFAvBzEUGFsnADoIvAJzoh2BZ8sner+Ke/vwECuQAAAABJRU5ErkJggg==")
    /*logo.png*/;
  background-repeat: no-repeat;
  background-position: 2px;
  background-color: white;
  color: black;
  border: none;
}

.layer-switcher button:focus,
.layer-switcher button:hover {
  background-color: white;
}

.layer-switcher.shown {
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100% - 5.5em);
}

.layer-switcher.shown.ol-control {
  background-color: transparent;
}

.layer-switcher.shown.ol-control:hover {
  background-color: transparent;
}
.layer-switcher.shown .panel {
  display: block;
}

.layer-switcher.shown button {
  display: none;
}

.layer-switcher.shown.layer-switcher-activation-mode-click > button {
  display: block;
  background-image: unset;
  right: 2px;
  position: absolute;
  background-color: #eee;
  margin: 1px;
}

.layer-switcher.shown button:focus,
.layer-switcher.shown button:hover {
  background-color: #fafafa;
}

.layer-switcher ul {
  list-style: none;
  margin: 1.6em 0.4em;
  padding-left: 0;
}
.layer-switcher ul ul {
  padding-left: 1.2em;
  margin: 0.1em 0 0 0;
}
.layer-switcher li.group + li.group {
  margin-top: 0.4em;
}
.layer-switcher li.group + li.layer-switcher-base-group {
}

.layer-switcher li.group > label {
  font-weight: bold;
}

.layer-switcher.layer-switcher-group-select-style-none li.group > label {
  padding-left: 1.2em;
}

.layer-switcher li {
  position: relative;
  margin-top: 0.3em;
}

.layer-switcher li input {
  position: absolute;
  left: 1.2em;
  height: 1em;
  width: 1em;
  font-size: 1em;
}
.layer-switcher li label {
  padding-left: 2.7em;
  padding-right: 1.2em;
  display: inline-block;
  margin-top: 1px;
}

.layer-switcher label.disabled {
  opacity: 0.4;
}

.layer-switcher input {
  margin: 0px;
}

.layer-switcher.touch ::-webkit-scrollbar {
  width: 4px;
}

.layer-switcher.touch ::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

.layer-switcher.touch ::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

li.layer-switcher-base-group > label {
  padding-left: 1.2em;
}

.layer-switcher .group button {
  position: absolute;
  left: 0;
  display: inline-block;
  vertical-align: top;
  float: none;
  font-size: 1em;
  width: 1em;
  height: 1em;
  margin: 0;
  background-position: center 2px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAW0lEQVR4nGNgGAWMyBwXFxcGBgaGeii3EU0tXHzPnj1wQRYsihqQ+I0ExDEMQAYNONgoAN0AmMkNaDSyQSheY8JiaCMOGzE04zIAmyFYNTMw4A+DRhzsUUBtAADw4BCeIZkGdwAAAABJRU5ErkJggg==");
  -webkit-transition: -webkit-transform 0.2s ease-in-out;
  -ms-transition: -ms-transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
}

.layer-switcher .group.layer-switcher-close button {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}

.layer-switcher .group.layer-switcher-fold.layer-switcher-close > ul {
  overflow: hidden;
  height: 0;
}

/*layerswitcher on the right*/
.layer-switcher.shown.layer-switcher-activation-mode-click {
  padding-left: 34px;
}
.layer-switcher.shown.layer-switcher-activation-mode-click > button {
  left: 0;
  border-right: 0;
}

/*layerswitcher on the left*/
/*
.layer-switcher.shown.layer-switcher-activation-mode-click {
  padding-right: 34px;
}
.layer-switcher.shown.layer-switcher-activation-mode-click > button {
  right: 0;
  border-left: 0;
}
*/

/* ---- resources/qgis2web.css ---- */
/* Su regla html,body{height:100%;font-family:sans-serif;font-size:small;...}
   NO se copia acá: el height:100% ya se fusionó arriba en la sección 1 (RESET
   Y TIPOGRAFÍA GLOBAL); el font-family/font-size sí se dejan afuera a
   propósito -- ver el comentario en esa sección. */

#map {
  width: 100%;
  height: 100%;
}

.ol-control {
  clear: both;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
}

.ol-selectable {
  z-index: 3;
}

.ol-popup {
  display: none;
  position: absolute;
  background-color: white;
  padding: 15px;
  border-radius: 10px;
  bottom: 10px;
  left: 50%;
  width: 25vw;
  transform: translateX(-50%);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  position: absolute;
}

.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 50%;
  margin-left: -10px;
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 50%;
  margin-left: -11px;
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 4px;
  right: 4px;
  text-align: center;
  width: 19px;
  color: #999;
  font-family: cursive;
  font-weight: bold;
}

.ol-popup-closer:after {
  content: "X";
}

#popup-content {
  font-size: 12px;
  line-height: 1.2;
  margin-top: 5px;
  max-height: 70vh;
  max-width: 70vw;
  overflow: auto;
}

#popup-content ul {
  list-style-type: none;
  padding-left: 0;
  margin: unset;
}

#popup-content li {
  margin-bottom: 3em;
  border-bottom: #0078a8 1px solid;
  padding-bottom: 2em;
}

#popup-content td:first-child {
  font-size: 25px;
}

#popup-content > ul > li > a {
  display: none;
}

#popup-content > table {
  font-size: 11.4px;
}

.roller-switcher {
  background-image: url(lds-roller.gif);
  background-size: contain;
  height: 19px;
  width: 19px;
  display: inline-block;
}

th,
td {
  vertical-align: top;
  text-align: left;
  color: #333;
}

th {
  min-width: 100px;
}
td {
  min-width: 100px;
}

td img {
  max-height: 60vh !important;
  max-width: 60vw !important;
}

td video {
  max-height: 60vh !important;
  max-width: 60vw !important;
}

.ol-overlaycontainer-stopevent
  #top-right-container
  .layer-switcher:hover
  ~ .ol-overlaycontainer-stopevent
  .ol-overlay-container
  .ol-popup {
  display: none !important;
}

#top-left-container {
  position: absolute;
  left: 0;
  top: 0;
}
#bottom-left-container {
  position: absolute;
  left: 0;
  bottom: 0;
}
#top-right-container {
  position: absolute;
  right: 0;
  top: 0;
  display: contents;
}
#bottom-right-container {
  position: absolute;
  right: 0;
  bottom: 0;
}

.top-left-title,
.top-left-abstract {
  position: relative;
  float: left;
  margin-top: 8px;
  margin-left: 8px;
}
.bottom-left-title,
.bottom-left-abstract {
  position: relative;
  float: left;
  margin-bottom: 8px;
  margin-left: 8px;
}
.top-right-title,
.top-right-abstract {
  position: relative;
  float: right;
  margin-top: 8px;
  margin-right: 8px;
}
.bottom-right-title,
.bottom-right-abstract {
  position: relative;
  float: right;
  margin-bottom: 8px;
  margin-right: 8px;
}

.project-title {
  margin: 1px;
  padding: 5px;
}

#abstract {
  max-width: 30%;
}
.ol-touch #abstract {
  max-width: 50%;
}

.project-abstract {
  font:
    bold 18px "Lucida Console",
    Monaco,
    monospace;
  width: 20px;
  height: 20px;
  display: block;
  text-align: center;
  cursor: pointer;
  padding: 3px;
}

.project-abstract-uncollapsed {
  width: auto;
  height: auto;
  display: block;
  padding: 3px;
  cursor: default;
  margin: 1px;
}

.ol-zoom {
  position: relative;
  float: left;
  top: unset;
  left: unset;
  margin-top: 8px;
  margin-left: 8px;
}

/* measurement */
.measure-control {
  position: relative;
  float: left;
  top: unset !important;
  left: unset !important;
  margin-top: 8px;
  margin-left: 8px;
  display: flex;
}

.tooltip {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  color: white;
  padding: 4px 8px;
  opacity: 0.7;
  white-space: nowrap;
}
.tooltip-measure {
  opacity: 1;
  font-weight: bold;
}
.tooltip-static {
  background-color: #ffcc33;
  color: black;
  border: 1px solid white;
}
.tooltip-measure:before,
.tooltip-static:before {
  border-top: 6px solid rgba(0, 0, 0, 0.5);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  content: "";
  position: absolute;
  bottom: -6px;
  margin-left: -7px;
  left: 50%;
}
.tooltip-static:before {
  border-top-color: #ffcc33;
}
.ol-touch .measure-control {
  top: 130px;
}
.measure-control label {
  padding: 1px;
  padding-right: 4px;
}

.geolocate {
  position: relative !important;
  float: left;
  top: unset !important;
  left: unset !important;
  margin-top: 8px;
  margin-left: 8px;
}

.ol-geocoder.gcd-gl-container {
  position: relative !important;
  float: left !important;
  top: unset;
  left: unset;
  margin-top: 8px;
  margin-left: 8px;
  clear: both;
}
.gcd-gl-control {
  position: relative !important;
}
.gcd-gl-control button:after {
  display: none;
}

.search-layer {
  position: relative !important;
  float: left;
  top: unset !important;
  left: unset !important;
  margin-top: 8px;
  margin-left: 8px;
}

.search-layer-input-search {
  left: 26px;
  width: 144px;
  top: 3px;
  padding: 3px;
}

.search-layer-input-search:after {
  left: 27px;
  width: 139px;
  top: 0px;
  padding: 4px;
  border: 3px solid rgba(255, 255, 255, 0.4) !important;
}

.ol-scale-line {
  background: none !important;
  position: relative;
  float: left;
  bottom: unset;
  left: unset;
  margin-bottom: 8px;
  margin-left: 8px;
}
.ol-scale-line-inner {
  border: 2px solid;
  border-top: none;
  background: rgba(255, 255, 255, 0.5);
  color: black;
  margin: unset;
}

.layer-switcher {
  position: relative;
  float: right;
  top: unset;
  right: 0;
  bottom: unset !important;
  margin-top: 8px;
  margin-right: 8px;
  padding: 3px;
  background-color: rgba(255, 255, 255, 0.4) !important;
}

.layer-switcher:hover {
  background-color: rgba(255, 255, 255, 0.6) !important;
}

.layer-switcher .panel {
  border: unset;
  border-radius: unset;
  float: right;
  width: fit-content;
  margin: 1px;
  max-height: calc(100vh - 200px);
  box-sizing: unset;
}

.layer-switcher.shown {
  align-items: flex-end;
}

.layer-switcher.shown.layer-switcher-activation-mode-click > button {
  position: relative;
  border-radius: 5px;
  font-size: x-large;
  font-family: serif;
  z-index: 2;
}

.layer-switcher img {
  max-width: 22px;
  max-height: 22px;
}

.ol-attribution {
  display: none;
}
.bottom-attribution {
  float: right;
  position: relative;
  display: flex;
  font-size: 0.9rem;
}
.bottom-attribution a {
  color: #0078a8;
  text-decoration: none;
}
.bottom-attribution a:hover {
  text-decoration: underline;
}
.bottom-attribution button {
  display: none;
}
.bottom-attribution ul {
  padding: unset;
  margin: unset;
  display: flex;
  list-style: none;
}
.bottom-attribution > li {
  padding-left: 8px !important;
  list-style: none;
}

.fa-exclamation-triangle {
  color: orangered;
  font-size: 15px;
}

/* Notificaciones internas: campana del header (components/header.php) y
   bandeja /notificaciones */
.notif-wrap { position: relative; }
.notif-bell { position: relative; }
.notif-badge {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: #dc2626; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.notif-badge[hidden] { display: none; }
.notif-dropdown {
  position: absolute; right: 0; top: 46px; z-index: 1200;
  width: 360px; max-width: calc(100vw - 24px);
  background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border-color); border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .15); overflow: hidden;
}
.notif-dropdown[hidden] { display: none; }
.notif-dd-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--border-color);
}
.notif-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent); font-size: 12px; font-weight: 600;
}
.notif-dd-list { max-height: 360px; overflow-y: auto; }
.notif-item {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 14px; border-bottom: 1px solid var(--border-color);
  color: var(--text-primary); text-decoration: none;
}
.notif-item:hover { background: var(--bg-hover); }
.notif-item.unread { background: var(--bg-surface-alt); }
.notif-item > i { margin-top: 3px; width: 16px; text-align: center; color: var(--accent); }
.notif-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif-item-msg { font-size: 13px; line-height: 1.35; word-break: break-word; }
.notif-item.unread .notif-item-msg { font-weight: 700; }
.notif-item-time { font-size: 11px; color: var(--text-muted); }
.notif-empty { padding: 24px 14px; text-align: center; color: var(--text-muted); font-size: 13px; }
.notif-dd-footer {
  display: block; padding: 10px 14px; text-align: center;
  font-size: 13px; font-weight: 600; color: var(--accent);
}