/*
 * Directiva de diseño visual de ResidApp — ver docs/bocetos-pantallas/guia-diseno-sistema-visual.md (vinculante).
 * Los tokens --color-* son los de la guía y se asignan a las variables de Bootstrap 5.3, de modo que el modo oscuro
 * (data-bs-theme="dark", lo pone wwwroot/js/tema.js) solo tiene que redefinir los tokens.
 */
:root,
[data-bs-theme=light] {
  /* Colores principales (marca, rigor técnico y seguridad): los del logo */
  --color-primary-brand: #0D6EFD;
  --color-primary-dark: #0A58CA;

  /* Colores secundarios (toque clínico asistencial) */
  --color-secondary-teal: #198754;
  --color-secondary-light: #20C997;

  /* Neutros de superficie */
  --color-bg-main: #F5F7FA;
  --color-bg-card: #FFFFFF;
  --color-text-dark: #1A2433;
  --color-text-muted: #5B6676;
  --color-border: #E3E8EF;
  --color-border-control: #7C8796;
  --color-link: #0A58CA;
  --color-link-rgb: 10, 88, 202;
  --color-link-hover-rgb: 8, 66, 152;
  --color-navbar-bg: #0A58CA;

  /* Sistema semafórico de alertas clínicas */
  --color-alert-danger: #DC3545;
  --color-alert-warning: #FFC107;
  --color-alert-info: #0DCAF0;

  /* Bootstrap: la superficie es el fondo de los componentes (tarjetas, campos, desplegables); el fondo de página va
     en body. */
  --bs-body-bg: var(--color-bg-card);
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-body-color: var(--color-text-dark);
  --bs-body-color-rgb: 26, 36, 51;
  --bs-secondary-color: var(--color-text-muted);
  --bs-border-color: var(--color-border);
  --bs-link-color: var(--color-link);
  --bs-link-color-rgb: var(--color-link-rgb);
  --bs-link-hover-color-rgb: var(--color-link-hover-rgb);
  --bs-border-radius: 0.5rem;
  --bs-border-radius-lg: 0.5rem;
}

[data-bs-theme=dark] {
  --color-bg-main: #0F141B;
  --color-bg-card: #171D26;
  --color-text-dark: #E3E8EF;
  --color-text-muted: #A3ADBA;
  --color-border: #2A3340;
  --color-border-control: #6B7685;
  --color-link: #6EA8FE;
  --color-link-rgb: 110, 168, 254;
  --color-link-hover-rgb: 158, 197, 254;
  --color-navbar-bg: #131B26;

  --bs-body-bg: var(--color-bg-card);
  --bs-body-bg-rgb: 23, 29, 38;
  --bs-body-color: var(--color-text-dark);
  --bs-body-color-rgb: 227, 232, 239;
  --bs-secondary-color: var(--color-text-muted);
  --bs-border-color: var(--color-border);
  --bs-link-color: var(--color-link);
  --bs-link-color-rgb: var(--color-link-rgb);
  --bs-link-hover-color-rgb: var(--color-link-hover-rgb);
}

body {
  background-color: var(--color-bg-main);
}

/* Pie al final de la pantalla en páginas cortas. Solo en pantalla: la impresión tiene su propio maquetado (site.css). */
@media screen {
  body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  body > footer {
    margin-top: auto;
  }
}

/* Enlaces del pie subrayados solo al pasar el ratón. Va aquí y no en _Layout.cshtml.css porque los enlaces con
   tag helper (asp-action) no reciben el atributo del CSS aislado. */
body > footer a {
  text-decoration: none;
}

body > footer a:hover,
body > footer a:focus-visible {
  text-decoration: underline;
}

/* Jerarquía: títulos en peso 600. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
}

/* Cabecera: fondo azul oscuro corporativo (guía, sección 2.B); en modo oscuro, una superficie oscura. */
.navbar-residapp {
  background-color: var(--color-navbar-bg);
}

.navbar-residapp .navbar-brand,
.navbar-residapp .nav-link {
  color: #FFFFFF;
}

.navbar-residapp .nav-link:hover,
.navbar-residapp .nav-link:focus {
  color: #FFFFFF;
  opacity: 0.85;
}

