/*
 * Sistema visual del panel SOSWARD.
 *
 * Sin build step a propósito (CLAUDE.md: "ante dos soluciones válidas, elegir
 * la simple"): Hostinger sirve este archivo estático tal cual, sin Vite ni
 * Tailwind. Por eso el orden importa — primero tokens, luego primitivas, luego
 * componentes, y al final el responsive.
 *
 * Regla de oro: ningún color literal fuera de la sección de tokens. Si una
 * pantalla necesita un color, es que falta un token o falta un componente.
 */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* Le dice al navegador que esta hoja se encarga de los dos temas.
     SIN ESTO, Chrome en Android aplica su oscurecimiento automatico encima
     —invierte colores que ya estaban pensados para modo oscuro— y el
     resultado era texto gris sobre azul, ilegible. No es cosmetico: es lo
     que apaga esa capa y deja mandar a los tokens de abajo. */
  color-scheme: light dark;

  /* Marca. Los dos colores salen del logo de SOSWARD: el escudo azul y la
     "S" terracota. El terracota NO es un color de interfaz general — está
     reservado a emergencias, alertas y acciones destructivas.

     Regla del sistema: azul para navegar y dar confianza, terracota para
     actuar y alertar, verde para confirmar que alguien está a salvo. */
  --brand-950: #061f36;
  --brand-900: #0b3154; /* azul SOSWARD: cabeceras, navegación, títulos */
  --brand-800: #14405f;
  --brand-700: #1d4c6f;
  --brand-600: #27577e; /* azul intermedio: selección, enlaces, estado activo */
  --brand-500: #3a6d95;
  --brand-200: #b9cddd;
  --brand-100: #dbe6ef;
  --brand-50: #eff4f8;

  --critical-800: #7a2a1e;
  --critical-700: #963426; /* SOS presionado y alertas críticas */
  --critical-600: #bf4835; /* SOS, alertas y acciones que piden atención */
  --critical-100: #f7ddd8;
  --critical-50: #fcf1ee;

  --success-700: #1d6a55;
  --success-600: #26856a; /* usuario a salvo, ayuda atendida, botón conectado */
  --success-100: #d3ece4;
  --success-50: #eef8f5;

  --warning-700: #8a5108;
  --warning-600: #b06a12;
  --warning-100: #fbe8cd;
  --warning-50: #fdf6ea;

  /* Neutros. Un solo eje de grises, ligeramente frío para acompañar al azul. */
  --ink-900: #17212b; /* texto principal */
  --ink-800: #24303c;
  --ink-700: #3b4855;
  --ink-600: #4e5c69;
  --ink-500: #66727d; /* texto secundario */
  --ink-400: #96a1ab;
  --ink-300: #c7d0d7;
  --ink-200: #dfe4e8;
  --ink-100: #eaeef1;
  --ink-50: #f5f7f8; /* fondo claro */

  /* Texto sobre un relleno de acento (botones). En claro el acento es oscuro
     y encima va blanco; en oscuro el acento se aclara para verse sobre el
     fondo, así que encima tiene que ir tinta oscura o no se lee. */
  --on-accent: #ffffff;

  /* Texto sobre la superficie de marca —el menu lateral—, que es azul oscuro
     en LOS DOS temas. Por eso este token no se invierte nunca.
     Antes el menu usaba --brand-100, que en modo oscuro pasa a ser un azul de
     fondo: los enlaces quedaban en #1b374d sobre #0b3154, practicamente
     invisibles. Un token de fondo no puede hacer de color de texto. */
  --on-brand: #ffffff;
  --on-brand-muted: #dbe6ef;

  --surface: #ffffff;
  --canvas: var(--ink-50);
  --border: var(--ink-200);
  --border-strong: var(--ink-300);
  --text: var(--ink-900);
  --text-muted: var(--ink-500);

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Sombras muy ligeras: el panel se apoya en bordes, no en profundidad. */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 8px 20px rgba(16, 24, 40, 0.10), 0 2px 6px rgba(16, 24, 40, 0.05);

  --sidebar-width: 248px;
  --topbar-height: 60px;
  --page-max: 1560px;

  /* Manrope y Plus Jakarta Sans primero; si no están instaladas ni servidas
     desde public/fonts/, cae al tipo del sistema sin romper nada. No se
     enlazan desde un CDN a propósito: el panel se sirve como archivos
     estáticos en Hostinger y no se da por garantizado el acceso a Google
     Fonts desde la red del cliente. Ver README del panel para el formato y la
     ubicación esperados. */
  --font: "Manrope", "Plus Jakarta Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* El atributo hidden vale menos que cualquier regla de display (.crest usa
   grid, .menu-panel usa block), así que sin esto un elemento marcado como
   oculto se seguiría viendo. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--canvas);
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }

