/* Consilio — interfaz de consulta.

   Los tokens salen de los frontends de Recetalia para que Consilio no se vea
   como una aplicación ajena metida adentro: fondo `#f5f8fa`, tarjetas blancas
   con borde `#e2e8f0`, teal corporativo `#2EA1B1`, CTA `#0f766e`, Roboto para
   el cuerpo y Hind para encabezados y tablas, radios de 6/8px y la sombra
   suave del dashboard de gestión. */

:root {
  /* --- Recetalia --- */
  --bg:            #f5f8fa;
  --card:          #ffffff;
  --border:        #e2e8f0;
  --border-soft:   #eef2f7;
  --teal:          #2EA1B1;   /* acento corporativo */
  --cta:           #0f766e;   /* botón primario del dashboard */
  --cta-hover:     #0c5f59;
  --link:          #3498db;
  --text:          #334155;
  --text-strong:   #0f172a;
  --text-soft:     #64748b;
  --text-faint:    #94a3b8;
  --hover-row:     #e9ecef;

  /* --- estado --- */
  /* Los `-bg` son los fondos de las tarjetas de hallazgo. Medidos contra el
     fondo de página #f5f8fa: al 4% de saturación —que es donde estaban— la
     tarjeta "sin graduar" era indistinguible del fondo y la gravedad la
     comunicaba sólo el filete lateral. Si el color tiene que leerse desde
     lejos, tiene que ser color. */
  --major:         #c0392b;
  --major-bg:      #fbe7e4;
  --moderate:      #d98b06;
  --moderate-bg:   #fdf2d9;
  --minor:         #0ea5e9;
  --minor-bg:      #e4f1fb;
  --unknown:       #7c8b9c;
  --unknown-bg:    #e9eef3;
  --ok:            #22a06b;

  --radius:        6px;
  --radius-lg:     8px;
  --shadow:        0 1px 3px rgba(16,24,40,.05), 0 1px 2px rgba(16,24,40,.03);
  --shadow-pop:    0 4px 14px rgba(16,24,40,.12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  /* 15px, no 14: a 14 la pantalla entera se lee como "letra chica" y esto lo
     va a mirar un médico entre paciente y paciente, no un desarrollador. */
  font-size: 15px;
  line-height: 1.55;
}

h5, h6, .col-title, .brand .name { font-family: Hind, Roboto, sans-serif; }

/* ---------------- barra superior ---------------- */

/* La cabecera va en el teal corporativo, como el header público de Recetalia.
   Con todo blanco la pantalla no tenía dónde anclar la marca y se leía como un
   formulario suelto en vez de como un producto. */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 62px; padding: 0 24px;
  background: linear-gradient(90deg, #2EA1B1 0%, #21899a 55%, #0f766e 100%);
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 2px 10px rgba(15,118,110,.18);
  position: sticky; top: 0; z-index: 30;
}
.brand { display: flex; align-items: center; gap: 9px; }
.brand .isotipo { display: block; flex: 0 0 auto; }
.brand .name {
  font-size: 23px; font-weight: 700; color: #fff;
  letter-spacing: -.015em; line-height: 1;
}
.brand .tagline {
  font-size: 13px; color: rgba(255,255,255,.82);
  padding-left: 13px; border-left: 1px solid rgba(255,255,255,.3);
}
@media (max-width: 720px) { .brand .tagline { display: none; } }
.topbar-actions { display: flex; gap: 8px; }

/* ---------------- ayuda ---------------- */

.ayuda {
  background: #eef7f8; border-bottom: 1px solid #cfe6ea;
  padding: 22px 24px;
}
.ayuda-grid {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 22px;
}
.ayuda h6 {
  margin: 0 0 9px; font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--cta);
}
.ayuda ul { margin: 0; padding-left: 18px; font-size: 14px; }
.ayuda li { margin-bottom: 5px; }
.ayuda .leyenda { list-style: none; padding-left: 0; }
.ayuda .leyenda li { display: flex; align-items: flex-start; gap: 9px; }
.dot {
  width: 11px; height: 11px; border-radius: 50%; flex: 0 0 11px;
  display: inline-block; position: relative; top: 1px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.9);
}
.dot.major { background: var(--major); }
.dot.moderate { background: var(--moderate); }
.dot.minor { background: var(--minor); }
.dot.unknown { background: var(--unknown); }

