@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,600;0,700&display=swap');

/* =========================================
   1. VARIABLES DE TEMA (PALETA DE COLORES)
   ========================================= */
:root {
  /* Tonos Principales */
  --brand-orange: #fca34a;
  --brand-orange-hover: #e89138; /* Un tono ligeramente más oscuro para hovers */
  --brand-orange-light: rgba(252, 163, 74, 0.28);
  
  /* Tonos Secundarios y Alertas */
  --brand-green: #9ba75a;
  --brand-red: #740303;
  --bg-alert: rgba(252, 74, 119, 0.28);
  
  --brand-blue: #4f7ea8;

  /* Fondos y Textos */
  --bg-body: #f2f2f2;
  --bg-card: #fff5e6;
  --text-main: #313438;
  --text-muted: gray;
  
  /* Tipografía unificada */
  --font-main: 'Montserrat', sans-serif;
}

/* =========================================
   2. CONFIGURACIÓN BASE
   ========================================= */
body {
    font-family: var(--font-main);
    background: var(--bg-body);
    color: var(--text-main);
}

a, .enlace {
    color: var(--text-main);
    font-weight: 300;
    font-size: 13px;
    text-decoration: none;
}

/* =========================================
   3. TIPOGRAFÍA Y ENCABEZADOS
   ========================================= */
h3, h4 {
    padding: 15px 0 10px 0; 
    text-align: center;
    color: white;
    font-size: 1.3rem;
    font-weight: 700;
}

dl {
    margin-bottom: 1rem;
}

dt {
    /* Antes: bloque verde macizo con texto blanco. Ahora, tinte suave con
       texto verde oscurecido, que da contraste sin pesar tanto en la página. */
    background-color: rgba(155, 167, 90, 0.16);
    font-weight: 600;
    font-size: 1.05rem;
    color: #626b30;
    padding: 0.35rem 0.75rem 0.4rem;
    border-left: 4px solid var(--brand-green);
    border-radius: 0 0.4rem 0.4rem 0;
    margin-bottom: 0.35rem;
}

dt:not(:first-child) {
    margin-top: 0.85rem;
}

dd {
    margin-bottom: 0.5rem;
}

dd, ol, ul {
    padding-left: 1rem;
}

summary {
    color: var(--brand-red);
    font-weight: 700;
    cursor: pointer;
}

/* =========================================
   NN. CABECERA DE TARJETA (.card-header.encabezado)
   ========================================= */
.card-header.encabezado {
    background-color: rgba(252, 163, 74, 0.12);      /* tinte naranja muy leve */
    border-left: 4px solid var(--brand-orange);
    border-bottom: 1px solid rgba(252, 163, 74, 0.35);
    border-radius: 0.45rem 0.45rem 0 0;
    padding: 0.5rem 0.8rem;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.01em;
    color: var(--text-main);
}

.card-header.encabezado[data-bs-toggle]:hover,
.card-header.encabezado[data-bs-toggle]:active { background-color: rgba(252, 163, 74, 0.20); }

/* =========================================
   4. ENCABEZADO PORTADA
   ========================================= */
.encabezadoPortada {
    background: linear-gradient(135deg, #fca34a 0%, #e88922 100%); /* Degradado sutil */
    color: white;
    font-family: var(--font-main);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.4); /* Sombra de texto corregida y funcional */
    font-weight: 900;
    font-size: 2.2rem;
    text-transform: uppercase; /* Letras en mayúscula para mayor presencia */
    padding: 1rem; /* Más espacio interior para respirar */
    border-radius: 0.5rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    margin-bottom: 1.5rem;
    margin-top: 0.5rem;
}

/* =========================================
   5. BOTONES Y CONTROLES
   ========================================= */
.btn-custom {
    font-weight: 700;
    border-radius: 0.5rem;
    transition: all 0.3s ease; /* Suaviza el cambio de color */
    text-align: center;
    cursor: pointer;
}
/* ── Regla compartida de familia ─────────────────────────────────────── */
.botones,
.botonespequenos,
.botoncolapsable {
    background-color: var(--brand-orange);
    color: white;
    border: 2px solid var(--brand-orange);
    font-family: var(--font-main);
    font-weight: 700;
}

/* ── botones (acción principal) ──────────────────────────────────────── */
/* Mismo criterio que .botonespequenos y .ped-indice-chip: al interactuar el
   relleno se INTENSIFICA, nunca se vacía. Vaciarlo dejaba el botón casi
   invisible sobre las tarjetas blancas y, en el WebView de Android, el
   :hover se queda pegado tras el toque: el botón se quedaba en blanco. */
.botones {
    min-width: 9.5rem;
    max-width: 100%;         /* no desborda al meterlo en rejillas de dos columnas */
    margin: 5px;
    padding: 0.55rem 1.2rem;
    font-size: 1.1rem;
    line-height: 1.4;
    border-radius: 0.6rem;
    box-shadow: 0 2px 6px rgba(252, 163, 74, 0.3);
    transition: background-color 0.18s ease, color 0.18s ease,
                border-color 0.18s ease, box-shadow 0.18s ease,
                transform 0.12s ease;
}

.botones:hover,
.botones:focus-visible {
    background-color: var(--brand-orange-hover);
    color: white;
    border-color: var(--brand-orange-hover);
    box-shadow: 0 4px 12px rgba(252, 163, 74, 0.35);
    transform: translateY(-1px);
}

.botones:active {
    transform: translateY(0);
    box-shadow: none;
    background-color: var(--brand-orange-hover);
    color: white;
}

/* ── Anillo de foco común a toda la familia ─────────────────────────── */
/* Un único gesto de foco visible en botones grandes, pequeños y colapsables */
.botones:focus-visible,
.botonespequenos:focus-visible,
.botoncolapsable:focus-visible,
.botonesPortada:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--brand-orange-light),
                0 4px 12px rgba(252, 163, 74, 0.35);
}

/* ── botonesPortada (héroe portada) ─────────────────────────────────── */
.botonesPortada {
    display: block;
    width: 90%;
    margin: 0.65rem auto 0.3rem;
    padding: 0.4rem 1rem;

    /* Tipografía — igual que tenías */
    font-family: var(--font-main);
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: 1px;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);

    /* Aspecto — gradiente sutil en vez de plano */
    background: var(--brand-orange);
    border: 3px solid var(--brand-orange);
    border-radius: 0.95rem;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
                0 6px 16px rgba(252, 163, 74, 0.3);
    transition: background-color 0.18s ease, color 0.18s ease,
                box-shadow 0.18s ease, border-color 0.18s ease,
                transform 0.12s ease;
}

@media (min-width: 360px) {
    .botonesPortada {
        width: 100%;
        max-width: 840px; /* ajustable según lo que se vea bien */
    }
}

.botonesPortada:hover,
.botonesPortada:focus-visible {
    background-color: white;
    color: var(--brand-orange-hover);
    border-color: var(--brand-orange);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.18),
                0 8px 20px rgba(252, 163, 74, 0.3);
    transform: translateY(-2px);
}

.botonesPortada:active {
    background-color: var(--brand-orange-hover);
    color: white;
    border-color: transparent;
    box-shadow: none;
}

/* ── botonespequenos (píldora inline) ───────────────────────────────── */
.botonespequenos {
    padding: 0.45rem 0.7rem;
    margin: 4px 1px;
    /* Antes ponía "1,3rem" (con coma): declaración inválida que el navegador
       descartaba, de modo que un <a> medía 13px y un <button> 16px pese a
       verse iguales. Ahora el tamaño es explícito y único. */
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.4;
    border-radius: 15px;
    background-color: var(--brand-orange-light);
    color: var(--brand-orange-hover);
    border: 1.5px solid var(--brand-orange);
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: background-color 0.18s ease, color 0.18s ease,
                box-shadow 0.18s ease, transform 0.12s ease;
}

.botonespequenos:hover,
.botonespequenos:focus-visible {
    background-color: var(--brand-orange);
    color: white;
    border-color: var(--brand-orange);
    box-shadow: 0 3px 8px rgba(252, 163, 74, 0.35);
    transform: translateY(-1px);
}

.botonespequenos:active {
    transform: translateY(0);
    box-shadow: none;
    background-color: var(--brand-orange-hover);
    color: white;
}

/* ── botoncolapsable (sección desplegable, ancho completo) ───────────── */
.botoncolapsable,
.botoncolapsable2 {
    display: block;
    box-sizing: border-box;
}

.botoncolapsable {
    width: 97%;
    margin: 0.8rem auto;
    padding: 0.65rem 1rem;
    font-size: 1.2rem;
    font-family: var(--font-main);
    font-weight: 700;
    color: white;
    background-color: var(--brand-orange);
    border: 2px solid transparent;
    border-radius: 0.6rem;
    text-align: left;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.14),
                0 5px 14px rgba(252, 163, 74, 0.28);
    transition: background-color 0.18s ease, color 0.18s ease,
                box-shadow 0.18s ease, border-color 0.18s ease,
                transform 0.12s ease;
}

.botoncolapsable:hover,
.botoncolapsable:focus-visible {
    background-color: white;
    color: var(--brand-orange-hover);
    border-color: var(--brand-orange);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.16),
                0 6px 16px rgba(252, 163, 74, 0.28);
    transform: translateY(-1px);
}

.botoncolapsable:active {
    background-color: var(--brand-orange-hover);
    color: white;
    border-color: transparent;
    box-shadow: none;
}

/* ── botoncolapsable2 (subnivel, contorno verde) ─────────────────────── */
.botoncolapsable2 {
    width: 85%;
    margin: 0.5rem auto 0.5rem 2rem;
    padding: 0.5rem 1rem;
    font-family: var(--font-main);
    font-size: 1rem;
    font-weight: 700;
    color: var(--brand-green);
    background-color: white;
    border: 2px solid var(--brand-green);
    border-radius: 0.6rem;
    text-align: left;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.14),
                0 5px 14px rgba(252, 163, 74, 0.28);
    transition: background-color 0.18s ease, color 0.18s ease,
                box-shadow 0.18s ease, border-color 0.18s ease,
                transform 0.12s ease;
}

.botoncolapsable2:hover,
.botoncolapsable2:focus-visible {
    background-color: var(--brand-green);
    color: white;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.16),
                0 6px 16px rgba(252, 163, 74, 0.28);
    transform: translateY(-1px);
}

.botoncolapsable2:active {
    background-color: #8a9450;
    color: white;
    box-shadow: none;
}

.botonesmenulateral {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4em;                               /* espacio entre icono y texto */
    padding: 0.35rem 0.8rem !important;
    border-radius: 999px !important;
    margin: 0 !important;

    background-color: rgba(255,255,255,0.15) !important;
    color: white !important;
    border: 1.5px solid rgba(255,255,255,0.45) !important;

    font-family: var(--font-main);
    font-size: 0.95rem !important;            /* subido respecto a antes */
    font-weight: 600;
    white-space: nowrap;

    transition: background-color 0.18s ease, border-color 0.18s ease,
                transform 0.12s ease !important;
}

/* Icono Bootstrap Icons dentro del botón */
.botonesmenulateral i.bi {
    display: inline-block !important;         /* fuerza visibilidad si Bootstrap lo oculta */
    font-size: 1.1em;
    line-height: 1;
    flex-shrink: 0;
}

.botonesmenulateral-icono {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    flex-shrink: 0;
}

.botonesmenulateral-icono svg {
    width: 1em;
    height: 1em;
    fill: currentColor;   /* hereda el color blanco del botón automáticamente */
    vertical-align: -0.1em;
}

/* =========================================
   BOTONES DEL FOOTER Y SU CONTENIDO
   ========================================= */

/* 1. Los botones (Mitad de la pantalla, alineados a la derecha) */
.botonesfooter {
    display: block; 
    width: 45%; /* Abarca solo la mitad de la página */
    min-width: 180px; /* Evita que sea demasiado pequeño en móviles */
    margin: 0.8rem 1rem 0.8rem auto !important; /* 'auto' a la izquierda lo empuja a la derecha */
    color: var(--text-main);
    background-color: white;
    border: 1px solid var(--brand-orange);
    padding: 10px 16px;
    border-radius: 0.8rem;
    font-weight: 600;
    text-align: right; /* El texto del botón se lee mejor alineado a la derecha en esta posición */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.14),
                0 5px 14px rgba(252, 163, 74, 0.28);
    transition: background-color 0.18s ease, color 0.18s ease,
                box-shadow 0.18s ease, border-color 0.18s ease,
                transform 0.12s ease;
}

.botonesfooter:hover {
    background-color: var(--brand-orange);
    color: white;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.16),
                0 6px 16px rgba(252, 163, 74, 0.28);
    transform: translateY(-1px);
}