a { color: var(--brand-600); text-decoration: none; }
a:hover { color: var(--brand-700); text-decoration: underline; }

svg.icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
svg.icon-sm { width: 15px; height: 15px; }
svg.icon-lg { width: 22px; height: 22px; }

:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.muted { color: var(--text-muted); }
.text-sm { font-size: 0.85rem; }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ==========================================================================
   3. SHELL: sidebar + topbar + contenido
   ========================================================================== */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--brand-900);
  color: var(--on-brand-muted);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1.1rem 1.25rem;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebar-brand:hover { text-decoration: none; color: #fff; }
/* Chip blanco: el escudo de la marca es azul marino y sobre el sidebar del
   mismo tono desaparecería. */
.sidebar-brand .mark {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: #fff;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.sidebar-brand .mark img { display: block; width: 26px; height: auto; }
.sidebar-brand .name { font-size: 0.98rem; font-weight: 600; letter-spacing: 0.02em; }
.sidebar-brand .tagline { font-size: 0.7rem; color: var(--on-brand-muted); letter-spacing: 0.04em; text-transform: uppercase; }

.sidebar-nav { padding: 0.85rem 0.75rem; overflow-y: auto; flex: 1; }
.sidebar-nav .group-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-brand-muted);
  opacity: 0.75;
  padding: 0.75rem 0.6rem 0.35rem;
}
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-sm);
  color: var(--on-brand-muted);
  font-size: 0.9rem;
  margin-bottom: 0.1rem;
}
.sidebar-nav a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; text-decoration: none; }
.sidebar-nav a.active { background: rgba(255, 255, 255, 0.14); color: #fff; font-weight: 600; }
/* Marca de página activa: una barra en el borde izquierdo, más legible que
   solo el cambio de fondo cuando la lista es larga. */
.sidebar-nav a.active { box-shadow: inset 3px 0 0 var(--critical-600); }
.sidebar-nav a .count {
  margin-left: auto;
  background: var(--critical-600);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0 0.4rem;
  border-radius: var(--radius-pill);
  min-width: 20px;
  text-align: center;
}

.sidebar-footer {
  padding: 0.9rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 0.72rem;
  color: var(--on-brand-muted);
  line-height: 1.4;
}

.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: var(--topbar-height);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 40;
}
.topbar-context { min-width: 0; flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: 0.4rem; }

.icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid transparent;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--ink-600);
  cursor: pointer;
}
.icon-btn:hover { background: var(--ink-100); color: var(--ink-900); }
.icon-btn .dot {
  position: absolute;
  top: 3px; right: 3px;
  min-width: 16px; height: 16px;
  padding: 0 3px;
  background: var(--critical-600);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

.page {
  flex: 1;
  width: 100%;
  max-width: var(--page-max);
  padding: 1.5rem 1.75rem 3rem;
}

/* Barra móvil: solo existe por debajo de 1024px. */
.mobile-bar { display: none; }
.sidebar-backdrop { display: none; }

/* --- Pie de página con mapa del sitio ------------------------------------ */

.app-footer {
  margin-top: auto;              /* pegado abajo aunque la página sea corta */
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.footer-map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem 2rem;
  max-width: var(--page-max);
  padding: 2rem 1.75rem 1.5rem;
}
.footer-group h2 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-500);
  margin-bottom: 0.7rem;
}
.footer-group ul { list-style: none; margin: 0; padding: 0; }
.footer-group li { margin-bottom: 0.4rem; }
.footer-group a { color: var(--ink-700); font-size: 0.87rem; }
.footer-group a:hover { color: var(--brand-600); }

/* La columna de marca ocupa el doble para que el aviso legal se lea en una
   línea de texto cómoda y no en una columna estrecha. */
.footer-brand { grid-column: span 2; max-width: 46ch; }
.footer-brand img { display: block; margin-bottom: 0.7rem; height: auto; }
.footer-brand p { margin: 0; font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }
.footer-brand strong { color: var(--ink-700); }

.footer-legal {
  border-top: 1px solid var(--ink-100);
  padding: 0.85rem 1.75rem;
  font-size: 0.78rem;
  color: var(--ink-400);
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ==========================================================================
   4. MENÚS DESPLEGABLES (notificaciones, usuario, comunidad)
   ========================================================================== */

.menu { position: relative; }
.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 0.35rem;
  z-index: 50;
}
.menu-panel[hidden] { display: none; }
.menu-panel .menu-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.7rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.25rem;
}
.menu-panel .menu-head strong { font-size: 0.85rem; }
.menu-panel a,
.menu-panel button.menu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.7rem;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--ink-700);
  font: inherit;
  font-size: 0.87rem;
  cursor: pointer;
}
.menu-panel a:hover,
.menu-panel button.menu-item:hover { background: var(--ink-100); text-decoration: none; color: var(--ink-900); }
.menu-panel .menu-sep { height: 1px; background: var(--border); margin: 0.25rem 0; }
.menu-panel .menu-caption { padding: 0.45rem 0.7rem; font-size: 0.75rem; color: var(--text-muted); }
.menu-panel .menu-item.danger { color: var(--critical-700); }
.menu-panel .menu-item.danger:hover { background: var(--critical-50); }

