/* ============================================================================
   MÉTODO VIBRA · SISTEMA DE DISEÑO 2026 (revisión refinada)
   ----------------------------------------------------------------------------
   Tema claro, tipografía Inter, violeta y dorado como identidad de marca.

   Criterios de esta revisión:
     · Jerarquía tipográfica clara: qué se lee primero, segundo y tercero.
     · Bordes de 1px y sombras contenidas: menos "flotante", más preciso.
     · Ritmo de espaciado sobre una base de 4px.
     · Estados de foco visibles (accesibilidad y sensación de producto cuidado).
     · Sin movimientos innecesarios: los elementos no "saltan" al pasar el mouse.

   Índice:
      1. Tokens (variables de diseño)
      2. Base y tipografía
      3. Accesibilidad (foco, selección, movimiento reducido)
      4. Barra superior
      5. Menú lateral
      6. Contenedor principal
      7. Encabezado de página (hero)
      8. Tarjetas
      9. Indicadores (KPI)
     10. Botones
     11. Formularios
     12. Avisos
     13. Tablas
     14. Utilidades
     15. Responsive
     16. Páginas públicas (sin sesión iniciada)
     17. Directorio de terapeutas
     18. Impresión (informes y certificados)
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ============================================================================
   1. TOKENS
   ============================================================================ */
:root {
    /* -- Marca ------------------------------------------------------------ */
    --violeta: #6D28D9;
    --violeta-oscuro: #5B21B6;
    --violeta-tinta: #4C1D95;
    --violeta-claro: #A78BFA;
    --violeta-suave: #F3F0FF;
    --violeta-borde: #DDD4FB;

    --dorado: #D4AF37;
    --dorado-oscuro: #A9861F;
    --dorado-suave: #FEF7E3;
    --dorado-borde: #F0E0AE;

    /* -- Neutros ---------------------------------------------------------- */
    --fondo: #F6F7FB;
    --fondo-alt: #EEF1F7;
    --tarjeta: #FFFFFF;
    --texto: #111827;
    --texto-media: #374151;
    --texto-suave: #6B7280;
    --texto-tenue: #9CA3AF;
    --borde: #E3E7EF;
    --borde-fuerte: #CBD3E0;

    /* -- Estado ----------------------------------------------------------- */
    --exito: #059669;
    --exito-suave: #E7F6F0;
    --exito-borde: #A7E3CD;
    --alerta: #D97706;
    --alerta-suave: #FEF6E7;
    --alerta-borde: #F3D9A6;
    --error: #DC2626;
    --error-suave: #FDECEC;
    --error-borde: #F5BDBD;
    --info: #2563EB;
    --info-suave: #EFF4FE;
    --info-borde: #BFD3F8;

    /* -- Sombras (contenidas, en dos capas finas) ------------------------- */
    --sombra-sm: 0 1px 2px rgba(17, 24, 39, 0.04);
    --sombra-md: 0 1px 3px rgba(17, 24, 39, 0.05), 0 6px 16px -8px rgba(17, 24, 39, 0.10);
    --sombra-lg: 0 2px 6px rgba(17, 24, 39, 0.06), 0 18px 40px -20px rgba(17, 24, 39, 0.18);
    --sombra-violeta: 0 2px 6px rgba(109, 40, 217, 0.16), 0 14px 28px -14px rgba(109, 40, 217, 0.42);

    /* -- Radios ----------------------------------------------------------- */
    --radio-xs: 8px;
    --radio-sm: 10px;
    --radio-md: 14px;
    --radio-lg: 20px;
    --radio-full: 999px;

    /* -- Movimiento ------------------------------------------------------- */
    --transicion: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    --transicion-lenta: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);

    /* -- Foco ------------------------------------------------------------- */
    --anillo-foco: 0 0 0 3px rgba(109, 40, 217, 0.18);
    --anillo-foco-claro: 0 0 0 3px rgba(255, 255, 255, 0.55);
}

/* ============================================================================
   2. BASE Y TIPOGRAFÍA
   ============================================================================ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--fondo);
    /* Halo de color muy tenue: da profundidad sin ensuciar la lectura. */
    background-image:
        radial-gradient(1100px 520px at 8% -10%, rgba(109, 40, 217, 0.055), transparent 60%),
        radial-gradient(900px 460px at 102% -4%, rgba(212, 175, 55, 0.05), transparent 55%);
    background-attachment: fixed;
    color: var(--texto);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

/* Sin color propio a propósito: los títulos heredan el color de su contenedor.
   Así los que van sobre fondos de color (los "hero" de cada pantalla) siguen
   viéndose en blanco, como estaban. */
h1, h2, h3, h4 {
    line-height: 1.25;
    letter-spacing: -0.02em;
    font-weight: 700;
}

h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.15rem); }
h2 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem); }
h3 { font-size: 1.1rem; }
h4 { font-size: 0.98rem; letter-spacing: -0.01em; }

p { line-height: 1.65; }

small { font-size: 0.85em; }

strong { font-weight: 650; }

hr {
    border: none;
    border-top: 1px solid var(--borde);
    margin: 24px 0;
}

/* Cifras alineadas: los números no "bailan" al cambiar de valor. */
.valor, .kpi .valor, .tabla-vibra td, .num {
    font-variant-numeric: tabular-nums;
}

/* Texto solo para lectores de pantalla. */
.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================================
   3. ACCESIBILIDAD
   ============================================================================ */
:focus-visible {
    outline: 2px solid var(--violeta);
    outline-offset: 2px;
    border-radius: var(--radio-xs);
}