/* 2. El contenido desplegable (ARREGLO DE LA ANIMACIÓN BOOTSTRAP) */
/* Al añadir la clase .collapsing, Bootstrap no pierde nuestros estilos durante el efecto de abrir/cerrar */
#footer .collapse .card,
#footer .collapsing .card {
    width: 95%; /* Le damos casi todo el ancho para que el texto y el textarea se puedan leer bien */
    margin: 0 1rem 1.5rem auto; /* Lo mantenemos alineado al margen derecho de los botones */
    padding: 1.2rem; 
    border: none;
    background-color: var(--bg-card); /* Fondo crema suave para distinguirlo del cuerpo */
    border-radius: 0.8rem;
}

/* 3. Estilizamos específicamente el Textarea de 'Mis anotaciones' */
#footer textarea {
    width: 100%; 
    box-sizing: border-box;
    border-radius: 0.5rem;
    padding: 0.8rem;
    border: 1px solid rgba(252, 163, 74, 0.4); 
    background-color: #ffffff;
    color: var(--text-main);
    font-family: inherit; 
    resize: vertical; 
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.03); 
}

/* 4. Le damos un poco de espacio extra al botón de guardar dentro de las notas */
#botonguardarnotas {
    margin-top: 1rem;
}

        /* Estilo para los textos legales y copyright */
        .copyright-text {
            font-size: 0.8rem;
            color: #7f8c8d;
            margin-top: 20px;
        }

        .copyright-text a {
            color: var(--primary);
            text-decoration: none;
            font-weight: bold;
        }
        
        .copyright-text a:hover { text-decoration: underline; }
        .btn-email { display: inline-block; background: var(--primary); color: white; padding: 8px 12px; border-radius: 5px; text-decoration: none; margin-top: 10px; font-weight: bold; }

/* =========================================
   6. CAJAS Y TARJETAS (CARDS)
   ========================================= */
.cajadeinformacion, .cajadeResultados, .cajadeResultadosAlterada {
    margin: 0 auto 10px;
    box-sizing: border-box;
    min-height: 2.2rem;
    border-radius: 7pt;
    padding: 0.5rem 10px;
}

/* Ya no la usan ni la calculadora de perfusiones ni la ficha de farmaco (ambas
   han pasado a .perf-resultado-detalle). Se conserva porque puede quedar en
   contenido de patologias; alineada al criterio actual: fondo apenas tenido y
   ancho completo, en vez del bloque naranja estrecho de antes. */
.cajadeinformacion {
    background-color: #fefcf9;
    max-width: 100%;
    border: 1px dashed var(--brand-orange);
}

/* Resultado de un cálculo. Fondo blanco y franja de color a la izquierda:
   la cifra destaca más que con el relleno naranja y el borde "groove". */
.cajadeResultados {
    background-color: #fefcf9; /* apenas un velo cálido, casi blanco */
    text-align: right;
    color: var(--brand-red);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.3;
    padding: 0.4rem 0.75rem;
    border: 1px solid rgba(252, 163, 74, 0.55);
    border-left: 4px solid var(--brand-orange);
    border-radius: 0.45rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    max-width: 95%;
    /* Cifras de ancho fijo: las columnas de resultados no bailan al recalcular */
    font-variant-numeric: tabular-nums;
}

/* Los resultados de la ficha de fármaco son <input disabled> (el cálculo escribe
   en .value), no <div>. Bootstrap los pinta grises al estar deshabilitados, así
   que hay que devolverles el aspecto de .cajadeResultados. El -webkit-text-fill-color
   es imprescindible: sin él, iOS y el WebView de Android grisan el texto igual. */
input.cajadeResultados,
input.cajadeResultados:disabled,
input.cajadeResultados[readonly] {
    background-color: #fefcf9;
    color: var(--brand-red);
    -webkit-text-fill-color: var(--brand-red);
    opacity: 1;
    border: 1px solid rgba(252, 163, 74, 0.55);
    border-left: 4px solid var(--brand-orange);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    max-width: 100%;
    margin-bottom: 0;
}

/* En la columna estrecha de la ficha, 1,15 rem se sale con valores largos
   ("0,375 µg"): un pelín menos y sigue leyendose de un vistazo. */
@media (max-width: 575.98px) {
    input.cajadeResultados { font-size: 1.05rem; }
}

.cajadeResultadosAlterada {
    background-color: #fdf0f3;
    text-align: left;
    color: var(--text-main);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.3;
    padding: 0.4rem 0.75rem;
    border: 1px solid rgba(214, 51, 132, 0.35);
    border-left: 4px solid #d63384;
    border-radius: 0.45rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    max-width: 95%;
    font-variant-numeric: tabular-nums;
}

/* Buscador del listado de fármacos: se queda fijo bajo la cabecera para poder
   afinar la búsqueda sin volver arriba. La lupa va como SVG embebido (data URI)
   para que siga viendose sin conexión dentro de Cordova. */
.buscador-app,
.buscador-fcos {
    position: sticky;
    top: var(--alto-cabecera, 0px);
    z-index: 6;
    background-color: #f3f0ec;
    padding: 0.5rem 0 0.45rem;
    margin-bottom: 0.25rem;
}

.buscador-app .form-control,
.buscador-fcos .form-control {
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a08a72'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.75rem center;
    background-size: 1rem 1rem;
    padding-left: 2.4rem;
    border: 1px solid rgba(252, 163, 74, 0.45);
    border-radius: 2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    font-size: 0.95rem;
    min-height: 2.6rem;
}

.buscador-app .form-control::placeholder,
.buscador-fcos .form-control::placeholder {
    color: #a49384;
    font-size: 0.85rem;
}

.buscador-app .form-control:focus,
.buscador-fcos .form-control:focus {
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 0.2rem var(--brand-orange-light);
    background-color: #ffffff;
}

/* La X de limpiar de type="search": algo mas grande para el dedo */
.buscador-app .form-control::-webkit-search-cancel-button,
.buscador-fcos .form-control::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 1rem;
    width: 1rem;
    margin-left: 0.3rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a08a72'%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
    background-size: 1rem 1rem;
    cursor: pointer;
}

/* Rejilla del listado de fármacos: columnas de ancho uniforme, de modo que las
   tarjetas de la última fila no se estiren para rellenar el hueco sobrante. */
.rejilla-fcos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

@media (max-width: 380px) {
    .rejilla-fcos { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
}

/* La regla general .card {margin-bottom} va más abajo en la hoja y ganaría por
   orden, así que el reinicio se hace con un selector más específico: dentro de
   la rejilla el hueco lo pone gap, no los márgenes. */
.rejilla-fcos .card { margin-bottom: 0; }

.tarjetafco {
    margin: 0;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 3px solid var(--brand-orange-light);
    min-height: 3.4rem;
    padding: 0.5rem 0.4rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.tarjetafco:hover {
    transform: translateY(-2px); /* Pequeño efecto de elevación moderno */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-bottom-color: var(--brand-orange);
}

/* Respuesta al toque en móvil, donde no hay :hover */
.tarjetafco:active {
    transform: translateY(0);
    background-color: var(--bg-card);
    border-bottom-color: var(--brand-orange);
}

.tarjetafco-body {
    text-align: center;
    padding: 0;
    margin-bottom: 0;
}

/* Principio activo: es lo que se busca de un vistazo, así que va en negrita */
.tarjetafco .card-title {
    text-align: center;
    padding: 0;
    margin-bottom: 0;
    white-space: normal;
    word-break: break-word;
    text-transform: uppercase;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-main);
}

.nombrecomercial {
    text-transform: capitalize;
    font-size: 0.85rem;
    text-wrap: balance;
    margin-top: 1rem; /* Aquí le damos el respiro visual en la parte superior */
    display: block; 
    color: var(--text-muted); /* Opcional: un gris sutil le da un toque elegante */
}

/* Dentro de la tarjeta del listado el nombre comercial es un subtítulo pequeño,
   sin el margen superior que necesita en la cabecera de la ficha. */
.tarjetafco .nombrecomercial {
    margin-top: 0.2rem;
    margin-bottom: 0;
    font-size: 0.72rem;
    line-height: 1.15;
    white-space: normal;
}
.tarjetafco .nombrecomercial:empty { display: none; }

.cajadeinformacionFCOS {
    margin: 0 0 10px auto;
    box-sizing: border-box;
    min-height: 2.2rem;
    border-radius: 7pt;
    padding: 0.5rem 5px;
    /* background-color: rgb(248, 231, 200); */
    max-width: 50%;
    /* border: 1px dashed var(--brand-orange); */
}

/* =========================================
   Resultado de Calculadoras
   ========================================= */

.tituloResultados, .indicaciones{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: bold;
    color:gray;
    font-size: 1.2rem;  
}

/* =========================================
   7. NAVEGACIÓN Y COMPONENTES BOOTSTRAP
   ========================================= */

/* CONTENEDOR DE LAS PESTAÑAS */
.nav-tabs {
    border-bottom: 2px solid var(--brand-orange); /* Línea base sólida que une todas las pestañas */
    margin-bottom: 0; /* Asegura que la pestaña activa se fusione con el contenido */
}

/* PESTAÑAS (Estado normal / Inactivo) */
.nav-link {
    font-size: 1.1rem;
    padding: 0.6rem 1.2rem;
    color: var(--text-muted); /* Texto gris */
    font-weight: 700;
    font-family: var(--font-main);
    
    background-color: #e9ecef !important; /* Fondo gris claro típico de pestaña inactiva */
    border: 1px solid #dee2e6 !important; /* Borde sutil gris */
    border-bottom: none !important; /* El borde inferior lo pone el contenedor .nav-tabs */
    
    border-radius: 8px 8px 0 0 !important; /* Bordes redondeados solo arriba */
    transition: background-color 0.3s ease, color 0.3s ease;
    margin-bottom: -2px !important; /* Tira de la pestaña hacia abajo para tapar la línea del nav-tabs cuando esté activa */
}

/* ESPACIADO ENTRE PESTAÑAS */
.nav-item {
    margin: 0 4px 0 0 !important; /* Pequeña separación entre las pestañas a la derecha */
}

/* EFECTO HOVER (Al pasar el ratón) */
.nav-link:hover, .nav-link:focus {
    color: var(--text-main);
    background-color: var(--brand-orange-light) !important; /* Un naranja muy suavecito */
    border-color: var(--brand-orange) !important; 
    border-bottom: none !important;
}

/* PESTAÑA ACTIVA */
.nav-link.active {
    background-color: var(--brand-orange) !important; /* Fondo naranja principal */
    color: white !important; /* Texto en blanco para alto contraste */
    border-color: var(--brand-orange) !important; /* Borde naranja */
    border-bottom: 2px solid var(--brand-orange) !important; /* Tapa la línea gris del contenedor nav-tabs */
}

/* ACORDEONES BOOTSTRAP */
.accordion-button {
    font-style: italic; 
    font-size: 1.1rem;
    font-weight: 600; /* Un poco más de peso a la fuente para que destaque */
}

.accordion-button:not(.collapsed) {
    color: var(--text-main);
    background-color: rgb(240, 234, 223);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
}

/* SWITCHES (Botones de on/off) */
.form-switch .form-check-input:checked {
    background-color: var(--brand-orange);
    border-color: var(--brand-orange);
}

/* CAMPOS DE FORMULARIO DESHABILITADOS (Como los de resultados) */
.form-control:disabled, .form-control[readonly] {
    background-color: #f8e7c8; /* Fondo cremita */
    border-radius: 10px;
    margin: 4px 4px;
    text-align: right;
    font-weight: 700;
    color: var(--brand-red); /* Usamos tu variable roja */
    font-size: 1.2rem;
    opacity: 1; /* Necesario en Bootstrap para que no lo ponga semitransparente */
}

/* SEPARACIÓN DEL MENÚ PRINCIPAL (El que está en el header) */
#elementosnavegador {
    gap: 0.8rem; 
    justify-content: center; 
    padding-bottom: 0.5rem; 
}

/* =========================================
   NN. ACORDEÓN SEGUNDO NIVEL (sangrado responsive)
   ========================================= */
.acordeon-nivel2 {
    margin-left: 2.5rem;
    margin-right: 3rem;
}

@media (max-width: 575.98px) {
    .acordeon-nivel2 {
        margin-left: 0.4rem;
        margin-right: 0.4rem;
        padding: 0.6rem !important; /* reduce el padding de .card-body de Bootstrap (1rem) */
    }

    /* La card interna anidada también acumula su propio padding de 1rem */
    .acordeon-nivel2 > .card > .card-body {
        padding: 0.6rem;
    }
}