.user-trigger {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.25rem 0.45rem 0.25rem 0.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: none;
  cursor: pointer;
  font: inherit;
  color: var(--ink-700);
}
.user-trigger:hover { background: var(--ink-100); }
.avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--brand-100);
  color: var(--brand-800);
  display: grid; place-items: center;
  font-size: 0.75rem; font-weight: 700;
  flex-shrink: 0;
}
.user-trigger .who { display: flex; flex-direction: column; line-height: 1.15; }
.user-trigger .who strong { font-size: 0.82rem; font-weight: 600; }
.user-trigger .who span { font-size: 0.7rem; color: var(--text-muted); }

/* Centro de notificaciones */
.notif-panel { width: 340px; max-width: calc(100vw - 2rem); }
.notif-list { max-height: 380px; overflow-y: auto; }
.notif-item {
  display: flex; gap: 0.65rem;
  padding: 0.65rem 0.7rem;
  border-radius: var(--radius-sm);
}
.notif-item + .notif-item { border-top: 1px solid var(--ink-100); border-radius: 0; }
.notif-item .bullet {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-600);
  margin-top: 0.4rem;
  flex-shrink: 0;
}
.notif-item.read .bullet { background: var(--ink-300); }
.notif-item .body { min-width: 0; }
.notif-item .title { font-size: 0.85rem; font-weight: 600; color: var(--ink-800); }
.notif-item.read .title { font-weight: 500; color: var(--ink-600); }
.notif-item .text { font-size: 0.8rem; color: var(--text-muted); }
.notif-item .when { font-size: 0.72rem; color: var(--ink-400); margin-top: 0.15rem; }

/* ==========================================================================
   5. CABECERA DE PÁGINA, BREADCRUMB Y PESTAÑAS
   ========================================================================== */

