/* =========================================================
   VARIABLES — AntiNoShow
   Tema único: "Profesional" (gris pizarra + azul cielo)
   ========================================================= */

:root {
    /* ---- Neutros ---- */
    --gris-texto: #3c4043;
    --gris-texto-suave: #5f6368;
    --gris-placeholder: #bdc1c6;
    --gris-borde: #dadce0;
    --gris-borde-suave: #f1f3f4;
    --gris-fondo-btn: #f8f9fa;
    --gris-fondo-btn-hover: #f1f3f4;
    --blanco: #fff;

    --color-exito: #21a649;
    --color-exito-hover: #0f5323;
    --color-exito-suave: #a8d5b5;
    --color-peligro: #d93025;
    --color-peligro-hover: #b5261d;
    --color-peligro-suave: #fce8e6;
    --color-completada: var(--color-exito);
    --color-cancelada: #80868b;

    /* neutros de layout, tomados del mockup */
    --fondo-app: #FAFBFC;
    --borde-app: #DDE3E7;
    --borde-suave-app: #E5E9EB;
    --borde-header-app: #EDEFF1;
    --radio-app: 12px;

    /* ---- Tema profesional: gris pizarra + azul cielo ---- */
    --color-primario: #4A5A68;        /* gris pizarra: sidebar, títulos fuertes */
    --color-primario-suave: #EEF1F3;
    --color-primario-texto: #8A9AA6;

    --color-acento: #4C9FE0;          /* azul cielo: CTAs, links, foco, seleccionados */
    --color-acento-hover: #2C86C9;
    --color-acento-suave: #EBF4FB;
    --color-acento-rgb: 76, 159, 224; /* mismo azul en formato "r, g, b", para usar con rgba() en bordes/sombras translúcidos */

    --color-pendiente: #e7af65;
    --color-pendiente-borde: #C98C3F;
    --color-confirmada: var(--color-acento);
    --color-confirmada-borde: var(--color-acento-hover);
    --color-hoy-fondo: rgba(76, 159, 224, 0.12);

    /* sidebar (más oscuro que color-primario, tono "gris pizarra oscuro") */
    --sidebar-bg: #4A5A68;
    --sidebar-bg-suave: #5C6E7D;
    --sidebar-borde: #5C6E7D;
    --sidebar-texto: #FFFFFF;
    --sidebar-texto-suave: #C7D1D8;
    --sidebar-texto-tenue: #B9C5CD;
    --sidebar-texto-apagado: #8B9AA6;
    --sidebar-logout: #E5A8A3;

    /* estados de las citas en el calendario grande */
    --evento-confirmada: var(--color-acento-hover);
    --evento-pendiente: var(--color-pendiente);
    --evento-sin-confirmar: #8A9AA6;
    --evento-completada: var(--color-exito);
    --evento-cancelada: var(--color-cancelada);

    /* huecos libres pintados al crear una cita nueva */
    --hueco-libre-fondo: rgba(22, 163, 74, 0.30);
    --hueco-libre-fondo-hover: rgba(22, 163, 74, 0.45);
    --hueco-libre-borde: #15803d;

    /* franja concreta ya seleccionada dentro de un hueco libre */
    --hueco-seleccionado-fondo: rgba(21, 128, 61, 0.75);
    --hueco-seleccionado-borde: #14532d;

    /* sombra estándar para tarjetas/cards centradas (páginas públicas) */
    --sombra-card: 0 10px 25px -5px rgba(74, 90, 104, 0.10);
}