/* ==========================================================================
   MedTracker — hoja de estilos

   Sustituye a la hoja heredada del sistema original (6.800 lineas, casi todas de
   otros modulos). Conserva su lenguaje visual: turquesa de marca, titulares en
   Oswald, formas muy redondeadas, paneles grises y el icono de la pildora.

   Orden: 1 variables · 2 base · 3 plantilla · 4 menu · 5 cabecera de pagina
          6 barras y formularios · 7 botones · 8 secciones · 9 fichas
          10 etiquetas · 11 avisos · 12 tablas · 13 piezas de pantalla
          14 entrada · 15 pie · 16 movil · 17 impresion
   ========================================================================== */

/* --- 1. Variables --------------------------------------------------------- */

:root {
    /* Marca. El turquesa original no da contraste suficiente para texto ni para
       botones con letra blanca, asi que se reserva para acentos y se usa una
       version mas oscura donde hay que leer. */
    --marca: #11bfc4;
    --marca-fuerte: #0a858a;
    --marca-hover: #086d71;
    --marca-suave: #e7f8f9;
    --marino: #243780;

    --tinta: #1f2937;
    --tinta-suave: #5b6675;
    --tinta-tenue: #8a94a3;
    --linea: #dde3ea;
    --linea-suave: #edf0f4;
    --fondo: #ffffff;
    --panel: #f3f5f7;

    --ok: #1b7a3e;
    --ok-suave: #e6f4ea;
    --aviso: #9a5b00;
    --aviso-suave: #fff4e0;
    --aviso-linea: #f0a83a;
    --peligro: #b3261e;
    --peligro-suave: #fdecea;
    --info: #1d4f91;
    --info-suave: #e8f0fb;

    --fuente: "Roboto", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --fuente-titulo: "Oswald", "Arial Narrow", "Roboto Condensed", sans-serif;

    --radio-panel: 24px;
    --radio-ficha: 18px;
    --radio-control: 999px;
    --radio-chico: 8px;

    --sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .06);
    --sombra-alta: 0 2px 4px rgba(16, 24, 40, .06), 0 10px 26px rgba(16, 24, 40, .1);

    --ancho: 1240px;
}

/* --- 2. Base -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.medicalTracker {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--fondo);
    color: var(--tinta);
    font-family: var(--fuente);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--fuente-titulo);
    font-weight: 500;
    line-height: 1.2;
    color: var(--tinta);
    margin: 0;
}

p { margin: 0 0 .75rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--marca-fuerte); text-underline-offset: 2px; }
a:hover { color: var(--marca-hover); }

strong, b { font-weight: 700; }

:focus-visible {
    outline: 3px solid var(--marca);
    outline-offset: 2px;
    border-radius: 4px;
}

.container { max-width: var(--ancho); padding-inline: 24px; }

/* --- 3. Plantilla --------------------------------------------------------- */

.cabecera {
    border-bottom: 1px solid var(--linea);
    background: var(--fondo);
}

.cabecera-fila {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 76px;
}

.cabecera-logo { display: inline-flex; flex: none; }
.cabecera-logo img { width: 190px; height: auto; display: block; }

.cabecera-sesion { margin-left: auto; flex: none; }

.cabecera-sesion .btn-salir {
    appearance: none;
    border: 1px solid var(--linea);
    background: var(--fondo);
    color: var(--tinta-suave);
    font: 500 .9rem var(--fuente);
    padding: .45rem 1rem;
    border-radius: var(--radio-control);
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.cabecera-sesion .btn-salir:hover { border-color: var(--marca-fuerte); color: var(--marca-fuerte); }

main { flex: 1; padding-block: 32px 56px; }

/* Capa de carga de las consultas por AJAX. */
.containerLoader {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, .7);
}

.loader {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    margin: -24px 0 0 -24px;
    border: 4px solid var(--marca-suave);
    border-top-color: var(--marca-fuerte);
    border-radius: 50%;
    animation: girar .8s linear infinite;
    z-index: 1001;
}

@keyframes girar { to { transform: rotate(360deg); } }

/* --- 4. Menu -------------------------------------------------------------- */

/* Dos niveles: arriba las cinco preguntas que responde la herramienta, debajo
   las pantallas de la que esta abierta. Antes eran trece enlaces en tres filas. */

