/* ============================================================
   Sistema de Gestión de Turnos
   747 Marketing Digital e Inteligencia Artificial
   custom-747.css — Personalización visual
   ============================================================
   Para cambiar colores principales editá las variables CSS aquí.
   Para cambiar logo: reemplazá assets/img/logo-747.png
   ============================================================ */

/* ---------- Variables de color 747 ---------- */
:root {
    --color-747-navy:     #0F2A47;   /* Azul oscuro principal (navbar, header) */
    --color-747-blue:     #1F4E79;   /* Azul medio                              */
    --color-747-accent:   #2E86C1;   /* Azul claro acento                       */
    --color-747-venta:    #28a745;   /* Verde — servicio Venta                  */
    --color-747-alquiler: #17a2b8;   /* Celeste — servicio Alquiler             */
    --color-747-text:     #ffffff;   /* Texto sobre fondos oscuros              */
}

/* ---------- Navbar del panel administrativo ---------- */
#header.navbar {
    background-color: var(--color-747-navy) !important;
    border-bottom: 3px solid var(--color-747-accent);
}

#header-logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

#logo-747-backend {
    height: 32px;
    width: auto;
    max-width: 100px;
    object-fit: contain;
}

/* ---------- Header de instalación ---------- */
.header-747 {
    background-color: var(--color-747-navy);
    border-bottom: 3px solid var(--color-747-accent);
    color: var(--color-747-text);
}

.header-747 .page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-747-text);
    margin: 0;
}

.logo-747-header {
    height: 40px;
    width: auto;
    max-width: 120px;
    object-fit: contain;
}

/* ---------- Footer del instalador ---------- */
.footer-747 {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

/* ---------- Colores de servicios en el calendario ---------- */

/* Venta — verde */
.fc-event[data-service="Venta"],
.fc-event.service-venta {
    background-color: var(--color-747-venta) !important;
    border-color: var(--color-747-venta) !important;
    color: #fff !important;
}

/* Alquiler — celeste */
.fc-event[data-service="Alquiler"],
.fc-event.service-alquiler {
    background-color: var(--color-747-alquiler) !important;
    border-color: var(--color-747-alquiler) !important;
    color: #fff !important;
}

/* ---------- Página pública de booking ---------- */
#header {
    background-color: var(--color-747-navy) !important;
}

#company-name span {
    color: var(--color-747-text);
}

/* Indicadores de paso activo */
.book-step.active-step {
    background-color: var(--color-747-accent) !important;
    border-color: var(--color-747-accent) !important;
}

/* Botón principal de confirmación */
.btn-dark,
#button-next-1,
#button-next-2,
#button-next-3,
#confirm-appointment {
    background-color: var(--color-747-navy) !important;
    border-color: var(--color-747-accent) !important;
}

.btn-dark:hover,
#button-next-1:hover,
#button-next-2:hover,
#button-next-3:hover,
#confirm-appointment:hover {
    background-color: var(--color-747-blue) !important;
}

/* Tarjetas de servicio seleccionadas */
.selected-item {
    border-color: var(--color-747-accent) !important;
    box-shadow: 0 0 0 2px var(--color-747-accent) !important;
}

/* ---------- Panel de login ---------- */
#login-frame {
    max-width: 420px;
}

/* ---------- Badges de estado en calendario ---------- */
.badge-venta {
    background-color: var(--color-747-venta);
    color: #fff;
}

.badge-alquiler {
    background-color: var(--color-747-alquiler);
    color: #fff;
}

/* ---------- Leyenda de colores en el calendario ---------- */
.color-legend {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 6px 12px;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 0.85rem;
}

.color-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.color-dot-venta    { background-color: var(--color-747-venta); }
.color-dot-alquiler { background-color: var(--color-747-alquiler); }