/* ============================================================================
 * assets/css/app.css
 * ----------------------------------------------------------------------------
 * CSS suplementario de la plataforma OPE Osakidetza 2026.
 * Tailwind (CDN) cubre el 95% del estilo; aquí solo añadimos:
 *   1) Scrollbar personalizada para listas largas (max-h-96 overflow-y-auto).
 *   2) Transición suave global en botones y tarjetas.
 *   3) Utilidades .tab-active y .line-clamp-N (compatibilidad).
 *   4) Focus-visible accesible.
 * Mantener MÍNIMO: la mayor parte del estilo vive en utilidades Tailwind.
 * ============================================================================ */

/* ----------------------------------------------------------------------------
 * 1) Scrollbar personalizada (webKit + Firefox)
 *    Aplicar con: <div class="scroll-area max-h-96 overflow-y-auto">
 * ---------------------------------------------------------------------------- */
.scroll-area {
    scrollbar-width: thin;                          /* Firefox */
    scrollbar-color: #94a3b8 transparent;           /* thumb / track */
}
.scroll-area::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.scroll-area::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 8px;
}
.scroll-area::-webkit-scrollbar-thumb {
    background: #cbd5e1;        /* slate-300 */
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.scroll-area::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;        /* slate-400 */
    background-clip: content-box;
}

/* ----------------------------------------------------------------------------
 * 2) Transición suave global para elementos interactivos
 * ---------------------------------------------------------------------------- */
button, a, label, input, select, textarea {
    transition: background-color .15s ease, border-color .15s ease,
                color .15s ease, box-shadow .15s ease, transform .15s ease;
}

/* ----------------------------------------------------------------------------
 * 3) Utilidades de pestañas
 * ---------------------------------------------------------------------------- */
.tab-active {
    background-color: #059669;   /* emerald-600 */
    color: #ffffff;
    border-color: #047857;       /* emerald-700 */
}

/* Truncar texto a N líneas (compatibilidad si Tailwind CDN no trae line-clamp) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ----------------------------------------------------------------------------
 * 4) Focus-visible accesible (anillo emerald)
 * ---------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
label:focus-visible {
    outline: 2px solid #059669;
    outline-offset: 2px;
    border-radius: 6px;
}

/* ----------------------------------------------------------------------------
 * 5) Animación de pulso suave para badges en vivo
 * ---------------------------------------------------------------------------- */
@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50%      { opacity: .5; }
}
.pulse-soft { animation: pulse-soft 2s ease-in-out infinite; }

/* ----------------------------------------------------------------------------
 * 6) Ocultar el spinner de input[number] en Tests (estética)
 * ---------------------------------------------------------------------------- */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] { -moz-appearance: textfield; }

/* ----------------------------------------------------------------------------
 * 7) Prevenir "flash" de contenido Alpine antes de cargar (x-cloak)
 * ---------------------------------------------------------------------------- */
[x-cloak] { display: none !important; }