/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   ESTILO VISUAL v2 — capa opcional encima de style.css
   ═══════════════════════════════════════════════════════════════════════════════════════════════

   Vive en un fichero propio para poder activarla y retirarla sin tocar `style.css`:

       npm run estilo:v2    lo activa  (y despliega)
       npm run estilo:v1    lo quita   (y despliega)

   Se carga después de `style.css`, así que con la misma especificidad gana esta capa. Los modos
   `:root[data-contraste=…]` tienen más especificidad y siguen mandando sobre estas variables.

   No toca los modales ni la tipografía. Criterio: sin grises de baja visibilidad; la jerarquía se
   marca con peso y tamaño, no aclarando el texto.
   ─────────────────────────────────────────────────────────────────────────────────────────────── */

/* ── 1. TOKENS ─────────────────────────────────────────────────────────────────────────────────
   Un solo verde de marca (#0d3b37) a distintas opacidades, bordes que se ven, y el gris de texto
   retirado: `--color-text-muted` pasa a valer lo mismo que `--color-text`. */
:root {
  /* Bordes de tarjetas, apartados y separadores. */
  --color-border: #aebbc5;
  /* Sin texto gris: lo que se distinguía por color se distingue por peso. */
  --color-text-muted: #1c2833;
  /* `--color-borde-campo` no se redefine aquí: esta capa se carga después de `style.css` y pisaría
     el valor único que vive allí junto a la regla base de los campos. */
}

/* ── 2. LAS TRES BARRAS, EL MISMO COLOR ────────────────────────────────────────────────────────
   Lateral, superior e inferior forman un marco con el Color Base de `style.css`. Aquí no se fija
   ningún color: el `!important` solo hace falta para ganar al estilo en línea que
   `barra-secundaria.js` escribe sobre la barra inferior, e impone el token, no un valor. */
