/* TaskGranja — Custom CSS (Tailwind gestiona el resto) */

/* Ocultar elementos Alpine hasta que inicialice */
[x-cloak] { display: none !important; }

/* Safe area para móviles con notch */
.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Scrollbar discreta */
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
*::-webkit-scrollbar-track { background: transparent; }

/* Transiciones suaves globales */
a, button { transition-property: color, background-color, border-color, opacity;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 150ms; }

/* Spinner de carga */
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin { animation: spin 0.75s linear infinite; }

/* Focus ring accesible */
:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Input base reutilizable */
.input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    background: white;
    color: #0f172a;
    transition: border-color 150ms;
}
.input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.input.error { border-color: #ef4444; }

/* Dark mode inputs */
.dark .input {
    background: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}
.dark .input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Button base */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 150ms;
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-primary { background: #2563eb; color: white; }
.btn-primary:hover:not(:disabled) { background: #1d4ed8; }
.btn-secondary { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.btn-secondary:hover:not(:disabled) { background: #e2e8f0; }
.btn-danger { background: #ef4444; color: white; }
.btn-danger:hover:not(:disabled) { background: #dc2626; }
.btn-ghost { background: transparent; color: #64748b; }
.btn-ghost:hover:not(:disabled) { background: #f1f5f9; color: #0f172a; }

/* Botón pequeño de exportación (Informes) */
.export-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0.375rem;
    border: 1px solid #e2e8f0;
    background: white;
    color: #374151;
    cursor: pointer;
    transition: all 150ms;
}
.export-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.dark .export-btn { background: #1e293b; border-color: #475569; color: #d1d5db; }

/* Card base */
.card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.25rem;
}
.dark .card { background: #1e293b; border-color: #334155; }

/* Modal overlay */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
}
.modal-box {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    width: 100%;
    max-width: 32rem;
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.dark .modal-box { background: #1e293b; }

/* Form label */
.label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.375rem;
}
.dark .label { color: #d1d5db; }

/* Line-clamp para previews de texto */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Fade-in animación para páginas */
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
main > * { animation: fadeIn 0.2s ease-out; }