.menu-grupos {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-grupos a {
    display: block;
    padding: .55rem 1rem;
    border-radius: var(--radio-control);
    font: 500 1rem var(--fuente-titulo);
    letter-spacing: .01em;
    color: var(--tinta);
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s, color .15s;
}

.menu-grupos a:hover { background: var(--panel); color: var(--marca-fuerte); }

.menu-grupos a.active {
    background: var(--marca-fuerte);
    color: #fff;
}

.menu-paginas-banda {
    background: var(--panel);
    border-bottom: 1px solid var(--linea);
}

.menu-paginas {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.menu-paginas a {
    display: block;
    padding: .35rem .9rem;
    border-radius: var(--radio-control);
    font-size: .93rem;
    font-weight: 500;
    color: var(--tinta-suave);
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background .15s, color .15s;
}

.menu-paginas a:hover { color: var(--marca-fuerte); background: var(--fondo); }

.menu-paginas a.active {
    background: var(--fondo);
    color: var(--marca-fuerte);
    border-color: var(--marca);
}

/* --- 5. Cabecera de pagina ------------------------------------------------ */

.contentTrackerTitle { margin-bottom: 24px; max-width: 80ch; }

.contentTrackerTitle h2,
.contentTrackerTitle h1 {
    font-size: 2rem;
    font-weight: 500;
    color: var(--tinta);
    margin-bottom: 14px;
    padding-bottom: 12px;
    position: relative;
}

/* La barra corta turquesa bajo el titulo viene del diseno original. */
.contentTrackerTitle h2::after,
.contentTrackerTitle h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 3px;
    border-radius: 2px;
    background: var(--marca);
}

.contentTrackerTitle p { font-size: 1.03rem; color: var(--tinta); }

.notaHistorial {
    font-size: .9rem;
    color: var(--tinta-suave);
    font-style: normal;
}

.contentTrackerTitle .notaHistorial {
    font-size: .9rem;
    color: var(--tinta-suave);
    padding-left: 12px;
    border-left: 3px solid var(--linea);
}

/* --- 6. Barras y formularios ---------------------------------------------- */

.contentTrackerGlobal { margin-bottom: 24px; }

.contentSearchTracker {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px 24px;
    background: var(--panel);
    border-radius: var(--radio-panel);
    padding: 18px 24px;
}

.contentSearchTrackerElement {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 200px;
    flex: 0 1 260px;
}

.contentSearchTrackerElement label,
.campo label {
    font-size: .82rem;
    font-weight: 500;
    color: var(--tinta-suave);
    margin: 0;
}

.contentSearchTracker .resumenNovedades {
    margin: 0 0 0 auto;
    align-self: center;
    font-size: .95rem;
    color: var(--tinta-suave);
    text-align: right;
}

.resumenNovedades strong { color: var(--tinta); font-size: 1.05rem; }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
.form-select,
.form-control,
textarea {
    width: 100%;
    font: 400 1rem var(--fuente);
    color: var(--tinta);
    background-color: var(--fondo);
    border: 1px solid var(--linea);
    border-radius: var(--radio-control);
    padding: .6rem 1.1rem;
    min-height: 44px;
    transition: border-color .15s, box-shadow .15s;
}

textarea { border-radius: var(--radio-ficha); min-height: 120px; resize: vertical; }

select, .form-select { padding-right: 2.4rem; cursor: pointer; }

input::placeholder, textarea::placeholder { color: var(--tinta-tenue); }

input:focus, select:focus, textarea:focus,
.form-select:focus, .form-control:focus {
    outline: none;
    border-color: var(--marca-fuerte);
    box-shadow: 0 0 0 3px rgba(17, 191, 196, .25);
}

.form-check-input {
    width: 1.15rem;
    height: 1.15rem;
    min-height: 0;
    padding: 0;
    margin-top: .2rem;
    border: 1px solid var(--tinta-tenue);
    border-radius: 4px;
    cursor: pointer;
}

.form-check-input:checked { background-color: var(--marca-fuerte); border-color: var(--marca-fuerte); }

.form-check-label { cursor: pointer; font-size: .95rem; }

.contentSearchTracker .form-check-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--tinta);
    font-size: .95rem;
    font-weight: 400;
}

.contentSearchTracker .form-check-label .form-check-input { flex: none; margin: .2rem 0 0; }

.text-danger { color: var(--peligro) !important; font-size: .85rem; }

/* --- 7. Botones ----------------------------------------------------------- */

.contentTrackerBtn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.btnSend,
.btn-primary,
.boton {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: .6rem 1.6rem;
    border: 1px solid var(--marca-fuerte);
    border-radius: var(--radio-control);
    background: var(--marca-fuerte);
    color: #fff;
    font: 500 1rem var(--fuente);
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
}

.btnSend:hover,
.btn-primary:hover,
.boton:hover {
    background: var(--marca-hover);
    border-color: var(--marca-hover);
    color: #fff;
}

/* Accion secundaria: misma forma, sin relleno. */
.btnSend.secundario,
.boton.secundario {
    background: transparent;
    color: var(--marca-fuerte);
}

.btnSend.secundario:hover,
.boton.secundario:hover { background: var(--marca-suave); color: var(--marca-hover); }

.btnSend[aria-disabled="true"],
.boton:disabled { opacity: .5; cursor: not-allowed; }

/* --- 8. Secciones --------------------------------------------------------- */

.contentTrackerGlobalResult {
    background: var(--panel);
    border-radius: var(--radio-panel);
    padding: 24px;
    margin-bottom: 24px;
}

.contentTrackerGlobalResult > h2 {
    font-size: 1.45rem;
    margin-bottom: 4px;
}

.contentTrackerGlobalResult > p {
    color: var(--tinta-suave);
    font-size: .97rem;
    max-width: 85ch;
    margin-bottom: 18px;
}

.contentTrackerGlobalResult > h2 + .contentTrackerOptionsResult { margin-top: 16px; }

/* Antes cada seccion metia sus fichas en una caja blanca dentro del panel gris,
   con 80 px de margen muerto a la izquierda. Ahora el contenedor es solo la
   rejilla. */
.contentTrackerOptionsElementResult,
.contentTrackerOptions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.seccionSecundaria { background: transparent; border: 1px solid var(--linea); }