/* ---------------- estructura ---------------- */

main { max-width: 1280px; margin: 0 auto; padding: 26px 24px 8px; }

/* `align-items: start` dejaba la tarjeta de medicamentos (238px) flotando
   sobre un hueco de 300px al lado de la de perfil (544px). Estirar las dos a
   la misma altura se ve mejor que el hueco, y el resumen de abajo ocupa el
   sobrante con algo útil. */
.cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 20px; align-items: stretch;
}
.cols > .card { display: flex; flex-direction: column; }
.cols > .card > .card-body { flex: 1 1 auto; display: flex; flex-direction: column; }
/* En los resultados NO se estiran: dos columnas de tarjetas con alturas
   distintas no tienen por qué emparejarse. */
#results .cols { align-items: start; }
#results .cols > .col { display: block; }

.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  overflow: hidden;
}
/* La cabecera de cada tarjeta va teñida y con un filete teal arriba: sin eso
   son cuatro rectángulos blancos sobre un fondo casi blanco y la pantalla no
   tiene jerarquía, que es de lo que se quejaba la primera versión. */
.card-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 18px; background: #f3f9fa;
  border-bottom: 1px solid #d9eaed; border-top: 3px solid var(--teal);
}
.card-header h5 {
  margin: 0; font-size: 16px; font-weight: 600; color: var(--cta);
}
/* Dentro de un `label` en versales, el aclarador tiene que salirse de las
   versales: "PATOLOGÍAS CÓDIGO CIE-10 O NOMBRE" se lee como un solo título
   confuso en vez de como un campo con una aclaración. */
.card-header .opt, label .opt {
  font-size: 11px; font-weight: 400; color: var(--text-faint);
  text-transform: none; letter-spacing: 0;
}
label .opt::before { content: "· "; }
.counter {
  font-size: 12px; font-weight: 600; color: #fff;
  background: var(--teal); border-radius: 11px; padding: 3px 11px;
}
.card-body { padding: 18px; }

.hint { margin: 0 0 13px; font-size: 13.5px; color: var(--text-soft); }
/* Ocupa el sobrante de la tarjeta y dice qué va a pasar al consultar. */
.resumen-cruce {
  margin-top: auto; padding-top: 14px; border-top: 1px dashed #d9eaed;
  font-size: 13.5px; color: var(--text-soft);
}
.resumen-cruce strong { color: var(--cta); font-size: 15px; }
.micro-aviso {
  margin: 7px 0 0; font-size: 13px; color: var(--text-soft); line-height: 1.45;
  padding-left: 10px; border-left: 2px solid #d9eaed;
}

/* ---------------- formularios ---------------- */