.breadcrumb {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  list-style: none; margin: 0; padding: 0;
  overflow: hidden;
}
.breadcrumb li { display: flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--brand-600); }
.breadcrumb .sep { color: var(--ink-300); }
.breadcrumb .current { color: var(--ink-700); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.35rem;
}
.page-header .titles { min-width: 0; }
.page-header h1 { font-size: 1.5rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.page-header .subtitle { color: var(--text-muted); font-size: 0.88rem; margin-top: 0.25rem; max-width: 70ch; }
.page-header .actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* Sub-navegación de un módulo. Pestañas, no píldoras de color: el estado
   activo se marca con una línea inferior, como en cualquier consola seria. */
.tab-nav {
  display: flex;
  gap: 0.15rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.35rem;
  /* overflow-y hidden: sin esto, el scroll horizontal de las pestañas dibuja
     también una barra vertical de 1 px de alto en el borde derecho. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.tab-nav a {
  padding: 0.6rem 0.85rem;
  font-size: 0.88rem;
  color: var(--ink-600);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  margin-bottom: -1px;
}
.tab-nav a:hover { color: var(--ink-900); text-decoration: none; border-bottom-color: var(--ink-300); }
.tab-nav a.active { color: var(--brand-700); border-bottom-color: var(--brand-600); font-weight: 600; }
.tab-nav a .count {
  margin-left: 0.4rem;
  background: var(--ink-100);
  color: var(--ink-600);
  border-radius: var(--radius-pill);
  padding: 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
}
.tab-nav a.active .count { background: var(--brand-100); color: var(--brand-800); }

/* ==========================================================================
   6. SUPERFICIES
   ========================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  margin-bottom: 1.25rem;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.card-head h2, .card-head h3 { font-size: 0.98rem; }
.card-head .hint { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.1rem; }
.card-body { padding: 1.25rem; }
.card-body > :first-child { margin-top: 0; }
.card-foot {
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--border);
  background: var(--ink-50);
  border-radius: 0 0 var(--radius) var(--radius);
}
/* Una tabla ocupa la tarjeta entera: sus propias celdas ya tienen padding. */
.card-body.flush { padding: 0; }
.card.narrow { max-width: 720px; }

/* Cabecera de comunidad: el objeto principal de la plataforma. Identidad,
   estado y cifras de un vistazo antes de entrar a cualquier sección. */
.community-header {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.5rem;
}
.community-header .crest {
  width: 56px; height: 56px;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--brand-50);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  color: var(--brand-700);
  flex-shrink: 0;
}
.community-header .identity { min-width: 0; flex: 1; }
.community-header .identity h1 { font-size: 1.35rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.community-header .identity .meta {
  display: flex; gap: 0.9rem; flex-wrap: wrap;
  font-size: 0.8rem; color: var(--text-muted);
  margin-top: 0.3rem;
}
.community-header .identity .meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
.community-header .figures { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.community-header .figure .value { font-size: 1.3rem; font-weight: 700; line-height: 1.1; }
.community-header .figure .label { font-size: 0.75rem; color: var(--text-muted); }

/* ==========================================================================
   7. TARJETAS DE MÉTRICA
   ========================================================================== */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  padding: 1.1rem 1.2rem;
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  color: inherit;
}
a.stat-card:hover { border-color: var(--brand-200); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; }
.stat-card .glyph {
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: var(--ink-100);
  color: var(--ink-600);
  flex-shrink: 0;
}
.stat-card .value { font-size: 1.65rem; font-weight: 700; line-height: 1.15; }
.stat-card .label { font-size: 0.82rem; color: var(--text-muted); }
.stat-card .foot { font-size: 0.75rem; color: var(--ink-400); margin-top: 0.35rem; }

/* El tono tiñe solo el glifo y el número: la tarjeta sigue siendo blanca.
   Un panel donde todo grita no comunica urgencia cuando de verdad la hay. */
.stat-card.tone-critical .glyph { background: var(--critical-100); color: var(--critical-700); }
.stat-card.tone-critical .value { color: var(--critical-700); }
.stat-card.tone-warning .glyph { background: var(--warning-100); color: var(--warning-700); }
.stat-card.tone-success .glyph { background: var(--success-100); color: var(--success-700); }
.stat-card.tone-info .glyph { background: var(--brand-100); color: var(--brand-800); }

/* Tarjetas de navegación (hub de configuración). */
.link-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.link-card {
  display: flex;
  gap: 0.9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  padding: 1.15rem 1.25rem;
  color: inherit;
}
.link-card:hover { border-color: var(--brand-200); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; }
.link-card .glyph {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  background: var(--brand-50);
  color: var(--brand-700);
  flex-shrink: 0;
}
.link-card h3 { font-size: 0.95rem; margin-bottom: 0.2rem; }
.link-card p { margin: 0; font-size: 0.83rem; color: var(--text-muted); }
.link-card .meta { margin-top: 0.55rem; font-size: 0.78rem; font-weight: 600; color: var(--ink-700); }

/* ==========================================================================
   8. ESTADOS (StatusBadge)
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.12rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.badge-neutral { background: var(--ink-100); color: var(--ink-600); border-color: var(--ink-200); }
.badge-info { background: var(--brand-50); color: var(--brand-800); border-color: var(--brand-100); }
.badge-success { background: var(--success-50); color: var(--success-700); border-color: var(--success-100); }
.badge-warning { background: var(--warning-50); color: var(--warning-700); border-color: var(--warning-100); }
.badge-critical { background: var(--critical-50); color: var(--critical-700); border-color: var(--critical-100); }
/* Sin punto: para etiquetas que no son un estado (un rol, una marca). */
.badge-plain::before { display: none; }

/* ==========================================================================
   9. BOTONES
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.87rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  background: var(--brand-600);
  color: var(--on-accent);
  white-space: nowrap;
}
.btn:hover { background: var(--brand-700); color: var(--on-accent); text-decoration: none; }
.btn:active { background: var(--brand-800); }
.btn[disabled], .btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Secundaria: la acción habitual de una fila o de un formulario. */
.btn-secondary { background: var(--surface); color: var(--ink-700); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--ink-50); color: var(--ink-900); border-color: var(--ink-400); }

/* Terciaria: enlaces con forma de botón dentro de tablas densas. */
.btn-ghost { background: none; color: var(--ink-600); }
.btn-ghost:hover { background: var(--ink-100); color: var(--ink-900); }

/* Destructiva: contorno terracota en reposo, relleno solo al confirmar. Una
   fila con cinco botones rojos no distingue lo grave de lo rutinario. */
.btn-danger { background: var(--surface); color: var(--critical-700); border-color: var(--critical-100); }
.btn-danger:hover { background: var(--critical-50); color: var(--critical-800); border-color: var(--critical-600); }
.btn-danger-solid { background: var(--critical-600); color: var(--on-accent); }
.btn-danger-solid:hover { background: var(--critical-700); color: var(--on-accent); }

.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.8rem; }
.btn-lg { padding: 0.65rem 1.2rem; font-size: 0.95rem; }
.btn-block { width: 100%; }