details > summary {
    cursor: pointer;
    color: var(--marca-fuerte);
    font-weight: 500;
    font-size: .95rem;
    padding: 4px 0;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}

details > summary::-webkit-details-marker { display: none; }

details > summary::before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .15s;
    flex: none;
}

details[open] > summary::before { transform: rotate(45deg); }

details[open] > summary { margin-bottom: 14px; }

/* --- 9. Fichas ------------------------------------------------------------ */

.contentTrackerOptionsElement {
    background: var(--fondo);
    border: 1px solid var(--linea);
    border-radius: var(--radio-ficha);
    padding: 18px 20px;
    box-shadow: var(--sombra);
    min-width: 0;
    position: relative;
}

.contentTrackerOptionsElement h3 {
    font-size: 1.08rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--marca-fuerte);
    margin-bottom: 10px;
    overflow-wrap: anywhere;
}

.contentTrackerOptionsElement h3 a { color: inherit; text-decoration: none; }
.contentTrackerOptionsElement h3 a:hover { text-decoration: underline; }

.contentTrackerOptionsElement p {
    font-size: .93rem;
    line-height: 1.5;
    margin-bottom: .5rem;
    color: var(--tinta);
}

.contentTrackerOptionsElement p strong { font-weight: 500; color: var(--tinta-suave); }

.datosFicha { font-size: .93rem; }

.fechaCambio {
    font-size: .85rem !important;
    color: var(--tinta-suave) !important;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--linea-suave);
}

.fechaCambio strong { color: var(--tinta) !important; }

/* Fichas que ocupan todo el ancho: las que llevan una tabla o una linea de hitos. */
.fichaCobertura { grid-column: 1 / -1; }

/* Enlaces a documentos */
.enlacesDocumento { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: .9rem; }

.enlacesDocumento a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-weight: 500;
}

.enlacesDocumento a::before {
    content: "PDF";
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    background: var(--peligro);
    border-radius: 3px;
    padding: 1px 4px;
}

.enlacesDocumento a:hover { text-decoration: underline; }

/* Medicamentos en seguimiento: aqui las fichas si se seleccionan. */
#listaSeguimiento .contentTrackerOptionsElement {
    cursor: pointer;
    padding: 16px 52px 16px 62px;
    background: var(--fondo) url(../assets/img/tracker/iconPills.png) 14px 14px / 36px auto no-repeat;
    transition: border-color .15s, box-shadow .15s;
}

#listaSeguimiento .contentTrackerOptionsElement:hover { border-color: var(--marca); box-shadow: var(--sombra-alta); }

#listaSeguimiento .contentTrackerOptionsElement.active {
    border-color: var(--marca-fuerte);
    box-shadow: 0 0 0 2px var(--marca-fuerte);
    background-image: url(../assets/img/tracker/iconPillsHover.png);
}

#listaSeguimiento .contentTrackerOptionsElement h3 { color: var(--tinta); margin-bottom: 4px; }
#listaSeguimiento .contentTrackerOptionsElement p { color: var(--tinta-suave); margin: 0; }

.btnEliminar {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--linea);
    background: var(--fondo);
    color: var(--tinta-suave);
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}

.btnEliminar img { display: none; }
.btnEliminar::before { content: "\00d7"; }

.btnEliminar:hover { background: var(--peligro-suave); color: var(--peligro); border-color: var(--peligro); }

/* --- 10. Etiquetas -------------------------------------------------------- */

.etiquetasMedicamento { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px !important; }

.etiqueta {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--radio-control);
    font-size: .76rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .01em;
    white-space: nowrap;
    background: var(--panel);
    color: var(--tinta-suave);
    border: 1px solid transparent;
}

h3 .etiqueta { font-family: var(--fuente); vertical-align: middle; margin-left: 6px; }

