/* ──────────────────────────────────────────────────────────────────────
   Tokens de diseño de la Oficina Virtual.
   Todos los componentes Ov* deben usar estas variables en lugar de
   hardcodear colores/tamaños. Single source of truth.

   Convención: los colores del producto público usan el teal (0d9488);
   en la OV mantenemos esa identidad pero con un sidebar oscuro para
   diferenciar "estoy adentro del panel" del browsing público.
   ────────────────────────────────────────────────────────────────────── */
:root {
    /* Paleta marca */
    --ov-brand-50:  #f0fdfa;
    --ov-brand-100: #ccfbf1;
    --ov-brand-300: #5eead4;
    --ov-brand-400: #2dd4bf;
    --ov-brand-500: #14b8a6;
    --ov-brand-600: #0d9488;
    --ov-brand-700: #0f766e;
    --ov-brand-800: #115e59;

    /* Neutros */
    --ov-ink-50:   #f8fafc;
    --ov-ink-100:  #f1f5f9;
    --ov-ink-200:  #e2e8f0;
    --ov-ink-300:  #cbd5e1;
    --ov-ink-400:  #94a3b8;
    --ov-ink-500:  #64748b;
    --ov-ink-600:  #475569;
    --ov-ink-700:  #334155;
    --ov-ink-800:  #1e293b;
    --ov-ink-900:  #0f172a;
    --ov-ink-950:  #020617;

    /* Aliases publicos para paginas/feature CSS. */
    --ov-surface:  #ffffff;
    --ov-surface-muted: #f8fafc;
    --ov-border:   #d8e1ea;
    --ov-text:     var(--ov-ink-900);
    --ov-muted:    var(--ov-ink-500);
    --ov-primary:  var(--ov-brand-600);
    --ov-primary-strong: var(--ov-brand-700);

    /* Semánticos */
    --ov-success:  #10b981;
    --ov-success-bg: #ecfdf5;
    --ov-warn:     #f59e0b;
    --ov-warn-bg:  #fffbeb;
    --ov-danger:   #ef4444;
    --ov-danger-bg:#fef2f2;
    --ov-info:     #3b82f6;
    --ov-info-bg:  #eff6ff;

    /* Sombra / borde / radio */
    --ov-shadow-sm:  0 1px 2px rgba(15, 23, 42, 0.06);
    --ov-shadow-md:  0 4px 12px rgba(15, 23, 42, 0.08);
    --ov-shadow-lg:  0 12px 32px rgba(15, 23, 42, 0.12);
    --ov-radius-sm:  6px;
    --ov-radius-md:  8px;
    --ov-radius-lg:  12px;
    --ov-radius-pill: 9999px;

    /* Tipografía */
    --ov-font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
    --ov-font-mono: "SF Mono", Menlo, Monaco, Consolas, monospace;

    /* Spacings (4px scale) */
    --ov-s-1: 4px;
    --ov-s-2: 8px;
    --ov-s-3: 12px;
    --ov-s-4: 16px;
    --ov-s-5: 20px;
    --ov-s-6: 24px;
    --ov-s-8: 32px;
    --ov-s-10: 40px;
    --ov-s-12: 48px;

    /* Layout */
    --ov-sidebar-width:        240px;
    --ov-sidebar-width-collapsed: 64px;
    --ov-topbar-height:        60px;
    --ov-max-content-width:    1400px;

    /* Z-index scale */
    --ov-z-sidebar: 40;
    --ov-z-topbar:  50;
    --ov-z-dropdown: 60;
    --ov-z-modal:   100;
    --ov-z-toast:   110;

    /* Animaciones */
    --ov-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Focus ring consistente en toda la OV. Keyboard-accessible. */
.ov-focusable:focus-visible {
    outline: 2px solid var(--ov-brand-500);
    outline-offset: 2px;
    border-radius: var(--ov-radius-sm);
}

/* Scrollbar custom para contenedores de la OV (no toca scrollbars del resto del sitio). */
.ov-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--ov-ink-300) transparent;
}
.ov-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.ov-scroll::-webkit-scrollbar-track { background: transparent; }
.ov-scroll::-webkit-scrollbar-thumb {
    background: var(--ov-ink-300);
    border-radius: 4px;
}
.ov-scroll::-webkit-scrollbar-thumb:hover { background: var(--ov-ink-400); }

/* Controles base de Oficina Virtual. */
.ov-input,
.ov-textarea {
    width: 100%;
    min-width: 0;
    font-family: var(--ov-font);
    font-size: 13.5px;
    color: var(--ov-ink-900);
    background: var(--ov-surface);
    border: 1px solid var(--ov-border);
    border-radius: var(--ov-radius-md);
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03);
    transition: border-color var(--ov-transition), box-shadow var(--ov-transition), background var(--ov-transition);
}

.ov-input {
    height: 40px;
    padding: 0 12px;
}

select.ov-input {
    appearance: none;
    padding-right: 36px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ov-ink-500) 50%),
        linear-gradient(135deg, var(--ov-ink-500) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 17px,
        calc(100% - 13px) 17px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.ov-input::placeholder,
.ov-textarea::placeholder {
    color: var(--ov-ink-400);
}

.ov-input:focus,
.ov-textarea:focus {
    outline: none;
    border-color: var(--ov-brand-500);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.16);
}

.ov-input:disabled,
.ov-textarea:disabled {
    cursor: not-allowed;
    color: var(--ov-ink-400);
    background: var(--ov-ink-100);
}

.ov-input--sm {
    height: 32px;
    padding: 0 10px;
    font-size: 12.5px;
}

.ov-textarea {
    min-height: 108px;
    padding: 10px 12px;
    resize: vertical;
}

.ov-muted {
    color: var(--ov-muted);
    font-size: 12px;
}

.ov-section-title {
    margin: 0 0 14px;
    color: var(--ov-ink-950);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
}