.btn-group { display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
form.inline { display: inline; }

/* ==========================================================================
   10. TABLAS
   ========================================================================== */

.table-wrap { width: 100%; overflow-x: auto; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
}
table.data thead th {
  text-align: left;
  padding: 0.65rem 1.25rem;
  background: var(--ink-50);
  border-bottom: 1px solid var(--border);
  color: var(--ink-600);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
table.data thead th a { color: inherit; display: inline-flex; align-items: center; gap: 0.25rem; }
table.data tbody td {
  padding: 0.8rem 1.25rem;
  border-bottom: 1px solid var(--ink-100);
  vertical-align: middle;
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover td { background: var(--brand-50); }
table.data td .primary { font-weight: 600; color: var(--ink-900); }
table.data td .secondary { font-size: 0.8rem; color: var(--text-muted); }
table.data td.actions { text-align: right; white-space: nowrap; }
table.data td.numeric, table.data th.numeric { text-align: right; font-variant-numeric: tabular-nums; }
/* Fila que exige atención (una emergencia activa): un filo terracota, no un
   fondo rojo que haga ilegible el resto. */
table.data tr.row-critical td:first-child { box-shadow: inset 3px 0 0 var(--critical-600); }

.pagination { padding: 0.85rem 1.25rem; border-top: 1px solid var(--border); }
.pagination svg { width: 18px; height: 18px; }

/* ==========================================================================
   11. FILTROS Y FORMULARIOS
   ========================================================================== */

.filter-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.filter-bar .spacer { margin-left: auto; }
.filter-bar label { font-size: 0.8rem; color: var(--text-muted); }
.filter-bar .result-count { font-size: 0.8rem; color: var(--text-muted); }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=tel], input[type=url], select, textarea {
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--text);
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  max-width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}
input[disabled], select[disabled], textarea[disabled] { background: var(--ink-50); color: var(--ink-400); }
textarea { min-height: 80px; resize: vertical; }

.field { margin-bottom: 1.1rem; }
.field > label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.35rem; color: var(--ink-800); }
.field input[type=text], .field input[type=email], .field input[type=password],
.field input[type=number], .field input[type=tel], .field select, .field textarea { width: 100%; }
.field .hint { color: var(--text-muted); font-size: 0.78rem; margin-top: 0.3rem; }
.field .error { color: var(--critical-700); font-size: 0.78rem; margin-top: 0.3rem; }
.field .checkbox, .field.checkbox { display: flex; align-items: flex-start; gap: 0.5rem; }
.field .checkbox input, .field.checkbox input { width: auto; margin-top: 0.2rem; }
.field.checkbox > label { margin: 0; font-weight: 500; }
.field-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }

.form-section { padding: 1.25rem; border-bottom: 1px solid var(--border); }
.form-section:last-of-type { border-bottom: none; }
.form-section h3 { font-size: 0.9rem; margin-bottom: 0.15rem; }
.form-section .section-hint { font-size: 0.8rem; color: var(--text-muted); margin: 0 0 1rem; }

.permission-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 0.6rem; }
.permission-option {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.permission-option:hover { border-color: var(--brand-200); background: var(--brand-50); }
.permission-option input { margin-top: 0.2rem; }
.permission-option span { display: flex; flex-direction: column; font-size: 0.85rem; }
.permission-option small { color: var(--text-muted); font-weight: 400; font-size: 0.78rem; }
.permission-option:has(input:disabled) { background: var(--ink-50); cursor: default; }

.thumb {
  max-height: 76px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  display: block;
  margin-bottom: 0.5rem;
}

/* ==========================================================================
   12. ESTADOS VACÍOS Y FEEDBACK
   ========================================================================== */

.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--text-muted);
}
.empty-state .glyph {
  width: 48px; height: 48px;
  margin: 0 auto 0.9rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink-100);
  color: var(--ink-400);
}
.empty-state h3 { font-size: 1rem; color: var(--ink-800); margin-bottom: 0.35rem; }
.empty-state p { margin: 0 auto 1.25rem; max-width: 46ch; font-size: 0.87rem; }
.empty-state .btn { margin-top: 0; }

.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
  font-size: 0.87rem;
  border: 1px solid transparent;
}
.alert-success { background: var(--success-50); color: var(--success-700); border-color: var(--success-100); }
.alert-error { background: var(--critical-50); color: var(--critical-700); border-color: var(--critical-100); }
.alert-info { background: var(--brand-50); color: var(--brand-800); border-color: var(--brand-100); }
.alert-warning { background: var(--warning-50); color: var(--warning-700); border-color: var(--warning-100); }
.alert ul { margin: 0; padding-left: 1.1rem; }

