/*
 * Tema "calendly" — basado en docs/DESIGN_calendly.md (Calendly).
 * Tinta navy sobre mármol frío: texto siempre en #0b3558 (nunca negro), un solo azul
 * (#006bff) para acciones, botones de 8px y sombras teñidas de azul en lugar de negras.
 * Las variables las consume theme-base.css. Gilroy es comercial: se usa Manrope.
 *
 * Se usa como tema global (ADMIN_THEME=calendly) o solo en una página
 * (config/admin-theme.php → page_themes). No pongas aquí otros selectores que `:root`,
 * porque en el modo por página ese selector se sustituye por el de la página.
 */

:root {
    /* Color */
    --th-ink: #0b3558;
    --th-ink-soft: #0b3558;
    --th-muted: #476788;
    --th-muted-strong: #476788;
    --th-placeholder: #a6bbd1;
    --th-hairline: #d4e0ed;
    --th-canvas: #f8f9fb;
    --th-paper: #ffffff;
    --th-surface-alt: #f8f9fb;
    --th-wash: #f0f3f8;
    --th-wash-hover: #d4e0ed;
    --th-accent: #006bff;
    --th-accent-hover: #0059d6;
    --th-accent-fg: #ffffff;
    --th-link: #006bff;
    --th-alert: #d63a3a; /* el diseño no define color de error */
    --th-overlay: rgba(11, 53, 88, 0.4);

    /* Tipografía */
    --th-font-text: 'Gilroy', 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --th-font-display: var(--th-font-text);
    --th-tracking-body: 0;
    --th-h1-size: 2.375rem;
    --th-h1-leading: 1.21;
    --th-h1-weight: 700;
    --th-h1-tracking: 0;
    --th-subhead-size: 1rem;
    --th-h2-size: 1.5rem;
    --th-h2-weight: 600;
    --th-h2-tracking: 0;
    --th-title-size: 1.75rem;
    --th-title-weight: 600;
    --th-title-tracking: 0;
    --th-stat-size: 3rem;
    --th-stat-weight: 700;
    --th-stat-tracking: 0;
    --th-stat-label-transform: none;
    --th-thead-size: 0.75rem;
    --th-thead-weight: 600;
    --th-thead-tracking: 0.04em;
    --th-thead-transform: uppercase;
    --th-btn-weight: 600;
    --th-btn-lg-size: 1rem;

    /* Forma */
    --th-radius-card: 24px;
    --th-radius-btn: 8px;
    --th-radius-input: 8px;
    --th-radius-badge: 9999px;
    --th-radius-panel: 16px;
    --th-radius-item: 8px;
    --th-radius-check: 4px;

    /* Elevación: sombras teñidas de azul, nunca negro neutro */
    --th-shadow-card: rgba(71, 103, 136, 0.04) 0 4px 5px 0, rgba(71, 103, 136, 0.03) 0 4px 10px 0, rgba(71, 103, 136, 0.05) 0 10px 20px 0;
    --th-shadow-float: 0 0 0 1px #d4e0ed, rgba(71, 103, 136, 0.04) 0 4px 5px 0, rgba(71, 103, 136, 0.03) 0 8px 15px 0, rgba(71, 103, 136, 0.08) 0 30px 50px 0;
    --th-divider: #f0f3f8;

    /* Layout */
    --th-card-pad: 1.5rem;
    --th-topbar-height: 4rem;
    --th-topbar-bg: rgba(255, 255, 255, 0.92);
    --th-topbar-blur: blur(12px);
    --th-topbar-shadow: inset 0 -1px 0 #d4e0ed;

    /* Inputs y botones */
    --th-input-bg: #f0f3f8;
    --th-input-bg-hover: #e9eef5;
    --th-input-focus-shadow: 0 0 0 2px #006bff;
    --th-input-invalid-shadow: 0 0 0 1.5px #d63a3a;
    --th-btn-outline-shadow: inset 0 0 0 1px #d4e0ed;

    /* Badges: Deep Cobalt sobre azul muy claro */
    --th-badge-bg: #e6f0ff;
    --th-badge-fg: #004eba;

    /* Paginación y navegación activas */
    --th-page-active-bg: #006bff;
    --th-page-active-fg: #ffffff;
    --th-nav-active-bg: #f0f3f8;
    --th-nav-active-fg: #006bff;
}