.etiquetaGenerico { background: var(--info-suave); color: var(--info); }
.etiquetaSuministro { background: var(--peligro-suave); color: var(--peligro); }
.etiquetaTriangulo { background: var(--aviso-suave); color: var(--aviso); }
.etiquetaNoComerc, .etiquetaDeBaja { background: var(--panel); color: var(--tinta-suave); border-color: var(--linea); }
.etiquetaPropio { background: var(--marca-fuerte); color: #fff; }
.etiquetaParalela { background: var(--panel); color: var(--tinta); border-color: var(--tinta-suave); }

/* Alta guiada: propuestas de CIMA bajo el campo del nombre. */
.sugerencias { display: grid; gap: 6px; margin-top: 8px; }
.sugerencias:empty { display: none; }
.sugerenciasNota { margin: 0; font-size: .85rem; color: var(--tinta-suave); }
.sugerenciasHecho { color: var(--ok); }
.sugerencia {
    display: block;
    width: 100%;
    padding: 9px 12px;
    text-align: left;
    border: 1px solid var(--linea);
    border-radius: var(--radio-chico);
    background: var(--fondo);
    color: var(--tinta);
    font-size: .92rem;
    cursor: pointer;
}
.sugerencia:hover, .sugerencia:focus-visible { border-color: var(--marca-fuerte); background: var(--marca-suave); }
.sugerencia small { display: block; margin-top: 2px; color: var(--tinta-suave); font-size: .8rem; }

/* Encabezado de cada circulo de competencia: ocupa la fila entera de la rejilla de fichas. */
.grupoCompetencia { grid-column: 1 / -1; flex-basis: 100%; width: 100%; margin: 1.25rem 0 .25rem; font-size: 1.05rem; }
.grupoCompetencia small { font-weight: 400; color: var(--tinta-suave); margin-left: .35rem; }
.etiquetaBajada, .aportacionReducida { background: var(--ok-suave); color: var(--ok); }
.aportacionNormal { background: var(--aviso-suave); color: var(--aviso); }
.aportacionDesconocida { background: var(--panel); color: var(--tinta-suave); }

.etiquetaBajada {
    display: inline-flex;
    padding: 2px 10px;
    border-radius: var(--radio-control);
    font-size: .8rem;
    font-weight: 500;
}

/* --- 11. Avisos y estados vacios ------------------------------------------ */

/* Un aviso no es una ficha: antes compartian aspecto, con icono de pildora y
   cursor de enlace, y parecia que se podia pulsar. */
.contentTrackerGlobal > .contentTrackerOptionsElement {
    border: 1px solid var(--linea);
    border-left: 4px solid var(--marca);
    border-radius: var(--radio-chico) var(--radio-ficha) var(--radio-ficha) var(--radio-chico);
    background: var(--fondo);
    box-shadow: none;
    padding: 16px 20px;
    max-width: 80ch;
}

.contentTrackerGlobal > .contentTrackerOptionsElement h3 {
    color: var(--tinta);
    font-size: 1.1rem;
    margin-bottom: 6px;
}

.contentTrackerGlobal > .contentTrackerOptionsElement p { color: var(--tinta-suave); font-size: .95rem; }

.contentTrackerGlobal > .contentTrackerOptionsElement.avisoHistorial {
    border-left-color: var(--aviso-linea);
    background: var(--aviso-suave);
    border-color: #f6dba8;
    border-left-color: var(--aviso-linea);
}

.contentTrackerGlobal > .contentTrackerOptionsElement.avisoHistorial p { color: #6b4a12; }

.avisoPatente {
    border-left: 3px solid var(--aviso-linea);
    background: var(--aviso-suave);
    padding: 8px 12px;
    border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
    color: #6b4a12 !important;
}

.alert {
    border-radius: var(--radio-ficha);
    border: 1px solid transparent;
    padding: 12px 18px;
    font-size: .95rem;
    margin-bottom: 20px;
}

.alert-danger { background: var(--peligro-suave); color: var(--peligro); border-color: #f5c6c2; }
.alert-warning { background: var(--aviso-suave); color: #6b4a12; border-color: #f6dba8; }
.alert-success { background: var(--ok-suave); color: var(--ok); border-color: #bfe3c9; }

/* Avisos que aparecen tras una accion: fijos arriba para que no pasen
   desapercibidos si la pantalla esta desplazada. */
#alertaGlobal, #avisoGlobal {
    position: sticky;
    top: 12px;
    z-index: 50;
    box-shadow: var(--sombra-alta);
}

/* --- 12. Tablas ----------------------------------------------------------- */

.tablaDatos,
.tablaPrecios,
.tablaEnvios,
.tablaCobertura,
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
    background: var(--fondo);
    margin: 0;
}

.tablaPrecios th, .tablaEnvios th, .tablaCobertura th, .table th, .tablaDatos th {
    text-align: left;
    font: 500 .76rem var(--fuente);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tinta-suave);
    background: var(--fondo);
    border-bottom: 2px solid var(--linea);
    padding: 10px 14px;
    white-space: nowrap;
}

.tablaPrecios td, .tablaEnvios td, .tablaCobertura td, .table td, .tablaDatos td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--linea-suave);
    vertical-align: top;
    color: var(--tinta);
}

.tablaPrecios tr:last-child td, .tablaEnvios tr:last-child td,
.tablaCobertura tr:last-child td, .table tr:last-child td { border-bottom: 0; }

.tablaPrecios tbody tr:hover td, .tablaCobertura tbody tr:hover td { background: #fafbfc; }

th.numero, td.numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.filaPropia td { background: var(--marca-suave) !important; }
.filaPropia td:first-child { box-shadow: inset 4px 0 0 var(--marca-fuerte); }

.filaDeBaja td { color: var(--tinta-tenue); }

.laboratorioFila,
.detalleFila {
    display: block;
    font-size: .8rem;
    color: var(--tinta-suave);
    font-family: var(--fuente);
    font-weight: 400;
    margin-top: 2px;
}

h3 .laboratorioFila { margin-top: 4px; font-size: .88rem; }

/* Contenedor de tabla: bordes redondeados y desplazamiento horizontal en movil. */
.cajaTabla {
    background: var(--fondo);
    border: 1px solid var(--linea);
    border-radius: var(--radio-ficha);
    overflow-x: auto;
}

/* --- 13. Piezas de pantalla ----------------------------------------------- */

/* Linea de hitos (lanzamientos, exclusividad) */
.lineaHitos {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin: 4px 0 14px;
    padding: 0;
}

.lineaHitos li {
    display: flex;
    flex-direction: column;
    padding-left: 12px;
    border-left: 3px solid var(--linea);
    min-width: 8rem;
}

.lineaHitos .hitoAlcanzado { border-left-color: var(--marca); }
.lineaHitos .hitoPendiente { color: var(--tinta-tenue); }

.nombreHito {
    font-size: .72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tinta-suave);
}