/* Toast: confirmación de una acción que ya ocurrió. Se cierra solo, pero
   deja el botón por si el aviso llega mientras el usuario mira otra cosa. */
.toast-stack {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: calc(100vw - 2.5rem);
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--success-600);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 0.8rem 0.9rem;
  min-width: 280px;
  font-size: 0.87rem;
  animation: toast-in 0.18s ease-out;
}
.toast.toast-error { border-left-color: var(--critical-600); }
.toast .toast-icon { color: var(--success-600); }
.toast.toast-error .toast-icon { color: var(--critical-600); }
.toast .toast-body { flex: 1; min-width: 0; }
.toast .toast-close { background: none; border: none; cursor: pointer; color: var(--ink-400); padding: 0; }
.toast .toast-close:hover { color: var(--ink-700); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Estado de "enviando" para cualquier formulario: el botón se bloquea y
   muestra un giro. Sin esto el usuario pulsa dos veces. */
.is-busy { position: relative; pointer-events: none; opacity: 0.75; }
.is-busy::after {
  content: "";
  width: 14px; height: 14px;
  margin-left: 0.5rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .is-busy::after { animation-duration: 2s; }
}

/* Diálogo de confirmación para acciones destructivas. */
dialog.confirm {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 0;
  width: min(420px, calc(100vw - 2rem));
  color: var(--text);
}
dialog.confirm::backdrop { background: rgba(16, 24, 40, 0.45); }
dialog.confirm .dialog-body { padding: 1.35rem 1.4rem 0.5rem; }
dialog.confirm h3 { font-size: 1rem; margin-bottom: 0.4rem; }
dialog.confirm p { margin: 0; font-size: 0.87rem; color: var(--text-muted); }
dialog.confirm .dialog-actions {
  display: flex; justify-content: flex-end; gap: 0.5rem;
  padding: 1.1rem 1.4rem 1.4rem;
}

/* ==========================================================================
   13. LISTAS DE DETALLE
   ========================================================================== */

.detail-grid {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  gap: 0.1rem 1.5rem;
  font-size: 0.88rem;
  margin: 0;
}
.detail-grid dt {
  color: var(--text-muted);
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--ink-100);
}
.detail-grid dd {
  margin: 0;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--ink-100);
  min-width: 0;
  overflow-wrap: anywhere;
}
.detail-grid dt:last-of-type, .detail-grid dd:last-of-type { border-bottom: none; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; gap: 0.75rem; padding: 0.6rem 0; }
.timeline li + li { border-top: 1px solid var(--ink-100); }
.timeline .dot {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink-100); color: var(--ink-600);
  display: grid; place-items: center; flex-shrink: 0;
}
.timeline .what { font-size: 0.87rem; font-weight: 600; display: block; }
.timeline .when { font-size: 0.78rem; color: var(--text-muted); display: block; }

/* ==========================================================================
   14. ACCESO (login y selección de comunidad)
   ========================================================================== */

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--brand-100), transparent 70%),
    var(--canvas);
}
.auth-box {
  width: min(400px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 2rem;
}
.auth-box .auth-brand {
  display: flex; flex-direction: column; align-items: center;
  gap: 0.5rem; margin-bottom: 1.5rem; text-align: center;
}
.auth-box .auth-brand img { display: block; height: auto; }
.auth-box h1 { font-size: 1.2rem; }
.auth-box .auth-note { font-size: 0.78rem; color: var(--text-muted); text-align: center; }
.auth-foot { text-align: center; font-size: 0.75rem; color: var(--text-muted); margin-top: 1.25rem; }

/* Tarjetas del selector de comunidad. */
.choice-list { display: flex; flex-direction: column; gap: 0.5rem; }
.choice {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--surface);
  text-align: left;
  font: inherit;
  color: inherit;
  width: 100%;
}
.choice:hover { border-color: var(--brand-500); background: var(--brand-50); }
.choice .name { font-weight: 600; font-size: 0.9rem; }
.choice .role { font-size: 0.78rem; color: var(--text-muted); }

/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */

/* Notebook: se estrecha el sidebar y se reduce el aire lateral. */
@media (max-width: 1280px) {
  :root { --sidebar-width: 224px; }
  .page { padding: 1.25rem 1.25rem 2.5rem; }
}

