/*
 * app.css
 * Estilos base pensados para adultos mayores:
 * tipografía grande, botones grandes, alto contraste.
 * Se irá ampliando módulo a módulo.
 */

:root {
    --color-primario: #2e7d6f;
    --color-secundario: #6a4c93;
    --color-emergencia: #d32f2f;
    --font-size-base: 1.15rem;
}

body.app-adulto-mayor {
    font-size: var(--font-size-base);
    line-height: 1.6;
    min-height: 100vh;
    background-attachment: fixed;
    background-size: cover;
}

/* ===== Fondos vivos por sección (ayudan a ubicarse y alegran la app) ===== */
body.seccion-default     { background: linear-gradient(150deg, #8e6bb0 0%, #2e9e83 55%, #f2994a 100%); }
body.seccion-salud       { background: linear-gradient(150deg, #ff8a75 0%, #ff5c5c 50%, #d64550 100%); }
body.seccion-ejercicios  { background: linear-gradient(150deg, #b48fdb 0%, #8e6bb0 50%, #6a4c93 100%); }
body.seccion-bienestar   { background: linear-gradient(150deg, #7fe0c4 0%, #2e9e83 55%, #1f7a8c 100%); }
body.seccion-chat        { background: linear-gradient(150deg, #7cd6e8 0%, #3aa2c1 50%, #1f7a8c 100%); }
body.seccion-familiares  { background: linear-gradient(150deg, #ffcf85 0%, #f2994a 55%, #e67e22 100%); }
body.seccion-emergencia  { background: linear-gradient(150deg, #ff7a68 0%, #c0392b 60%, #8e2418 100%); }

/* El contenido "flota" sobre el fondo de color, en una tarjeta blanca
   bien legible (clave para adultos mayores), en vez de mezclarse con él. */
body.app-adulto-mayor > .container {
    background-color: rgba(255, 255, 255, 0.97);
    border-radius: 1.75rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    margin-top: 0.75rem;
    margin-bottom: 2rem;
    padding-bottom: 0.5rem;
}

.btn {
    font-size: 1.1rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
}

.btn-lg {
    font-size: 1.35rem;
    padding: 1rem 2rem;
}

.welcome-screen {
    background: linear-gradient(160deg, #ffe8d6 0%, #c9ecdf 55%, #d9cdf0 100%);
}

.welcome-logo {
    max-width: 260px;
    height: auto;
}

.welcome-photo {
    width: 140px;
    height: 140px;
    border: 4px solid var(--color-primario);
    object-fit: cover;
}

.welcome-title {
    font-size: 2rem;
    color: var(--color-primario);
}

.welcome-subtitle {
    font-size: 1.25rem;
    color: #444;
    max-width: 480px;
}

.welcome-firma {
    font-size: 1rem;
    color: #333;
}

.brand-header-logo {
    max-width: 140px;
    height: auto;
}

/* ===== Responsive ===== */
@media (max-width: 575.98px) {
    :root {
        --font-size-base: 1.05rem;
    }

    .welcome-logo { max-width: 200px; }
    .welcome-photo { width: 110px; height: 110px; }
    .welcome-title { font-size: 1.6rem; }
    .welcome-subtitle { font-size: 1.1rem; }

    .btn-dashboard { min-height: 120px; }
    .btn-dashboard .fa-2x { font-size: 1.5em; }

    .brand-header-logo { max-width: 110px; }
}

@media (min-width: 992px) {
    .welcome-screen .col-lg-4 { max-width: 420px; }
}

/* Dashboard */
.btn-dashboard {
    border: none;
    border-radius: 1.25rem;
    color: #fff;
    min-height: 140px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-dashboard:hover,
.btn-dashboard:focus {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
    color: #fff;
}

.btn-dashboard:active {
    transform: translateY(-1px) scale(0.99);
}

.btn-dashboard-patologias  { background: linear-gradient(145deg, #4c9be8, #2f6fb5); }
.btn-dashboard-salud       { background: linear-gradient(145deg, #ef6b63, #d64550); }
.btn-dashboard-ejercicios  { background: linear-gradient(145deg, #8f6bc9, #6a4c93); }
.btn-dashboard-bienestar   { background: linear-gradient(145deg, #43bb9c, #2e9e83); }
.btn-dashboard-chat        { background: linear-gradient(145deg, #2e9bb5, #1f7a8c); }
.btn-dashboard-familiares  { background: linear-gradient(145deg, #f5ab6c, #f2994a); }
.btn-dashboard-emergencia  { background: linear-gradient(145deg, #d8493a, #c0392b); }

/* ===== Headers de pantalla (Módulos 5 y 6) ===== */
.pantalla-header {
    color: #fff;
    text-align: center;
    padding: 1rem;
    border-radius: 1rem;
}

.pantalla-header-patologias  { background: linear-gradient(135deg, #4c9be8, #2f6fb5); }
.pantalla-header-piel        { background: linear-gradient(135deg, #8f6bc9, #6a4c93); }
.pantalla-header-general     { background: linear-gradient(135deg, #2e9bb5, #1f7a8c); }
.pantalla-header-emociones   { background: linear-gradient(135deg, #a688c9, #8e6bb0); }
.pantalla-header-relajacion  { background: linear-gradient(135deg, #43bb9c, #2e9e83); }
.pantalla-header-vitales     { background: linear-gradient(135deg, #ef6b63, #d64550); }
.pantalla-header-palabras    { background: linear-gradient(135deg, #8f6bc9, #6a4c93); }
.pantalla-header-mandalas    { background: linear-gradient(135deg, #f0964a, #e67e22); }
.pantalla-header-respiracion { background: linear-gradient(135deg, #2eb8a3, #1f9e8c); }
.pantalla-header-familiares  { background: linear-gradient(135deg, #8f6bc9, #6a4c93); }
.pantalla-header-emergencia  { background: linear-gradient(135deg, #d8493a, #c0392b); }

/* ===== Tarjetas seleccionables (piel/respiración/emociones/factores) ===== */
.opcion-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.25rem;
    padding: 0.9rem 0.5rem;
    border: 2px solid #ece4f5;
    border-radius: 0.9rem;
    background-color: #faf8fd;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}

.opcion-card:hover {
    border-color: var(--color-primario);
}

.opcion-card-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.opcion-card-activa {
    border-color: var(--color-primario);
    background-color: #eaf6f3;
    transform: translateY(-2px);
}

.opcion-card-icono {
    font-size: 1.8rem;
    line-height: 1;
}

.opcion-card-nombre {
    font-weight: 600;
    font-size: 0.95rem;
}

.opcion-card-desc {
    font-size: 0.78rem;
    color: #666;
}

.opcion-card-sm {
    padding: 0.6rem 0.3rem;
}

.opcion-card-sm .opcion-card-icono {
    font-size: 1.4rem;
}

/* ===== Selector de foto ===== */
.foto-picker {
    display: block;
    border: 2px dashed #bbb;
    border-radius: 1rem;
    cursor: pointer;
    color: #555;
    transition: border-color 0.15s ease;
}

.foto-picker:hover {
    border-color: var(--color-primario);
}

/* ===== Botones de hub (Salud / Bienestar) ===== */
.btn-hub {
    border: none;
    border-radius: 1.25rem;
    color: #fff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-hub:hover,
.btn-hub:focus {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2);
    color: #fff;
}

.btn-hub:active {
    transform: translateY(0) scale(0.99);
}

.btn-hub-piel        { background: linear-gradient(145deg, #8f6bc9, #6a4c93); }
.btn-hub-general      { background: linear-gradient(145deg, #2e9bb5, #1f7a8c); }
.btn-hub-emociones    { background: linear-gradient(145deg, #a688c9, #8e6bb0); }
.btn-hub-relajacion   { background: linear-gradient(145deg, #43bb9c, #2e9e83); }
.btn-hub-vitales      { background: linear-gradient(145deg, #ef6b63, #d64550); }
.btn-hub-palabras     { background: linear-gradient(145deg, #8f6bc9, #6a4c93); }
.btn-hub-mandalas     { background: linear-gradient(145deg, #f0964a, #e67e22); }
.btn-hub-respiracion  { background: linear-gradient(145deg, #2eb8a3, #1f9e8c); }
.btn-hub-disabled     { background-color: #b0b0b0; color: #fff; }

.vital-icono {
    font-size: 1.3rem;
    margin-right: 0.3rem;
}

/* ===== Ejercicio: Palabras para recordar ===== */
.bg-purple { background-color: #6a4c93 !important; }

.palabra-tarjeta {
    background-color: #f3ecf9;
    border: 2px solid #6a4c93;
    border-radius: 0.75rem;
    padding: 1rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: #4a3266;
    text-align: center;
}

.palabra-opcion {
    border: 2px solid #ccc;
    border-radius: 0.75rem;
    padding: 0.9rem;
    font-size: 1.1rem;
    font-weight: 600;
    background-color: #fafafa;
    transition: all 0.15s ease;
}

.palabra-opcion-activa {
    border-color: #6a4c93;
    background-color: #ded0ee;
    color: #4a3266;
    transform: translateY(-2px);
}

/* ===== Ejercicio: Pintar mandalas ===== */
.mandala-contenedor {
    width: 100%;
    max-width: 420px;
    aspect-ratio: 1 / 1;
}

.mandala-region {
    cursor: pointer;
    transition: fill 0.1s ease;
}

.mandala-region:hover {
    opacity: 0.85;
}

/* ===== Ejercicio: Respiración guiada ===== */
.respiracion-contenedor {
    width: 100%;
    max-width: 260px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.respiracion-circulo {
    width: 55%;
    height: 55%;
    border-radius: 50%;
    background-color: #1f9e8c;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    transition-property: width, height;
    transition-timing-function: ease-in-out;
    transition-duration: 0.3s;
}

.respiracion-circulo.respiracion-inhalar {
    width: 90%;
    height: 90%;
}

.respiracion-circulo.respiracion-exhalar {
    width: 40%;
    height: 40%;
}

.btn-ritmo.active {
    background-color: var(--color-primario);
    color: #fff;
}

.btn-diseno.active {
    background-color: var(--color-primario);
    color: #fff;
    border-color: var(--color-primario);
}

.color-swatch {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 3px solid #ddd;
    cursor: pointer;
    padding: 0;
}

.color-swatch-activo {
    border-color: #333;
    transform: scale(1.15);
}

.btn-purple {
    background-color: #6a4c93;
    border-color: #6a4c93;
    color: #fff;
}
.btn-purple:hover { background-color: #58407a; color: #fff; }

.btn-teal {
    background-color: #2e9e83;
    border-color: #2e9e83;
    color: #fff;
}
.btn-teal:hover { background-color: #24816b; color: #fff; }

.seccion-titulo {
    border-left: 4px solid var(--color-primario);
    padding-left: 0.6rem;
}

/* ===== Módulo 7: Familiares ===== */
.consejo-caja {
    background-color: #f3ecf9;
    border: 1px solid #d9c8ec;
    border-radius: 0.75rem;
    padding: 0.9rem 1rem;
    font-size: 0.95rem;
}

.familiar-tarjeta {
    border: 1px solid #e0e0e0;
    border-radius: 0.9rem;
    padding: 0.9rem;
    background-color: #fff;
}

.familiar-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #6a4c93;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

/* ===== Módulo 8: Emergencia ===== */
.info-item {
    background-color: #fdecea;
    border-radius: 0.6rem;
    padding: 0.6rem 0.8rem;
}

.btn-panico {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #e74c3c, #c0392b 70%);
    color: #fff;
    border: 6px solid #f5b7b1;
    font-size: 1.3rem;
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(192, 57, 43, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.btn-panico:active {
    transform: scale(0.96);
}

/* ===== Módulo 9: Chat con Claudia ===== */
.chat-encabezado {
    background-color: #6a4c93;
    color: #fff;
}

.chat-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
}

.punto-online {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #2ecc71;
    margin-right: 3px;
}

.chat-mensajes {
    overflow-y: auto;
    background-color: #f5f1fa;
}

.chat-fila {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.chat-fila-usuario {
    justify-content: flex-end;
}

.chat-avatar-mini {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.chat-burbuja {
    max-width: 75%;
    padding: 0.7rem 1rem;
    border-radius: 1rem;
    font-size: 1.05rem;
}

.chat-burbuja-usuario {
    background-color: #d9f2d9;
    border-bottom-right-radius: 0.25rem;
}

.chat-burbuja-asistente {
    background-color: #e6def2;
    border-bottom-left-radius: 0.25rem;
}

.chat-hora {
    font-size: 0.7rem;
    color: #777;
    text-align: right;
    margin-top: 0.2rem;
}

.chat-accesos {
    background-color: #fff;
    border-top: 1px solid #eee;
}

.acceso-rapido {
    border: none;
    border-radius: 0.9rem;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.7rem 0.3rem;
}

.acceso-hablar       { background-color: #8e6bb0; }
.acceso-familia       { background-color: #3498db; }
.acceso-emergencia    { background-color: #e05a6e; }
.acceso-relajacion    { background-color: #2e9e83; }
.acceso-ubicacion     { background-color: #1f9e8c; }

.acceso-hablar-activo {
    animation: pulso-hablar 1s infinite;
}

@keyframes pulso-hablar {
    0%   { box-shadow: 0 0 0 0 rgba(142, 107, 176, 0.6); }
    100% { box-shadow: 0 0 0 12px rgba(142, 107, 176, 0); }
}

.chat-input-caja {
    background-color: #fff;
    border-top: 1px solid #eee;
}

.chat-btn-enviar {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =====================================================================
   ===== EFECTOS "MÁS ENGANCHE" — Bienvenida / Dashboard / Chat ========
   Capa de mejoras visuales: fondos vivos, entradas animadas, brillo en
   botones y partículas flotantes. Todo respeta prefers-reduced-motion
   y mantiene alto contraste / tipografía grande para adultos mayores.
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* ----- Fondos vivos: degradé que respira lentamente ----- */
body.app-adulto-mayor {
    background-size: 220% 220% !important;
    animation: fondoVivo 18s ease-in-out infinite;
    position: relative;
}

@keyframes fondoVivo {
    0%   { background-position: 0% 30%; }
    50%  { background-position: 100% 70%; }
    100% { background-position: 0% 30%; }
}

/* ----- Partículas flotantes decorativas (inyectadas por efectos.js) ----- */
.decoracion-flotante {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.particula-flotante {
    position: absolute;
    bottom: -40px;
    width: var(--tamano, 16px);
    height: var(--tamano, 16px);
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.85), rgba(255,255,255,0.15) 70%);
    border-radius: 50%;
    filter: blur(0.5px);
    animation: flotarArriba var(--duracion, 14s) ease-in var(--retraso, 0s) infinite;
    opacity: 0;
}

@keyframes flotarArriba {
    0%   { transform: translateY(0) translateX(0) scale(0.8); opacity: 0; }
    10%  { opacity: 0.55; }
    50%  { transform: translateY(-52vh) translateX(18px) scale(1.05); }
    90%  { opacity: 0.35; }
    100% { transform: translateY(-105vh) translateX(-14px) scale(0.9); opacity: 0; }
}

/* El contenido va siempre por encima de las partículas */
body.app-adulto-mayor > .container,
body.app-adulto-mayor > .container-fluid {
    position: relative;
    z-index: 1;
}

/* ----- Entradas animadas escalonadas (dashboard, bienvenida) ----- */
.anim-entrada {
    opacity: 0;
    animation: entradaSuave 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--orden, 0) * 0.09s);
}

@keyframes entradaSuave {
    from { opacity: 0; transform: translateY(18px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ----- Bienvenida: logo, foto y textos con más vida ----- */
.welcome-screen {
    background-size: 220% 220%;
    animation: fondoVivo 14s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.welcome-logo {
    animation: apareceLogo 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes apareceLogo {
    0%   { opacity: 0; transform: scale(0.7) translateY(-10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.welcome-photo {
    animation: entradaSuave 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s backwards,
               anilloPulso 2.6s ease-in-out 1s infinite;
    box-shadow: 0 0 0 0 rgba(46, 125, 111, 0.5);
}

@keyframes anilloPulso {
    0%   { box-shadow: 0 0 0 0 rgba(46, 125, 111, 0.45); }
    70%  { box-shadow: 0 0 0 14px rgba(46, 125, 111, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 125, 111, 0); }
}

.welcome-title,
.welcome-subtitle,
.welcome-firma {
    animation: entradaSuave 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.welcome-title    { animation-delay: 0.25s; }
.welcome-subtitle { animation-delay: 0.35s; }
.welcome-firma    { animation-delay: 0.45s; }

/* Botones grandes de bienvenida: brillo que recorre el botón al pasar el mouse */
.welcome-screen .btn-lg,
.btn-dashboard,
.btn-hub {
    position: relative;
    overflow: hidden;
}

.welcome-screen .btn-lg::after,
.btn-dashboard::after,
.btn-hub::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: skewX(-20deg);
    transition: left 0.65s ease;
}

.welcome-screen .btn-lg:hover::after,
.btn-dashboard:hover::after,
.btn-hub:hover::after {
    left: 125%;
}

/* ----- Dashboard: íconos con vida propia + más "pop" al interactuar ----- */
.btn-dashboard .fa-2x {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-dashboard:hover .fa-2x {
    transform: scale(1.22) rotate(-6deg);
}

.btn-dashboard {
    animation: entradaSuave 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: calc(var(--orden, 0) * 0.08s);
}

.btn-dashboard:hover,
.btn-dashboard:focus {
    transform: translateY(-6px) scale(1.035);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.26);
}

#dashboard-container h1 {
    animation: entradaSuave 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----- Chat: encabezado, avatar y burbujas con más movimiento ----- */
.chat-encabezado {
    background: linear-gradient(120deg, #7a5aa8, #6a4c93 45%, #58407a);
    background-size: 200% 200%;
    animation: fondoVivo 10s ease-in-out infinite;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.chat-avatar {
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(255, 255, 255, 0.35);
    animation: anilloPulsoBlanco 2.4s ease-in-out infinite;
}

@keyframes anilloPulsoBlanco {
    0%   { box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(255,255,255,0.35); }
    70%  { box-shadow: 0 0 0 2px #fff, 0 0 0 10px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(255,255,255,0); }
}

.punto-online {
    animation: parpadeoOnline 1.8s ease-in-out infinite;
}

@keyframes parpadeoOnline {
    0%, 100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.55); }
    50%      { box-shadow: 0 0 0 5px rgba(46, 204, 113, 0); }
}

.chat-mensajes {
    background-image:
        radial-gradient(circle at 15% 20%, rgba(106, 76, 147, 0.06) 0, transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(46, 158, 131, 0.06) 0, transparent 45%);
}

.chat-fila {
    animation: burbujaEntra 0.35s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes burbujaEntra {
    from { opacity: 0; transform: translateY(10px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.chat-burbuja {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s ease;
}

.chat-burbuja:hover {
    transform: translateY(-1px);
}

.acceso-rapido {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease, filter 0.18s ease;
}

.acceso-rapido:hover {
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.22);
    filter: brightness(1.06);
    color: #fff;
}

.acceso-rapido .fa-solid {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.acceso-rapido:hover .fa-solid {
    transform: scale(1.18) translateY(-2px);
}

.chat-btn-enviar {
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
    box-shadow: 0 4px 10px rgba(106, 76, 147, 0.45);
}

.chat-btn-enviar:hover {
    transform: scale(1.1) rotate(8deg);
    box-shadow: 0 6px 16px rgba(106, 76, 147, 0.6);
}

.chat-btn-enviar:active {
    transform: scale(0.94);
}

#input-mensaje:focus {
    box-shadow: 0 0 0 3px rgba(106, 76, 147, 0.25);
    border-color: #6a4c93;
}

/* ===== Módulo: Patologías y medicación ===== */
.patologia-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background-color: #e7f1fd;
    border: 1px solid #bcdaf7;
    color: #2f6fb5;
    border-radius: 2rem;
    padding: 0.4rem 0.9rem;
    font-weight: 600;
    font-size: 0.95rem;
}

.patologia-chip button {
    background: none;
    border: none;
    color: #2f6fb5;
    line-height: 1;
    padding: 0;
}

.medicamento-tarjeta {
    border: 1px solid #e0e0e0;
    border-radius: 0.9rem;
    padding: 0.9rem;
    background-color: #fff;
}

.horario-chip {
    display: inline-block;
    background-color: #eef4fb;
    border: 1px solid #c9ddf2;
    border-radius: 0.6rem;
    padding: 0.25rem 0.6rem;
    font-weight: 600;
    margin: 0.15rem;
}

.toma-tarjeta {
    border-radius: 0.9rem;
    padding: 0.9rem;
    border: 1px solid #e0e0e0;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.toma-tarjeta-tomado   { background-color: #eaf7f1; border-color: #bfe5cf; }
.toma-tarjeta-omitido  { background-color: #f7f0ea; border-color: #ecd9bf; opacity: 0.85; }
.toma-tarjeta-vencido  { background-color: #fdecea; border-color: #f3bdb7; }

.toma-hora {
    font-size: 1.3rem;
    font-weight: 800;
    color: #2f6fb5;
    min-width: 70px;
    text-align: center;
}