/**
 * Tema corporativo Panadería Los Andes
 * Variables centralizadas + transiciones + utilidades UI
 */
:root {
    --color-primary: #D64238;
    --color-primary-hover: #b53a26;
    --color-secondary: #CF872B;
    --color-beige: #E6DACB;
    --color-morado: #80344B;
    --color-blanco: #F2E9E2;
    --color-negro: #373334;
    --color-success: #2dce89;
    --color-warning: #fb6340;
    --color-danger: #f5365c;
    --color-info: #11cdef;
    --color-dark: #172b4d;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --transition-fast: 0.2s ease;
    --transition-normal: 0.25s ease;
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
}

/* Transiciones suaves en botones, cards y modales */
.btn,
.card,
.modal-content,
.dropdown-menu,
.nav-link,
.form-control,
.alert {
    transition: opacity var(--transition-fast),
                color var(--transition-fast),
                background-color var(--transition-fast),
                border-color var(--transition-fast),
                box-shadow var(--transition-fast),
                transform var(--transition-fast);
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

/* Estado de carga en botones (clase .is-loading) */
.btn.is-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.85;
}
.btn.is-loading::after {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-left: 0.5rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: theme-spin 0.6s linear infinite;
    vertical-align: middle;
}
@keyframes theme-spin {
    to { transform: rotate(360deg); }
}

/* Skeleton loaders */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.2s ease-in-out infinite;
    border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-text { height: 1rem; margin-bottom: 0.5rem; }
.skeleton-title { height: 1.5rem; width: 60%; margin-bottom: 1rem; }
.skeleton-card { height: 200px; padding: 1rem; }

/* Imágenes perezosas */
img[loading="lazy"] {
    background-color: #f4f4f4;
}

/* Focus visible accesible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.form-control:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}