/* ==========================================================================
   Doctorísimo — paleta y estilos de marca
   ==========================================================================
   La paleta sale del **logo de la app** (`DoctorisimoMobile/assets/icon/icon.png`), medido píxel a
   píxel sobre la imagen: violeta `#783080` (20,4% de la tinta, el corazón y la "A" del script), azul
   marino `#201048` (9,8%, la "M"), magenta `#602068` y el celeste del latido `#40b0d8`.

   Regla de contraste (WCAG AA = 4,5:1 para texto normal): cada color de la paleta está anotado con su
   relación contra el fondo con el que se usa. El lila anterior (`#c28fd6` con texto blanco, 2,6:1) no
   cumplía y se retiró.

   Este archivo define **una sola vez** los tokens. Los nombres históricos (`--primary-color`, etc.) se
   mantienen apuntando a los nuevos para no romper las vistas que ya los usan: cambiando acá, cambia
   todo el sitio. El sistema de la aplicación (Bootstrap + componentes web) vive en
   `doctorisimo-ui.css`, que consume estos mismos tokens.
   ========================================================================== */

/* ==========================================================================
   Tipografía: Inter (licencia OFL, `public/fonts/inter/LICENSE.txt`), variable y **auto-alojada**: no hay
   petición a un tercero y funciona sin conexión. Dos subconjuntos cubren el español completo (latin) y los
   nombres con diacríticos poco comunes (latin-ext); el navegador baja el segundo sólo si lo necesita.
   ========================================================================== */
@font-face {
    font-family: 'Inter Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../fonts/inter/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url('../fonts/inter/inter-latin-wght-normal.woff2') format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* ---- Tipografía ---- */
    --ds-fuente: 'Inter Variable', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* ---- Violeta de marca (del logo) ---- */
    --ds-violeta-50:  #f9f4fa;
    --ds-violeta-100: #f3e8f5;
    --ds-violeta-200: #e3cfe6;
    --ds-violeta-300: #cfb0d4;
    --ds-violeta-500: #9a4aa2;
    --ds-violeta-600: #8a3a91;
    --ds-violeta-700: #783080;   /* primario — 8,3:1 con blanco */
    --ds-violeta-800: #60256a;   /* hover/activo */
    --ds-violeta-900: #4a1a53;

    /* ---- Azul marino de la "M" ---- */
    --ds-tinta: #201048;         /* texto principal — 17,1:1 con blanco */

    /* ---- Celeste del latido ---- */
    --ds-celeste-50:  #e6f4fa;
    --ds-celeste-200: #b8e0f0;
    --ds-celeste-500: #40b0d8;   /* acento decorativo: NO usar como texto (2,5:1) */
    --ds-celeste-700: #0d5e7d;   /* celeste oscurecido para texto — 7,5:1 con blanco */

    /* ---- Neutros, tintados hacia el violeta del logo ---- */
    --ds-texto:        #201048;  /* 16,6:1 sobre --ds-fondo */
    --ds-texto-2:      #4a4463;  /* 9,1:1 */
    --ds-texto-3:      #6b6580;  /* 5,5:1 — el "text-muted" del sistema */
    --ds-borde:        #e6e2ec;
    --ds-borde-2:      #d5d0e4;
    --ds-borde-control: #8a849c; /* borde de un campo o casilla: 3,6:1 con blanco (AA para componentes) */
    --ds-fondo:        #f6f5f9;
    --ds-superficie:   #ffffff;
    --ds-superficie-2: #f1eff5;

    /* ---- Semánticos (texto sobre su propio fondo claro) ---- */
    --ds-exito:         #14654a;  --ds-exito-bg:   #e8f6f0;  --ds-exito-borde:   #b6e2d0;
    --ds-aviso:         #7a5900;  --ds-aviso-bg:   #ffecb3;  --ds-aviso-borde:   #f2dcb3;
    --ds-peligro:       #b3261e;  --ds-peligro-bg: #fdecea;  --ds-peligro-borde: #f5c6c2;
    --ds-info:          #0d5e7d;  --ds-info-bg:    #e6f4fa;  --ds-info-borde:    #b8e0f0;

    /* ---- Barra lateral: el indigo del logo, más hondo que la tinta del texto ---- */
    --ds-barra:         #1f1146;  /* fondo — el azul marino de la "M" del logo, un paso más hondo: 17,6:1 con blanco */
    --ds-barra-2:       #2e1c63;  /* hover y ítem activo */
    --ds-barra-borde:   #3d2a7d;
    --ds-barra-texto:   #ffffff;
    --ds-barra-texto-2: #cdc6e8;  /* grupos y secundarios — 10,6:1 sobre --ds-barra */
    --ds-barra-hilo:    var(--ds-celeste-500);  /* el hilo del ítem activo (decorativo, no es texto) */
    --ds-barra-ancho:   264px;
    --ds-barra-ancho-plegada: 72px;

    /* ---- Formas y sombras ---- */
    --ds-radio-sm: 8px;
    --ds-radio: 10px;          /* controles y botones */
    --ds-radio-card: 12px;     /* tarjetas */
    --ds-radio-lg: 14px;       /* diálogos */
    --ds-control-alto: 36px;   /* botón y campo: la misma altura, así se alinean en una barra de filtros */
    --ds-control-alto-sm: 32px;
    --ds-sombra-1: 0 1px 2px rgba(32, 16, 72, .06), 0 1px 3px rgba(32, 16, 72, .04);
    --ds-sombra-2: 0 4px 16px rgba(32, 16, 72, .08);
    --ds-sombra-3: 0 10px 30px rgba(32, 16, 72, .12);
    --ds-foco: 0 0 0 .2rem rgba(120, 48, 128, .28);

    /* ---- Movimiento: breve, y se apaga con `prefers-reduced-motion` (ver doctorisimo-ui.css) ---- */
    --ds-dur-micro: .12s;
    --ds-dur-base: .18s;
    --ds-dur-panel: .24s;
    --ds-dur-pagina: .36s;
    --ds-ease: cubic-bezier(.2, .8, .2, 1);

    /* ---- Nombres históricos (gineco), apuntando a la misma paleta ---- */
    --primary-color: var(--ds-violeta-700);
    --primary-hover: var(--ds-violeta-800);
    --primary-light: var(--ds-violeta-100);
    --primary-border: var(--ds-violeta-200);

    --accent-color: var(--ds-celeste-700);
    --accent-hover: #0a4a63;
    --accent-light: var(--ds-celeste-50);

    --dark-color: var(--ds-tinta);
    --muted-color: var(--ds-texto-3);
    --bg-light: var(--ds-violeta-50);
    --bg-surface: var(--ds-superficie);
}

