/* ═════════════════════════════════════════════════════════════════════════════════════════════
   Tema de las guías de la Iniciativa HL7 Costa Rica
   Estilo de la plantilla estándar de HL7 (como la guía base de HL7 Australia) con los colores de
   FHIR: menú y pie rojos, franja naranja como la llama del logo, enlaces azules. La guía de
   terminología usa además hl7cr-gris.css, que cambia los mismos colores a gris. Lo carga
   input/includes/fragment-css.html después de project.css del template, así que sus variables
   reemplazan las del template (que trae el menú morado).
   ═════════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  --cr-color: #c4161c;                   /* Rojo de FHIR, algo más oscuro que el del logo (#e8272e)
                                            para que el texto blanco del menú se lea bien */
  --cr-color-claro: #e8272e;             /* Rojo del logo de FHIR */
  --cr-color-oscuro: #9e1116;
  --cr-acento: #f7941d;                  /* Naranja de la llama del logo */
  --cr-marca-rojo: #c4161c;              /* «HL7» de la marca: rojo en todas las guías, también en la
                                            de terminología, cuya variante gris no lo cambia */

  --ig-status-text-color: var(--cr-color-oscuro);   /* Título y estado de la guía */
  --navbar-bg-color: var(--cr-color);               /* Barra de menú */
  --btn-hover-color: var(--cr-color-claro);         /* Opción del menú al pasar el mouse */
  --btn-active-color: var(--cr-color-oscuro);       /* Opción activa */
  --btn-text-color: #ffffff;                        /* Texto del menú */
  --btn-gradient-start-color: var(--cr-color-claro); /* Opción de un submenú al pasar el mouse */
  --btn-gradient-end-color: var(--cr-color);
  --btn-gradient-start-color-alpha: #ffe8272e;
  --btn-gradient-end-color-alpha: #ffc4161c;
  --stripe-bg-color: var(--cr-acento);              /* Franja sobre el menú */
  --footer-bg-color: #7a0d11;                       /* Pie: los lados */
  --footer-container-bg-color: var(--cr-color-oscuro); /* Pie: el centro */
  --link-color: #2a6fb0;                            /* Enlaces */
  --link-hover-color: #1d4e89;
  --toc-box-bg-color: #f4f6f8;                      /* Cuadro del índice */
  --toc-box-border: 1px solid #c9d1da;
  --cr-borde: #c9d1da;
  --cr-fondo-suave: #f4f6f8;
  --cr-texto-suave: #555555;
}

/* ── Encabezado ─────────────────────────────────────────────────────────────────────────────── */
#cr-nav {
  float: var(--ig-left);
  margin: 10px 0 6px 6px;
}
/* La marca en dos líneas: «Iniciativa HL7» arriba y «Costa Rica» debajo */
#cr-marca {
  display: inline-block;
  color: #3a3a3a;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-decoration: none;
}
#cr-marca:hover, #cr-marca:focus { color: #1d4e89; text-decoration: none; }
/* «Iniciativa» y «Costa Rica» con el mismo estilo; «HL7» en rojo */
#cr-marca .cr-marca-iniciativa,
#cr-marca .cr-marca-pais { font-weight: 400; color: #555555; }
#cr-marca .cr-marca-pais { display: block; }
#cr-marca .cr-marca-hl7 { color: var(--cr-marca-rojo); }

/* ── Menú ───────────────────────────────────────────────────────────────────────────────────── */
.navbar-inverse .navbar-nav > li > a { color: var(--btn-text-color); }
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus { color: #ffffff; }
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus { background-color: var(--btn-hover-color); color: #ffffff; }
.dropdown-menu { border: 1px solid var(--cr-borde); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); }

/* ── Ruta de navegación ─────────────────────────────────────────────────────────────────────── */
.breadcrumb { border-bottom: 1px solid #e3e3e3; }

/* ── Contenido ──────────────────────────────────────────────────────────────────────────────── */
a { color: var(--link-color); }
a:hover, a:focus { color: var(--link-hover-color); }

/* Tablas de las páginas de la guía (Perfiles y extensiones, Ejemplos, notas de los perfiles) */
table.cr-tabla { border-collapse: collapse; width: 100%; margin: 6px 0 18px; }
table.cr-tabla th { background: var(--cr-fondo-suave); text-align: var(--ig-left); }
table.cr-tabla th, table.cr-tabla td { border: 1px solid var(--cr-borde); padding: 6px 10px; vertical-align: top; }
table.cr-tabla td:first-child { white-space: nowrap; }

/* Índice al comienzo de una sección («Ir a: ...») */
.cr-ir-a {
  background: var(--cr-fondo-suave);
  border-left: 4px solid var(--navbar-bg-color);
  padding: 8px 12px;
  margin: 8px 0 16px;
}

/* Logo de FHIR, a la derecha del encabezado */
#family-nav { float: var(--ig-right); margin: 9px 6px 4px 0; }
#family-logo img { height: 42px; width: auto; }

/* Todas las tablas del contenido ocupan el ancho completo de la página. Una tabla que declara su
   ancho en el atributo style lo conserva. */
#segment-content table { width: 100%; }