/* ============================================================
   Portal ESE Hospital San José de La Celia - plantilla común
   Res. MinTIC 1519 de 2020 (Anexo 1), Kit UI GOV.CO y WCAG 2.1 AA:
   tipografía Montserrat (títulos) y Work Sans (texto), contraste >= 4.5:1
   en modo claro y oscuro, foco visible y texto ampliable hasta 160 %.
   ============================================================ */

:root, [data-tema="claro"] {
  --azul: #003366;           /* 12.6:1 sobre blanco */
  --azul-medio: #0b5ea8;     /* 6.3:1 */
  --govco: #3366cc;
  --texto: #1f2933;          /* 15:1 */
  --texto-suave: #4b5563;    /* 7.5:1 */
  --fondo: #f4f7fb;
  --superficie: #ffffff;
  --superficie-2: #eef4fb;
  --borde: #d5dde8;
  --borde-campo: #6b7785;    /* 4.6:1: bordes de campos (WCAG 1.4.11) */
  --enlace: #0b5ea8;
  --foco: #ffbf47;
  --sombra: 0 3px 16px rgba(0, 51, 102, .07);
}
[data-tema="oscuro"] {
  --azul: #8cc4ff;           /* 9.4:1 sobre #121a24 */
  --azul-medio: #a9d3ff;
  --texto: #f1f5f9;          /* 15.8:1 */
  --texto-suave: #c3cfdb;    /* 10.4:1 */
  --fondo: #0b1119;
  --superficie: #121a24;
  --superficie-2: #1b2635;
  --borde: #33445a;
  --borde-campo: #8a9bb0;
  --enlace: #9fd0ff;         /* 10:1 */
  --foco: #ffd166;
  --sombra: 0 3px 16px rgba(0, 0, 0, .5);
}