.navbar-residapp .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.5);
}

/* Nombre del centro junto al perfil en el menú de usuario: se recorta para no desbordar la cabecera. */
.navbar-residapp .centro-activo {
  max-width: 16rem;
  vertical-align: bottom;
}

/* Tarjetas: radio de 12px y borde fino, sin sombra. */
.card {
  --bs-card-border-radius: 0.75rem;
  --bs-card-inner-border-radius: calc(0.75rem - 1px);
}

/* Tarjetas pulsables: enteras (a.card) o con un enlace estirado dentro (.stretched-link). */
a.card,
.card:has(.stretched-link) {
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

a.card:hover,
.card:has(.stretched-link):hover {
  border-color: var(--color-primary-brand);
  box-shadow: 0 0.25rem 0.75rem rgba(16, 24, 40, 0.12);
}

a.card:focus-visible,
.card:has(.stretched-link:focus-visible) {
  outline: 3px solid var(--color-link);
  outline-offset: 2px;
}

.card .stretched-link:focus-visible {
  outline: none;
}

/* Franja lateral de estado (guía, sección 2.B): en Bootstrap, border-4 engorda los cuatro lados y border-<color> los
   colorea todos, lo que dibuja un marco. Se devuelven los otros tres lados al borde neutro. */
.border-start.border-4 {
  border-width: var(--bs-border-width) !important;
  border-left-width: 4px !important;
  border-top-color: var(--bs-border-color) !important;
  border-right-color: var(--bs-border-color) !important;
  border-bottom-color: var(--bs-border-color) !important;
}

/* Etiquetas de estado (guía, sección 2.D): fondo suave, texto oscuro del mismo tono y un punto de color delante. Los
   tonos -subtle y -text-emphasis de Bootstrap ya tienen su versión oscura. */
.badge[class*="text-bg-"] {
  --bs-badge-font-size: 0.8125rem;
  --bs-badge-font-weight: 600;
  --bs-badge-border-radius: 999px;
  border: 1px solid transparent;
}

.badge[class*="text-bg-"]::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.4em;
  border-radius: 50%;
  vertical-align: 0.1em;
  background-color: var(--punto-estado);
}

.badge.text-bg-primary {
  --punto-estado: var(--bs-primary);
  color: var(--bs-primary-text-emphasis) !important;
  background-color: var(--bs-primary-bg-subtle) !important;
  border-color: var(--bs-primary-border-subtle);
}

.badge.text-bg-secondary,
.badge.text-bg-light,
.badge.text-bg-dark {
  --punto-estado: var(--bs-secondary);
  color: var(--bs-secondary-text-emphasis) !important;
  background-color: var(--bs-secondary-bg-subtle) !important;
  border-color: var(--bs-secondary-border-subtle);
}

.badge.text-bg-success {
  --punto-estado: var(--bs-success);
  color: var(--bs-success-text-emphasis) !important;
  background-color: var(--bs-success-bg-subtle) !important;
  border-color: var(--bs-success-border-subtle);
}

.badge.text-bg-danger {
  --punto-estado: var(--bs-danger);
  color: var(--bs-danger-text-emphasis) !important;
  background-color: var(--bs-danger-bg-subtle) !important;
  border-color: var(--bs-danger-border-subtle);
}

.badge.text-bg-warning {
  --punto-estado: var(--bs-warning);
  color: var(--bs-warning-text-emphasis) !important;
  background-color: var(--bs-warning-bg-subtle) !important;
  border-color: var(--bs-warning-border-subtle);
}

.badge.text-bg-info {
  --punto-estado: var(--bs-info);
  color: var(--bs-info-text-emphasis) !important;
  background-color: var(--bs-info-bg-subtle) !important;
  border-color: var(--bs-info-border-subtle);
}

/* Accesibilidad WCAG 2.2 AA: texto en negro sobre fondo de alerta amarillo (guía, sección 3.1). */
:root:not([data-bs-theme=dark]) .alert-warning {
  color: #000000;
}

/* Modo oscuro: los textos y los botones de contorno de color de serie se quedan en 3,7:1 sobre la superficie oscura;
   pasan a los tonos -text-emphasis (guía, «Modo oscuro»). */