label {
  display: block; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--cta); margin-bottom: 5px;
}
label.check {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  font-size: 14.5px; text-transform: none; letter-spacing: 0; color: var(--text);
  font-weight: 400; cursor: pointer;
}
input[type="text"], input[type="number"], input[type="search"], select {
  width: 100%; padding: 10px 13px; font: inherit; font-size: 15px;
  color: var(--text); background: #fcfdfe;
  border: 1px solid var(--border); border-radius: var(--radius);
  outline: none; transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus {
  border-color: var(--teal); box-shadow: 0 0 0 3px rgba(46,161,177,.14);
}
input::placeholder { color: #b6c0cc; }

/* ---------------- desplegable propio ----------------
   El `<select>` nativo abre el popup del sistema operativo, que no se puede
   estilar: en macOS sale con tipografía gigante, resaltado azul y despegado
   del campo. Se reemplaza por un botón + lista propios, y el `<select>` queda
   oculto como fuente de verdad del valor, para que todo lo que ya escucha su
   evento `change` siga funcionando igual. */

.select { position: relative; }
.select select { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.select-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 13px; font: inherit; font-size: 15px; text-align: left;
  color: var(--text); background: #fcfdfe; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color .12s, box-shadow .12s;
}
.select-btn:hover { border-color: #cfd8e3; }
.select-btn:focus-visible,
.select.abierto .select-btn {
  outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(46,161,177,.14);
}
.select-btn .valor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-btn .valor.vacio { color: #b6c0cc; }
.select-btn .caret {
  flex: 0 0 auto; width: 9px; height: 9px; border-right: 1.6px solid var(--text-faint);
  border-bottom: 1.6px solid var(--text-faint); transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .14s;
}
.select.abierto .select-btn .caret { transform: rotate(225deg) translate(-3px, -3px); }

.select-list {
  list-style: none; margin: 4px 0 0; padding: 4px;
  position: absolute; left: 0; right: 0; top: 100%; z-index: 25;
  max-height: 260px; overflow-y: auto; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
}
.select-list li {
  padding: 9px 12px; border-radius: 4px; cursor: pointer; font-size: 14.5px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.select-list li:hover, .select-list li.activo { background: var(--hover-row); }
.select-list li[aria-selected="true"] { color: var(--cta); font-weight: 500; }
.select-list li[aria-selected="true"]::after {
  content: "✓"; font-size: 12px; color: var(--cta);
}
/* La lista de semanas son 43 opciones y a una columna obliga a scrollear.
   ⚠️ NO usar `columns: 2`: con una altura tope el multicolumn no reparte en dos
   columnas, crea tantas como necesite y desborda a lo ancho — medido, quedaba
   `scrollWidth 719` contra `clientWidth 134`, con 35 de las 43 opciones
   alcanzables sólo por scroll horizontal. Grid de dos columnas y scroll
   vertical, que es lo que se quería. */
.select.compacto .select-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 4px; max-height: 300px;
  /* La lista se despega del ancho del botón: a 136px dos columnas quedan
     ilegibles y cada opción parte en dos renglones. */
  right: auto; width: 268px;
}
.select.compacto .select-list li {
  justify-content: flex-start; gap: 6px; white-space: nowrap;
}
/* Sin esto el tilde se ancla al borde derecho de una celda angosta y cae en el
   canalón, pareciendo que marca la opción de al lado. */
.select.compacto .select-list li[aria-selected="true"]::after { margin-left: auto; }

.row { margin-bottom: 16px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-inline { min-width: 0; }
.field { margin-bottom: 18px; }
.gestacion {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 14px; background: #f2f6fd; border: 1px solid #dbe5f8;
  border-radius: var(--radius);
}
/* Dentro del bloque flex el desplegable no debe estirarse a todo el ancho. */
.gestacion .select { width: auto; min-width: 152px; }
.gestacion .select-btn { padding: 5px 9px; font-size: 12.5px; }
/* `[hidden]` pierde por especificidad contra `.row{display:flex}`: sin esto el
   bloque de gestación queda siempre visible. */
[hidden] { display: none !important; }

/* ---------------- chips ---------------- */

.chips { list-style: none; margin: 0 0 9px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips:empty { margin: 0; }
.chips li {
  display: inline-flex; align-items: center; gap: 7px;
  background: #eaf6f8; color: #14606b; border: 1px solid #cde9ee;
  border-radius: 15px; padding: 5px 7px 5px 13px; font-size: 14px;
}
.chips li button {
  border: 0; background: transparent; color: #4e8b95; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 50%;
}
.chips li button:hover { color: var(--major); background: rgba(192,57,43,.09); }
.chips-alergia li { background: #fdf1f0; color: #8d2f24; border-color: #f6d9d5; }
.chips-alergia li button { color: #b07068; }
.chips-patologia li { background: #f1f5fd; color: #2c4a80; border-color: #d9e3f6; }
.chips-patologia li button { color: #6d85b5; }
.chips li .code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; opacity: .72;
}

/* ---------------- autocompletado ---------------- */

.search { position: relative; }
.suggestions {
  list-style: none; margin: 4px 0 0; padding: 4px;
  position: absolute; left: 0; right: 0; z-index: 20; max-height: 286px;
  overflow-y: auto; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
}
.suggestions li {
  padding: 9px 12px; border-radius: 4px; cursor: pointer; font-size: 14.5px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.suggestions li[aria-selected="true"], .suggestions li:hover { background: var(--hover-row); }
.suggestions li.empty { color: var(--text-faint); cursor: default; font-style: italic; }
.suggestions li.empty:hover { background: transparent; }
.suggestions .rxcui, .suggestions .alertas {
  font-size: 10.5px; color: var(--text-faint); white-space: nowrap;
}
/* El nombre internacional se deja a la vista aunque se muestre el castellano:
   es el que aparece en la bibliografía y en el prospecto importado. */
.suggestions .alias-en { font-size: 11px; color: var(--text-faint); font-weight: 400; }
.suggestions .code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; font-weight: 600; color: var(--teal);
  min-width: 62px; flex: 0 0 auto;
}
.suggestions .nombre { flex: 1 1 auto; min-width: 0; }

/* ---------------- botones ---------------- */

.actions { display: flex; align-items: center; gap: 14px; margin: 26px 0 0; }
.btn-primary {
  background: var(--cta); border: 1px solid var(--cta); color: #fff;
  border-radius: var(--radius); padding: 11px 30px;
  font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer;
  box-shadow: 0 1px 2px rgba(15,118,110,.3);
  transition: background .12s, box-shadow .12s;
}
.btn-primary:hover:not(:disabled) { box-shadow: 0 2px 8px rgba(15,118,110,.32); }
.btn-primary:hover:not(:disabled) { background: var(--cta-hover); border-color: var(--cta-hover); }
.btn-primary:disabled { background: #b9c6d3; border-color: #b9c6d3; box-shadow: none; cursor: not-allowed; }
.btn-ghost {
  background: var(--card); border: 1px solid #cfd8e3; color: var(--text);
  border-radius: var(--radius); padding: 6px 14px;
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.btn-ghost:hover { background: var(--hover-row); }
.btn-ghost[aria-expanded="true"] { background: #e7f3f1; border-color: var(--cta); color: var(--cta); }
/* Sobre el teal de la cabecera los botones van calados, no blancos: un bloque
   blanco ahí compite con el logo. */
.topbar .btn-ghost {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); color: #fff;
}
.topbar .btn-ghost:hover { background: rgba(255,255,255,.26); }
.topbar .btn-ghost[aria-expanded="true"] {
  background: #fff; border-color: #fff; color: var(--cta);
}
.btn-link {
  background: none; border: 0; color: var(--link); cursor: pointer;
  font: inherit; font-size: 13px; padding: 4px 2px; text-decoration: underline;
}
.kbd-hint { font-size: 11.5px; color: var(--text-faint); }
kbd {
  font-family: ui-monospace, Menlo, monospace; font-size: 10.5px;
  background: #eef2f7; border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 3px; padding: 1px 4px; color: var(--text-soft);
}

/* ---------------- filtros ---------------- */

.filtros {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px;
  background: #f3f9fa; border: 1px solid #d9eaed;
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 12px 16px; margin: 20px 0 12px;
}
.filtro-grupo { display: flex; flex-direction: column; gap: 6px; }
.filtro-grupo.grow { flex: 1 1 200px; min-width: 170px; }
.filtro-grupo:last-child { flex-direction: row; align-items: center; gap: 8px; }
.filtro-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--cta);
}
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  border: 1px solid #b9d3d8; background: var(--card); border-radius: var(--radius);
  padding: 6px 12px; font-size: 13px; font-weight: 500; color: var(--text);
  text-transform: none; letter-spacing: 0; cursor: pointer; user-select: none;
  transition: background .12s, border-color .12s;
}
.pill:hover { background: var(--hover-row); }
.pill input { display: none; }
.pill.on { background: var(--cta); border-color: var(--cta); color: #fff; }
.pill.on .n { color: rgba(255,255,255,.8); }
.pill .n { font-size: 11px; color: var(--text-faint); font-weight: 600; }
.pill.toggle.on { background: var(--cta); border-color: var(--cta); color: #fff; }
.filtro-texto { padding: 7px 12px; font-size: 13.5px; }
.filtro-estado {
  margin: 0 0 14px; font-size: 13.5px; color: #7a5b16;
  background: var(--moderate-bg); border: 1px solid #f3e3b8;
  border-radius: var(--radius); padding: 8px 13px;
}

/* ---------------- resultados ---------------- */

#results { margin-top: 22px; }
.col-title {
  margin: 0 0 12px; font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--cta);
  display: flex; align-items: center; gap: 9px;
}
.col-title::before {
  content: ""; width: 4px; height: 15px; border-radius: 2px;
  background: var(--teal); flex: 0 0 auto;
}
.col { min-width: 0; }

/* El filete de color no alcanzaba: sobre un fondo casi blanco, seis tarjetas
   blancas con una rayita de 3px se leen todas igual. El fondo teñido hace que
   la gravedad se vea desde lejos, que es la única forma en que sirve. */
.finding {
  background: var(--unknown-bg); border: 1px solid #ccd6e0;
  border-left: 5px solid var(--unknown);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 16px; margin-bottom: 12px;
}
.finding.major    { border-left-color: var(--major);    background: var(--major-bg);    border-color: #eec2bb; }
.finding.moderate { border-left-color: var(--moderate); background: var(--moderate-bg); border-color: #edd497; }
.finding.minor    { border-left-color: var(--minor);    background: var(--minor-bg);    border-color: #b9daf1; }

.finding-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 2px;
}
.pair { font-size: 16px; font-weight: 600; color: var(--text-strong); }
.badge {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: #fff; border-radius: 11px; padding: 3px 11px;
  background: var(--unknown);
}
.badge.major    { background: var(--major); }
.badge.moderate { background: var(--moderate); }
.badge.minor    { background: var(--minor); }
.badge.unknown  { background: var(--unknown); }

.evidence { margin: 10px 0 0; font-size: 14.5px; color: #3f4a52; }
.evidence.sin-texto { color: var(--text-faint); font-style: italic; }
.evidence-note { margin: 3px 0 0; font-size: 11px; color: var(--text-faint); }
/* El manejo clínico es lo accionable del hallazgo: se separa del mecanismo
   con un filete para que se lea aunque el médico no lea el resto. */
.manejo {
  margin: 11px 0 0; padding: 10px 13px; font-size: 14px; color: #14532d;
  background: #eefaf3; border-left: 3px solid var(--ok); border-radius: 4px;
}
.manejo strong { color: #15803d; }
.meta { margin: 11px 0 0; font-size: 12.5px; color: var(--text-soft); }
.tag-uncertain {
  display: inline-block; font-size: 11.5px; color: #8a6d3b;
  background: #fcf3d8; border: 1px solid #f3e3b3;
  border-radius: 3px; padding: 1px 6px;
}
.tag-clase {
  display: inline-block; font-size: 11.5px; color: #2c4a80;
  background: #f1f5fd; border: 1px solid #d9e3f6;
  border-radius: 3px; padding: 1px 6px;
}

.empty-state {
  background: var(--card); border: 1px dashed #bcd5da;
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px;
  font-size: 14px; color: var(--text-soft);
}
/* Una consulta que falló tiene que verse como un fallo, no como un vacío. El
   vacío tranquiliza, y acá tranquilizar sin haber evaluado nada es el modo de
   fallo más peligroso que puede tener esta pantalla. */
.error-state {
  background: var(--major-bg); border: 1px solid #f0c8c2;
  border-left: 3px solid var(--major);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px;
  font-size: 13px; color: #7a2b21;
}
.error-state strong { color: var(--major); }
.error-state p { margin: 6px 0 10px; }
.aviso-perfil {
  background: #fdf8ec; border: 1px solid #f3e3b3; border-left: 4px solid var(--moderate);
  color: #7a5b16; border-radius: var(--radius); padding: 11px 14px;
  margin-bottom: 12px; font-size: 14px;
}

/* ---------------- pie ---------------- */

footer {
  margin: 34px 0 0; padding: 20px 24px 30px;
  background: #eef2f6; border-top: 3px solid var(--teal);
}
footer > * { max-width: 1280px; margin-left: auto; margin-right: auto; }
.disclaimer { margin: 0; font-size: 13px; color: var(--text); }
.disclaimer strong { color: var(--major); }
.sources { margin: 7px auto 0; font-size: 12.5px; color: var(--text-soft); }

/* ---------------- toast ---------------- */

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: #1c222a; color: #fff; padding: 10px 18px; font-size: 13px;
  border-radius: var(--radius); box-shadow: var(--shadow-pop); z-index: 60;
  max-width: 90vw;
}

/* ---------------- impresión ---------------- */

@media print {
  .topbar-actions, .actions, .filtros, .search, .card-header .counter,
  #ayuda, .kbd-hint { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .card, .finding { box-shadow: none; break-inside: avoid; }
  .topbar { position: static; border-bottom: 2px solid var(--teal); }
  main { max-width: none; padding: 0; }
}