::selection {
    background: rgba(109, 40, 217, 0.16);
    color: var(--violeta-tinta);
}

/* Barra de desplazamiento discreta y moderna. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--borde-fuerte) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--borde-fuerte);
    border: 3px solid transparent;
    border-radius: var(--radio-full);
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: var(--texto-tenue); }

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

/* ============================================================================
   4. BARRA SUPERIOR
   ============================================================================ */
.navbar-vibra {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    padding: 0 32px;
    height: 66px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--borde);
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar-vibra .marca {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 1.16rem;
    font-weight: 750;
    color: var(--texto);
    letter-spacing: -0.03em;
    transition: var(--transicion);
    user-select: none;
}

.navbar-vibra .marca:hover { opacity: 0.82; }

.navbar-vibra .marca img {
    width: 34px;
    height: 34px;
    border-radius: var(--radio-xs);
    box-shadow: var(--sombra-sm);
}

.navbar-vibra .marca .sub {
    color: var(--texto-tenue);
    font-weight: 500;
    font-size: 0.8rem;
    letter-spacing: 0;
    margin-left: 2px;
}

.navbar-vibra .nav-links {
    display: flex;
    gap: 2px;
    align-items: center;
    flex-wrap: wrap;
}

.navbar-vibra .nav-links a {
    color: var(--texto-suave);
    text-decoration: none;
    padding: 7px 13px;
    border-radius: var(--radio-xs);
    font-size: 0.875rem;
    font-weight: 500;
    transition: var(--transicion);
    position: relative;
}

.navbar-vibra .nav-links a:hover {
    color: var(--texto);
    background: var(--fondo-alt);
}

.navbar-vibra .nav-links a.activo {
    color: var(--violeta);
    background: var(--violeta-suave);
    font-weight: 600;
}

/* ============================================================================
   5. MENÚ LATERAL
   ============================================================================ */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.42);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: var(--transicion-lenta);
}

.sidebar-overlay.activo { opacity: 1; visibility: visible; }

.sidebar-vibra {
    position: fixed;
    top: 0;
    left: -330px;
    width: 330px;
    height: 100vh;
    background: var(--tarjeta);
    border-right: 1px solid var(--borde);
    box-shadow: var(--sombra-lg);
    z-index: 999;
    transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.sidebar-vibra.abierto { left: 0; }

.sidebar-header {
    padding: 26px 24px 24px;
    background:
        radial-gradient(420px 220px at 88% -30%, rgba(212, 175, 55, 0.30), transparent 62%),
        linear-gradient(150deg, var(--violeta) 0%, var(--violeta-oscuro) 100%);
    color: #fff;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.sidebar-cerrar {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: var(--radio-xs);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transicion);
}

.sidebar-cerrar:hover { background: rgba(255, 255, 255, 0.28); }

.sidebar-foto,
.sidebar-foto-placeholder {
    width: 72px;
    height: 72px;
    border-radius: var(--radio-full);
    border: 2px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    margin-bottom: 14px;
}

.sidebar-foto { object-fit: cover; display: block; }

.sidebar-foto-placeholder {
    background: rgba(255, 255, 255, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #fff;
}

.sidebar-nombre {
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 3px;
}

.sidebar-correo {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 12px;
    word-break: break-word;
}

.sidebar-plan {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.24);
    padding: 4px 11px;
    border-radius: var(--radio-full);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.sidebar-body { flex: 1; padding: 18px 0 8px; }

.sidebar-seccion { margin-bottom: 22px; }

.sidebar-seccion-titulo {
    padding: 0 24px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--texto-tenue);
    font-weight: 700;
    margin-bottom: 8px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    color: var(--texto-media);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: var(--transicion);
}

.sidebar-link:hover {
    background: var(--fondo);
    color: var(--texto);
}

.sidebar-link.activo {
    background: var(--violeta-suave);
    color: var(--violeta-tinta);
    font-weight: 650;
    border-left-color: var(--violeta);
}

/* Iconos del menú: SVG en línea que hereda el color del enlace. */
.sidebar-link .icono {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--texto-tenue);
    transition: var(--transicion);
}

.sidebar-link:hover .icono { color: var(--texto-suave); }
.sidebar-link.activo .icono { color: var(--violeta); }

.sidebar-footer {
    padding: 14px 20px 18px;
    border-top: 1px solid var(--borde);
    position: sticky;
    bottom: 0;
    background: var(--tarjeta);
}

/* Los documentos legales al pie del menú: la política de datos tiene que estar
   a disposición del público, y quien ya está dentro es quien más la necesita. */
.sidebar-legal {
    margin: 10px 0 0;
    font-size: 0.74rem;
    color: var(--texto-tenue);
    text-align: center;
}
.sidebar-legal a { color: var(--texto-suave); text-decoration: none; }
.sidebar-legal a:hover { color: var(--violeta); text-decoration: underline; }

.sidebar-salir {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: var(--error);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    border-radius: var(--radio-sm);
    transition: var(--transicion);
}

.sidebar-salir:hover { background: var(--error-suave); }