[data-bs-theme=dark] .text-danger {
  color: var(--bs-danger-text-emphasis) !important;
}

[data-bs-theme=dark] .text-success {
  color: var(--bs-success-text-emphasis) !important;
}

[data-bs-theme=dark] .btn-outline-primary {
  --bs-btn-color: var(--bs-primary-text-emphasis);
  --bs-btn-border-color: var(--bs-primary-text-emphasis);
}

[data-bs-theme=dark] .btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary-text-emphasis);
  --bs-btn-border-color: var(--bs-secondary-text-emphasis);
}

[data-bs-theme=dark] .btn-outline-success {
  --bs-btn-color: var(--bs-success-text-emphasis);
  --bs-btn-border-color: var(--bs-success-text-emphasis);
}

[data-bs-theme=dark] .btn-outline-danger {
  --bs-btn-color: var(--bs-danger-text-emphasis);
  --bs-btn-border-color: var(--bs-danger-text-emphasis);
}

/* Contraste de bordes de controles (guía, sección 3.4, WCAG 1.4.11). */
.form-control,
.form-select,
.form-check-input {
  border-color: var(--color-border-control);
}

/* Accesibilidad WCAG 2.2 AA: altura táctil mínima de 48px (guía, sección 3.2). Los controles -lg ya miden 48px; con
   pantalla táctil, los de tamaño normal y pequeño crecen por relleno (sin cambiar su display) y casillas y radios se
   agrandan con una fila de 48px. */
.form-control-lg,
.form-select-lg,
.btn-lg {
  min-height: 48px;
}

