/* ===== SITE.CSS - MINIMALIST & CONTEMPORARY ===== */

:root {
    /* Brand Colors - Premium Veterinary Green */
    --primary: #059669; /* Emerald 600 */
    --primary-hover: #047857; /* Emerald 700 */
    --primary-light: #d1fae5; /* Emerald 100 */
    --primary-dark: #065f46; /* Emerald 800 */

    /* Neutral Colors - High Contrast for Readability/Accessibility */
    --bg-body: #f9fafb; /* Gray 50 */
    --bg-surface: #ffffff; /* White */

    --text-main: #111827; /* Gray 900 - High contrast */
    --text-muted: #6b7280; /* Gray 500 */
    --text-light: #9ca3af; /* Gray 400 */

    --border-subtle: #f3f4f6; /* Gray 100 */
    --border-base: #e5e7eb; /* Gray 200 */
    --border-hover: #d1d5db; /* Gray 300 */

    /* Semantic Colors */
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;

    /* Shadows - Soft and Contemporary */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* Geometry */
    --radius-sm: 0.375rem; /* 6px */
    --radius-md: 0.5rem;   /* 8px */
    --radius-lg: 0.75rem;  /* 12px */
    --radius-full: 9999px;

    /* Typography */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Canonical aliases — keep old names working across all views */
    --text-primary: var(--text-main);
    --text-secondary: var(--text-muted);
    --border-color: var(--border-base);
    --transition: var(--transition-fast);
}

/* Dark Mode Variables */
[data-theme="dark"] {
    /* Brand Colors - Keep green but slightly adjusted for dark bg if needed, Emerald 500 */
    --primary: #10b981; 
    --primary-hover: #059669; 
    --primary-light: #064e3b; /* Very dark green for light accents */
    --primary-dark: #34d399; 
    
    /* Neutral Colors - Dark surfaces */
    --bg-body: #111827; /* Gray 900 */
    --bg-surface: #1f2937; /* Gray 800 */
    
    --text-main: #f9fafb; /* Gray 50 - High contrast */
    --text-muted: #9ca3af; /* Gray 400 */
    --text-light: #6b7280; /* Gray 500 */
    
    --border-subtle: #374151; /* Gray 700 */
    --border-base: #4b5563; /* Gray 600 */
    --border-hover: #6b7280; /* Gray 500 */
    
    /* Shadow adjusted for dark bg */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);

    /* Alias overrides for dark mode */
    --text-primary: var(--text-main);
    --text-secondary: var(--text-muted);
    --border-color: var(--border-base);

    /* Table-specific dark colors */
    --table-bg: #1f2937;           /* Gray-800 - matches bg-surface */
    --table-header-bg: #263244;    /* Slightly lighter for header distinction */
    --table-border: #334155;       /* Slate-600 border */
    --table-row-hover: #263244;    /* Row hover */
    --table-text: #e2e8f0;         /* Slate-200 - readable on dark */
    --table-muted: #94a3b8;        /* Slate-400 - for secondary text */
}