html { font-size: 100%; }
body.portal {
  background: var(--fondo); color: var(--texto); line-height: 1.6;
  font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.portal h1, .portal h2, .portal h3, .portal h4, .portal .marca strong, .portal .nav-link, .portal .btn {
  font-family: "Montserrat", "Work Sans", system-ui, sans-serif;
}
body.portal section { padding: 0; } /* anula "section { padding: 9rem 0 }" de styles.css */
/* Especificidad (0,1,1), igual a ".pie a" y ".accesibilidad a", que van después y conservan sus colores;
   :where() excluye los botones sin sumar especificidad */
.portal a:where(:not(.btn):not(.dropdown-item):not(.nav-link)) { color: var(--enlace); }
.portal a:where(:not(.btn):not(.dropdown-item):not(.nav-link)):hover { color: var(--azul); }
.portal .btn-outline-secondary { color: var(--texto-suave); border-color: var(--borde-campo); }
.portal .btn-outline-secondary:hover { color: var(--texto); background: var(--superficie-2); border-color: var(--texto-suave); }

/* Foco visible en todo elemento interactivo (WCAG 2.4.7) */
.portal a:focus-visible, .portal button:focus-visible, .portal .btn:focus-visible,
.portal .form-control:focus, .portal .form-select:focus, .portal .form-check-input:focus,
.portal summary:focus-visible, .portal .accordion-button:focus {
  outline: 3px solid var(--foco) !important; outline-offset: 2px; box-shadow: none;
}
.saltar-contenido { position: absolute; left: .5rem; top: .5rem; z-index: 2000; }
@media (prefers-reduced-motion: reduce) { .portal * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---------- Barra GOV.CO (obligatoria, Kit UI: logo 24 x 136 px) ---------- */
.barra-govco { background: var(--govco); }
.barra-govco .container { display: flex; align-items: center; justify-content: space-between; min-height: 48px; gap: .5rem; flex-wrap: wrap; padding-top: .4rem; padding-bottom: .4rem; }
.barra-govco img { height: 24px; width: auto; display: block; }

/* ---------- Herramientas de accesibilidad ---------- */
.accesibilidad { display: flex; flex-wrap: wrap; gap: .25rem; }
.accesibilidad button, .accesibilidad a {
  display: inline-flex; align-items: center; gap: .3rem; background: #1a3a7a; color: #fff;   /* 10.9:1 */
  border: 1px solid #fff; border-radius: 6px; padding: .2rem .55rem; font-size: .82rem;
  line-height: 1.4; text-decoration: none; cursor: pointer; font-family: "Work Sans", system-ui, sans-serif;
}
.accesibilidad button:hover, .accesibilidad a:hover { background: #0f2552; color: #fff; }
.accesibilidad button[aria-pressed="true"] { background: #fff; color: #1d3f8a; }
@media (max-width: 575.98px) { .accesibilidad .etiqueta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* ---------- Encabezado institucional ---------- */
.encabezado { background: var(--superficie); border-bottom: 1px solid var(--borde); }
.encabezado .marca { display: flex; align-items: center; gap: .65rem; color: var(--azul); text-decoration: none; }
.encabezado .marca img { width: 60px; height: 60px; object-fit: contain; background: #fff; border-radius: 8px; }
.encabezado .marca strong { display: block; font-size: 1rem; line-height: 1.2; }
.encabezado .marca small { display: block; color: var(--texto-suave); font-size: .8rem; }
.encabezado .navbar { padding: .5rem 0; }
/* Con el texto ampliado (A+) el menú pasa a varias líneas en lugar de desbordar la pantalla (WCAG 1.4.10) */
.encabezado .marca { min-width: 0; flex: 0 1 22rem; }
.encabezado .navbar-collapse { min-width: 0; }
.encabezado .navbar-nav { flex-wrap: wrap; justify-content: flex-end; row-gap: .25rem; }
.encabezado .nav-link { color: var(--texto); font-weight: 600; font-size: .92rem; padding: .5rem .7rem !important; border-radius: 6px; }
.encabezado .nav-link:hover, .encabezado .nav-link.active { color: var(--azul); background: var(--superficie-2); }
.encabezado .nav-link.active { box-shadow: inset 0 -3px 0 var(--azul); }
.encabezado .dropdown-menu { background: var(--superficie); border-color: var(--borde); }
.encabezado .dropdown-item { padding: .5rem 1rem; color: var(--texto); }
.encabezado .dropdown-item:hover { background: var(--superficie-2); color: var(--azul); }
.encabezado .dropdown-item.active, .encabezado .dropdown-item:active { background: var(--azul); color: var(--superficie); }
.encabezado .btn-pqrsd { background: #003366; color: #fff; font-weight: 700; border: 2px solid #003366; }
.encabezado .btn-pqrsd:hover { background: #00264d; color: #fff; }
.buscador-cabecera { min-width: 11rem; max-width: 16rem; }
[data-tema="oscuro"] .encabezado .btn-pqrsd { background: #8cc4ff; border-color: #8cc4ff; color: #0b1119; }
[data-tema="oscuro"] .navbar-toggler-icon { filter: invert(1); }

/* ---------- Encabezado de página ---------- */
.page-hero {
  position: relative; background-image: url('../assets/img/header-bg.jpg'); background-size: cover;
  background-position: center top; overflow: hidden;
}
.page-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(0,51,102,.93) 0%, rgba(0,70,130,.9) 100%); }
[data-tema="oscuro"] .page-hero::before { background: rgba(5,12,22,.92); }
.page-hero .hero-content { position: relative; z-index: 1; color: #fff; padding: 1.75rem 0 1.5rem; }
.page-hero h1 { font-weight: 800; font-size: clamp(1.4rem, 3.2vw, 2rem); margin-bottom: .35rem; }
.page-hero p { margin: 0; max-width: 60rem; }
.page-hero .breadcrumb { margin-bottom: .6rem; font-size: .9rem; }
.page-hero .breadcrumb a { color: #fff; }
.page-hero .breadcrumb-item.active { color: #e2ecf7; }
.page-hero .breadcrumb-item + .breadcrumb-item::before { color: #fff; }

.contenido { padding-top: 2rem; padding-bottom: 3rem; }
.contenido.estrecho { max-width: 960px; }

/* Bloques de contenido */
.bloque { background: var(--superficie); border-radius: 14px; box-shadow: var(--sombra); padding: 1.5rem; margin-bottom: 1.5rem; }
.bloque h2 { font-size: 1.15rem; font-weight: 700; color: var(--azul); margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }
.bloque h3 { font-size: 1rem; font-weight: 700; color: var(--azul); margin-top: 1.25rem; }
.paso {
  width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--azul); color: var(--superficie);
  font-size: .85rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.texto-suave { color: var(--texto-suave) !important; }
.portal .text-muted { color: var(--texto-suave) !important; }

/* Formularios: bordes con contraste suficiente (WCAG 1.4.11) */
.portal .form-control, .portal .form-select { border-color: var(--borde-campo); background-color: var(--superficie); color: var(--texto); }
.portal .form-check-input { border: 1.5px solid var(--borde-campo); background-color: var(--superficie); }
.portal .form-check-input:checked { background-color: var(--azul); border-color: var(--azul); }
.portal .form-text { color: var(--texto-suave); }
.campo-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.adjunto { border: 1px dashed var(--borde-campo); border-radius: 10px; padding: .85rem 1rem; background: var(--superficie-2); }
.aviso-privacidad { font-size: .9rem; background: var(--superficie-2); border-left: 4px solid var(--azul); border-radius: 6px; padding: .75rem 1rem; }
.portal .table { --bs-table-bg: var(--superficie); --bs-table-color: var(--texto); border-color: var(--borde); }
.portal .border, .portal .border-top, .portal .border-bottom { border-color: var(--borde) !important; }
.portal .bg-light, .portal .bg-white { background-color: var(--superficie-2) !important; color: var(--texto); }
.portal .btn-primary { background: #003366; border-color: #003366; }
[data-tema="oscuro"] .portal .btn-primary, [data-tema="oscuro"].portal .btn-primary { background: #8cc4ff; border-color: #8cc4ff; color: #0b1119; }
/* Botones con contorno y enlaces-botón: el azul de Bootstrap (#0d6efd) no llega a 4.5:1 sobre los fondos del sitio */
.portal .btn-outline-primary { --bs-btn-color: var(--enlace); --bs-btn-border-color: var(--enlace); --bs-btn-hover-bg: var(--enlace);
  --bs-btn-hover-border-color: var(--enlace); --bs-btn-hover-color: var(--superficie); --bs-btn-active-bg: var(--azul);
  --bs-btn-active-color: var(--superficie); }
.portal .btn-link { --bs-btn-color: var(--enlace); --bs-btn-hover-color: var(--azul); }
/* Textos de estado legibles en modo oscuro */
[data-tema="oscuro"] .portal .text-success { color: #6fdc9a !important; }
[data-tema="oscuro"] .portal .text-danger { color: #ff9b9b !important; }
[data-tema="oscuro"] .portal .text-warning { color: #ffd166 !important; }
[data-tema="oscuro"] .portal .text-primary { color: #8cc4ff !important; }
[data-tema="oscuro"] .portal .text-info { color: #7fdcf0 !important; }

.confirmacion { text-align: center; padding: 2.5rem 1.5rem; }
.confirmacion .radicado { font-size: 1.8rem; font-weight: 800; color: var(--azul); letter-spacing: .03em; }
.confirmacion .codigo { font-family: ui-monospace, Consolas, monospace; font-size: 1.3rem; font-weight: 700; letter-spacing: .15em; }

/* ---------- Menú de Transparencia ---------- */
.transp-seccion .accordion-button { font-weight: 700; color: var(--azul); background: var(--superficie); }
.transp-seccion .accordion-button:not(.collapsed) { background: var(--superficie-2); }
.transp-seccion .accordion-item, .transp-seccion .accordion-body { background: var(--superficie); color: var(--texto); border-color: var(--borde); }
.transp-num { display: inline-block; min-width: 2.6rem; font-variant-numeric: tabular-nums; }
.transp-item { border-top: 1px solid var(--borde); padding: .9rem 0; }
.transp-item:first-child { border-top: 0; padding-top: 0; }
.transp-item h3 { font-size: 1rem; margin: 0 0 .35rem; }
.transp-doc { display: flex; gap: .6rem; align-items: flex-start; padding: .35rem 0; }
.transp-doc .bi { font-size: 1.2rem; margin-top: .1rem; }
.estado-pill { font-size: .78rem; border-radius: 20px; padding: .1rem .55rem; border: 1px solid currentColor; }

/* ---------- Pie de página institucional (Anexo 1) ---------- */
.pie { background: #10243b; color: #e6edf5; font-size: .92rem; margin-top: 2rem; }
[data-tema="oscuro"] .pie { background: #05090f; border-top: 1px solid var(--borde); }
.pie a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.pie a:hover { color: #ffd88a; }
.pie h2 { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: .75rem; }
.pie .pie-entidad { display: flex; align-items: center; gap: .75rem; }
.pie .pie-entidad img { width: 56px; height: 56px; flex: none; object-fit: contain; background: #fff; border-radius: 8px; padding: 3px; }
.pie dl { margin: 0; }
.pie dt { font-weight: 600; color: #b9c7d8; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; margin-top: .5rem; }
.pie dd { margin: 0; }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: .35rem; }
.pie .redes a { display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255,255,255,.12); text-decoration: none; margin-right: .35rem; font-size: 1.15rem; }
.pie .redes a:hover { background: rgba(255,255,255,.25); }
.pie-inferior { background: #0b1a2b; font-size: .85rem; }
[data-tema="oscuro"] .pie-inferior { background: #000; }
.pie-inferior img { height: 32px; width: auto; }
.pie-inferior .contador-visitas { color: #c9d6e3; }
.pie-inferior .credito { display: inline-flex; align-items: center; gap: .6rem; }
.pie-inferior .credito img { width: 56px; height: 56px; object-fit: contain; image-rendering: auto; }

@media (max-width: 991.98px) {
  .encabezado .navbar-collapse { padding-top: .5rem; }
  .encabezado .nav-link { padding: .6rem .5rem !important; }
}
@media print {
  .barra-govco, .encabezado .navbar-collapse, .pie, .saltar-contenido, .accesibilidad { display: none !important; }
  .page-hero::before { background: none; }
  .page-hero .hero-content { color: #000; }
}