.sidebar-salir .icono {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================================
   6. CONTENEDOR PRINCIPAL
   ============================================================================ */
.contenedor-vibra {
    max-width: 1240px;
    margin: 0 auto;
    padding: 32px 32px 64px;
}

/* ============================================================================
   7. ENCABEZADO DE PÁGINA (HERO)
   ============================================================================ */
.hero-vibra {
    background:
        radial-gradient(520px 300px at 90% -20%, rgba(255, 255, 255, 0.22), transparent 60%),
        linear-gradient(135deg, var(--violeta-tinta) 0%, var(--violeta) 52%, #7C3AED 100%);
    border-radius: var(--radio-lg);
    padding: 36px 40px;
    color: #fff;
    margin-bottom: 28px;
    box-shadow: var(--sombra-violeta);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Retícula técnica muy tenue: aporta el aire "tecnológico". */
.hero-vibra::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(520px 300px at 80% 0%, #000 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(520px 300px at 80% 0%, #000 0%, transparent 75%);
    pointer-events: none;
    z-index: -1;
}

.hero-vibra h1 {
    font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem);
    font-weight: 750;
    letter-spacing: -0.03em;
    margin-bottom: 10px;
    color: #fff;
}

.hero-vibra h1 .nombre { color: #F6DC7A; }

.hero-vibra .frase {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
    margin-bottom: 18px;
    max-width: 70ch;
}

.hero-vibra p { color: rgba(255, 255, 255, 0.9); }

.hero-vibra .badge-plan {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.28);
    padding: 6px 15px;
    border-radius: var(--radio-full);
    font-size: 0.82rem;
    font-weight: 600;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ============================================================================
   8. TARJETAS
   ============================================================================ */
.tarjeta-vibra {
    background: var(--tarjeta);
    border-radius: var(--radio-md);
    padding: 24px 26px;
    border: 1px solid var(--borde);
    box-shadow: var(--sombra-sm);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.tarjeta-vibra + .tarjeta-vibra { margin-top: 18px; }

/* Al pasar el mouse se acentúa el borde, no se mueve la tarjeta. */
.tarjeta-vibra:hover {
    border-color: var(--borde-fuerte);
    box-shadow: var(--sombra-md);
}

.tarjeta-vibra h3 {
    color: var(--texto);
    font-size: 1.1em;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--borde);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ============================================================================
   9. INDICADORES (KPI)
   ============================================================================ */
.grid-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.kpi {
    background: var(--tarjeta);
    border-radius: var(--radio-md);
    padding: 20px 22px;
    border: 1px solid var(--borde);
    box-shadow: var(--sombra-sm);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    position: relative;
    overflow: hidden;
}

/* Filo de color superior: identifica el indicador sin gritar. */
.kpi::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--violeta), var(--violeta-claro));
}

.kpi:hover {
    border-color: var(--borde-fuerte);
    box-shadow: var(--sombra-md);
}

.kpi .valor {
    font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.15rem);
    font-weight: 750;
    color: var(--violeta);
    letter-spacing: -0.04em;
    line-height: 1.05;
    margin-bottom: 6px;
}