body {
    font-family: var(--ds-fuente);
    color: var(--ds-texto);
    background-color: var(--ds-superficie);
}

/* ==========================================
   Header / Navbar
   ========================================== */
.navbar-gineco {
    background-color: var(--ds-superficie);
    box-shadow: 0 1px 3px rgba(32, 16, 72, .06);
}

.navbar-gineco .navbar-brand {
    font-weight: 700;
    color: var(--ds-tinta);
}

.navbar-gineco .navbar-brand span {
    color: var(--ds-violeta-700);
}

.nav-link {
    color: var(--ds-texto-2);
    font-weight: 500;
    transition: color .2s ease;
}

.nav-link:hover {
    color: var(--ds-violeta-700);
}

/* ==========================================
   Botones de marca
   ========================================== */
.btn-primary-gineco {
    background-color: var(--ds-violeta-700);
    border-color: var(--ds-violeta-700);
    color: #fff;
    font-weight: 600;
    border-radius: 50px;
    padding: 10px 24px;
    transition: all .2s ease;
}

.btn-primary-gineco:hover,
.btn-primary-gineco:focus {
    background-color: var(--ds-violeta-800);
    border-color: var(--ds-violeta-800);
    color: #fff;
    box-shadow: 0 4px 12px rgba(120, 48, 128, .35);
}

.btn-accent-gineco {
    background-color: var(--ds-celeste-700);
    border-color: var(--ds-celeste-700);
    color: #fff;
    font-weight: 600;
    border-radius: 50px;
    padding: 10px 24px;
    transition: all .2s ease;
}

.btn-accent-gineco:hover,
.btn-accent-gineco:focus {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #fff;
    box-shadow: 0 4px 12px rgba(13, 94, 125, .35);
}

.btn-outline-gineco {
    border: 2px solid var(--ds-violeta-700);
    color: var(--ds-violeta-700);
    font-weight: 600;
    border-radius: 50px;
    padding: 8px 22px;
    transition: all .2s ease;
}

.btn-outline-gineco:hover,
.btn-outline-gineco:focus {
    background-color: var(--ds-violeta-700);
    border-color: var(--ds-violeta-700);
    color: #fff;
}

/* ==========================================
   Hero Section (sitio público)
   ========================================== */
.hero-section {
    background: linear-gradient(135deg, var(--ds-violeta-50) 0%, #ffffff 100%);
    padding: 80px 0 60px 0;
    border-bottom: 1px solid var(--ds-violeta-200);
}

.hero-title {
    font-weight: 800;
    color: var(--ds-tinta);
}

.hero-title span {
    color: var(--ds-violeta-700);
}

.search-box-card {
    background: #fff;
    border-radius: var(--ds-radio-lg);
    box-shadow: var(--ds-sombra-3);
    border: 1px solid var(--ds-violeta-200);
}

/* ==========================================
   Cards de Servicios / Especialidades
   ========================================== */
.service-card {
    background: #fff;
    border: 1px solid var(--ds-borde);
    border-radius: var(--ds-radio);
    padding: 25px;
    transition: transform .2s ease, box-shadow .2s ease;
    height: 100%;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ds-sombra-2);
    border-color: var(--ds-violeta-200);
}

.service-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--ds-violeta-100);
    color: var(--ds-violeta-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 15px;
}

.accent-icon {
    background-color: var(--ds-celeste-50);
    color: var(--ds-celeste-700);
}

/* ==========================================
   Banner promocional / Telemedicina
   ========================================== */
.banner-telemedicina {
    background-color: var(--ds-violeta-50);
    border-radius: var(--ds-radio-lg);
    border: 1px solid var(--ds-violeta-200);
}

.badge-gineco {
    background-color: var(--ds-celeste-50);
    color: var(--ds-celeste-700);
    border: 1px solid var(--ds-celeste-200);
    font-size: .85rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
}

/* ==========================================
   Footer
   ========================================== */
.footer-gineco {
    background-color: var(--ds-tinta);
    color: #fff;
}

.footer-gineco a {
    color: var(--ds-violeta-200);
    text-decoration: none;
    transition: color .2s ease;
}

.footer-gineco a:hover {
    color: #fff;
}

/* El pie es oscuro: los encabezados no pueden heredar la tinta (quedarían invisibles) y el gris del
   "text-muted" del sistema no tiene contraste sobre azul marino. */
.footer-gineco h1, .footer-gineco h2, .footer-gineco h3,
.footer-gineco h4, .footer-gineco h5, .footer-gineco h6 {
    color: #fff;
}

.footer-gineco .text-muted { color: #b9aecb !important; }