/* ===== DARK MODE SELECT OVERRIDES ===== */
[data-theme="dark"] select,
[data-theme="dark"] .form-select {
    background-color: var(--bg-surface) !important;
    color: var(--text-main) !important;
    color-scheme: dark;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

[data-theme="dark"] select option,
[data-theme="dark"] .form-select option {
    background-color: #1f2937;
    color: #f9fafb;
}

/* ===== SLIMSELECT: DISEÑO INTEGRADO ===== */
/* Conectar las variables de SlimSelect con el sistema de diseño de la app.
   Al usar var(--bg-surface) / var(--text-main) el dark mode es automático. */
body {
    --ss-primary-color: var(--primary);
    --ss-bg-color: var(--bg-surface);
    --ss-font-color: var(--text-main);
    --ss-font-placeholder-color: var(--text-light);
    --ss-border-color: var(--primary);
    --ss-focus-color: var(--primary-hover);
    --ss-border-radius: var(--radius-md);
    --ss-disabled-color: var(--border-subtle);
}

/* Igualar altura con los inputs (0.875rem × 1.5 + 0.625rem × 2 + 2px borde ≈ 43px) */
.ss-main {
    min-height: calc(0.875rem * 1.5 + 0.625rem * 2 + 2px) !important;
    font-size: 0.875rem !important;
    font-family: inherit !important;
}

/* Dropdown: fuente y sombra consistentes */
.ss-content {
    font-size: 0.875rem !important;
    font-family: inherit !important;
}

/* Opciones del dropdown: fuente coherente */
.ss-content .ss-list .ss-option {
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Dark mode: input de búsqueda dentro del dropdown */
[data-theme="dark"] .ss-content .ss-search input {
    background-color: var(--bg-body) !important;
    color: var(--text-main) !important;
    border-color: var(--border-base) !important;
}

/* Dark mode: flecha SVG dentro de .ss-main */
[data-theme="dark"] .ss-main .ss-arrow path {
    stroke: var(--text-muted) !important;
}

/* ===== DARK MODE TABLE OVERRIDES ===== */
[data-theme="dark"] .table-container,
[data-theme="dark"] .table-responsive {
    background-color: var(--table-bg) !important;
    border-color: var(--table-border) !important;
}

[data-theme="dark"] .table {
    color: var(--table-text) !important;
    background-color: var(--table-bg) !important;
}

[data-theme="dark"] .table th {
    background-color: var(--table-header-bg) !important;
    color: var(--table-muted) !important;
    border-bottom-color: var(--table-border) !important;
}

[data-theme="dark"] .table td {
    background-color: var(--table-bg) !important;
    color: var(--table-text) !important;
    border-bottom-color: var(--table-border) !important;
}

[data-theme="dark"] .table tbody tr:hover td {
    background-color: var(--table-row-hover) !important;
}

[data-theme="dark"] .table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Fix any inline bg-surface that remained on table wrappers */
[data-theme="dark"] .stat-card,
[data-theme="dark"] .filtro-container,
[data-theme="dark"] .filtro-bar,
[data-theme="dark"] .stat-cita,
[data-theme="dark"] .detail-section,
[data-theme="dark"] .card,
[data-theme="dark"] .card-body {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-base) !important;
}

/* ===== DARK MODE BUTTON OVERRIDES ===== */

/* btn-outline-primary hover: fondo #064e3b + texto verde = contraste bajo */
[data-theme="dark"] .btn-outline-primary:hover {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: var(--primary) !important;
}

/* btn-limpiar: texto blanco sobre fondo blanco → invisible. Fix principal. */
[data-theme="dark"] .btn-limpiar,
[data-theme="dark"] .btn-limpiar:hover {
    background: var(--bg-surface) !important;
    color: var(--text-main) !important;
    border-color: var(--border-base) !important;
}

/* Botones de acción en tablas — pasteles claros → versiones oscuras semitransparentes */
[data-theme="dark"] .btn-action.btn-edit,
[data-theme="dark"] .btn-action.btn-edit:hover {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #6ee7b7 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

[data-theme="dark"] .btn-action.btn-delete,
[data-theme="dark"] .btn-action.btn-delete:hover {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

[data-theme="dark"] .btn-action.btn-pdf,
[data-theme="dark"] .btn-action.btn-pdf:hover {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

[data-theme="dark"] .btn-action.btn-send,
[data-theme="dark"] .btn-action.btn-send:hover {
    background-color: rgba(59, 130, 246, 0.15) !important;
    color: #93c5fd !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}

/* Bootstrap outline buttons — no responden al tema custom */
[data-theme="dark"] .btn-outline-secondary {
    color: #9ca3af !important;
    border-color: #6b7280 !important;
}
[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: rgba(107, 114, 128, 0.15) !important;
    color: #d1d5db !important;
    border-color: #9ca3af !important;
}

[data-theme="dark"] .btn-outline-success {
    color: #6ee7b7 !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
}
[data-theme="dark"] .btn-outline-success:hover {
    background-color: rgba(16, 185, 129, 0.15) !important;
    color: #a7f3d0 !important;
}

[data-theme="dark"] .btn-outline-danger {
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
}
[data-theme="dark"] .btn-outline-danger:hover {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #fecaca !important;
}

/* mini-form: #f8f9fa hardcodeado → transparente en dark mode */
[data-theme="dark"] .mini-form {
    background: transparent !important;
    border-color: var(--border-base) !important;
}

/* btn-secondary-custom: siempre fondo claro con texto negro (#000) en ambos modos */
[data-theme="dark"] .btn-secondary-custom,
[data-theme="dark"] .btn-secondary-custom:hover {
    background-color: #f1f5f9 !important;
    color: #000 !important;
    border-color: #cbd5e1 !important;
}

/* Bootstrap btn-secondary standalone (SubirFirma, CambiarPassword) */
[data-theme="dark"] .btn.btn-secondary {
    background-color: var(--bg-surface) !important;
    color: var(--text-main) !important;
    border-color: var(--border-base) !important;
}
[data-theme="dark"] .btn.btn-secondary:hover {
    background-color: var(--bg-body) !important;
    color: var(--text-main) !important;
}

/* ===== DARK MODE ALERT OVERRIDES ===== */
[data-theme="dark"] .alert-success {
    background-color: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #6ee7b7 !important;
}
[data-theme="dark"] .alert-danger {
    background-color: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #fca5a5 !important;
}
[data-theme="dark"] .alert-warning {
    background-color: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: #fcd34d !important;
}
[data-theme="dark"] .alert-info {
    background-color: rgba(59, 130, 246, 0.12) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #93c5fd !important;
}

/* ===== DARK MODE BADGE OVERRIDES ===== */
[data-theme="dark"] .badge-success { background-color: rgba(16, 185, 129, 0.2) !important; color: #6ee7b7 !important; }
[data-theme="dark"] .badge-warning { background-color: rgba(245, 158, 11, 0.2) !important;  color: #fcd34d !important; }
[data-theme="dark"] .badge-danger  { background-color: rgba(239, 68, 68, 0.2) !important;   color: #fca5a5 !important; }
[data-theme="dark"] .badge-info    { background-color: rgba(59, 130, 246, 0.2) !important;  color: #93c5fd !important; }

/* Base Reset for Clean Rendering */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-body);
    color: var(--text-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Typography Hierarchy - Good for SEO structure */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-main);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.025em;
    margin-bottom: 0.5rem;
}

h1 { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.05em; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

p {
    color: var(--text-muted);
    margin-bottom: 1rem;
    font-weight: 400;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary-hover);
}

/* Global Utility Classes */
.text-primary { color: var(--primary) !important; }
.text-muted { color: var(--text-muted) !important; }
.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }

/* Custom Scrollbar for sleek UI */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border-hover);
    border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-light);
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-in-up {
    animation: fadeInUp 0.35s ease-out both;
}

.stagger-children > * {
    animation: fadeInUp 0.35s ease-out both;
}
.stagger-children > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.10s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.20s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.30s; }