.kpi .etiqueta {
    color: var(--texto-suave);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.kpi.destacado {
    background: linear-gradient(140deg, var(--violeta-tinta) 0%, var(--violeta) 100%);
    border-color: transparent;
    box-shadow: var(--sombra-violeta);
}

.kpi.destacado::before { background: linear-gradient(90deg, #F6DC7A, var(--dorado)); }

.kpi.destacado .valor { color: #fff; }

.kpi.destacado .etiqueta { color: rgba(255, 255, 255, 0.82); }

/* ============================================================================
   10. BOTONES
   ============================================================================ */
.btn-vibra {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 10px 20px;
    border-radius: var(--radio-sm);
    font-weight: 600;
    font-size: 0.9rem;
    font-family: inherit;
    line-height: 1.2;
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transicion);
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}

.btn-vibra:active { transform: translateY(1px); }

.btn-vibra:disabled,
.btn-vibra[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-vibra-primario {
    background: linear-gradient(180deg, #7C3AED 0%, var(--violeta) 100%);
    color: #fff;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.btn-vibra-primario:hover {
    background: linear-gradient(180deg, var(--violeta) 0%, var(--violeta-oscuro) 100%);
    box-shadow: var(--sombra-violeta);
}

.btn-vibra-secundario {
    background: var(--violeta-suave);
    color: var(--violeta-tinta);
    border-color: var(--violeta-borde);
}

.btn-vibra-secundario:hover {
    background: #EBE5FE;
    border-color: var(--violeta-claro);
}

.btn-vibra-dorado {
    background: linear-gradient(180deg, #E3C558 0%, var(--dorado) 100%);
    color: #40320A;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.btn-vibra-dorado:hover {
    background: linear-gradient(180deg, var(--dorado) 0%, var(--dorado-oscuro) 100%);
    box-shadow: 0 2px 6px rgba(212, 175, 55, 0.30), 0 14px 28px -14px rgba(212, 175, 55, 0.55);
}

.btn-vibra-ghost {
    background: var(--tarjeta);
    color: var(--texto-media);
    border-color: var(--borde);
}

.btn-vibra-ghost:hover {
    background: var(--fondo);
    border-color: var(--borde-fuerte);
    color: var(--texto);
}

.btn-vibra-peligro {
    background: var(--tarjeta);
    color: var(--error);
    border-color: var(--error-borde);
}

.btn-vibra-peligro:hover {
    background: var(--error-suave);
    border-color: var(--error);
}

/* Variante compacta: tablas y listas densas. */
.btn-vibra.btn-vibra-mini {
    min-height: 34px;
    padding: 6px 13px;
    font-size: 0.82rem;
}

/* ============================================================================
   11. FORMULARIOS
   ============================================================================ */
.form-vibra label {
    display: block;
    font-weight: 600;
    margin: 16px 0 6px;
    color: var(--texto-media);
    font-size: 0.84rem;
    letter-spacing: 0.005em;
}

.form-vibra input,
.form-vibra select,
.form-vibra textarea {
    width: 100%;
    padding: 11px 14px;
    border-radius: var(--radio-sm);
    border: 1px solid var(--borde-fuerte);
    font-size: 0.92rem;
    font-family: inherit;
    color: var(--texto);
    background: var(--tarjeta);
    transition: var(--transicion);
}

.form-vibra textarea { resize: vertical; min-height: 104px; line-height: 1.6; }

.form-vibra input::placeholder,
.form-vibra textarea::placeholder { color: var(--texto-tenue); }

.form-vibra input:hover,
.form-vibra select:hover,
.form-vibra textarea:hover { border-color: var(--texto-tenue); }

.form-vibra input:focus,
.form-vibra select:focus,
.form-vibra textarea:focus {
    outline: none;
    border-color: var(--violeta);
    box-shadow: var(--anillo-foco);
}

.form-vibra input:disabled,
.form-vibra select:disabled,
.form-vibra textarea:disabled {
    background: var(--fondo-alt);
    color: var(--texto-suave);
    cursor: not-allowed;
}

.form-vibra select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}

/* Ayuda bajo un campo. */
.form-vibra .ayuda {
    display: block;
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--texto-suave);
}

/* Quitar el estilo por defecto del selector de archivos. */
.form-vibra input[type="file"] {
    padding: 9px 12px;
    cursor: pointer;
    font-size: 0.86rem;
}

.form-vibra input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 6px 14px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-xs);
    background: var(--fondo);
    color: var(--texto-media);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    transition: var(--transicion);
}

.form-vibra input[type="file"]::file-selector-button:hover {
    background: var(--fondo-alt);
    border-color: var(--borde-fuerte);
}

.form-vibra input[type="checkbox"],
.form-vibra input[type="radio"] {
    width: auto;
    accent-color: var(--violeta);
    cursor: pointer;
}

/* ============================================================================
   12. AVISOS
   ============================================================================ */
.aviso-vibra {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 18px;
    border-radius: var(--radio-sm);
    border: 1px solid transparent;
    border-left-width: 3px;
    margin-bottom: 18px;
    font-weight: 500;
    font-size: 0.9rem;
    box-shadow: var(--sombra-sm);
    animation: aviso-entra 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes aviso-entra {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* `success` es el nombre que usa buena parte del código y `ok` el que usan
   otras pantallas: los dos pintan el mismo aviso verde. */
.aviso-vibra.ok,
.aviso-vibra.success {
    background: var(--exito-suave);
    color: #04543C;
    border-color: var(--exito-borde);
    border-left-color: var(--exito);
}

.aviso-vibra.error {
    background: var(--error-suave);
    color: #8C1D1D;
    border-color: var(--error-borde);
    border-left-color: var(--error);
}

.aviso-vibra.info {
    background: var(--violeta-suave);
    color: var(--violeta-tinta);
    border-color: var(--violeta-borde);
    border-left-color: var(--violeta);
}

.aviso-vibra.alerta {
    background: var(--alerta-suave);
    color: #8A4B08;
    border-color: var(--alerta-borde);
    border-left-color: var(--alerta);
}

/* ============================================================================
   13. TABLAS
   ============================================================================ */
.tabla-vibra {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.89rem;
}

.tabla-vibra thead th {
    background: var(--fondo);
    color: var(--texto-suave);
    font-weight: 650;
    text-align: left;
    padding: 11px 16px;
    border-bottom: 1px solid var(--borde);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
}

.tabla-vibra tbody td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--borde);
    color: var(--texto-media);
    vertical-align: middle;
}

.tabla-vibra tbody tr { transition: background 0.14s ease; }

.tabla-vibra tbody tr:hover { background: var(--fondo); }

.tabla-vibra tbody tr:last-child td { border-bottom: none; }

/* Envoltorio para que las tablas anchas se desplacen sin romper el diseño. */
.tabla-scroll {
    overflow-x: auto;
    border: 1px solid var(--borde);
    border-radius: var(--radio-md);
    background: var(--tarjeta);
}

/* ============================================================================
   14. UTILIDADES
   ============================================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: var(--radio-full);
    font-size: 0.74rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
}

.badge.neutro { background: var(--fondo-alt); color: var(--texto-suave); border-color: var(--borde); }
.badge.ok { background: var(--exito-suave); color: #04543C; border-color: var(--exito-borde); }
.badge.alerta { background: var(--alerta-suave); color: #8A4B08; border-color: var(--alerta-borde); }
.badge.error { background: var(--error-suave); color: #8C1D1D; border-color: var(--error-borde); }
.badge.violeta { background: var(--violeta-suave); color: var(--violeta-tinta); border-color: var(--violeta-borde); }
.badge.dorado { background: var(--dorado-suave); color: #7A5A0C; border-color: var(--dorado-borde); }

.separador { height: 1px; background: var(--borde); margin: 22px 0; border: none; }

.texto-suave { color: var(--texto-suave); }
.texto-tenue { color: var(--texto-tenue); }
.texto-centro { text-align: center; }
.sin-datos {
    color: var(--texto-suave);
    text-align: center;
    padding: 28px 16px;
    font-size: 0.92rem;
}

/* ============================================================================
   15. RESPONSIVE
   ============================================================================ */
@media (max-width: 900px) {
    .contenedor-vibra { padding: 24px 20px 56px; }
    .navbar-vibra { padding: 0 20px; }
}

@media (max-width: 768px) {
    .navbar-vibra {
        height: auto;
        padding: 13px 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 11px;
    }

    .navbar-vibra .nav-links {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        gap: 4px;
        padding-bottom: 3px;
        scrollbar-width: none;
    }

    .navbar-vibra .nav-links::-webkit-scrollbar { display: none; }

    .navbar-vibra .nav-links a {
        padding: 6px 11px;
        font-size: 0.82rem;
        white-space: nowrap;
    }

    .contenedor-vibra { padding: 20px 16px 52px; }

    /* El menú lateral ocupa todo el ancho: antes esta regla no se aplicaba
       por un comentario mal escrito en el CSS anterior. */
    .sidebar-vibra {
        width: 100%;
        left: -100%;
        border-right: none;
    }

    .hero-vibra { padding: 26px 22px; border-radius: var(--radio-md); }

    .grid-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

    .kpi { padding: 16px 17px; }

    .tarjeta-vibra { padding: 20px 18px; border-radius: var(--radio-sm); }

    .aviso-vibra { font-size: 0.88rem; }
}

@media (max-width: 480px) {
    .grid-kpis { grid-template-columns: 1fr; }
    .navbar-vibra .marca .sub { display: none; }
    .btn-vibra { width: 100%; }
    .navbar-vibra .nav-links a,
    .sidebar-link { width: auto; }
}

/* ============================================================================
   16. PÁGINAS PÚBLICAS (sin sesión iniciada)
   Usan `base_publico.html`: una tarjeta centrada, sin menú lateral.
   ============================================================================ */
.cuerpo-publico {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 18px;
    background-image: linear-gradient(150deg, var(--violeta-tinta) 0%, var(--violeta) 55%, #7C3AED 100%);
    background-attachment: fixed;
}

.publico-envoltura { width: 100%; display: flex; justify-content: center; }

.publico-panel {
    width: 100%;
    max-width: 470px;
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
    box-shadow: 0 24px 60px -20px rgba(17, 24, 39, 0.45);
    padding: 42px 38px;
}

.publico-panel .logo-publico {
    width: 148px;
    height: auto;
    display: block;
    margin: 0 auto 16px;
}

.publico-panel h1 { text-align: center; font-size: 1.7rem; margin-bottom: 6px; }

.publico-panel .subtitulo-publico {
    text-align: center;
    color: var(--texto-suave);
    margin-bottom: 26px;
    font-size: 0.93rem;
}

.publico-panel .pie-publico {
    text-align: center;
    margin-top: 22px;
    font-size: 0.9rem;
    color: var(--texto-suave);
}

.publico-panel .pie-publico a { color: var(--violeta); font-weight: 600; text-decoration: none; }
.publico-panel .pie-publico a:hover { text-decoration: underline; }

.publico-panel .enlace-tenue {    display: block;
    text-align: center;
    margin-top: 16px;
    color: var(--texto-tenue);
    text-decoration: none;
    font-size: 0.88rem;
}

.publico-panel .enlace-tenue:hover { color: var(--violeta); }

@media (max-width: 520px) {
    .cuerpo-publico { padding: 16px 12px; }
    .publico-panel { padding: 30px 22px; border-radius: var(--radio-md); }
}

/* ============================================================================
   17. DIRECTORIO DE TERAPEUTAS Y PÁGINAS DEL CONSULTANTE
   El consultante no tiene cuenta, así que ve una barra de marca en vez del menú
   lateral; el resto del lenguaje visual es el mismo que el del panel.
   ============================================================================ */
.cuerpo-consultante {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--fondo);
    background-image:
        radial-gradient(1100px 520px at 8% -10%, rgba(109, 40, 217, 0.055), transparent 60%),
        radial-gradient(900px 460px at 102% -4%, rgba(212, 175, 55, 0.05), transparent 55%);
}

.barra-consultante {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    background: var(--tarjeta);
    border-bottom: 1px solid var(--borde);
    padding: 13px 26px;
    box-shadow: var(--sombra-sm);
}
.marca-consultante {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: var(--texto);
}
.marca-consultante img { height: 30px; width: auto; }
.marca-consultante-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.marca-consultante-texto strong { font-size: 0.94rem; line-height: 1.2; }
.marca-consultante-texto small {
    max-width: 360px;
    color: var(--texto-media);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.25;
}

.barra-consultante nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.barra-consultante nav a {
    text-decoration: none;
    color: var(--texto-media);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: var(--radio-full);
    transition: var(--transicion);
}
.barra-consultante nav a:hover { background: var(--violeta-suave); color: var(--violeta-tinta); }
.barra-consultante nav a.acceso { background: var(--violeta); color: #fff; }
.barra-consultante nav a.acceso:hover { background: var(--violeta-oscuro); }

.contenedor-consultante {
    flex: 1;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 30px 24px 60px;
}

.pie-consultante {
    background: var(--tarjeta);
    border-top: 1px solid var(--borde);
    padding: 26px 24px;
    text-align: center;
    font-size: 0.81rem;
    color: var(--texto-tenue);
    line-height: 1.7;
}
.pie-consultante a { color: var(--violeta); font-weight: 600; text-decoration: none; }
.pie-consultante a:hover { text-decoration: underline; }

/* Datos dentro del hero de marca (reutiliza .hero-vibra) */
.hero-vibra .bajada {
    font-size: 0.98rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 68ch;
    line-height: 1.65;
    margin-bottom: 6px;
}
.datos-hero { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 18px; }
.datos-hero .dato { display: flex; align-items: baseline; gap: 8px; }
.datos-hero .valor { font-size: 1.45rem; font-weight: 800; color: #F6DC7A; letter-spacing: -0.02em; }
.datos-hero .leyenda { font-size: 0.86rem; color: rgba(255, 255, 255, 0.85); }

/* Cómo funciona, en tres pasos */
.pasos-consultante {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}
.paso-consultante {
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio-md);
    padding: 20px 22px;
    box-shadow: var(--sombra-sm);
}
.paso-consultante .numero {
    width: 30px;
    height: 30px;
    border-radius: var(--radio-full);
    background: var(--violeta-suave);
    border: 1px solid var(--violeta-borde);
    color: var(--violeta);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 11px;
}
.paso-consultante h4 { font-size: 0.95rem; margin-bottom: 5px; }
.paso-consultante p { font-size: 0.86rem; color: var(--texto-suave); line-height: 1.6; }

/* Buscador: tarjeta blanca, igual que las del panel */
.buscador-directorio {
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-sm);
    padding: 20px 22px;
    margin-bottom: 22px;
}
.buscador-directorio .titulo-buscador {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--texto);
    margin-bottom: 14px;
}
.buscador-campos {
    display: grid;
    grid-template-columns: 2fr 1.5fr 1fr auto;
    gap: 12px;
    align-items: end;
}
.buscador-directorio label {
    display: block;
    font-size: 0.79rem;
    font-weight: 600;
    color: var(--texto-suave);
    margin-bottom: 5px;
}
.buscador-directorio input,
.buscador-directorio select { width: 100%; }

.directorio-rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 18px;
}