.hitoPendiente .nombreHito { color: var(--tinta-tenue); }

.fechaHito { font-weight: 500; font-variant-numeric: tabular-nums; }

/* Filas de resultado sin ficha (bajadas de precio, normativa) */
.fichaResultado {
    grid-column: 1 / -1;
    background: var(--fondo);
    border: 1px solid var(--linea);
    border-radius: var(--radio-ficha);
    padding: 14px 20px;
}

.fichaResultado h3 { font-size: 1.05rem; margin-bottom: 6px; color: var(--tinta); }
.fichaResultado h3 a { color: var(--marca-fuerte); text-decoration: none; }
.fichaResultado h3 a:hover { text-decoration: underline; }
.fichaResultado p { font-size: .92rem; color: var(--tinta-suave); margin-bottom: .3rem; }

.listaCompetidores {
    columns: 2 260px;
    column-gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .9rem;
}

.listaCompetidores li { break-inside: avoid; padding: 5px 0; border-bottom: 1px solid var(--linea-suave); }

.presentacionAfectada { font-size: .9rem; color: var(--tinta-suave); }

/* Grupos plegables (precios, cobertura): una linea por grupo, el detalle al abrir. */
.grupoPlegable {
    grid-column: 1 / -1;
    background: var(--fondo);
    border: 1px solid var(--linea);
    border-radius: var(--radio-ficha);
    overflow: hidden;
}

.grupoPlegable > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 20px;
    margin: 0;
    color: var(--tinta);
    font-size: 1rem;
}