/* =========================================
   8. IMÁGENES Y MODALES
   ========================================= */

/* 1. Efecto en las imágenes normales antes de hacer clic */
.img-fluid, .carrusel {
    max-width: 80%;
    height: auto;
    border-radius: 0.5rem;
    cursor: pointer; /* Indica que se puede hacer clic */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.img-fluid:hover, .carrusel:hover {
    transform: scale(1.03); /* Pequeño zoom al pasar el ratón */
    box-shadow: 0 6px 12px rgba(0,0,0,0.15); /* Sombra para dar relieve */
}

/* 2. Fondo del Modal */
.modal {
    background-color: rgba(0, 0, 0, 0.85); 
    backdrop-filter: blur(5px); 
    animation: zoom 0.3s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 3. Imagen DENTRO del Modal y su efecto Zoom */
/* =========================================
.modal img {
    height: auto;
    max-width: 90%;
    border-radius: 0.5rem;
    transition: transform 0.4s ease; /* Transición suave para el zoom */
/* =========================================
}

.modal img:hover {
    transform: scale(1.1); /* Agranda la imagen un 10% al poner el ratón encima */
    /* =========================================
    cursor: zoom-in; /* Cambia el cursor a una lupa */
    /* =========================================
}
   ========================================= */
.modal img {
    height: auto;
    max-width: 90%;
    border-radius: 0.5rem;
    /* sin transition ni hover transform: el JS gestiona todo */
}

@supports(object-fit: cover){
    .modal img {
      max-height: 90vh;
      object-fit: contain; 
    }
}

/* Animación inicial de apertura del modal */
@keyframes zoom {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* =========================================
   BOTONES DE CONTROL DEL MODAL (Recuperados)

.closeBtn, .prev, .next {
    cursor: pointer;
    position: absolute;
    color: var(--text-main);
    background-color: var(--bg-card);
    font-weight: bold;
    transition: 0.3s ease;
    border-radius: 0.6rem;
    user-select: none;
    z-index: 1050;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.closeBtn {
    top: 15px;
    right: 25px;
    font-size: 35px;
    padding: 0 15px 5px 15px; /* Ajuste para centrar la X */
/*
}

.prev, .next {
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    padding: 16px;
}

.prev { left: 10px; }
.next { right: 10px; }

.closeBtn:hover, .prev:hover, .next:hover {
    color: black;
    background-color: var(--brand-orange); 
    transform: scale(1.1) translateY(-45%); /* Mantiene el centrado vertical en prev/next */
    /*
}
.closeBtn:hover {
    transform: scale(1.1); /* El botón de cerrar no necesita el ajuste Y */
    /*
}
   ========================================= */
.closeBtn, .prev, .next {
    cursor: pointer;
    color: var(--text-main);
    background-color: var(--bg-card);
    font-weight: bold;
    transition: 0.3s ease;
    border-radius: 0.6rem;
    user-select: none;
    z-index: 1050;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    border: none;
    touch-action: manipulation;
}

.closeBtn {
    font-size: 28px;
    padding: 0 14px 4px 14px;
    align-self: flex-end;  /* se pega a la derecha dentro del flex column */
    margin: 8px 8px 0 0;
}

.prev, .next {
    font-size: 22px;
    padding: 14px 18px;
}

.closeBtn:hover, .prev:hover, .next:hover {
    color: black;
    background-color: var(--brand-orange);
    transform: scale(1.1);
}

.tituloImagen {
    cursor: pointer;
    position: fixed;
    text-align: center;
    bottom: 2%;
    width: auto;
    padding: 10px 20px;
    color: var(--text-main);
    background-color: var(--bg-card);
    font-weight: bold;
    font-size: 18px;
    transition: 0.3s ease;
    border-radius: 0.6rem;
    z-index: 1050;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.tituloImagen:hover {
    background-color: var(--brand-orange); 
    transform: scale(1.05);
}

/* =========================================
   9. ALGORITMOS (Soporte Vital / Ahogamiento)
   ========================================= */
.algoritmo {
    max-width: 1000px;
    margin: 2rem auto;
}

.bloque {
    text-align: center;
    padding: 14px;
    margin: 10px auto;
    border-radius: 8px;
    background: #ffffff;
    width: 95%;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Sombra más profesional */
    border: 1px solid #eaeaea;
}

.critico { background: #ffe0e0; font-weight: bold; border-color: #ffb3b3; }
.desfibrilable { background: #ffd6d6; border: 2px solid #cc0000; }
.no-desfibrilable { background: #dce8ff; border: 2px solid #0044cc; }

.ramas {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    gap: 40px;
}

.rama {
    flex: 1;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

.flecha {
  text-align: center;
  font-size: 26px;
  margin: 5px 0;
}

.tituloSVA {
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 16px;
}

.ciclo {
  margin-top: 15px;
  padding: 10px;
  background: white;
  border-radius: 6px;
  border: 1px dashed #999;
}

.loop {
  text-align: center;
  font-size: 14px;
  margin-top: 10px;
  font-style: italic;
}

.revaluar {
  text-align: center;
  margin-top: 30px;
  font-weight: bold;
}



/* =========================================
   10. UTILIDADES VARIAS
   ========================================= */
.contadorPuntos {
    position: fixed;
    top: 10%;
    right: 5%;
    min-width: 3rem;
    height: 3rem;
    border-radius: 50%; /* Más moderno como burbuja flotante */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    background-color: var(--brand-orange);
    color: white;
    /*box-shadow: 0 4px 10px rgba(252, 163, 74, 0.4);*/
        color: white;
    
    /* SOLUCIÓN: Anillo blanco para separarlo visualmente de fondos del mismo color */
    border: 2px groove rgba(252, 163, 74, 0.66); 
    
    /* SOLUCIÓN: Sombra gris oscura en lugar de naranja para que genere contraste y elevación real */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
    z-index: 1050; /* Z-index de Bootstrap para que quede por encima de modales si es necesario */
}

.tablafijo {
    position: sticky;
    left: 0;
    background-color: white; /* Necesario para que al hacer scroll el texto de atrás no se mezcle */
    z-index: 2;
}

.quemaduraslund path {
    fill: #fca34a ;
    stroke:#613a1b ;
    stroke-width:2px ;
    stroke-linecap:butt;
    stroke-linejoin:miter;
    stroke-opacity:1
}

.quemaduraslund :hover {
    fill: #f53535 ;
}

.quemaduraslund :active {
    fill: #f53535;
}

/* Valores de tabla por encima/por debajo de un rango de referencia (p. ej. comparación con el plasma).
   Colores discretos: solo texto, sin fondo, para no romper el golpe de vista de la tabla. */
.valor-alto-plasma {
    color: var(--brand-orange-hover);
    font-weight: 600;
}
.valor-bajo-plasma {
    color: var(--brand-blue);
    font-weight: 600;
}

.table td.valor-alto-plasma {
    color: var(--brand-orange-hover);
    font-weight: 600;
}
.table td.valor-bajo-plasma {
    color: var(--brand-blue);
    font-weight: 600;
}
.table > tbody > tr.fila-referencia-plasma > * {
    background-color: var(--bg-card);
}
/* Centrado vertical de todas las celdas; el horizontal solo para las columnas de datos.
   La primera columna (nombre del cristaloide) se mantiene alineada a la izquierda. */
.tabla-cristaloides td,
.tabla-cristaloides th {
    vertical-align: middle;
    text-align: center;
}

.tabla-cristaloides th:first-child,
.tabla-cristaloides td:first-child {
    text-align: left;
}
/* =========================================
   11. COMPORTAMIENTO DEL HEADER Y CONTAINERS
   ========================================= */

/* La cabecera es fija y su alto se mide en vigilarAlturaCabecera()
   (scriptgenerales.js) para colocar debajo el resto de barras pegajosas.
   Cuanto mas alta sea, menos pantalla util queda: los rellenos van justos. */
header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: var(--bg-body); 
    padding-top: 4px;
    padding-bottom: 4px;
    /* Añade esto para evitar que el contenido se solape visualmente */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
}

/* El relleno vertical lo pone el contenedor naranja de dentro, no la <nav>:
   asi no se suman dos rellenos y la cabecera no crece de mas. */
header .navbar {
    padding-top: 0;
    padding-bottom: 0;
}

/* Asegúrate de que el iframe sea responsive */
iframe {
    max-width: 100%;
    background: white;
}

/* 2. El container del cuerpo (Fondo casi imperceptible) */
.container-sm {
    /* Usamos el color naranja pero con una opacidad de solo el 4% */
    background-color: rgba(252, 163, 74, 0.04); 
    border-radius: 0.8rem;
    padding: 1rem;
}

@media (max-width: 575.98px) {
    .container-sm {
        --bs-gutter-x: 0.5rem;
        padding: 0.4rem;
    }
}

/* 3. El container específico del Header (Naranja fuerte) */
header .container-sm {
    background-color: var(--brand-orange); /* Naranja sólido */
    padding: 0.75rem 1.1rem;
    border-radius: 0.8rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* Sombra para darle relieve sobre el cuerpo */
}

/* Con el menu desplegado si hace falta separar los enlaces del titulo */
header .navbar-collapse.show,
header .navbar-collapse.collapsing {
    margin-top: 0.35rem;
}

.card {
    margin-bottom: 0.45rem;
}

.icono-toggle-autor { transition: transform 0.2s ease; }
.tl-toggle-autor[aria-expanded="true"] .icono-toggle-autor { transform: rotate(90deg); }

/* =========================================
   12. CAJA GRUPOS FARMACOLÓGICOS
   ========================================= */
/* Franja compacta y pegajosa: al desplazar el listado, el nombre del grupo se
   queda justo debajo de la cabecera de la app (--alto-cabecera la mide
   ajustarOffsetCabecera(), en farmacos.js) para saber siempre dónde se está. */
.cajagruposfarmacologicos {
    position: sticky;
    top: calc(var(--alto-cabecera, 0px) + var(--alto-buscador, 0px));
    z-index: 5;
    background-color: #ffffff;
    text-align: left;
    margin: 0.9rem 0 0.5rem 0;
    width: 100%;
    border-left: 5px solid var(--brand-orange);
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-main);
    padding: 0.45rem 0.75rem;
    font-size: 0.92rem;
    line-height: 1.25;
    cursor: default;
    display: flex;
    align-items: center;
}

.subgrupo-farmacologico-label {
	width: 100%;
	grid-column: 1 / -1; /* ocupa la fila completa dentro de .rejilla-fcos */
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-muted);
	padding: 0.4rem 0.25rem 0.15rem;
	border-bottom: 1px solid rgba(0,0,0,0.08);
}
.subgrupo-farmacologico-label:first-child {
	padding-top: 0;
}

/* =========================================
   4. BOTONES COLAPSABLES (Apilados verticalmente)
   ========================================= */


/* =========================================
   Estilos para las alertas de embarazo tipo PLLR
   ========================================= */

.alerta-embarazo {
    padding: 10px;
    margin: 15px 0;
    border-radius: 6px;
    font-size: 0.95em;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
}

.alerta-embarazo strong {
    margin-bottom: 5px;
    font-size: 1.05em;
}

/* Colores según el riesgo */
.riesgo-bajo {
    background-color: #e8f5e9;
    border-left: 5px solid #4caf50;
    color: #1b5e20;
}

.riesgo-medio {
    background-color: #fff3e0;
    border-left: 5px solid #ff9800;
    color: #e65100;
}

.riesgo-alto {
    background-color: #ffebee;
    border-left: 5px solid #f44336;
    color: #b71c1c;
}

.contraindicado {
    background-color: #b71c1c;
    border: 2px solid #ff5252;
    color: #ffffff;
    text-align: left;
    text-transform: uppercase;
}

/* =========================================
   CONTENEDOR DE SUEROS Y PANEL DESPLEGABLE (MÓVIL FRIENDLY)
   ========================================= */
.contenedor-sueros {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 5px;
    font-size: 0.9em;
    width: 100%;
}

/* Badges (Se mantienen igual) */
.badge-suero {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.badge-suero svg { width: 12px; height: 12px; }
.badge-ssf { background-color: #e3f2fd; color: #1565c0; border: 1px solid #90caf9; }
.badge-sg { background-color: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }
.badge-rl { background-color: #f1f8e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.badge-generico { background-color: #f5f5f5; color: #616161; border: 1px solid #e0e0e0; }

/* Icono clicable para Android/iOS */
.icono-info-sueros {
    display: inline-flex;
    align-items: center;
    color: var(--brand-orange);
    cursor: pointer;
    margin-left: 4px;
    padding: 4px; /* Área táctil más grande para el dedo */
    border-radius: 50%;
    transition: background-color 0.2s;
}

.icono-info-sueros:active {
    background-color: var(--brand-orange-light);
}

.icono-info-sueros svg {
    width: 20px;
    height: 20px;
}

#sueroscompatibles {
    list-style-type: none !important; /* ¡Esto fulmina el punto negro! */
    padding-left: 0 !important;       /* Quita el hueco fantasma que deja el punto al desaparecer */
    margin-left: 0 !important;
}

/* Panel oculto que se despliega hacia abajo */
.panel-nota-sueros {
    display: none; /* Oculto por defecto */
    width: 100%;
    background-color: #fff;
    border-left: 4px solid var(--brand-orange);
    padding: 10px 12px;
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--text-main);
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    animation: aparecerSuave 0.2s ease-out;
}

/* Clase que se activa con JS para mostrarlo */
.panel-nota-sueros.mostrar {
    display: block;
    text-align: left;
}

@keyframes aparecerSuave {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   DISEÑO SUAVE PARA PANELES ENROLLABLES (COLLAPSE)
   ========================================= */

/* Botón redondo de icono. Tamaño fijo de 2,25rem: cumple el mínimo táctil
   y evita que el padding de .btn de Bootstrap lo deforme. */
.btn-enrollable {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    line-height: 1;
    border-radius: 50%;
    vertical-align: middle;
    transition: background-color 0.18s ease, border-color 0.18s ease,
                box-shadow 0.18s ease, transform 0.12s ease;
}

.btn-enrollable:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}
.btn-enrollable:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Evitamos el anillo azul/negro feo que pone Bootstrap por defecto al hacer clic */
.btn-enrollable:focus {
    box-shadow: 0 0 0 0.25rem var(--brand-orange-light) !important;
}

/* Modificamos la tarjeta (card) de Bootstrap para hacerla más limpia */
.panel-enrollable-suave {
    border: none;
    border-left: 4px solid var(--brand-orange); /* Usamos el color de tu tema */
    border-radius: 6px;
    background-color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    padding: 12px 16px;
    margin-top: 8px;
    color: var(--text-main);
}

/* Animación extra para el texto interior cuando el panel se abre */
.collapse.show .panel-enrollable-suave {
    animation: fadeInSuave 0.4s ease-out;
}

@keyframes fadeInSuave {
    0% { opacity: 0; transform: translateY(-4px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* =========================================
   BOTÓN DE INFORMACIÓN SUAVE (Sustituye al rojo agresivo)
   ========================================= */
.boton-info-amigable {
    background-color: var(--bg-card); /* Fondo crema muy suave de tu tema */
    border: 1px solid rgba(252, 163, 74, 0.45);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Efecto al pasar el ratón por el botón nuevo */
.boton-info-amigable:hover,
.boton-info-amigable:focus-visible {
    background-color: var(--brand-orange-light);
    border-color: var(--brand-orange);
}

/* Panel abierto: el botón queda relleno, para saber de un vistazo cuál está
   desplegado cuando hay varios iconos de información en la misma pantalla. */
.boton-info-amigable[aria-expanded="true"] {
    background-color: var(--brand-orange);
    border-color: var(--brand-orange);
    box-shadow: none;
}

/* Suavizamos el icono SVG para que no sea un negro/color tan puro y agresivo */
.icono-suave {
    opacity: 0.7; /* Lo hace ligeramente translúcido */
    width: 18px;
    height: 18px;
    transition: opacity 0.2s ease, filter 0.2s ease;
}

/* Al pasar el ratón, el icono recupera su color fuerte */
.boton-info-amigable:hover .icono-suave,
.boton-info-amigable:focus-visible .icono-suave {
    opacity: 1;
}

/* El icono es un <img>, así que se pasa a blanco con filtro, no con color */
.boton-info-amigable[aria-expanded="true"] .icono-suave {
    opacity: 1;
    filter: brightness(0) invert(1);
}

/* =========================================
   ADAPTACIÓN MÓVIL Y ALERTAS PLEGABLES (PLLR)
   ========================================= */

/* 1. Cuando la pantalla sea menor a 768px (Móviles y Tablets pequeñas)... */
@media (max-width: 768px) {
    .cajadeinformacionFCOS {
        max-width: 100% !important; /* Ocupa todo el ancho */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* 2. Estilos para el desplegable nativo de la alerta de embarazo */
details.pllr-plegable {
    padding: 8px 10px;
    cursor: pointer;
    text-align: left; /* Evitamos que el texto herede el text-end del contenedor */
    transition: all 0.3s ease;
}

/* La cabecera del desplegable (Lo que siempre se ve) */
details.pllr-plegable summary {
    outline: none;
    font-size: 0.95rem;
    list-style: none; /* Oculta la flecha fea por defecto del navegador */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Empuja la flecha a la derecha */
}

/* Oculta la flecha nativa en navegadores como Safari/Chrome antiguo */
details.pllr-plegable summary::-webkit-details-marker {
    display: none; 
}

/* Nuestra propia flecha animada y profesional */
details.pllr-plegable summary::after {
    content: "▼";
    font-size: 0.8rem;
    margin-left: 10px;
    transition: transform 0.2s ease;
    opacity: 0.6;
}

/* Cuando el desplegable está abierto, giramos la flecha */
details[open].pllr-plegable summary::after {
    transform: rotate(180deg);
}

/* El texto interior del diccionario PLLR */
.pllr-contenido {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.1); /* Línea separadora sutil */
    font-size: 0.85rem;
    line-height: 1.4;
    font-weight: 400;
}

/* =========================================
   GRÁFICO DEL CUADRADO DE PEARSON (MEZCLAS)
   ========================================= */
.contenedor-pearson {
    position: relative;
    width: 100%;
    max-width: 450px; /* Tamaño máximo para que no quede gigante en PC */
    margin: 20px auto;
    padding: 20px;
    background-color: var(--bg-card); /* Fondo crema de tu tema */
    border: 1px dashed var(--brand-orange);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.titulo-pearson {
    text-align: center;
    font-weight: 700;
    color: var(--brand-orange);
    margin-bottom: 25px;
    font-size: 0.95rem;
    text-transform: uppercase;
}

.cuadrado-pearson {
    position: relative;
    width: 100%;
    height: 150px; /* Altura fija para mantener la proporción de la cruz */
}

/* La 'X' dibujada con SVG de fondo */
.cuadrado-pearson::before {
    content: "";
    position: absolute;
    top: 0; left: 10%; right: 10%; bottom: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 100 100"><line x1="0" y1="0" x2="100" y2="100" stroke="%23fca34a" stroke-width="2" stroke-dasharray="4" /><line x1="0" y1="100" x2="100" y2="0" stroke="%23fca34a" stroke-width="2" stroke-dasharray="4" /></svg>');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    opacity: 0.5;
}

/* Nodos (Círculos con los valores) */
.nodo-pearson {
    position: absolute;
    background-color: white;
    border: 2px solid var(--brand-orange);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: center;
    min-width: 65px;
}

/* Posicionamiento de las esquinas */
.nodo-top-left { top: -10px; left: 0; border-color: #e57373; color: #d32f2f; } /* Suero fuerte (Rojo) */
.nodo-bottom-left { bottom: -10px; left: 0; border-color: #64b5f6; color: #1976d2; } /* Suero débil (Azul) */
.nodo-top-right { top: -10px; right: 0;  border-color: #e57373; color: #d32f2f;}
.nodo-bottom-right { bottom: -10px; right: 0; border-color: #64b5f6; color: #1976d2; }

/* Nodo central (El suero deseado) */
.nodo-centro {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--brand-orange);
    color: white;
    border-color: #fff;
    font-size: 1rem;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* =========================================
   13. TIMELINE SECUENCIAL (timeline-ee)
   Usado en: CONVULSIONESADULTO, SVANEONATOS, PROCESOTRAUMA
   ========================================= */

/* Contenedor raíz */
.timeline-ee {
  position: relative;
  padding: 0.5rem 0;
}

/* Cada fila (badge + contenido) */
.tl-step {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-start;
  margin-bottom: 0.25rem;
}

/* Badge de hito: tamaño intrínseco, nunca se estira */
.tl-tiempo {
  max-width: fit-content;   /* ← evita que ocupe todo el ancho en column */
  min-width: 4.5rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.3rem 0.6rem;
  border-radius: 0.4rem;
  line-height: 1.2;
  background: #6c757d;
  color: #fff;
  flex-shrink: 0;
}

/* Colores estándar de línea (convulsiones, SVA neonatal) */
.tl-linea1 .tl-tiempo { background: #0d6efd; }
.tl-linea2 .tl-tiempo { background: #fd7e14; }
.tl-linea3 .tl-tiempo { background: #dc3545; }

/* Colores X-ABCDE (valoración primaria trauma) */
.tl-linea-x .tl-tiempo { background: #6f1d1b; }
.tl-linea-a .tl-tiempo { background: #0d6efd; }
.tl-linea-b .tl-tiempo { background: #0dcaf0; color: #000; }
.tl-linea-c .tl-tiempo { background: #dc3545; }
.tl-linea-d .tl-tiempo { background: #fd7e14; }
.tl-linea-e .tl-tiempo { background: #198754; }

/* Caja de contenido */
.tl-contenido {
  width: 100%;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.4rem;
  padding: 0.5rem 0.75rem;
  text-align: justify;
}
.tl-contenido ul {
  margin-bottom: 0;
  padding-left: 1.2rem;
}
.tl-contenido ul li {
  margin-bottom: 0.25rem;
}

/* Flechas de progreso */
.tl-flecha {
  text-align: center;
  color: #6c757d;
  font-size: 0.85rem;
  margin: 0.2rem 0;
  padding-left: 0;
}

/* Notas al pie de cada paso */
.tl-nota {
  font-size: 1rem;
  color: #5d6368;
  margin: 0.25rem 0 0.4rem;
}

/* Bifurcaciones (SVA neonatal) */
.tl-bifurcacion {
  margin-left: 0.5rem;
  border-left: 2px dashed var(--bs-border-color, #dee2e6);
  padding-left: 0.5rem;
}
.tl-bifurcacion-no  { background: #dc3545; }
.tl-bifurcacion-si  { background: #198754; }

/* Layout en pantallas ≥ 480px: badge a la izquierda, contenido al lado */
@media (min-width: 480px) {
  .tl-step {
    flex-direction: row;
    align-items: flex-start;
  }
  .tl-tiempo {
    margin-top: 0.15rem;
  }
  .tl-flecha {
    padding-left: 5.25rem;
  }
  .tl-bifurcacion {
    margin-left: 5.75rem;
    padding-left: 0.75rem;
  }
}

/* =========================================
   14. BADGES DE PRIORIDAD Y CAJA DE CONTACTO
   Usado en: APOYO_PSICOLOGICO_CES061
   ========================================= */
.badge-prioridad {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.78rem;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.badge-muyalta   { background-color: #b02a37; }
.badge-alta      { background-color: #fd7e14; }
.badge-mediaalta { background-color: #c9a227; }
.badge-media     { background-color: #6c757d; }

.caja-contacto {
  background: var(--brand-blue);
  color: #fff;
  border-radius: 0.4rem;
  padding: 0.5rem 0.75rem;
}

/* ── Contenedor wizard ── */
        #ari-wizard { font-family: var(--font-main); max-width: 520px; margin: 0 auto; }

        /* ── Miga de pan ── */
        .ari-breadcrumb {
          display: flex; flex-wrap: wrap; gap: 0.2rem; align-items: center;
          background: var(--brand-orange-light); border-radius: 6px;
          padding: 0.4rem 0.7rem; margin-bottom: 0.75rem; font-size: 0.75rem;
        }
        .ari-crumb { color: var(--brand-red); font-weight: 600; }
        .ari-crumb-sep { color: var(--text-muted); padding: 0 0.15rem; }

        /* ── Pasos ── */
        .ari-paso { display: none; animation: ariFadeIn 0.25s ease; }
        .ari-paso.activo { display: block; }

        /* ── Pregunta ── */
        .ari-pregunta {
          text-align: center; font-weight: 700; font-size: 1rem;
          color: var(--brand-red); margin-bottom: 1rem; line-height: 1.4;
        }
        .ari-pregunta small { font-weight: 400; color: var(--text-muted); font-size: 0.8rem; }

        /* ── Botones ── */
        .ari-botones {
          display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap;
          margin-bottom: 0.5rem;
        }
        .ari-botones-3 { gap: 0.4rem; }

        .ari-btn {
          flex: 1; min-width: 120px; max-width: 200px;
          border: 2px solid transparent; border-radius: 10px;
          padding: 0.6rem 0.8rem; font-family: var(--font-main);
          font-size: 0.88rem; font-weight: 700; cursor: pointer;
          transition: transform 0.12s, box-shadow 0.12s;
          line-height: 1.3;
        }
        .ari-btn:active { transform: scale(0.96); }
        .ari-btn-si {
          background: #e8f5e9; border-color: #43a047; color: #2e7d32;
        }
        .ari-btn-si:hover { background: #c8e6c9; box-shadow: 0 2px 8px rgba(67,160,71,0.3); }
        .ari-btn-no {
          background: #ffebee; border-color: #e53935; color: #b71c1c;
        }
        .ari-btn-no:hover { background: #ffcdd2; box-shadow: 0 2px 8px rgba(229,57,53,0.3); }
        .ari-btn-neu {
          background: #fff8e1; border-color: var(--brand-orange); color: #e65100;
        }
        .ari-btn-neu:hover { background: #ffe082; box-shadow: 0 2px 8px rgba(252,163,74,0.3); }

        /* ── Resultados ── */
        .ari-resultado { display: none; animation: ariFadeIn 0.3s ease; text-align: center; padding: 0.5rem; }
        .ari-resultado.activo { display: block; }

        .ari-resultado-icono { font-size: 2rem; margin-bottom: 0.3rem; }

        .ari-resultado-titulo {
          font-size: 1.25rem; font-weight: 900; border-radius: 10px;
          padding: 0.5rem 1rem; margin: 0 auto 0.4rem; display: inline-block;
        }
        .cd-prox  { background: #ffebee; color: #b71c1c; border: 2px solid #e53935; }
        .cd-dist  { background: #fce4ec; color: #880e4f; border: 2px solid #d81b60; }
        .cx       { background: #fff3e0; color: #e65100; border: 2px solid var(--brand-orange); }
        .da-prox  { background: #e3f2fd; color: #0d47a1; border: 2px solid #1e88e5; }
        .da-dist  { background: #e8eaf6; color: #283593; border: 2px solid #3949ab; }
        .indet    { background: #f3e5f5; color: #6a1b9a; border: 2px solid #8e24aa; }

        .ari-resultado-subtitulo {
          font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.6rem;
        }
        .ari-resultado-criterios {
          text-align: left; font-size: 0.85rem; margin: 0.5rem auto 0;
          max-width: 380px; padding-left: 1.4rem;
        }
        .ari-resultado-criterios li { margin-bottom: 0.2rem; }

        @keyframes ariFadeIn {
          from { opacity: 0; transform: translateY(6px); }
          to   { opacity: 1; transform: translateY(0); }
        }


/* =========================================
   15. EVALUACIÓN PEDIÁTRICA (TEP / ABCDE)
   Usado en: TEPEVPEDIATRICO, ABCDEPEDIATRICO
   ========================================= */

/* Colores de lado del TEP (reutilizados en toda la sección) */
:root {
  --tep-a: #0d6efd;   /* Apariencia   */
  --tep-r: #198754;   /* Respiración  */
  --tep-c: #dc3545;   /* Circulación  */
}

/* ── Chips de claves de la introducción ───────────────────────────────── */
.tep-claves {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin: 0.75rem auto 0.25rem;
}
.tep-clave {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--bg-card);
  border: 1px solid var(--brand-orange);
  border-left: 5px solid var(--brand-orange);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: var(--text-main);
}
.tep-clave > svg { flex-shrink: 0; color: var(--brand-orange); }
.tep-clave span { display: flex; flex-direction: column; line-height: 1.25; }
.tep-clave b { font-size: 0.95rem; font-weight: 700; }
.tep-clave small { font-size: 0.78rem; color: var(--text-muted); }
.tep-clave-no { border-color: var(--brand-red); border-left-color: var(--brand-red); }
.tep-clave-no > svg { color: var(--brand-red); }

@media (min-width: 620px) {
  .tep-claves { grid-template-columns: repeat(3, 1fr); }
}

/* ── Triángulo principal ──────────────────────────────────────────────── */
.tep-hero { margin: 0.5rem auto 1rem; }

.tep-triangulo {
  display: block;
  width: 100%;
  max-width: 330px;
  height: auto;
  margin: 0 auto;
}
.tep-lado { stroke-width: 15; stroke-linecap: round; }
.tep-lado-a { stroke: var(--tep-a); }
.tep-lado-r { stroke: var(--tep-r); }
.tep-lado-c { stroke: var(--tep-c); }

.tep-nodo { stroke: #fff; stroke-width: 3; }
.tep-nodo-a { fill: var(--tep-a); }
.tep-nodo-r { fill: var(--tep-r); }
.tep-nodo-c { fill: var(--tep-c); }

.tep-nodo-letra {
  fill: #fff;
  font-family: var(--font-main);
  font-size: 28px;
  font-weight: 700;
  text-anchor: middle;
}
.tep-centro-titulo {
  fill: var(--text-main);
  font-family: var(--font-main);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 2px;
  text-anchor: middle;
}
.tep-centro-sub {
  fill: var(--text-muted);
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 600;
  text-anchor: middle;
}

/* ── Leyenda del triángulo ────────────────────────────────────────────── */
.tep-leyenda {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  max-width: 460px;
  margin: 0.75rem auto 0;
}
.tep-leyenda-item {
  display: block;
  padding: 0.4rem 0.7rem 0.45rem;
  border-radius: 0.45rem;
  background: #f7f8f9;
  border-left: 5px solid #adb5bd;
  font-weight: 600;
  font-size: 0.92rem;
}
.tep-leyenda-item b {
  display: inline-block;
  min-width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  margin-right: 0.35rem;
  font-size: 0.85rem;
}
.tep-leyenda-item small {
  display: block;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-left: 1.9rem;
}
.tep-li-a { border-left-color: var(--tep-a); }
.tep-li-a b { background: var(--tep-a); }
.tep-li-r { border-left-color: var(--tep-r); }
.tep-li-r b { background: var(--tep-r); }
.tep-li-c { border-left-color: var(--tep-c); }
.tep-li-c b { background: var(--tep-c); }

/* ── Botones colapsables coloreados por lado ──────────────────────────── */
.botoncolapsable.tep-btn-a { background-color: var(--tep-a); border-color: var(--tep-a); }
.botoncolapsable.tep-btn-a:hover,
.botoncolapsable.tep-btn-a:focus-visible { background-color: #fff; color: var(--tep-a); border-color: var(--tep-a); }
.botoncolapsable.tep-btn-a:active { background-color: #0b5ed7; color: #fff; }

.botoncolapsable.tep-btn-r { background-color: var(--tep-r); border-color: var(--tep-r); }
.botoncolapsable.tep-btn-r:hover,
.botoncolapsable.tep-btn-r:focus-visible { background-color: #fff; color: var(--tep-r); border-color: var(--tep-r); }
.botoncolapsable.tep-btn-r:active { background-color: #146c43; color: #fff; }

.botoncolapsable.tep-btn-c { background-color: var(--tep-c); border-color: var(--tep-c); }
.botoncolapsable.tep-btn-c:hover,
.botoncolapsable.tep-btn-c:focus-visible { background-color: #fff; color: var(--tep-c); border-color: var(--tep-c); }
.botoncolapsable.tep-btn-c:active { background-color: #b02a37; color: #fff; }

.botoncolapsable.tep-btn-estable { background-color: #198754; border-color: #198754; }
.botoncolapsable.tep-btn-estable:hover,
.botoncolapsable.tep-btn-estable:focus-visible { background-color: #fff; color: #198754; border-color: #198754; }

.botoncolapsable.tep-btn-inestable { background-color: #b02a37; border-color: #b02a37; }
.botoncolapsable.tep-btn-inestable:hover,
.botoncolapsable.tep-btn-inestable:focus-visible { background-color: #fff; color: #b02a37; border-color: #b02a37; }

.botoncolapsable.tep-btn-estable span,
.botoncolapsable.tep-btn-inestable span {
  font-weight: 400;
  font-size: 0.9rem;
  opacity: 0.9;
}

/* ── Nemotecnia y tarjetas de criterios ───────────────────────────────── */
.tep-mnemo {
  background: var(--brand-orange-light);
  border-radius: 0.45rem;
  padding: 0.4rem 0.7rem;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}
.tep-mnemo span { font-weight: 700; color: var(--brand-red); }

.tep-criterios {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}
@media (min-width: 560px) {
  .tep-criterios { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
}

.tep-criterio {
  background: #fff;
  border: 1px solid #dee2e6;
  border-top: 4px solid #adb5bd;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem 0.6rem;
}
.tep-criterio-cab {
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.3rem;
}
.tep-criterio ul { padding-left: 1.1rem; margin-bottom: 0; }
.tep-criterio li { margin-bottom: 0.2rem; font-size: 0.92rem; }
.tep-criterio em { color: var(--text-muted); font-style: italic; }

.tep-cr-a { border-top-color: var(--tep-a); }
.tep-cr-a .tep-criterio-cab { color: var(--tep-a); }
.tep-cr-r { border-top-color: var(--tep-r); }
.tep-cr-r .tep-criterio-cab { color: var(--tep-r); }
.tep-cr-c { border-top-color: var(--tep-c); }
.tep-cr-c .tep-criterio-cab { color: var(--tep-c); }

.tep-significado {
  margin-top: 0.75rem;
  border-radius: 0.45rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  border-left: 5px solid #adb5bd;
  background: #f7f8f9;
}
.tep-sig-a { border-left-color: var(--tep-a); background: #eaf1fe; }
.tep-sig-r { border-left-color: var(--tep-r); background: #e9f5ef; }
.tep-sig-c { border-left-color: var(--tep-c); background: #fdeced; }

/* ── Banner de seguridad de la escena ─────────────────────────────────── */
.ped-seguridad {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--brand-red);
  color: #fff;
  border-radius: 0.5rem;
  padding: 0.6rem 0.9rem;
  font-size: 1rem;
  margin: 0.25rem auto 1rem;
}
.ped-seguridad svg { flex-shrink: 0; }
.ped-seguridad b { letter-spacing: 0.04em; }

/* ── Rejilla de combinaciones del TEP ─────────────────────────────────── */
.tep-grid-intro {
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.tep-grid-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.7rem;
}
.tep-grid-leyenda span { display: inline-flex; align-items: center; gap: 0.3rem; }
.tep-punto {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
}
.tep-p0 { background: #198754; }
.tep-p1 { background: #fd7e14; }
.tep-p2 { background: #dc3545; }
.tep-p3 { background: #6f1d1b; }

.tep-estados {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.tep-estado {
  background: #fff;
  border: 1px solid #dee2e6;
  border-top: 4px solid #adb5bd;
  border-radius: 0.5rem;
  padding: 0.5rem 0.4rem 0.6rem;
  text-align: center;
}
.tep-mini { display: block; width: 76px; height: auto; margin: 0 auto 0.35rem; }
.tep-mini line { stroke: #d5d9de; stroke-width: 9; stroke-linecap: round; }
.tep-mini line.on.tep-m-a { stroke: var(--tep-a); }
.tep-mini line.on.tep-m-r { stroke: var(--tep-r); }
.tep-mini line.on.tep-m-c { stroke: var(--tep-c); }
.tep-m-l {
  fill: #6c757d;
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 700;
  text-anchor: middle;
}
.tep-estado-nombre {
  font-weight: 700;
  font-size: 0.87rem;
  line-height: 1.2;
}
.tep-estado-lados {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}
.tep-nivel-0 { border-top-color: #198754; }
.tep-nivel-0 .tep-estado-nombre { color: #146c43; }
.tep-nivel-1 { border-top-color: #fd7e14; }
.tep-nivel-2 { border-top-color: #dc3545; }
.tep-nivel-3 { border-top-color: #6f1d1b; background: #fdf5f5; }
.tep-nivel-3 .tep-estado-nombre { color: #6f1d1b; }

/* ── Chips de actuaciones prioritarias ────────────────────────────────── */
.ped-acciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.ped-accion {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--brand-orange);
  border-radius: 0.4rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.25;
}
.ped-accion small {
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* ── Tira A-B-C-D-E ───────────────────────────────────────────────────── */
.ped-abcde-tira {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.3rem;
  margin: 0.25rem auto 1rem;
}
.ped-letra {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border-radius: 0.5rem;
  padding: 0.35rem 0.15rem 0.45rem;
  color: #fff;
  text-align: center;
}
.ped-letra b { font-size: 1.35rem; line-height: 1.1; font-weight: 700; }
.ped-letra small { font-size: 0.66rem; line-height: 1.15; opacity: 0.95; }
.pl-a { background: #0d6efd; }
.pl-b { background: #0aa2c0; }
.pl-c { background: #dc3545; }
.pl-d { background: #fd7e14; }
.pl-e { background: #198754; }

/* ── Lista numerada de la introducción ────────────────────────────────── */
.ped-intro-lista { display: grid; gap: 0.45rem; }
.ped-intro-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: #f7f8f9;
  border-radius: 0.45rem;
  padding: 0.45rem 0.7rem;
  font-size: 0.93rem;
}
.ped-num {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--brand-orange);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Bloques clínicos genéricos: Valorar / Actuar / Alarma ────────────── */
.bloque-clinico {
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 0.6rem 0.85rem 0.7rem;
  margin-bottom: 0.8rem;
}
.bloque-clinico .bc-cab {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.45rem;
}
.bloque-clinico .bc-cab svg { flex-shrink: 0; }
.bloque-clinico ul { padding-left: 1.15rem; margin-bottom: 0; }
.bloque-clinico li { margin-bottom: 0.25rem; }
.bloque-clinico ul ul { margin-top: 0.2rem; }
.bloque-clinico .bc-destacado {
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.bloque-clinico .bc-pie {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0.5rem 0 0;
}

.bloque-valorar { background: #f2f7fb; border-color: #c3d9ea; }
.bloque-valorar .bc-cab { color: var(--brand-blue); }

.bloque-actuar { background: #fff6ec; border-color: var(--brand-orange); }
.bloque-actuar .bc-cab { color: #c56a12; }

.bloque-alarma { background: #fdeced; border-color: #f1aeb5; }
.bloque-alarma .bc-cab { color: #b02a37; }

/* ── Columnas comparativas (p. ej. < 1 año / > 1 año) ─────────────────── */
.ped-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
@media (min-width: 480px) {
  .ped-split { grid-template-columns: 1fr 1fr; }
}
.ped-split-col {
  background: #fff;
  border: 1px solid #f1aeb5;
  border-radius: 0.45rem;
  padding: 0.4rem 0.6rem 0.5rem;
}
.ped-split-cab {
  font-weight: 700;
  color: #b02a37;
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}
.ped-split-col ul { padding-left: 1.1rem; margin-bottom: 0; }
.ped-split-col li { font-size: 0.9rem; }

/* ── Cifras de alarma ─────────────────────────────────────────────────── */
.ped-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.45rem;
}
.ped-cifra {
  background: #fff;
  border: 1px solid #f1aeb5;
  border-radius: 0.45rem;
  padding: 0.4rem 0.6rem 0.5rem;
  text-align: center;
}
.ped-cifra b {
  display: block;
  color: #b02a37;
  font-size: 1rem;
  font-weight: 700;
}
.ped-cifra small {
  display: block;
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.25;
  margin-top: 0.1rem;
}

/* =========================================
   16. FORMULARIO DE TABLAS PEDIÁTRICAS
   Usado en: paginaTablaPediatrica() — tablapediatrica.html
   ========================================= */

.ped-form {
  max-width: 620px;
  margin: 0.5rem auto 1.25rem;
  background: #fff;
  border: 1px solid #e4e1dc;
  border-radius: 0.9rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
  overflow: hidden;
}

/* ── Cabecera ─────────────────────────────────────────────────────────── */
.ped-form-cab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--brand-orange) 0%, #e88922 100%);
  color: #fff;
  padding: 0.6rem 1rem;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}
.ped-form-cab svg { flex-shrink: 0; }

/* ── Pestañas dentro de la tarjeta ────────────────────────────────────── */
.ped-form .nav-tabs { margin: 0; padding: 0.9rem 0.5rem 0; }
.ped-form .tab-content { padding: 1rem 1rem 1.1rem; }

/* ── Rejilla de campos ────────────────────────────────────────────────── */
/* Los campos usan .row/.col de Bootstrap; aquí solo se ajusta el texto.
   Nada de position ni transform: rompería la etiqueta flotante, que va
   posicionada en absoluto dentro de .form-floating. */
.ped-campos {
  margin-bottom: 0.9rem;
}
.ped-campos .form-control,
.ped-campos .form-select {
  text-align: end;
  padding-right: 2.2rem;
}

.ped-ayuda {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 0.9rem;
}

/* ── Selector de género ───────────────────────────────────────────────── */
.ped-genero {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}
.ped-genero-tit {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  flex-shrink: 0;
}
.ped-genero-opciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  flex: 1;
}
.ped-genero-btn {
  display: block;
  text-align: center;
  padding: 0.45rem 0.5rem;
  border: 2px solid #dee2e6;
  border-radius: 0.5rem;
  background: #fff;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease,
              border-color 0.15s ease;
}
/* Sin colores asociados al sexo: la opción activa usa el color de marca */
.btn-check:checked + .ped-genero-btn {
  background: var(--brand-orange-light);
  border-color: var(--brand-orange);
  color: #a35b0c;
}
.btn-check:focus-visible + .ped-genero-btn {
  box-shadow: 0 0 0 3px var(--brand-orange-light);
}

/* ── Caja del peso estimado ───────────────────────────────────────────── */
.ped-peso-caja {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  background: var(--bg-card);
  border: 1px dashed var(--brand-orange);
  border-radius: 0.6rem;
  padding: 0.55rem 0.85rem;
  margin-bottom: 0.9rem;
}
.ped-peso-tit {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}
.ped-peso-valor {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
  margin-left: auto;
}
.ped-peso-valor input {
  width: 4.5rem;
  border: none;
  background: transparent;
  text-align: end;
  font-family: var(--font-main);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--brand-red);
  padding: 0;
  /* Los inputs deshabilitados se atenúan en algunos WebView: lo forzamos */
  opacity: 1;
  -webkit-text-fill-color: var(--brand-red);
}
.ped-peso-unidad {
  font-weight: 700;
  font-size: 1rem;
  color: var(--brand-red);
}
.ped-peso-enlace { flex-basis: 100%; }

@media (min-width: 480px) {
  .ped-peso-enlace { flex-basis: auto; margin-left: 0.25rem; }
}

/* ── Botonera del formulario ──────────────────────────────────────────── */
.ped-acciones-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.ped-acciones-form .botones {
  min-width: 0;
  width: 100%;
  margin: 0;
}
.botones.botones-borrar {
  background-color: #fff;
  color: var(--text-muted);
  border-color: #dee2e6;
  box-shadow: none;
}
.botones.botones-borrar:hover,
.botones.botones-borrar:focus-visible {
  background-color: #f1f3f5;
  color: var(--text-main);
  border-color: #adb5bd;
  box-shadow: none;
}

/* ── Burbuja flotante del peso ────────────────────────────────────────── */
.contadorPuntos.peso-flotante {
  flex-direction: column;
  height: auto;
  min-width: 4.4rem;
  border-radius: 1.5rem;
  padding: 0.3rem 0.7rem 0.35rem;
  font-size: 1.05rem;
  line-height: 1.15;
}
.contadorPuntos.peso-flotante::before {
  content: "PESO";
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 0.9;
}

/* =========================================
   17. APARTADOS AGRUPADOS DE TABLAS PEDIÁTRICAS
   Usado en: paginaTablaPediatrica() — tablapediatrica.html
   ========================================= */

/* Color de cada grupo temático */
.ped-g-azul    { --gcolor: #4f7ea8; --gfondo: #eef4f9; }
.ped-g-granate { --gcolor: #6f1d1b; --gfondo: #f8efee; }
.ped-g-cian    { --gcolor: #0a8fa8; --gfondo: #e9f6f9; }
.ped-g-rojo    { --gcolor: #c62536; --gfondo: #fdeef0; }
.ped-g-verde   { --gcolor: #198754; --gfondo: #eaf5ef; }
.ped-g-morado  { --gcolor: #6f42c1; --gfondo: #f2eefb; }
.ped-g-naranja { --gcolor: #d4700c; --gfondo: #fdf2e6; }
.ped-g-indigo  { --gcolor: #2a5bd7; --gfondo: #ecf1fd; }
.ped-g-gris    { --gcolor: #5c636a; --gfondo: #f1f3f5; }

/* El filtrado usa el atributo hidden; debe ganar a display:block/flex */
#tablaresultados [hidden] { display: none !important; }

/* ── Buscador ─────────────────────────────────────────────────────────── */
.ped-buscador {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 620px;
  margin: 0 auto 0.75rem;
}
.ped-buscador svg {
  position: absolute;
  left: 0.8rem;
  color: var(--text-muted);
  pointer-events: none;
}
.ped-buscador input {
  width: 100%;
  font-family: var(--font-main);
  font-size: 1rem;
  padding: 0.55rem 0.9rem 0.55rem 2.4rem;
  border: 1px solid #dee2e6;
  border-radius: 2rem;
  background: #fff;
  color: var(--text-main);
}
.ped-buscador input:focus {
  outline: none;
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 3px var(--brand-orange-light);
}

.ped-sin-resultados {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 1.5rem 0;
}

/* ── Índice de grupos ─────────────────────────────────────────────────── */
.ped-indice {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  max-width: 700px;
  margin: 0 auto 1.25rem;
}
/* Botón-filtro. Al pulsarlo se muestra solo ese grupo, en lugar de
   desplazar la página hasta él. */
.ped-indice-chip {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: 2rem;
  background: var(--gfondo, #f1f3f5);
  border: 1px solid var(--gcolor, #adb5bd);
  color: var(--gcolor, var(--text-muted));
  font-family: var(--font-main);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.35;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.ped-indice-chip:hover,
.ped-indice-chip:focus-visible {
  background: var(--gcolor, #adb5bd);
  color: #fff;
}
.ped-indice-chip.activo {
  background: var(--gcolor, #6c757d);
  color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}
.ped-chip-todos { --gcolor: var(--brand-orange); --gfondo: var(--brand-orange-light); }
.ped-chip-todos.activo { color: #fff; }

/* ── Grupo temático ───────────────────────────────────────────────────── */
.ped-grupo {
  margin: 0 auto 1.4rem;
  max-width: 840px;
}
/* El salto desde el índice lo hace irAGrupoPediatria() en JS, no el ancla
   nativa: así el desplazamiento es exacto en cualquier WebView. */
.ped-grupo-cab {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.2rem 0.45rem 0.7rem;
  border-left: 5px solid var(--gcolor);
  border-bottom: 1px solid var(--gfondo);
  margin-bottom: 0.5rem;
}
.ped-grupo-tit {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--gcolor);
  text-transform: uppercase;
}
.ped-grupo-num {
  margin-left: auto;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.4rem;
  border-radius: 1rem;
  background: var(--gfondo);
  color: var(--gcolor);
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Botón de apartado ────────────────────────────────────────────────── */
.ped-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin: 0 0 0.35rem;
  padding: 0.6rem 0.85rem;
  font-family: var(--font-main);
  font-size: 1.02rem;
  font-weight: 700;
  text-align: left;
  color: var(--text-main);
  background: #fff;
  border: 1px solid #e4e1dc;
  border-left: 5px solid var(--gcolor);
  border-radius: 0.55rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.ped-item-tit { flex: 1; }
.ped-item-flecha {
  flex-shrink: 0;
  color: var(--gcolor);
  transition: transform 0.2s ease;
}
.ped-item[aria-expanded="true"] {
  background: var(--gfondo);
  color: var(--gcolor);
  box-shadow: none;
  border-radius: 0.55rem 0.55rem 0 0;
  margin-bottom: 0;
}
.ped-item[aria-expanded="true"] .ped-item-flecha { transform: rotate(180deg); }
.ped-item:hover,
.ped-item:focus-visible {
  background: var(--gfondo);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.ped-item abbr { text-decoration: none; border-bottom: 1px dotted currentColor; }

/* Panel desplegado, cosido al botón */
.ped-grupo .collapse .card,
.ped-grupo .collapsing .card {
  border: 1px solid #e4e1dc;
  border-left: 5px solid var(--gcolor);
  border-top: none;
  border-radius: 0 0 0.55rem 0.55rem;
  margin-bottom: 0.35rem;
}

/* =========================================
   18. PARÁMETROS GENERALES PEDIÁTRICOS (tarjetas)
   Usado en: PARAMETROS_GENERALES_PEDIATRIA
   ========================================= */

.pg-bloque { margin-bottom: 1rem; }
.pg-bloque:last-child { margin-bottom: 0; }

.pg-bloque-cab {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--pgcolor, var(--text-muted));
  border-bottom: 2px solid var(--pgcolor, #dee2e6);
  padding-bottom: 0.25rem;
  margin-bottom: 0.55rem;
}
.pg-cab-constantes { --pgcolor: #c62536; }
.pg-cab-aire       { --pgcolor: #0a8fa8; }
.pg-cab-accesos    { --pgcolor: #6f42c1; }

.pg-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.45rem;
}
.pg-dato {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  gap: 0.2rem;
  background: #fff;
  border: 1px solid #e4e1dc;
  border-radius: 0.5rem;
  padding: 0.45rem 0.65rem 0.55rem;
}
/* Ocupa toda la fila: valores largos (TA, TET) que no caben en una columna */
.pg-dato-ancho { grid-column: 1 / -1; }
.pg-dato-destacado { background: var(--bg-card); border-color: var(--brand-orange); }

.pg-etiqueta {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.25;
}
.pg-etiqueta small {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
}
.pg-etiqueta abbr {
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  cursor: help;
}
/* Nota al pie de las constantes: es texto explicativo, no una etiqueta de dato,
   asi que va en peso normal y ocupando toda la fila sin valor debajo. */
.pg-nota-objetivo {
  font-weight: 400;
  font-size: 0.74rem;
}

.pg-valor {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--brand-red);
  line-height: 1.25;
  word-break: break-word;
}
/* Mientras no hay cálculo, el hueco no debe colapsar */
.pg-valor:empty::after {
  content: "—";
  color: #ced4da;
}
.pg-valor abbr { text-decoration: none; }

/* =========================================
   19. TABLA DE PESOS POR EDAD
   Usado en: tablapesos() — tablapedriatrica.html
   ========================================= */

#tablapeso { scroll-margin-top: 1rem; }

.tp-caja {
  max-width: 840px;
  margin: 2rem auto 0;
  background: #fff;
  border: 1px solid #e4e1dc;
  border-radius: 0.75rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
  overflow: hidden;
}

.tp-cab {
  background: linear-gradient(135deg, var(--brand-orange) 0%, #e88922 100%);
  color: #fff;
  padding: 0.6rem 0.9rem 0.7rem;
  text-align: center;
}
.tp-titulo {
  display: block;
  font-weight: 700;
  font-size: 1.1rem;
}
.tp-formulas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.45rem;
}
.tp-formula {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 0.35rem;
  padding: 0.15rem 0.55rem;
  font-size: 0.78rem;
}
.tp-formula b { margin-right: 0.35rem; }

/* Altura limitada + scroll propio: la tabla tiene 60+ filas y si no,
   empuja el resto de la página muy abajo. */
.tp-scroll {
  max-height: 60vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.tp-tabla {
  margin-bottom: 0;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}
.tp-tabla th,
.tp-tabla td {
  text-align: center;
  vertical-align: middle;
  padding: 0.35rem 0.4rem;
  white-space: nowrap;
}

/* Cabecera fija al desplazar */
.tp-tabla thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f6f2ec;
  color: var(--brand-red);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 2px solid var(--brand-orange);
}

/* Primera columna (meses) fija en horizontal */
.tp-tabla tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #f6f2ec;
  font-weight: 700;
  color: var(--text-main);
}
.tp-tabla thead th:first-child {
  z-index: 3;
}

.tp-tabla tbody tr:nth-child(odd) td { background-color: #fbfaf8; }
.tp-tabla tbody tr:hover td { background-color: var(--brand-orange-light); }

/* La mediana es la columna de referencia: se resalta */
.tp-tabla .tp-mediana {
  font-weight: 700;
  color: var(--brand-red);
  background-color: rgba(252, 163, 74, 0.12) !important;
}

/* =========================================
   20. PANEL DE PESO DEL PACIENTE
   Usado en: abrirPanelPeso() — sustituye a prompt() en toda la app
   ========================================= */

.pp-fondo {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: ppEntrada 0.15s ease-out;
}
@keyframes ppEntrada { from { opacity: 0 } to { opacity: 1 } }

.pp-panel {
  width: 100%;
  max-width: 340px;
  background: #fff;
  border-radius: 0.9rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  font-family: var(--font-main);
}

.pp-cab {
  background: linear-gradient(135deg, var(--brand-orange) 0%, #e88922 100%);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
  padding: 0.65rem 1rem;
}

.pp-cuerpo { padding: 1rem 1rem 0.5rem; }

.pp-campo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pp-campo input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-main);
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  color: var(--brand-red);
  border: 2px solid #dee2e6;
  border-radius: 0.5rem;
  padding: 0.35rem 0.4rem;
  background: #fff;
}
.pp-campo input:focus {
  outline: none;
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 3px var(--brand-orange-light);
}
.pp-unidad {
  font-weight: 700;
  color: var(--text-muted);
  font-size: 1rem;
}

/* Botones +/- : ajuste rápido de 0,5 kg sin abrir el teclado */
.pp-paso {
  flex-shrink: 0;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 2px solid var(--brand-orange);
  background: var(--bg-card);
  color: var(--brand-orange-hover);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.pp-paso:active {
  background: var(--brand-orange);
  color: #fff;
}

.pp-aviso {
  color: #b02a37;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  margin: 0.6rem 0 0;
}

.pp-acciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  padding: 0.75rem 1rem 1rem;
}
.pp-acciones .botones {
  min-width: 0;
  width: 100%;
  margin: 0;
}

/* =========================================
   21. NIVELES DE RANGO (resultados fuera de valores normales)
   Usado en: rangodoscolores(), rangodoscoloresporarribaabajo(),
             rangotrescolores() — calculadoras.js
   El color va en el MARCO y el fondo queda apenas teñido, en lugar del
   relleno macizo que se aplicaba antes con estilos en línea.
   ========================================= */

.rango-alto,
.rango-medio,
.rango-bajo {
    border: 2px solid var(--rango-color) !important;
    background-color: var(--rango-fondo) !important;
    color: var(--rango-texto) !important;
    box-shadow: 0 1px 4px var(--rango-sombra) !important;
}

.rango-alto {
    --rango-color: #cf3520;
    --rango-fondo: rgba(243, 93, 73, 0.09);
    --rango-texto: #962b1a;
    --rango-sombra: rgba(207, 53, 32, 0.22);
}
.rango-medio {
    --rango-color: #d19a00;
    --rango-fondo: rgba(243, 212, 73, 0.14);
    --rango-texto: #7d5b00;
    --rango-sombra: rgba(209, 154, 0, 0.2);
}
.rango-bajo {
    --rango-color: var(--brand-orange);
    --rango-fondo: rgba(252, 163, 74, 0.1);
    --rango-texto: var(--brand-red);
    --rango-sombra: rgba(252, 163, 74, 0.25);
}

/* En las cajas de resultado se mantiene la franja lateral más gruesa */
.cajadeResultados.rango-alto,
.cajadeResultados.rango-medio,
.cajadeResultados.rango-bajo,
.cajadeResultadosAlterada.rango-alto,
.cajadeResultadosAlterada.rango-medio,
.cajadeResultadosAlterada.rango-bajo {
    border-left-width: 5px !important;
}

/* =========================================
   22. BURBUJA FLOTANTE (contadorPuntos)
   Mismo criterio: marco de color, fondo tenue.
   ========================================= */

.contadorPuntos {
    background-color: #fff;
    color: var(--brand-orange-hover);
    border: 2px solid var(--brand-orange);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.contadorPuntos:hover,
.contadorPuntos:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.24);
}
.contadorPuntos:active { transform: translateY(0); }

/* La etiqueta "PESO" hereda el color del marco */
.contadorPuntos.peso-flotante::before { opacity: 0.75; }

/* =========================================
   23. TARJETAS DE FÁRMACOS (dosis calculadas por peso)
   Usado en: MEDICACION_RCP_PEDIATRIA
   Sustituye al patrón row/col + <hr>: cada fármaco es una tarjeta con su
   nombre, concentración, dosis y el resultado del cálculo.
   ========================================= */

.fco-bloque-cab {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--fcocolor, var(--brand-red));
  border-bottom: 2px solid var(--fcocolor, var(--brand-red));
  padding-bottom: 0.25rem;
  margin: 0 0 0.7rem;
}
.fco-bloque-cab:not(:first-child) { margin-top: 1.4rem; }
.fco-cab-energia    { --fcocolor: #0a8fa8; }
.fco-cab-analgesia  { --fcocolor: #6f42c1; }
.fco-cab-hipnotico  { --fcocolor: #2a5bd7; }
.fco-cab-relajante  { --fcocolor: #d4700c; }
.fco-cab-noopiaceo  { --fcocolor: #198754; }
.fco-cab-liquidos   { --fcocolor: #0d6efd; }

.fco-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.6rem;
  align-items: start;
}

.fco-tarjeta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: #fff;
  border: 1px solid #e4e1dc;
  border-top: 4px solid var(--brand-red);
  border-radius: 0.55rem;
  padding: 0.5rem 0.7rem 0.65rem;
}
.fco-liquidos  { border-top-color: #0d6efd; }
.fco-electrico { border-top-color: #0a8fa8; }
.fco-analgesia { border-top-color: #6f42c1; }
.fco-hipnotico { border-top-color: #2a5bd7; }
.fco-relajante { border-top-color: #d4700c; }
.fco-noopiaceo { border-top-color: #198754; }

/* ── Cabecera de la tarjeta ───────────────────────────────────────────── */
.fco-cab {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 2.25rem; /* alinea las tarjetas con y sin botón de info */
}
.fco-nombre {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--brand-red);
  line-height: 1.2;
}
.fco-liquidos .fco-nombre  { color: #0a58ca; }
.fco-electrico .fco-nombre { color: #087f93; }
.fco-analgesia .fco-nombre { color: #5b35a3; }
.fco-hipnotico .fco-nombre { color: #2450b8; }
.fco-relajante .fco-nombre { color: #b35f09; }
.fco-noopiaceo .fco-nombre { color: #146c43; }

/* Distingue presentaciones del mismo fármaco (1:10.000 / 1:1.000, 5% / 1%) */
.fco-etiqueta {
  background: #f1f3f5;
  border-radius: 0.3rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
}
.fco-cab .btn-enrollable { margin-left: auto; }

/* ── Concentración y dosis ────────────────────────────────────────────── */
.fco-datos {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  font-size: 0.85rem;
  color: var(--text-main);
}
.fco-dato b {
  display: inline-block;
  min-width: 1.6rem;
  color: var(--text-muted);
  font-weight: 700;
}
/* Línea de continuación: el <b> va vacío y solo sirve para alinear */
.fco-dato b:empty { min-width: 1.6rem; }
.fco-dato i { font-style: italic; color: var(--text-muted); }
.fco-dato abbr { text-decoration: none; cursor: help; }
.fco-dato-limite,
.fco-dato-fuente {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ── Resultado del cálculo ────────────────────────────────────────────── */
.fco-tarjeta .fco-resultado {
  margin: 0.1rem 0 0;
  max-width: 100%;
  text-align: center;
  font-size: 1.1rem;
  padding: 0.35rem 0.5rem;
}
/* Mientras no hay peso introducido, el hueco no debe colapsar */
.fco-resultado:empty::after {
  content: "—";
  color: #ced4da;
  font-weight: 400;
}

/* ── Varias dosis en la misma tarjeta (desfibrilación, cardioversión) ── */
.fco-filas {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.fco-fila {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.fco-fila-tit {
  flex: 0 0 5.2rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
}
.fco-fila .fco-resultado { flex: 1; margin: 0; }

/* El panel de información va al final, ocupando el ancho de la tarjeta */
.fco-tarjeta .collapse,
.fco-tarjeta .collapsing { margin-top: 0.1rem; }
.fco-tarjeta .panel-enrollable-suave {
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem;
  margin-top: 0;
}
.fco-tarjeta .panel-enrollable-suave p:last-child,
.fco-tarjeta .panel-enrollable-suave ul:last-child { margin-bottom: 0; }

/* --- Complementos de las tarjetas de fármacos --------------------------
   Aviso introductorio, campo de volumen de dilución y bloques de dosis
   (carga / mantenimiento) para los apartados de perfusión.
   ---------------------------------------------------------------------- */

.fco-aviso {
  background: var(--bg-card);
  border-left: 4px solid var(--brand-orange);
  border-radius: 0.5rem;
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.9rem;
  font-size: 0.9rem;
}
.fco-aviso p { margin-bottom: 0.5rem; }

.fco-volumen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  margin-bottom: 1.1rem;
}
.fco-volumen .form-floating { flex: 0 1 13rem; }
.fco-volumen .form-control {
  text-align: end;
  padding-right: 1.5rem;
  font-weight: 600;
}
.fco-volumen-nota {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Tarjetas con varias dosis: necesitan algo más de ancho */
.fco-rejilla-ancha { grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); }

/* Bloque carga / mantenimiento: etiqueta encima del resultado, porque los
   títulos son largos y no caben en la fila estrecha de .fco-fila */
.fco-dosis {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}
.fco-dosis + .fco-dosis { margin-top: 0.4rem; }
.fco-dosis-tit {
  font-size: 0.85rem;
  color: var(--text-main);
  line-height: 1.3;
}
.fco-dosis-tit b { font-weight: 700; }
.fco-dosis-nota {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.25;
}

.fco-notas {
  margin: 0.45rem 0 0;
  padding-left: 1.05rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.fco-notas li { margin-bottom: 0.15rem; }
.fco-notas-aviso {
  list-style: none;
  padding: 0.35rem 0.55rem;
  background: #fdeced;
  border-radius: 0.35rem;
  color: #8f2a1e;
  font-weight: 600;
}

/* Resultado que no es una cifra sino un texto o una lista (dexketoprofeno) */
.fco-resultado-libre {
  font-size: 0.88rem;
  color: var(--text-main);
}
.fco-resultado-libre ul { padding-left: 1.1rem; margin-bottom: 0; }
.fco-resultado-libre:empty::after { content: "—"; color: #ced4da; }

/* Flecha entre fases del protocolo: más marcada que la que separa pasos */
.tl-flecha-fase {
  font-weight: 700;
  color: var(--brand-red);
  font-size: 0.92rem;
  margin: 0.6rem 0 0.9rem;
}

/* La caja de resultado dentro del timeline no debe romper el flujo del texto */
.tl-contenido .cajadeResultados {
  margin: 0.3rem 0 0.1rem;
  max-width: 100%;
}
.tl-contenido li > .cajadeResultados { margin-top: 0.2rem; }
.tl-contenido .tl-nota { font-size: 0.9rem; font-weight: 600; }

/* Nota bajo la cabecera de una fase del protocolo */
.fco-fase-nota {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin: -0.35rem 0 0.5rem;
}

/* Valor fijo dentro de una tarjeta: no lo calcula el JS, es una fórmula o
   una pauta constante (LB x 0,7, 20 mL/kg...) */
.fco-resultado-fijo {
  margin-top: auto;
  padding-top: 0.35rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-red);
  line-height: 1.3;
}
.fco-resultado-fijo abbr { text-decoration: none; border-bottom: 1px dotted currentColor; }

/* Campo editable dentro de una tarjeta de fármaco (mL que se cargan en la
   jeringa). Usado en las perfusiones neonatales. */
.fco-campo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #f7f8f9;
  border-radius: 0.4rem;
  padding: 0.3rem 0.5rem;
}
.fco-campo label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0;
  white-space: nowrap;
}
.fco-campo .form-control {
  width: 4.5rem;
  margin-left: auto;
  padding: 0.2rem 0.45rem;
  text-align: end;
  font-weight: 700;
  font-size: 0.95rem;
}

/* Cabecera de cálculo: peso, volumen y botones */
.fco-cabecera-calculo {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  max-width: 620px;
  margin: 0 auto 1.3rem;
}
.fco-cabecera-calculo .form-control {
  text-align: end;
  padding-right: 1.2rem;
  font-weight: 600;
}
.fco-cabecera-botones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.fco-cabecera-botones .botones {
  min-width: 0;
  width: 100%;
  margin: 0;
}
@media (min-width: 620px) {
  .fco-cabecera-calculo { grid-template-columns: 1fr 1fr; }
  .fco-cabecera-botones { grid-column: 1 / -1; }
}

/* =========================================
   24. FICHA DE FÁRMACO: INDICACIONES Y PRESENTACIONES
   Usado en: tarjetaIndicacionHTML() — farmacos.html
   Cada indicación es una tarjeta con título y líneas etiquetadas de Bolo
   (naranja) y Perfusión (azul), en lugar de una frase corrida con <br>.
   Los contenedores #indicacionesfco / #presentacionesfco son los <div> que
   genera SeccionesFichaFco (scriptgenerales.js).
   ========================================= */
#indicacionesfco {
  margin: 0;
}

.ficha-indicacion {
  display: block;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-left: 4px solid var(--brand-orange);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.6rem;
}
.ficha-indicacion:last-child { margin-bottom: 0; }

.ficha-ind-titulo {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--text-main);
  margin-bottom: 0.35rem;
}

/* Etiqueta + dosis. La dosis puede traer <ul>, <abbr> o texto largo, así que
   la fila se alinea arriba y el valor ocupa el resto del ancho. */
.ficha-ind-linea {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin-top: 0.25rem;
}

.ficha-ind-etiqueta {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.5;
  padding: 0.05rem 0.45rem;
  border-radius: 0.75rem;
  white-space: nowrap;
}

.ficha-ind-bolo .ficha-ind-etiqueta {
  background: rgba(252, 163, 74, 0.22);
  color: #8a4b06;
}
.ficha-ind-perfusion .ficha-ind-etiqueta {
  background: rgba(79, 126, 168, 0.18);
  color: #2f5674;
}

.ficha-ind-dosis {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--text-main);
  font-weight: 600;
}
.ficha-ind-dosis ul {
  margin: 0.2rem 0 0;
  padding-left: 1.1rem;
  font-weight: 400;
}

/* Nota aclaratoria: cuelga de la línea anterior, en gris y más pequeña */
.ficha-ind-nota {
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--text-muted);
  margin-top: 0.15rem;
  padding-left: 0.15rem;
}
.ficha-ind-linea + .ficha-ind-nota { padding-left: 0.3rem; }
.ficha-ind-nota ul {
  margin: 0.2rem 0 0;
  padding-left: 1.1rem;
}

/* --- Presentaciones como índices, en fila --- */
#presentacionesfco {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ficha-presentacion {
  display: inline-block;
  background: var(--bg-card);
  border: 1px solid rgba(252, 163, 74, 0.45);
  border-radius: 0.75rem;
  padding: 0.15rem 0.6rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-main);
}

@media (max-width: 420px) {
  .ficha-ind-linea {
    flex-direction: column;
    gap: 0.1rem;
  }
  .ficha-ind-etiqueta { align-self: flex-start; }
}

/* =========================================
   25. CALCULADORA DE PERFUSIONES Y FICHA DE DOSIS
   Usado en: paginaPerfusiones() — perfusiones.html
             mostrarFichaFco — farmacos.html y panel lateral del chuletario
   Mismo lenguaje visual que el formulario de tablas pediátricas (sección 16),
   las cabeceras de bloque de fármacos (sección 23) y las cajas de resultado
   de las calculadoras (sección 6).
   ========================================= */

/* ── Tarjeta contenedora ──────────────────────────────────────────────── */
.perf-tarjeta {
  max-width: 620px;
  margin: 0.5rem auto 1.25rem;
  background: #fff;
  border: 1px solid #e4e1dc;
  border-radius: 0.9rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
  overflow: hidden;
}

.perf-cab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, var(--brand-orange) 0%, #e88922 100%);
  color: #fff;
  padding: 0.6rem 1rem;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}
.perf-cab svg { flex-shrink: 0; }

.perf-tarjeta .nav-tabs { margin: 0; padding: 0.9rem 0.5rem 0; }
.perf-tarjeta .tab-content { padding: 1rem 1rem 1.1rem; }

/* En pantallas estrechas las tres pestañas no caben con el tamaño de fuente
   grande de .nav-link: se reduce para que no se rompa el texto en dos líneas */
@media (max-width: 400px) {
  .perf-tarjeta .nav-link { font-size: 0.95rem; padding: 0.55rem 0.4rem; }
  .perf-tarjeta .nav-tabs { padding: 0.7rem 0.25rem 0; }
}

/* ── Caja del peso (editable) ─────────────────────────────────────────── */
/* Mismo aspecto que .ped-peso-caja, pero aquí el peso se teclea, así que el
   campo lleva línea inferior y foco visible para que se vea que es editable */
.perf-peso {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  background: var(--bg-card);
  border: 1px dashed var(--brand-orange);
  border-radius: 0.6rem;
  padding: 0.55rem 0.85rem;
  margin-bottom: 1rem;
}
.perf-peso-tit {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}
.perf-peso-valor {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
  margin-left: auto;
}
.perf-peso-valor input {
  width: 5rem;
  border: none;
  border-bottom: 2px solid rgba(252, 163, 74, 0.7);
  background: transparent;
  text-align: end;
  font-family: var(--font-main);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--brand-red);
  padding: 0 0.15rem;
  opacity: 1;
  -webkit-text-fill-color: var(--brand-red);
}
.perf-peso-valor input:focus {
  outline: none;
  border-bottom-color: var(--brand-orange);
  box-shadow: 0 2px 0 -1px var(--brand-orange);
}
/* Las flechas del type=number roban ancho y no se usan con el dedo */
.perf-peso-valor input::-webkit-outer-spin-button,
.perf-peso-valor input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.perf-peso-valor input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

.perf-peso-unidad {
  font-weight: 700;
  font-size: 1rem;
  color: var(--brand-red);
}
.perf-peso-boton { flex-basis: 100%; }

@media (min-width: 480px) {
  .perf-peso-boton { flex-basis: auto; margin-left: 0.25rem; }
}

/* ── Cabeceras de sección ─────────────────────────────────────────────── */
/* Mismo patrón que .fco-bloque-cab / .pg-bloque-cab */
.perf-seccion-cab {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--perfcolor, var(--text-muted));
  border-bottom: 2px solid var(--perfcolor, #dee2e6);
  padding-bottom: 0.25rem;
  margin: 0 0 0.55rem;
}
.perf-seccion-cab:not(:first-child) { margin-top: 1.2rem; }
.perf-cab-dilucion  { --perfcolor: #0a8fa8; }
.perf-cab-dosis     { --perfcolor: #2a5bd7; }
.perf-cab-resultado { --perfcolor: var(--brand-red); }

.perf-ayuda {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: -0.2rem 0 0.6rem;
}

/* ── Campos ───────────────────────────────────────────────────────────── */
.perf-campos { margin-bottom: 0.2rem; }
.perf-campos .form-control,
.perf-campos .form-select {
  text-align: end;
  padding-right: 2.2rem;
}
.perf-campos .form-select { padding-right: 2.5rem; }

/* ── Resultado principal (velocidad de perfusión) ─────────────────────── */
.perf-resultado {
  margin-top: 1.2rem;
  background: #fff;
  border: 1px solid #e4e1dc;
  border-top: 4px solid var(--brand-red);
  border-radius: 0.55rem;
  padding: 0.55rem 0.7rem 0.7rem;
}
.perf-resultado-cab {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--brand-red);
  margin-bottom: 0.4rem;
}

/* Los resultados son <input disabled>; input.cajadeResultados (sección 6) ya
   les devuelve el aspecto de caja de resultado, aquí solo se ajusta el ancho */
.perf-resultado-valor {
  width: 100%;
  max-width: 100%;
  text-align: end;
  border-radius: 0.45rem;
}

.perf-resultado-detalle {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text-main);
}
.perf-resultado-detalle > div:empty { display: none; }

/* ── Rejilla de resultados (bolos y goteo) ────────────────────────────── */
.perf-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.5rem;
}
.perf-dato {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: #fff;
  border: 1px solid #e4e1dc;
  border-radius: 0.5rem;
  padding: 0.45rem 0.6rem 0.55rem;
}
.perf-dato-tit {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.25;
}
.perf-dato .perf-resultado-valor { font-size: 1.05rem; }

/* ── Equivalencias y botonera ─────────────────────────────────────────── */
.perf-equivalencias { margin-top: 1rem; }
.perf-lista-equivalencias { margin-bottom: 0; font-size: 0.9rem; }

.perf-acciones { margin-top: 1.1rem; }
.perf-acciones .botones { margin: 0; }

.perf-extras {
  max-width: 620px;
  margin: 0 auto 1.5rem;
  text-align: center;
}
.perf-extras .card-body { text-align: start; }

/* ── Ajustes de la caja de peso y del detalle dentro de la ficha de fármaco ──
   El panel lateral (offcanvas) es más estrecho que la página de perfusiones,
   así que el botón de ajuste baja de línea antes y el resultado se aprieta. */
#fichaFarmacos .perf-peso,
#cajafarmacoseleccionado .perf-peso {
  margin-bottom: 0.75rem;
}
#fichaFarmacos .perf-peso-boton { flex-basis: 100%; margin-left: 0; }

/* El detalle de la ficha lleva más líneas (goteo, tiempo, equivalencias) */
#fichaFarmacos .perf-resultado-detalle,
#cajafarmacoseleccionado .perf-resultado-detalle {
  font-size: 0.88rem;
}
#fichaFarmacos .perf-resultado-detalle .perf-equivalencias,
#cajafarmacoseleccionado .perf-resultado-detalle .perf-equivalencias {
  margin: 0.5rem 0 0;
}