.tarjeta-terapeuta {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio-md);
    overflow: hidden;
    box-shadow: var(--sombra-sm);
    transition: var(--transicion);
}
.tarjeta-terapeuta:hover { box-shadow: var(--sombra-md); transform: translateY(-3px); }

/* El retrato manda: la foto ocupa la parte alta de la tarjeta y los datos van
   debajo. Cuando no hay foto se ve el degradado de la marca con la inicial. */
.tarjeta-terapeuta .retrato {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 176px;
    background: linear-gradient(150deg, var(--violeta-tinta) 0%, var(--violeta) 55%, #7C3AED 100%);
    text-decoration: none;
    overflow: hidden;
}
.tarjeta-terapeuta .retrato img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta-terapeuta .retrato .iniciales {
    color: rgba(255, 255, 255, 0.92);
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}
.tarjeta-terapeuta .sello-modalidad {
    position: absolute;
    left: 12px;
    bottom: 12px;
    background: rgba(17, 24, 39, 0.6);
    color: #fff;
    border-radius: var(--radio-full);
    padding: 4px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    backdrop-filter: blur(6px);
}
.tarjeta-terapeuta .cuerpo-tarjeta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    padding: 16px 18px 18px;
}
.tarjeta-terapeuta .area {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--violeta);
}
.tarjeta-terapeuta .area .mas { color: var(--texto-tenue); margin-left: 3px; }
.tarjeta-terapeuta h3 { font-size: 1.02rem; margin-bottom: 0; }
.tarjeta-terapeuta h3 a { color: inherit; text-decoration: none; }
.tarjeta-terapeuta h3 a:hover { color: var(--violeta); }
.tarjeta-terapeuta .ubicacion {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.83rem;
    color: var(--texto-suave);
}
.tarjeta-terapeuta .ubicacion svg { color: var(--violeta); flex-shrink: 0; }
.tarjeta-terapeuta .resumen {
    font-size: 0.86rem;
    color: var(--texto-media);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tarjeta-terapeuta .pie-tarjeta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--borde);
}
.tarjeta-terapeuta .marca-wa {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--exito);
}
.tarjeta-terapeuta .pie-tarjeta .btn-vibra { padding: 8px 16px; font-size: 0.85rem; }