.grupoPlegable[open] > summary { margin-bottom: 0; border-bottom: 1px solid var(--linea); background: #fafbfc; }

.grupoPlegable > summary:hover { background: #fafbfc; }

.grupoPlegable .grupoNombre {
    font: 500 1.02rem var(--fuente-titulo);
    color: var(--tinta);
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.grupoPlegable .grupoDatos {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 6px 14px;
    font-size: .88rem;
    color: var(--tinta-suave);
    flex: none;
    max-width: 60%;
}

.grupoPlegable .grupoDatos strong { color: var(--tinta); font-variant-numeric: tabular-nums; }

.grupoPlegable .grupoCuerpo { overflow-x: auto; }

.grupoPlegable .grupoCuerpo > .notaHistorial { padding: 12px 20px 0; margin: 0; }

.listaGrupos { display: grid; gap: 10px; }

/* Buscador dentro de la pagina */
.filtroPagina { position: relative; flex: 1 1 280px; max-width: 420px; }

.sinCoincidencias {
    display: none;
    padding: 20px;
    text-align: center;
    color: var(--tinta-suave);
    background: var(--fondo);
    border: 1px dashed var(--linea);
    border-radius: var(--radio-ficha);
}

/* Asistente conversacional */
.panelAsistente {
    border: 1px dashed var(--linea);
    border-radius: var(--radio-panel);
    padding: 22px 24px;
    margin-top: 40px;
}

.panelAsistente > h3 { font-size: 1.2rem; margin-bottom: 4px; }
.panelAsistente > p { color: var(--tinta-suave); font-size: .93rem; margin-bottom: 14px; max-width: 80ch; }
.panelAsistente .contentSearchTracker { background: transparent; padding: 0; }
.panelAsistente .contentSearchTrackerElement { flex: 1 1 380px; }

.rolAnswer {
    background: var(--panel);
    border-radius: var(--radio-ficha);
    padding: 16px 20px;
    font-size: .95rem;
    margin-top: 16px;
}

.rolAnswer :is(h1, h2, h3, h4) { font-size: 1.05rem; margin: 12px 0 6px; }
.rolAnswer ul, .rolAnswer ol { padding-left: 1.3rem; }

/* Preferencias y prompts */
.contentBoxInfo {
    background: var(--fondo);
    border: 1px solid var(--linea);
    border-radius: var(--radio-ficha);
    padding: 16px 20px;
    flex: 1 1 320px;
}

.contentBoxInfo h3, .contentBoxInfo legend {
    font: 500 1.05rem var(--fuente-titulo);
    color: var(--tinta);
    margin-bottom: 10px;
    float: none;
    width: auto;
}

.contentBoxInfo label { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; font-size: .95rem; }
.contentBoxInfo label small, .contentBoxInfo label em { color: var(--tinta-suave); font-style: normal; font-size: .85rem; }

.promptMeta { font-size: .85rem; color: var(--tinta-suave); }

.formPrompt {
    background: var(--panel);
    border-radius: var(--radio-panel);
    padding: 22px 24px;
    margin-bottom: 20px;
}

.formPrompt h3 { font-size: 1.2rem; margin-bottom: 6px; }

/* --- 14. Entrada ---------------------------------------------------------- */

.entrada {
    min-height: calc(100vh - 220px);
    display: grid;
    place-items: center;
    padding: 24px 0;
}

.entrada-caja {
    width: min(100%, 420px);
    background: var(--fondo);
    border: 1px solid var(--linea);
    border-radius: var(--radio-panel);
    box-shadow: var(--sombra-alta);
    padding: 36px 32px 32px;
}

.entrada-caja h1 {
    font-size: 1.8rem;
    margin-bottom: 6px;
}

.entrada-caja .entrada-intro { color: var(--tinta-suave); font-size: .95rem; margin-bottom: 24px; }

.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }

.campo-casilla { display: flex; align-items: center; gap: 8px; margin: 4px 0 22px; }
.campo-casilla label { font-size: .95rem; color: var(--tinta); margin: 0; }

.entrada-caja .boton { width: 100%; }

/* --- 15. Pie -------------------------------------------------------------- */

.privacy-notices {
    margin-top: 48px;
    padding-top: 20px;
    border-top: 1px solid var(--linea);
    font-size: .8rem;
    color: var(--tinta-suave);
    max-width: 90ch;
}

.privacy-notices p { margin-bottom: .3rem; }

.pie-pagina {
    background: var(--marca-fuerte);
    color: #fff;
    font-size: .85rem;
    padding: 18px 0;
}

.pie-pagina .pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
}

.pie-pagina ul { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; margin: 0; padding: 0; }
.pie-pagina a { color: #fff; text-decoration: none; }
.pie-pagina a:hover { text-decoration: underline; color: #fff; }
.pie-pagina p { margin: 0; }

/* --- 16. Movil ------------------------------------------------------------ */

.menu-conmutador { display: none; }

@media (max-width: 900px) {
    .cabecera-fila { flex-wrap: wrap; gap: 8px 16px; min-height: 0; padding-block: 12px; }
    .cabecera-logo img { width: 150px; }

    .menu-conmutador {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        order: 2;
        margin-left: auto;
        appearance: none;
        border: 1px solid var(--linea);
        background: var(--fondo);
        border-radius: var(--radio-control);
        padding: .45rem 1rem;
        font: 500 .9rem var(--fuente);
        color: var(--tinta);
        cursor: pointer;
    }

    .cabecera-sesion { order: 3; margin-left: 0; }

    .menu { order: 4; flex-basis: 100%; display: none; }
    .menu.abierto { display: block; }

    .menu-grupos { flex-direction: column; gap: 2px; padding-bottom: 8px; }
    .menu-grupos a { border-radius: var(--radio-chico); }

    .menu-paginas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .menu-paginas::-webkit-scrollbar { display: none; }
}

@media (max-width: 700px) {
    .container { padding-inline: 16px; }
    main { padding-block: 20px 40px; }

    .contentTrackerTitle h2, .contentTrackerTitle h1 { font-size: 1.6rem; }

    .contentSearchTracker { padding: 16px; border-radius: var(--radio-ficha); }
    .contentSearchTrackerElement { flex: 1 1 100%; min-width: 0; }
    .contentSearchTracker .resumenNovedades { margin-left: 0; text-align: left; }

    .contentTrackerGlobalResult { padding: 16px; border-radius: var(--radio-ficha); }
    .contentTrackerOptionsElementResult, .contentTrackerOptions { grid-template-columns: 1fr; }

    .grupoPlegable > summary { flex-wrap: wrap; }
    .grupoPlegable .grupoDatos { max-width: 100%; justify-content: flex-start; flex: 1 1 100%; padding-left: 20px; }

    .btnSend, button.boton { flex: 1 1 auto; }

    .entrada-caja { padding: 28px 20px 24px; }
    .pie-pagina .pie { justify-content: flex-start; }
}

/* Telefono y tableta: se maneja con el dedo y no caben las tablas anchas. */
@media (max-width: 900px) {
    /* Las pantallas hermanas se deslizan de lado: el borde difuminado avisa de que hay mas. */
    .menu-paginas {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
        padding-right: 24px;
    }

    /* Las etiquetas pequenas de escritorio se quedan cortas en un telefono. */
    main dt, .rv-etiqueta-bloque, .cm-tesela-titulo, .cm-fichas-heroe span { font-size: .75rem !important; }

    /* Todo lo que se pulsa, con altura para el dedo. */
    .menu-paginas a, .menu-grupos a { padding-block: .6rem; }
    .enlaceAccion, .enlacesDocumento a { min-height: 40px; display: inline-flex; align-items: center; }
    .form-check-input { width: 1.35em; height: 1.35em; }
    main select, main input[type="text"], main input[type="search"], main input[type="email"],
    main input[type="number"], main input[type="password"] { min-height: 44px; font-size: 16px; }

    /* --- Tablas como fichas (las marca tablas.js) --- */
    .tabla-apilable, .tabla-apilable tbody, .tabla-apilable tr, .tabla-apilable td, .tabla-apilable tbody th {
        display: block;
        width: auto !important;
        min-width: 0 !important;
    }

    .tabla-apilable thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .tabla-apilable tr { padding: 12px 14px; border-bottom: 1px solid var(--linea); }
    .tabla-apilable tbody tr:last-child { border-bottom: 0; }

    .tabla-apilable td, .tabla-apilable tbody th {
        padding: 5px 0 !important;
        border: 0 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .tabla-apilable td[data-etiqueta] {
        display: flex;
        align-items: baseline;
        justify-content: flex-end;
        gap: 6px;
        text-align: right !important;
    }

    .tabla-apilable td[data-etiqueta]::before {
        content: attr(data-etiqueta);
        flex: 0 1 46%;
        margin-right: auto;
        padding-right: 8px;
        text-align: left;
        font-size: .75rem;
        font-weight: 500;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--tinta-tenue);
    }

    .tabla-apilable .tabla-titulo { font-weight: 600; font-size: 1rem; padding-bottom: 6px !important; }
    .tabla-apilable td:empty { display: none; }
}

@media (max-width: 420px) {
    /* El logo, el menu, el recorrido y la salida, en una sola fila. */
    .cabecera-logo img { width: 124px; }
    .cabecera-fila { gap: 8px 10px; }
}

/* --- 17. Impresion -------------------------------------------------------- */

@media print {
    .cabecera, .menu-paginas-banda, .pie-pagina, .privacy-notices,
    .contentTrackerBtn, .btnEliminar, .panelAsistente { display: none !important; }

    body.medicalTracker { font-size: 11pt; }
    .contentTrackerGlobalResult { background: none; padding: 0; }
    .contentTrackerOptionsElement { box-shadow: none; break-inside: avoid; }
    details > summary::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* --- 18. Datos de una ficha ----------------------------------------------- */

/* Pares "que es / cuanto vale" en rejilla. Antes iban en parrafos corridos,
   separados por espacios, y habia que leerlos enteros para encontrar un dato. */
.datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px 16px;
    margin: 0 0 12px;
}

.datos > div { min-width: 0; }

.datos dt {
    font-size: .7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tinta-suave);
    margin: 0;
}

.datos dd {
    margin: 1px 0 0;
    font-size: .93rem;
    color: var(--tinta);
    overflow-wrap: anywhere;
}

.datos .ancho { grid-column: 1 / -1; }

.datos dd.destacado { font-weight: 500; }

/* Numero grande de una ficha: precio de entrada, dias en evaluacion. */
.cifra { font: 500 1.35rem var(--fuente-titulo); color: var(--tinta); font-variant-numeric: tabular-nums; }
.cifra small { font: 400 .85rem var(--fuente); color: var(--tinta-suave); }

/* Las fichas reparten su altura para que el pie quede alineado en la fila. */
.contentTrackerOptionsElementResult > .contentTrackerOptionsElement { display: flex; flex-direction: column; }
.contentTrackerOptionsElementResult > .contentTrackerOptionsElement > .fechaCambio,
.contentTrackerOptionsElementResult > .contentTrackerOptionsElement > .enlacesDocumento { margin-top: auto; }
.contentTrackerOptionsElementResult > .contentTrackerOptionsElement > .enlacesDocumento + .fechaCambio { margin-top: 12px; }

/* --- 19. Piezas de usabilidad ---------------------------------------------- */

/* El atributo hidden debe ganar a los display de fichas y secciones: lo usa el
   buscador de pagina. */
[hidden] { display: none !important; }

a.boton:focus-visible, .boton:focus-visible, .enlaceAccion:focus-visible,
summary:focus-visible, .menu-grupos a:focus-visible, .menu-paginas a:focus-visible {
    outline: 3px solid rgba(17, 191, 196, .55);
    outline-offset: 2px;
}

/* Numero de fichas de una seccion, junto a su titulo. */
.contador {
    display: inline-block;
    min-width: 1.9em;
    padding: 1px 9px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--fondo);
    border: 1px solid var(--linea);
    color: var(--tinta-suave);
    font: 500 .85rem var(--fuente);
    text-align: center;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

/* Casillas apiladas dentro de una barra de filtros. */
.contentSearchTrackerElement.casillas { gap: 8px; flex: 0 1 auto; align-self: center; }

fieldset.contentSearchTrackerElement { border: 0; padding: 0; margin: 0; }

fieldset.contentSearchTrackerElement legend {
    float: none;
    width: auto;
    margin: 0 0 4px;
    font-size: .82rem;
    font-weight: 500;
    color: var(--tinta-suave);
}

.form-check-label small {
    display: block;
    color: var(--tinta-suave);
    font-size: .85rem;
    font-weight: 400;
}

/* Formularios de una columna (avisos) y de alta (mis medicamentos). */
.contentSearchTracker.formularioVertical {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    max-width: 720px;
    padding: 24px 28px;
}

.formularioVertical .contentSearchTrackerElement { flex: none; }

/* Rejilla y no flex con salto de linea: dentro de una columna flex, Chrome reserva
   el alto de las dos lineas aunque quepan en una. */
.filaCampos { display: grid; grid-template-columns: 2fr 1fr; gap: 16px 24px; }
.filaCampos .contentSearchTrackerElement { min-width: 0; }
.formularioVertical .contentSearchTrackerElement.casillas { align-self: stretch; }
.panelAsistente > h3 + .listaOpciones { margin-top: 12px; }

.contentSearchTracker.formularioAlta { align-items: flex-start; padding: 22px 24px; }
.formularioAlta .contentSearchTrackerElement { flex: 1 1 200px; }
.formularioAlta .contentTrackerBtn { flex-basis: 100%; }

.tituloFormulario { flex-basis: 100%; margin: 0; font-size: 1.2rem; }

.ayudaFormulario {
    flex-basis: 100%;
    margin: 0;
    font-size: .88rem;
    color: var(--tinta-suave);
    max-width: 90ch;
}

.obligatorio {
    margin-left: 4px;
    font-size: .72rem;
    font-weight: 400;
    color: var(--marca-fuerte);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Fichas del seguimiento: nombre, molecula y, abajo, el codigo y la accion. */
#listaSeguimiento {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

#listaSeguimiento .fichaSeguido { cursor: default; padding-right: 48px; }

.accionesFicha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 12px !important;
}

.enlaceAccion {
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    font: 500 .9rem var(--fuente);
    color: var(--marca-fuerte);
    cursor: pointer;
}

.enlaceAccion::after { content: " \2192"; }
.enlaceAccion:hover { color: var(--marca-hover); text-decoration: underline; }

/* El mismo aspecto de ficha cuando la opcion es un boton (consulta al asistente). */
button.opcionMedicamento {
    appearance: none;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
}

button.opcionMedicamento:focus-visible { outline: 3px solid rgba(17, 191, 196, .55); outline-offset: 2px; }

.panelAsistente .listaOpciones { margin-bottom: 18px; }
.panelAsistente form.contentSearchTracker .contentSearchTrackerElement { flex: 1 1 380px; }

/* Respuesta del asistente */
.respuestaAsistente {
    background: var(--fondo);
    border: 1px solid var(--linea);
    border-radius: var(--radio-ficha);
    padding: 20px 24px;
    margin-top: 16px;
}

.respuestaPregunta {
    font: 500 1.1rem var(--fuente-titulo);
    color: var(--tinta);
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--linea);
}

.respuestaPregunta span {
    display: block;
    font: 500 .72rem var(--fuente);
    color: var(--tinta-suave);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 2px;
}

.respuestaAsistente .rolAnswer { background: none; border: 0; padding: 0; margin: 0; }

/* Prompts */
.formPrompt h3 label { font: inherit; color: inherit; margin: 0; }

.pieFormulario {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    margin-top: 12px;
}

.pieFormulario .promptMeta { margin: 0; }

/* Pagina de error */
.paginaError { text-align: center; }
.paginaError .boton { width: auto; }

.identificadorError { font-size: .85rem; color: var(--tinta-suave); margin-bottom: 22px; }
.identificadorError span { display: block; }
.identificadorError code { color: var(--tinta); font-size: .85rem; word-break: break-all; }

@media (max-width: 700px) {
    .contentSearchTracker.formularioVertical { padding: 18px; }
    .pieFormulario { flex-direction: column; align-items: stretch; }
    .contentSearchTrackerElement.casillas { align-self: stretch; }
    .filaCampos { grid-template-columns: 1fr; }
    .boton { flex: 1 1 auto; }
}

/* Una etiqueta larga (un cambio de titular con dos nombres) parte linea antes
   que desbordar la ficha en movil. */
.etiquetasMedicamento .etiqueta { white-space: normal; max-width: 100%; border-radius: 14px; }

/* --- Administracion ------------------------------------------------------- */

.migas { margin: 0 0 4px; font-size: .88rem; color: var(--tinta-suave); }
.migas a { color: var(--marca-fuerte); text-decoration: none; }
.migas a:hover { text-decoration: underline; }

/* Acciones de una fila de tabla: varios formularios pequenos en linea. */
.accionesFila { white-space: nowrap; text-align: right; }
.accionesFila form { display: inline-block; margin-left: 6px; }

.formularioFila { display: flex; gap: 6px; align-items: center; }
.formularioFila input { min-width: 0; width: 190px; min-height: 34px; padding: 4px 10px; font-size: .88rem; }

.botonFila {
    appearance: none;
    min-height: 34px;
    padding: 4px 12px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-control);
    background: var(--fondo);
    color: var(--marca-fuerte);
    font: 500 .85rem var(--fuente);
    cursor: pointer;
}