/* Tablet y móvil: el sidebar pasa a ser un panel deslizante. */
@media (max-width: 1024px) {
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 70;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    height: 100dvh;
  }
  body.nav-open .sidebar { transform: none; box-shadow: var(--shadow-md); }
  body.nav-open .sidebar-backdrop {
    display: block;
    position: fixed; inset: 0;
    background: rgba(16, 24, 40, 0.45);
    z-index: 60;
  }
  .mobile-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .topbar { padding: 0 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

@media (max-width: 768px) {
  .page { padding: 1rem 0.9rem 2.5rem; }
  .footer-map { padding: 1.5rem 0.9rem 1rem; gap: 1.25rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-legal { padding: 0.85rem 0.9rem; }
  .page-header h1 { font-size: 1.25rem; }
  .page-header .actions { width: 100%; }
  .community-header { padding: 1rem; gap: 0.9rem; }
  .community-header .figures { gap: 1.25rem; width: 100%; }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; }
  .stat-card { padding: 0.9rem; }
  .stat-card .value { font-size: 1.4rem; }
  .detail-grid { grid-template-columns: 1fr; gap: 0; }
  .detail-grid dt { border-bottom: none; padding-bottom: 0; font-size: 0.78rem; }
  .toast-stack { left: 0.9rem; right: 0.9rem; bottom: 0.9rem; }
  .toast { min-width: 0; }

  /*
   * Tablas en móvil: en vez de scroll horizontal, cada fila se convierte en
   * una ficha y cada celda lleva delante el nombre de su columna (el
   * componente x-admin.data-table pone ese nombre en data-label).
   */
  table.data.responsive thead { display: none; }
  table.data.responsive, table.data.responsive tbody { display: block; }
  table.data.responsive tr {
    display: block;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
  }
  table.data.responsive tr:hover td { background: none; }
  table.data.responsive td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.2rem 0;
    border: none;
    text-align: right;
  }
  /* La primera columna hace de título de la ficha (el #12 de una emergencia,
     el nombre de un usuario): sin etiqueta delante y alineada a la izquierda. */
  table.data.responsive td:first-child {
    justify-content: flex-start;
    font-weight: 600;
    font-size: 0.95rem;
    text-align: left;
    padding-bottom: 0.45rem;
    box-shadow: none;
  }
  table.data.responsive td:first-child::before { display: none; }

  /* El filo terracota de una fila crítica pasa a la ficha entera. */
  table.data.responsive tr.row-critical {
    border-left: 3px solid var(--critical-600);
    padding-left: calc(1rem - 3px);
  }

  table.data.responsive td::before {
    content: attr(data-label);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink-500);
    text-align: left;
    flex-shrink: 0;
  }
  table.data.responsive td:empty { display: none; }
  table.data.responsive td.actions { justify-content: flex-end; padding-top: 0.6rem; }
  table.data.responsive td.actions::before { display: none; }
}

