/*
 * assets/app.css — DailyLog · Estilos globales y componentes reutilizables
 * Tailwind gestiona la mayor parte del diseño; este archivo añade lo que
 * no se puede expresar fácilmente con clases de utilidad.
 */

/* ── 1. Tipografía base ─────────────────────────────────────────────────── */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── 2. Inputs — estado de foco corporativo ─────────────────────────────── */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.25); /* emerald-600 al 25 % */
    border-color: #059669;
}

/* ── 3. Scroll suave para anclas ────────────────────────────────────────── */
html {
    scroll-behavior: smooth;
}

/* ── 4. Print — ocultar elementos interactivos ──────────────────────────── */
@media print {
    body {
        background: white !important;
        color: black !important;
    }

    .no-print,
    nav,
    form,
    button,
    .bottom-nav {
        display: none !important;
    }

    main {
        max-width: 100% !important;
        padding: 0 !important;
        margin-bottom: 0 !important;
    }

    .print-card {
        border: 1px solid #e2e8f0 !important;
        box-shadow: none !important;
        break-inside: avoid;
    }
}

/* ── 5. Animación de pulso de alerta crítica (Sprint 3.2) ───────────────── */
@keyframes pulse-danger {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50%       { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

.alert-critical {
    animation: pulse-danger 1.5s ease-in-out infinite;
    border-color: #ef4444 !important;
}

/* ── 6. Fondo animado del hero (index.php) ──────────────────────────────── */
.hero-card {
    transition: transform 0.3s ease;
}
.hero-card:hover {
    transform: rotate(0deg) !important;
}

/* ── 7. Tokens de la marca ──────────────────────────────────────────────── */
:root {
    --color-brand:      #059669;   /* emerald-600 */
    --color-brand-dark: #047857;   /* emerald-700 */
    --color-bg:         #f8fafc;   /* slate-50 */
    --color-surface:    #ffffff;
    --color-border:     #e2e8f0;   /* slate-200 */
    --color-text:       #1e293b;   /* slate-800 */
    --color-muted:      #94a3b8;   /* slate-400 */
}

/* ── 8. Pill buttons de categoría (diario.php v3) ───────────────────────── */
.cat-pill {
    min-height: 52px;
    -webkit-tap-highlight-color: transparent;
}
.cat-pill:active {
    transform: scale(0.97);
}

/* ── 9. Alerta crítica pulsante ─────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .animate-pulse-critical {
        animation: pulse-danger 1.8s ease-in-out infinite;
    }
}

/* ── 10. Toggle de contraseña ───────────────────────────────────────────── */
.pw-toggle {
    position: absolute; right: 10px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none;
    cursor: pointer; font-size: 14px; color: var(--color-muted);
    padding: 2px;
}