.botonFila:hover { background: var(--marca-suave); border-color: var(--marca-fuerte); }
.botonFila.peligro { color: var(--peligro); }
.botonFila.peligro:hover { background: var(--peligro-suave); border-color: var(--peligro); }

/* Cupo de productos del cliente, en "Mis medicamentos". */
.cupoCliente { margin: 6px 0 0; font-size: .92rem; color: var(--tinta-suave); }
.cupoCliente strong { color: var(--tinta); }

/* --- Selector de producto ------------------------------------------------- */

/* Banda bajo el menu: subpaginas a la izquierda, producto a la derecha. */
.menu-paginas-fila { display: flex; align-items: center; gap: 8px 24px; }
.menu-paginas-fila .menu-paginas { flex: 1 1 auto; min-width: 0; }

.cabecera-producto {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    margin-left: auto;
    padding: 6px 0;
}

.cabecera-producto label {
    margin: 0;
    font: 500 .76rem var(--fuente);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tinta-suave);
}

.cabecera-producto select {
    width: auto;
    max-width: 300px;
    min-height: 36px;
    padding-block: 3px;
    border-color: var(--marca-fuerte);
    background-color: var(--fondo);
    color: var(--marca-fuerte);
    font-weight: 500;
    text-overflow: ellipsis;
}

@media (max-width: 900px) {
    .menu-paginas-fila { flex-wrap: wrap; }
    .cabecera-producto { flex: 1 1 100%; margin-left: 0; }
    .cabecera-producto select { flex: 1; max-width: none; min-width: 0; }
}