/*
 * style.css — Paleta visual por cliente
 * Sistema de Citas · Reemplazar este archivo por instalación.
 * ─────────────────────────────────────────────────────────────
 * INSTRUCCIONES:
 *   1. Cambia los valores de las variables CSS en :root
 *   2. Coloca el logo en el mismo directorio y actualiza --logo-url
 *   3. No es necesario tocar embed.html ni portal-staff.html
 * ─────────────────────────────────────────────────────────────
 */

/* ── Google Font ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Variables de paleta ──────────────────────────────────── */
/*
 * El sistema usa "brand-*" como escala de color principal.
 * Copia los valores hex de la paleta de tu cliente aquí.
 * Herramienta sugerida: https://uicolors.app/create
 */
:root {
    /* Paleta principal (actualmente: café cálido — Clínica Shalom) */
    --brand-50: #fcfbf9;
    --brand-100: #f6efe6;
    --brand-200: #e8dbcb;
    --brand-300: #d6c1ac;
    --brand-400: #bfaba7;
    --brand-500: #aa8e74;
    --brand-600: #8c6a4e;
    /* ← color primario de botones y acentos */
    --brand-700: #75553b;
    --brand-800: #5e432d;
    --brand-900: #463121;
    --brand-950: #2a1c13;

    /* Logo — ruta relativa al archivo style.css */
    --logo-url: url('company_logo.png');
    --logo-max-height: 80px;
    /* altura máxima del logo en pantalla */

    /* Fuente base */
    --font-family: 'Inter', sans-serif;
}

/* ── Inyecta la paleta en Tailwind (el config de embed/portal la leerá) ── */
/* Tailwind Play CDN soporta CSS vars como valores de color directamente    */

/* ── Base ─────────────────────────────────────────────────── */
body {
    font-family: var(--font-family);
}

/* ── Logo ─────────────────────────────────────────────────── */
.logo-area {
    display: flex;
    align-items: center;
    min-height: 48px;
}

.logo-area img {
    max-height: var(--logo-max-height);
    max-width: 200px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Placeholder cuando no hay logo cargado */
.logo-area.no-logo::after {
    content: attr(data-name);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--brand-700);
    letter-spacing: -0.02em;
}

/* ── Tailwind custom color overrides via CSS vars ─────────── */
/*
 * Tailwind Play CDN no soporta CSS-vars en tailwind.config directamente,
 * pero sí podemos sobre-escribir clases concretas aquí:
 */
.bg-indigo-600 {
    background-color: var(--brand-600) !important;
}

.bg-indigo-700 {
    background-color: var(--brand-700) !important;
}

.bg-indigo-50 {
    background-color: var(--brand-50) !important;
}

.bg-indigo-100 {
    background-color: var(--brand-100) !important;
}

.border-indigo-600 {
    border-color: var(--brand-600) !important;
}

.border-indigo-400 {
    border-color: var(--brand-400) !important;
}

.border-indigo-100 {
    border-color: var(--brand-100) !important;
}

.text-indigo-600 {
    color: var(--brand-600) !important;
}

.text-indigo-700 {
    color: var(--brand-700) !important;
}

.text-indigo-200 {
    color: var(--brand-200) !important;
}

.ring-indigo-500\/20 {
    --tw-ring-color: color-mix(in srgb, var(--brand-500) 20%, transparent) !important;
}

.focus\:border-indigo-600:focus {
    border-color: var(--brand-600) !important;
}

.focus\:border-indigo-500:focus {
    border-color: var(--brand-600) !important;
}

.hover\:border-indigo-400:hover {
    border-color: var(--brand-400) !important;
}

.hover\:bg-indigo-700:hover {
    background-color: var(--brand-700) !important;
}