.topbar { background: var(--topbar-fondo, var(--color-base, #0d3b37)); }
.barra-secundaria { --barra-secundaria-fondo: var(--color-base, #0d3b37) !important; }

/* Texto de la barra superior con el token de contraste (`color-base.js` elige el que más contraste
   da con el Color Base) y nombre de la persona en 600.
   Se excluyen el nombre del hospital, que tiene color propio, y los elementos del desplegable del
   usuario, que se pintan sobre fondo blanco propio. Cualquier desplegable nuevo dentro de la barra
   necesita la misma exclusión. */
.topbar,
.topbar a:not(.centro-trabajo-selector):not(.topbar-user-dropdown-item),
.topbar .muted,
.topbar .hint { color: var(--color-base-texto, #fff); }
.topbar .centro-trabajo-fijo,
.topbar .centro-trabajo-selector,
#centro-trabajo-selector .centro-trabajo-fijo,
#centro-trabajo-selector .centro-trabajo-selector { color: var(--color-nombre-hospital); }
.topbar .usuario-nombre,
.topbar .nombre-usuario { font-weight: 600; }

/* El buscador de la barra superior, sobre blanco sólido y con borde blanco: sobre el verde oscuro,
   un campo translúcido se confunde con la barra. */
.topbar input[type='search'],
.topbar .buscador-global-input {
  background: #fff;
  border-color: #fff;
  color: var(--color-text);
}

/* ── 3. LA BARRA LATERAL, SIN GRISES ───────────────────────────────────────────────────────────
   Enlaces y títulos en el color de texto de la barra: lo que marca el activo es el fondo.
   Se excluyen los títulos del menú (`.nav-group-label`), que tienen relleno y contorno
   configurables en Estética; esta regla les quitaba el relleno y dejaba el contorno invisible. */
.sidebar .nav-link,
.sidebar .nav-link-texto,
.sidebar .grupo-menu-titulo,
.sidebar summary:not(.nav-group-label) { color: var(--color-base-texto, #fff); }

/* ── 4. BORDES DE CONTROL ──────────────────────────────────────────────────────────────────────
   Botones secundarios y de icono, que tenían su propio borde claro. Los campos usan
   `--color-borde-campo` de `style.css`. */
.btn-secondary,
.btn-icon,
.btn-icon-suelto { border: 1px solid #7d8d9b; }

/* ── 5. BOTÓN TERCIARIO ────────────────────────────────────────────────────────────────────────
   `.btn-link` es el enlace-botón de esta aplicación. Con borde para que no se pierda en el texto. */
.btn-link {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  padding: 4px 10px;
  text-decoration: none;
}
.btn-link:hover { background: rgba(14, 113, 106, 0.08); }

/* ── 6. ETIQUETAS DE ESTADO ────────────────────────────────────────────────────────────────────
   Sin borde, más grandes, en negrita y con el texto más oscuro. Las cinco dan 7:1 o más. */
.badge {
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  border: none;
}
.badge-exito, .badge-ok, .badge-cobrada { background: #dcfce7; color: #0a5c2e; }
.badge-aviso, .badge-pendiente { background: #fef3c7; color: #6b4000; }
.badge-error, .badge-vencida { background: #fee2e2; color: #8b0000; }
.badge-info, .badge-programada { background: #dbeafe; color: #003d7a; }
.badge-neutro, .badge-borrador { background: #eef2f3; color: #1c2833; }

/* ── 7. TABLAS ─────────────────────────────────────────────────────────────────────────────────
   La fila de títulos, recuadrada en verde y en versales. */
table thead th {
  /* El fondo no sigue al Color Base: `rgba()` necesita los tres números sueltos y de un token
     hexadecimal no se saca una opacidad sin `color-mix()`. El marco y la letra sí lo siguen. */
  background: rgba(13, 59, 55, 0.15);
  color: var(--color-base, #0d3b37);
  font-size: 0.9333rem;
  font-weight: 700;
  /* Engrosa el trazo hasta un peso aparente de ~850: la fuente del sistema solo llega a 700. */
  -webkit-text-stroke: 0.6px var(--color-base, #0d3b37);
  /* Versales por CSS y no en el texto: lectores de pantalla y Ctrl+F siguen viendo el texto original. */
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 11px 16px;
  border-top: 3px solid var(--color-base, #0d3b37);
  border-bottom: 3px solid var(--color-base, #0d3b37);
}
table thead th:first-child { border-left: 3px solid var(--color-base, #0d3b37); }
table thead th:last-child { border-right: 3px solid var(--color-base, #0d3b37); }

/* Filas alternas. La cabecera (15 %) va más oscura que la fila par (10 %). */
table tbody tr:nth-child(even) { background: rgba(13, 59, 55, 0.1); font-weight: 600; }
table tbody tr:nth-child(odd) { background: #fff; }

/* Una cabecera fija flota sobre las filas, así que un fondo translúcido dejaría ver el texto a
   través. El degradado plano sobre blanco da el mismo color pero opaco. */
.tabla-cabecera-fija thead th,
thead.tabla-cabecera-fija th {
  background: linear-gradient(rgba(13, 59, 55, 0.15), rgba(13, 59, 55, 0.15)), #fff;
}

/* En alto contraste, la cabecera vuelve a los colores de ese modo: el verde sobre negro no se lee. */
:root[data-contraste='alto'] table thead th {
  background: var(--color-surface);
  color: var(--color-text);
  -webkit-text-stroke: 0;
  border-color: var(--color-border);
}
:root[data-contraste='alto'] table tbody tr:nth-child(even),
:root[data-contraste='alto'] table tbody tr:nth-child(odd) { background: var(--color-surface); }

/* ── 8. ETIQUETAS DE CAMPO Y TÍTULOS ───────────────────────────────────────────────────────────
   Jerarquía por peso en lugar de gris. Las etiquetas de campo ya van en 700 desde `style.css`;
   aquí solo se asegura el peso de los títulos de tarjeta. */
.card > h3,
.card-header h3 { font-weight: 700; }