/* ─────────────────────────────────────────────────────────────────────────────
   MedicalSys · capa de accesibilidad (lote 1.9b)
   Nace del informe `INFORME-1.9-INTERFAZ.md` (medición VIS-01 / ACC-01).
   Cambia SÓLO dos cosas: color y tamaño de las áreas de toque.
   No toca maquetación, ni funciones, ni datos. Cada regla cita su medida.
   Se carga después de Bootstrap y después del <style> de la plantilla, así que gana.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
    /* El azul de marca daba 2.77:1 con texto blanco y 2.77:1 como texto sobre blanco
       (mínimo WCAG 4.5). Estos tres pasan de 4.5 en ambos sentidos. */
    --primary: #0369a1;        /* 5.93 sobre blanco · blanco encima 5.93 */
    --primary-dark: #075985;   /* 7.56 */
    --primary-light: #0c7bb3;  /* 4.67 */
    --accesible-ambar: #8a6100;   /* 5.54 (antes #ffc107 = 1.63) */
    --accesible-cian: #0a6e82;    /* 5.89 (antes #0dcaf0 = 1.96) */
    --accesible-naranja: #c2410c; /* 5.18 (antes #fd7e14 = 2.57) */
    --accesible-gris: #5b6b7f;    /* 5.45 (antes #94a3b8 = 2.56) */
}

/* ── 1 · Azul principal y sus variantes ─────────────────────────────────── */

.text-primary { color: #0369a1 !important; }

.btn-primary {
    --bs-btn-bg: #0369a1;
    --bs-btn-border-color: #0369a1;
    --bs-btn-hover-bg: #075985;
    --bs-btn-hover-border-color: #075985;
    --bs-btn-active-bg: #075985;
    --bs-btn-active-border-color: #075985;
    --bs-btn-disabled-bg: #0369a1;
    --bs-btn-disabled-border-color: #0369a1;
}

.btn-outline-primary {
    --bs-btn-color: #0369a1;
    --bs-btn-border-color: #0369a1;
    --bs-btn-hover-bg: #0369a1;
    --bs-btn-hover-border-color: #0369a1;
    --bs-btn-active-bg: #075985;
    --bs-btn-active-border-color: #075985;
}

.page-link { color: #0369a1; }

/* Enlaces sueltos. Se excluyen los que ya traen su propio color (menú, botones,
   pestañas, listas desplegables) para no pisar nada. */
a:not(.nav-link):not(.btn):not(.page-link):not(.dropdown-item):not(.list-group-item) {
    color: #0369a1;
}

.alert-link { color: #0a58ca !important; }

/* Botones de contorno: su texto es del color del borde y quedaba por debajo del mínimo */
.btn-outline-secondary { --bs-btn-color: #5c636a; --bs-btn-border-color: #5c636a;
    --bs-btn-hover-bg: #5c636a; --bs-btn-hover-border-color: #5c636a; }
.btn-outline-info { --bs-btn-color: #0a6e82; --bs-btn-border-color: #0a6e82;
    --bs-btn-hover-bg: #0a6e82; --bs-btn-hover-border-color: #0a6e82; }
.btn-outline-warning { --bs-btn-color: #8a6100; --bs-btn-border-color: #8a6100;
    --bs-btn-hover-bg: #8a6100; --bs-btn-hover-border-color: #8a6100; --bs-btn-hover-color: #fff; }
.btn-outline-success { --bs-btn-color: #146c43; --bs-btn-border-color: #146c43;
    --bs-btn-hover-bg: #146c43; --bs-btn-hover-border-color: #146c43; }   /* antes #0d6efd = 3.68 sobre fondo verde claro */

/* ── 2 · Grises y avisos ────────────────────────────────────────────────── */

.text-muted { color: #5c636a !important; }   /* 4.69 → 6.09 sobre blanco, 5.71 sobre #f0f9ff */

.text-warning { color: #8a6100 !important; }
.bg-warning { background-color: #ffc107 !important; color: #3d2f00 !important; }  /* texto oscuro sobre ámbar = 8.03 */

.text-info { color: #0a6e82 !important; }
.bg-info { background-color: #0a6e82 !important; color: #fff !important; }

.text-orange, .text-orange-500, .text-naranja { color: #c2410c !important; }

/* El «título pequeño» de la barra superior (daba 2.56) */
.topbar .page-title .sub { color: #5b6b7f !important; }

/* ── 3 · Menú lateral (fondo con degradado) ──────────────────────────────── */
/* Medido a mano: el blanco al 30 % daba 2.66 y al 65 % 4.49 sobre el tramo más
   claro del degradado. Al 85 % queda en 7.2. */
.sidebar .nav-section { color: rgba(255, 255, 255, .85) !important; }
.sidebar .nav-link { color: rgba(255, 255, 255, .9) !important; }
.sidebar-footer { color: rgba(255, 255, 255, .88) !important; }
.sidebar-brand small { color: rgba(255, 255, 255, .85) !important; }
.sidebar-brand h3 span { color: #8ed4ff !important; }   /* antes #38bdf8 */
.sidebar-footer a { color: rgba(255, 255, 255, .9) !important; }

/* ── 4 · Foco visible (quien navega con teclado tiene que ver dónde está) ── */
:focus-visible { outline: 3px solid #0369a1; outline-offset: 2px; }
/* v0-1 · un solo anillo de foco en toda la app: enlaces, botones, campos y el menú */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--focus-ring, #0369a1) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}
.sidebar :where(a, button):focus-visible { outline-color: #8ed4ff !important; }
.form-control:focus, .form-select:focus {
    border-color: #0369a1;
    box-shadow: 0 0 0 .2rem rgba(3, 105, 161, .25);
}
.sidebar :focus-visible, .sidebar a:focus-visible { outline-color: #8ed4ff; }

/* ── 5 · Áreas de toque ─────────────────────────────────────────────────── */
/* WCAG 2.5.8 pide 24×24 px como mínimo (fuera de texto corrido). */
.btn-sm { min-height: 24px; min-width: 24px; }
.sidebar-toggle { min-width: 44px; min-height: 44px; }

/* ── 6 · Tablas y barras de botones que empujaban la página en móvil ────── */
/* administración 151 px, cobros 46 px, agenda 12 px de scroll lateral. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.barra-botones { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 576px) {
    .table-scroll table { font-size: .82rem; }
    .table-scroll th, .table-scroll td { white-space: nowrap; }
}

/* lote 2.6 · una cita a la que el paciente no llegó se ve apagada (no se confunde con una cancelada) */
.cita-block.no_asistio { opacity: .55; }
.cita-block.no_asistio .badge { filter: grayscale(.4); }

/* v0-1 · el anillo del menú, igual para enlaces y botones */
.sidebar a:focus-visible, .sidebar button:focus-visible { outline-color: #8ed4ff !important; }
.sidebar a:focus-visible, .sidebar button:focus-visible { transition: none !important; }

/* ── v0-2 · pacientes en móvil: una tarjeta por renglón (la tabla no cabe en 390) ── */
.lista-pacientes { display: flex; flex-direction: column; gap: .5rem; padding: .5rem; }
.paciente-card {
    border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; background: #fff;
}
.paciente-card-compartido { border-left: 4px solid #0ea5e9; background: #f8fdff; }
.paciente-card .btn-group .btn { min-height: 36px; }