@media (any-pointer: coarse) {
  .btn:not(.btn-lg):not(.btn-sm) {
    --bs-btn-padding-y: 0.6875rem;
  }

  .btn-sm {
    --bs-btn-padding-y: 0.78125rem;
  }

  .form-control:not(.form-control-lg):not(textarea),
  .form-select:not(.form-select-lg) {
    padding-top: 0.6875rem;
    padding-bottom: 0.6875rem;
  }

  .form-check {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3rem;
    padding-left: 0;
    margin-bottom: 0;
  }

  .form-check-inline {
    display: inline-flex;
  }

  .form-check .form-check-input {
    float: none;
    width: 1.375rem;
    height: 1.375rem;
    margin: 0;
  }

  .navbar-residapp .nav-link,
  .dropdown-item,
  details > summary {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

/* Contenido bajo demanda (<details>, p. ej. «Añadir nota»): el resumen se presenta como un enlace. */
details > summary {
  color: var(--bs-link-color);
  cursor: pointer;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

details[open] > summary {
  margin-bottom: 0.5rem;
}

/* Cifra grande de los paneles de inicio (guía, sección 2.B). */
.cifra {
  display: block;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* Opciones de selección rápida como botones-chip (input.btn-check + label.btn.chip, guía, sección 3.2). La marca ✓
   indica la selección sin depender solo del color. */
.chip {
  --bs-btn-border-radius: 999px;
  --bs-btn-font-weight: 500;
}

.btn-check:checked + .chip::before {
  content: "✓ ";
}

/* La casilla oculta de cada chip ocupa el mismo hueco que su botón. Sin esto queda al principio del grupo, y al
   recibir el foco el navegador desplaza la página hasta allí y no hasta el chip, que puede quedar bajo la barra fija. */
.chip-par {
  position: relative;
  display: inline-flex;
}

.chip-par > .btn-check {
  inset: 0;
  width: 100%;
  height: 100%;
}

/* En un grupo d-grid el botón ocupa todo el ancho, como sin el envoltorio. */
.chip-par > .btn {
  flex-grow: 1;
}

/* Barra fina bajo una cifra «n de m» (Indicadores), alineada a la derecha como la cifra. */
.barra-proporcion {
  height: 0.375rem;
  width: 100%;
  min-width: 5rem;
  max-width: 7rem;
  margin-top: 0.25rem;
  margin-left: auto;
}

/* Listado o bandeja vacía: un recuadro que se ve como respuesta, no como una línea gris suelta que pasa por texto de
   relleno. */
.estado-vacio {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--bs-secondary-color);
  background-color: var(--bs-body-bg);
  border: 1px dashed var(--color-border-control);
  border-radius: var(--bs-border-radius-lg);
}

/* Organigrama (ADM-07): cargos anidados; cada nivel cuelga de una línea a la izquierda de su superior. */
.organigrama-raiz,
.organigrama-lista {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.organigrama-lista {
  margin-left: 0.5rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--color-border-control);
}

/* Índice del Manual: en escritorio, columna lateral fija con su propio desplazamiento. */
@media (min-width: 992px) {
  .indice-manual {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }

  .indice-manual .list-group-item {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: 0.875rem;
  }
}

/* Barra de acción fija abajo, para que la acción principal de un formulario largo esté siempre a mano. */
.barra-accion {
  position: sticky;
  bottom: 0;
  z-index: 1020;
  margin-top: 1rem;
  padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom));
  background-color: var(--color-bg-main);
  border-top: var(--bs-border-width) solid var(--bs-border-color);
}

/* Que la barra no tape el campo que recibe el foco al tabular o al tocarlo (WCAG 2.4.11): el navegador lo desplaza
   por encima de ella. */
html:has(.barra-accion) {
  scroll-padding-bottom: 7rem;
}

/* «Mi cuenta»: cada ficha lleva un tono propio en la banda del título para distinguirlas de un vistazo. Son tonos sin significado clínico:
   no se usan rojo, ámbar ni verde de estado (guía, sección 3.D) ni la franja izquierda, que en la app indica estado. Texto sobre fondo ≥ 4,5:1
   en claro y oscuro (WCAG 2.2 AA); el borde de la banda es un adorno. */
.card[class*="acento-"] > .card-header {
  color: var(--acento-texto);
  background-color: var(--acento-fondo);
  border-bottom: 2px solid var(--acento-borde);
}

.acento-azul {
  --acento-fondo: #e2ebf8;
  --acento-texto: #0f366b;
  --acento-borde: #759ed7;
}

.acento-verdeazulado {
  --acento-fondo: #e2f8f4;
  --acento-texto: #0f6b59;
  --acento-borde: #75d7c3;
}

.acento-violeta {
  --acento-fondo: #ece2f8;
  --acento-texto: #3a0f6b;
  --acento-borde: #a275d7;
}

.acento-naranja {
  --acento-fondo: #f8ece2;
  --acento-texto: #6b370f;
  --acento-borde: #d79f75;
}

.acento-rosa {
  --acento-fondo: #f8e2ee;
  --acento-texto: #6b0f40;
  --acento-borde: #d775a9;
}

.acento-cian {
  --acento-fondo: #e2f4f8;
  --acento-texto: #0f596b;
  --acento-borde: #75c3d7;
}

.acento-gris {
  --acento-fondo: #ebedef;
  --acento-texto: #2d3643;
  --acento-borde: #9ba4b0;
}

[data-bs-theme=dark] .acento-azul {
  --acento-fondo: #21324a;
  --acento-texto: #b4d0f9;
  --acento-borde: #3a5a88;
}

[data-bs-theme=dark] .acento-verdeazulado {
  --acento-fondo: #214a42;
  --acento-texto: #b4f9eb;
  --acento-borde: #3a8878;
}

[data-bs-theme=dark] .acento-violeta {
  --acento-fondo: #34214a;
  --acento-texto: #d4b4f9;
  --acento-borde: #5e3a88;
}

[data-bs-theme=dark] .acento-naranja {
  --acento-fondo: #4a3321;
  --acento-texto: #f9d2b4;
  --acento-borde: #885c3a;
}

[data-bs-theme=dark] .acento-rosa {
  --acento-fondo: #4a2137;
  --acento-texto: #f9b4d9;
  --acento-borde: #883a63;
}

[data-bs-theme=dark] .acento-cian {
  --acento-fondo: #21424a;
  --acento-texto: #b4ebf9;
  --acento-borde: #3a7888;
}

[data-bs-theme=dark] .acento-gris {
  --acento-fondo: #30353b;
  --acento-texto: #ced5de;
  --acento-borde: #575f6b;
}