:root {
    --caprish-primary: #43a6df;
    --caprish-primary-hover: #2f86c8;
    --caprish-primary-deep: #245f8a;
    --caprish-primary-soft: #eaf6fc;
    --caprish-secondary: #40566b;
    --caprish-secondary-hover: #314456;
    --caprish-secondary-soft: #edf2f6;
    --caprish-background: #f4f7fa;
    --caprish-surface: #ffffff;
    --caprish-surface-alt: #eef4f8;
    --caprish-text: #24313d;
    --caprish-text-muted: #647482;
    --caprish-border: #d5e0e8;
    --caprish-success: #2e7d5b;
    --caprish-success-soft: #e7f5ee;
    --caprish-warning: #a96818;
    --caprish-warning-soft: #fff3df;
    --caprish-danger: #b74343;
    --caprish-danger-soft: #faeaea;
    --caprish-info: #2f86c8;
    --caprish-info-soft: #eaf6fc;
    --caprish-focus: rgba(67, 166, 223, .28);
    --caprish-radius-sm: 6px;
    --caprish-radius: 9px;
    --caprish-radius-lg: 14px;
    --caprish-shadow: 0 2px 10px rgba(36, 49, 61, .08);
    --caprish-shadow-modal: 0 22px 55px rgba(23, 42, 58, .22);
    --primary: var(--caprish-primary);
    --primary-dark: var(--caprish-primary-hover);
    --secondary: var(--caprish-secondary);
    --dark: var(--caprish-text);
    --light: var(--caprish-background);
}

html, body { color: var(--caprish-text); background-color: var(--caprish-background); }
html.caprish-modal-open, body.caprish-modal-open { overflow: hidden !important; }

.caprish-btn,
button.prod-btn,
button.btn,
button[class*="-btn"] {
    min-height: 38px;
    border: 1px solid transparent;
    border-radius: var(--caprish-radius);
    padding: .48rem .85rem;
    font: inherit;
    font-weight: 650;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
}
.caprish-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--caprish-focus) !important; }
.caprish-btn:active:not(:disabled) { transform: translateY(1px); }
.caprish-btn:disabled, .caprish-btn[aria-busy="true"] { opacity: .58; cursor: not-allowed; pointer-events: none; }
.caprish-btn--primary { background: var(--caprish-primary) !important; border-color: var(--caprish-primary) !important; color: #fff !important; }
.caprish-btn--primary:hover:not(:disabled) { background: var(--caprish-primary-hover) !important; }
.caprish-btn--secondary { background: var(--caprish-secondary) !important; border-color: var(--caprish-secondary) !important; color: #fff !important; }
.caprish-btn--secondary:hover:not(:disabled) { background: var(--caprish-secondary-hover) !important; }
.caprish-btn--outline { background: var(--caprish-surface) !important; border-color: var(--caprish-primary) !important; color: var(--caprish-primary-deep) !important; }
.caprish-btn--ghost { background: transparent !important; border-color: var(--caprish-border) !important; color: var(--caprish-secondary) !important; }
.caprish-btn--success { background: var(--caprish-success) !important; border-color: var(--caprish-success) !important; color: #fff !important; }
.caprish-btn--warning { background: var(--caprish-warning) !important; border-color: var(--caprish-warning) !important; color: #fff !important; }
.caprish-btn--danger { background: var(--caprish-danger) !important; border-color: var(--caprish-danger) !important; color: #fff !important; }

/* Shared visual treatment for existing Excel export actions. */
button.btn-excel,
button.btn-excel.caprish-btn--outline {
    min-height: 40px !important;
    padding: 9px 16px !important;
    border-radius: 8px !important;
    background: #247a52 !important;
    border: 1px solid #247a52 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
}
button.btn-excel:hover:not(:disabled) {
    background: #1d6443 !important;
    border-color: #1d6443 !important;
    color: #ffffff !important;
}
button.btn-excel:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(36, 122, 82, .22) !important;
}
button.btn-excel:disabled {
    background: #a8c8b8 !important;
    border-color: #a8c8b8 !important;
    color: #ffffff !important;
    cursor: not-allowed;
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px !important;
}
.button-group > button { margin-left: 0 !important; margin-right: 0 !important; }

.caprish-control,
.form-control,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select, textarea {
    min-height: 40px;
    border: 1px solid var(--caprish-border) !important;
    border-radius: var(--caprish-radius) !important;
    background: var(--caprish-surface);
    color: var(--caprish-text);
    font: inherit;
}
.caprish-control:focus, .form-control:focus,
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--caprish-primary) !important;
    box-shadow: 0 0 0 3px var(--caprish-focus) !important;
}

.modal, .modal-overlay-custom, .prod-modal-bg {
    background-color: rgba(24, 42, 57, .55) !important;
    backdrop-filter: blur(2px);
}
.modal.hidden, .modal-overlay-custom.hidden, .prod-modal-bg.hidden,
.modal[aria-hidden="true"], .modal-overlay-custom[aria-hidden="true"], .prod-modal-bg[aria-hidden="true"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.modal-content, .modal-content-custom, .prod-modal, .prod-modal-content {
    background: var(--caprish-surface) !important;
    color: var(--caprish-text);
    border: 1px solid var(--caprish-border) !important;
    border-radius: var(--caprish-radius-lg) !important;
    box-shadow: var(--caprish-shadow-modal) !important;
    max-height: min(88vh, 900px);
    overflow-y: auto;
}

.card, .product-card, .prod-card, .stat-card, .dashboard-card,
[class*="-card"] { border-color: var(--caprish-border) !important; border-radius: var(--caprish-radius-lg); box-shadow: var(--caprish-shadow); }
table { background: var(--caprish-surface); border-color: var(--caprish-border); }
th { background: var(--caprish-surface-alt) !important; color: var(--caprish-secondary) !important; }
td, th { border-color: var(--caprish-border) !important; }
tbody tr:hover { background: var(--caprish-primary-soft); }
.badge, .prod-badge, [class*="badge-"] { border-radius: 999px !important; font-weight: 650; }
.badge-success, .badge-activa, .badge-completada { background: var(--caprish-success-soft) !important; color: var(--caprish-success) !important; }
.badge-warning, .badge-pendiente { background: var(--caprish-warning-soft) !important; color: var(--caprish-warning) !important; }
.badge-danger, .badge-inactiva, .badge-cancelada { background: var(--caprish-danger-soft) !important; color: var(--caprish-danger) !important; }

@media (max-width: 768px) {
    .modal-content, .modal-content-custom, .prod-modal, .prod-modal-content {
        width: calc(100vw - 1rem) !important;
        max-width: none !important;
        max-height: calc(100dvh - 1rem) !important;
        margin: .5rem !important;
    }
    .modal-footer, .prod-modal-footer { display: flex; flex-wrap: wrap; gap: .5rem; }
    .modal-footer .caprish-btn, .prod-modal-footer .caprish-btn { flex: 1 1 140px; }
    table { display: block; max-width: 100%; overflow-x: auto; }
}