.etiquetas-categorias { display: flex; flex-wrap: wrap; gap: 6px; }
.etiqueta-categoria {
    background: var(--violeta-suave);
    color: var(--violeta-tinta);
    border: 1px solid var(--violeta-borde);
    border-radius: var(--radio-full);
    padding: 3px 11px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* --- Opiniones y valor de la sesión --- */
.estrellas-pintadas { color: var(--dorado); letter-spacing: 1px; }
.estrellas-vacias { color: var(--borde-fuerte); letter-spacing: 1px; }

/* Selector de estrellas: se van rellenando al pasar el mouse y al hacer clic.
   El orden del HTML es el mismo que se ve (1 a 5), para que las flechas del
   teclado muevan la nota en el sentido que uno espera. El relleno usa `:has()`,
   que está disponible en todos los navegadores actuales; si faltara, igual se
   puede elegir la nota, solo se vería menos. */
.campo-estrellas { border: 0; padding: 0; margin: 14px 0 4px; }
.campo-estrellas legend { padding: 0; margin-bottom: 4px; font-weight: 600; font-size: 0.95rem; color: var(--texto); }
.selector-estrellas { display: flex; justify-content: flex-start; gap: 5px; }
.selector-estrellas input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.selector-estrellas label {
    cursor: pointer;
    font-size: 2.1rem;
    line-height: 1;
    color: var(--borde-fuerte);
    transition: var(--transicion);
}
/* Con el mouse encima: la estrella apuntada y todas las de su izquierda. */
.selector-estrellas label:hover,
.selector-estrellas label:has(~ label:hover) { color: var(--dorado); }
/* Con una nota elegida: la elegida y todas las de su izquierda. Se apaga
   mientras se previsualiza con el mouse: si no, después de elegir 4 y pasar el
   mouse por 2 seguirían pintadas las 4. */
.selector-estrellas:not(.previsualizando) input:checked + label,
.selector-estrellas:not(.previsualizando) label:has(~ input:checked) { color: var(--dorado); }
/* El teclado tiene que ver dónde está parado. */
.selector-estrellas input:focus-visible + label { outline: 3px solid var(--anillo-foco); outline-offset: 3px; border-radius: 5px; }
.nota-elegida { margin: 8px 0 0; min-height: 1.2em; font-size: 0.88rem; color: var(--texto-media); }

.puntuacion {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.83rem;
    margin: 0;
}
.puntuacion .valor { font-weight: 700; color: var(--texto-media); }
.puntuacion .cuantas { color: var(--texto-tenue); }
.puntuacion.sin-notas { color: var(--texto-tenue); font-style: italic; }

.promedio-ficha { font-size: 0.9rem; color: var(--texto-media); }
.promedio-ficha strong { color: var(--texto); }

.tarjeta-terapeuta .valor-sesion { display: flex; align-items: baseline; gap: 6px; }
.tarjeta-terapeuta .valor-sesion .monto {
    font-size: 1.02rem;
    font-weight: 750;
    color: var(--texto);
    letter-spacing: -0.01em;
}
.tarjeta-terapeuta .valor-sesion .etiqueta-monto {
    font-size: 0.74rem;
    color: var(--texto-tenue);
}

/* La moneda del precio. Va en un distintivo aparte para que se lea sin dudas:
   un "$35.000" suelto no dice de qué país son esos pesos. */
.moneda-ficha {
    display: inline-block;
    padding: 1px 7px;
    border-radius: var(--radio-full);
    background: var(--violeta-suave);
    color: var(--violeta);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

/* La hora del terapeuta, cuando el consultante está en otro país. Va entre
   paréntesis y más apagada: es la referencia, no lo que tiene que leer. */
.hora-terapeuta {
    margin-left: 6px;
    font-size: 0.82em;
    font-weight: 600;
    color: var(--texto-tenue);
}

.aviso-zona {
    margin: 0 0 18px;
    padding: 10px 13px;
    border-radius: var(--radio-sm);
    background: var(--violeta-suave);
    color: var(--texto-media);
    font-size: 0.86rem;
}

.resena {
    border: 1px solid var(--borde);
    border-left: 3px solid var(--borde-fuerte);
    border-radius: var(--radio-sm);
    padding: 13px 16px;
    margin-bottom: 10px;
    background: var(--tarjeta);
}
.resena.aprobada { border-left-color: var(--exito); background: var(--fondo-alt); }
.resena .encabezado {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.resena .quien { font-weight: 650; font-size: 0.93rem; }
.resena .cuando { font-size: 0.8rem; color: var(--texto-tenue); }
.resena .estrellas { font-size: 0.95rem; margin-bottom: 6px; }
.resena .estrellas .nota { font-size: 0.78rem; color: var(--texto-tenue); margin-left: 6px; }
.resena .cuerpo { font-size: 0.9rem; color: var(--texto-media); white-space: pre-line; }
.acciones-resena { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.directorio-vacio {
    text-align: center;
    padding: 52px 20px;
    color: var(--texto-suave);
    border: 1px dashed var(--borde-fuerte);
    border-radius: var(--radio-md);
    font-size: 0.93rem;
}
.directorio-vacio .icono-vacio { color: var(--violeta); opacity: 0.32; margin-bottom: 14px; line-height: 0; }
.directorio-vacio .detalle { margin-top: 8px; font-size: 0.89rem; }
.directorio-vacio .accion { margin-top: 18px; }
.directorio-vacio .accion a { color: var(--violeta); font-weight: 600; text-decoration: none; }
.directorio-vacio .accion a:hover { text-decoration: underline; }

.resumen-busqueda { color: var(--texto-suave); font-size: 0.88rem; margin-bottom: 14px; }
.resumen-busqueda a { color: var(--violeta); font-weight: 600; text-decoration: none; }
.resumen-busqueda a:hover { text-decoration: underline; }

/* Bloques de apoyo de las páginas del consultante */
.bloque-consultante { margin-top: 34px; }
.titulo-bloque { font-size: 1.1rem; color: var(--texto); margin-bottom: 16px; }
.nota-consultante {
    margin-top: 26px;
    text-align: center;
    font-size: 0.89rem;
    color: var(--texto-suave);
}
.nota-consultante a { color: var(--violeta); font-weight: 600; text-decoration: none; }
.nota-consultante a:hover { text-decoration: underline; }

.volver-consultante {
    display: inline-block;
    margin-bottom: 16px;
    color: var(--texto-suave);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
}
.volver-consultante:hover { color: var(--violeta); }

/* Cabecera de la ficha de un terapeuta */
.hero-ficha .ficha-identidad { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero-ficha .foto-grande,
.hero-ficha .iniciales-grandes {
    width: 88px;
    height: 88px;
    border-radius: var(--radio-full);
    flex-shrink: 0;
    border: 3px solid rgba(255, 255, 255, 0.55);
}
.hero-ficha .foto-grande { object-fit: cover; }
.hero-ficha .iniciales-grandes {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-weight: 700;
    font-size: 2rem;
}
.hero-ficha h1 { margin-bottom: 4px; }
.hero-ficha .bajada { margin-bottom: 0; }
.hero-ficha .etiquetas-categorias { margin-top: 18px; }
.hero-ficha .etiqueta-categoria {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* Datos de contacto de la ficha */
.dato-contacto {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.92rem;
    color: var(--texto-media);
    margin-bottom: 10px;
}
.dato-contacto svg { color: var(--violeta); flex-shrink: 0; margin-top: 1px; }
.dato-contacto a { color: var(--violeta); font-weight: 600; text-decoration: none; }
.dato-contacto a:hover { text-decoration: underline; }

.ficha-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.dato-publico { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 8px; font-size: 0.92rem; }

/* --- Formulario de configuración del terapeuta --- */
.seccion-form {
    font-size: 0.92rem;
    color: var(--violeta);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 26px 0 12px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--borde);
}
.seccion-form:first-of-type { margin-top: 4px; }

.rejilla-categorias {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}
.opcion-categoria {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 500;
    font-size: 0.88rem;
    background: var(--fondo-alt);
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    padding: 9px 12px;
    margin-bottom: 0;
    cursor: pointer;
}
.opcion-categoria input { width: auto; margin: 0; }
.opcion-categoria:hover { border-color: var(--violeta-borde); }

.solicitud {
    border: 1px solid var(--borde);
    border-left: 3px solid var(--violeta);
    border-radius: var(--radio-sm);
    padding: 13px 16px;
    margin-bottom: 10px;
    background: var(--tarjeta);
}
.solicitud.atendida { border-left-color: var(--exito); background: var(--fondo-alt); }
.solicitud .encabezado { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.solicitud .quien { font-weight: 650; font-size: 0.93rem; }
.solicitud .cuando { font-size: 0.8rem; color: var(--texto-tenue); }
.solicitud .cuerpo { font-size: 0.9rem; color: var(--texto-media); white-space: pre-line; }

@media (max-width: 780px) {
    .buscador-campos { grid-template-columns: 1fr; }
    .contenedor-consultante { padding: 22px 16px 46px; }
    .barra-consultante { padding: 11px 16px; }
    .barra-consultante nav a { padding: 7px 11px; font-size: 0.85rem; }
}

/* ============================================================================
   18. IMPRESIÓN (informes y certificados)
   ============================================================================ */
@media print {
    .navbar-vibra,
    .sidebar-vibra,
    .sidebar-overlay,
    .barra-consultante,
    .pie-consultante,
    .no-imprimir { display: none !important; }

    body {
        background: #fff;
        background-image: none;
        font-size: 12px;
    }

    .contenedor-vibra { max-width: none; padding: 0; }

    .tarjeta-vibra,
    .kpi {
        box-shadow: none;
        border-color: #CBD3E0;
        break-inside: avoid;
    }

    .hero-vibra {
        background: #fff !important;
        color: var(--texto) !important;
        box-shadow: none;
        border: 1px solid #CBD3E0;
        padding: 20px 0;
    }

    .hero-vibra h1,
    .hero-vibra p,
    .hero-vibra .frase { color: var(--texto) !important; }

    /* La cabecera de la ficha pasa a blanco: los textos y sellos que estaban
       pensados para fondo morado deben volver a tinta oscura. */
    .hero-ficha .iniciales-grandes {
        background: var(--violeta-suave);
        color: var(--violeta);
        border-color: var(--borde);
    }
    .hero-ficha .etiqueta-categoria {
        background: transparent;
        border-color: var(--borde);
        color: var(--texto);
    }

    .hero-vibra::after { display: none; }

    .btn-vibra { display: none !important; }
}

/* ============================================================================
   19. DOCUMENTOS LEGALES (términos, privacidad y reembolsos)
   Las tres son páginas de lectura larga dentro del armazón público. El armazón
   está pensado para una tarjeta de 470 px, así que aquí se ensancha y el texto
   pasa a la izquierda: en una tarjeta angosta un documento largo queda en
   renglones de cuatro palabras.
   ============================================================================ */
.publico-panel.doc-legal-panel { max-width: 860px; }
.publico-panel.doc-legal-panel h1 { font-size: 1.5rem; }
.doc-legal-fecha {
    text-align: center;
    color: var(--texto-tenue);
    font-size: 0.86rem;
    margin: -18px 0 24px;
}
.doc-legal { text-align: left; font-size: 0.92rem; line-height: 1.7; color: var(--texto-suave); }
.doc-legal p { margin: 0 0 12px; }
.doc-legal ul { margin: 0 0 12px; padding-left: 20px; }
.doc-legal li { margin-bottom: 7px; }
.doc-legal h2 {
    font-size: 1rem;
    color: var(--texto);
    margin: 26px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--borde);
}
.doc-legal strong { color: var(--texto); }
.doc-legal a { color: var(--violeta); font-weight: 600; }
.doc-legal-version {
    text-align: center;
    color: var(--texto-tenue);
    font-size: 0.8rem;
    margin: 26px 0 0;
}
.doc-legal-aviso {
    margin-top: 22px;
    padding: 14px 16px;
    border: 1px solid var(--alerta-borde);
    border-left: 3px solid var(--alerta);
    border-radius: var(--radio-sm);
    background: var(--alerta-suave);
    color: var(--texto-media);
    font-size: 0.88rem;
    line-height: 1.65;
}

/* El aviso de retracto y las condiciones de pago van junto a los botones de
   compra: la ley exige informarlo ANTES de pagar, de forma inequívoca. */
.aviso-pago {
    margin-top: 14px;
    color: var(--texto-tenue);
    font-size: 0.78rem;
    line-height: 1.6;
}
.aviso-pago a { color: inherit; font-weight: 600; text-decoration: underline; }

/* El pie con los tres documentos legales, en las páginas públicas. */
.pie-legal {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--borde);
    font-size: 0.78rem;
    color: var(--texto-tenue);
}
.pie-legal a { color: var(--texto-suave); }