@media (max-width: 480px) {
  .user-trigger .who { display: none; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .btn { padding: 0.5rem 0.75rem; }
}

/* Impresión: un informe de auditoría o de emergencias debe poder imprimirse. */
@media print {
  .sidebar, .topbar, .app-footer, .page-header .actions, .filter-bar, .pagination { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}

/* ==========================================================================
   ACCESOS RÁPIDOS CONFIGURABLES
   ========================================================================== */

/* Fila del listado: el icono manda, porque es lo que el miembro verá en la
   app. Enseñarlo aquí evita configurar a ciegas. */
.quick-notice-cell { display: flex; align-items: center; gap: 0.7rem; }
.quick-notice-cell > span:last-child { display: flex; flex-direction: column; }

.quick-notice-glyph {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  flex: 0 0 auto;
  border-radius: var(--radius);
  background: var(--brand-50);
  color: var(--brand-700);
}

/* Selector de icono. Biblioteca cerrada: se elige de una cuadrícula, no se
   escribe. Radios reales para que funcione con teclado y sin JavaScript. */
.icon-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.icon-option input { position: absolute; opacity: 0; pointer-events: none; }

.icon-option > span {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-600);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.icon-option > span:hover { border-color: var(--border-strong); color: var(--ink-800); }

.icon-option input:checked + span {
  border-color: var(--brand-600);
  background: var(--brand-50);
  color: var(--brand-700);
  box-shadow: inset 0 0 0 1px var(--brand-600);
}

/* Foco visible: se navega con teclado y el radio real está oculto. */
.icon-option input:focus-visible + span {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

.field-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-700);
}

/* ==========================================================================
   MODO OSCURO
   ==========================================================================
   Solo se redefinen tokens: como ningún componente lleva un color literal,
   con esto basta para que el panel entero cambie. Se respeta la preferencia
   del sistema; no hay interruptor propio porque el panel no guarda ajustes de
   usuario todavía. */

@media (prefers-color-scheme: dark) {
  :root {
    --on-accent: #04121f;

    --surface: #112332;   /* superficies y tarjetas oscuras */
    --canvas: #081521;    /* fondo oscuro */
    --text: #e8edf1;
    --text-muted: #94a3ae;

    --ink-900: #e8edf1;
    --ink-800: #d5dde4;
    --ink-700: #bcc7d0;
    --ink-600: #9aa7b2;
    --ink-500: #94a3ae;
    --ink-400: #6c7b87;
    --ink-300: #33485a;
    --ink-200: #26394a;
    --ink-100: #1c2e3e;
    --ink-50: #142534;

    --border: #26394a;
    --border-strong: #33485a;

    /* El azul de marca es demasiado oscuro sobre fondo oscuro: en modo noche
       el papel de "color interactivo" lo toma el azul intermedio aclarado, y
       el terracota se sube para no volverse marrón.

       La escala se INVIERTE: los tonos altos (700, 800) pasan a ser claros
       porque en modo oscuro se usan como TEXTO sobre los bajos, que ahora son
       fondos oscuros. Faltaba invertir el 800 y el resultado era azul oscuro
       sobre azul oscuro: insignias, avisos informativos y contadores de
       pestaña quedaban ilegibles. */
    --brand-950: #04121f;
    --brand-900: #0b3154;
    --brand-800: #7fb0d3;
    --brand-700: #4a83ad;
    --brand-600: #5b93bd;
    --brand-500: #3a6d95;
    --brand-200: #b9cddd;
    --brand-100: #1b374d;
    --brand-50: #16293a;

    /* Misma inversión que el azul: el 700 y el 800 son TEXTO sobre los fondos
       oscuros del 50 y el 100, así que de noche tienen que ser los claros.
       Con los valores de día, una insignia critica era rojo oscuro sobre rojo
       casi negro. */
    --critical-800: #f0b3a6;
    --critical-700: #e08a76;
    --critical-600: #d4614d;
    --critical-100: #3b2019;
    --critical-50: #2a1712;

    --success-700: #6ec5a9;
    --success-600: #3aa184;
    --success-100: #16352c;
    --success-50: #112a23;

    --warning-700: #e0b060;
    --warning-600: #d08b2a;
    --warning-100: #3a2c14;
    --warning-50: #2a2010;
  }
}

/* ---------- Editor del blog ---------- */

/* El cuerpo del artículo es lo único que se escribe largo en toda la consola:
   monoespaciado porque es Markdown, y alto para no escribir por una rendija. */
#body {
    font-family: ui-monospace, SFMono-Regular, 'Cascadia Mono', Consolas, monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    min-height: 24rem;
}

/* Vista previa del Markdown. Se parece al sitio sin copiar su hoja de estilos:
   lo que se comprueba aquí es la estructura del texto, no el color. */
.markdown-preview {
    margin-top: 1rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--ink-200, #dfe4e8);
    border-radius: 10px;
    background: var(--surface-2, #f7f9fa);
    max-width: 68ch;
    line-height: 1.7;
}

.markdown-preview > :first-child { margin-top: 0; }
.markdown-preview h2 { font-size: 1.35rem; margin-top: 1.8rem; }
.markdown-preview h3 { font-size: 1.1rem; margin-top: 1.4rem; }
.markdown-preview ul, .markdown-preview ol { padding-left: 1.4rem; }
.markdown-preview img { max-width: 100%; height: auto; border-radius: 8px; }
.markdown-preview blockquote {
    margin-left: 0;
    padding-left: 1rem;
    border-left: 3px solid var(--ink-200, #dfe4e8);
    color: var(--text-muted, #66727d);
}

.cover-preview {
    display: block;
    max-width: 320px;
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* La URL del artículo, con el dominio delante para que se lea como la
   dirección que va a ser. */
.input-prefix { display: flex; align-items: stretch; }
.input-prefix > span {
    display: flex;
    align-items: center;
    padding: 0 0.6rem;
    background: var(--surface-2, #f7f9fa);
    border: 1px solid var(--ink-200, #dfe4e8);
    border-right: 0;
    border-radius: 8px 0 0 8px;
    color: var(--text-muted, #66727d);
    font-size: 0.85rem;
    white-space: nowrap;
}
.input-prefix > input { border-radius: 0 8px 8px 0; }

/* Los botones de estado son formularios independientes: sin esto se apilarían
   uno por línea. */
.button-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* La URL bajo el título en el listado. */
.muted-line {
    display: block;
    color: var(--text-muted, #66727d);
    font-size: 0.78rem;
    margin-top: 0.15rem;
}

.form-actions { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }

/* Formulario corto embebido en una tarjeta (preparar versión siguiente). */
.inline-form { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-start; }
.inline-form .field { margin-bottom: 0; min-width: 240px; }