/* =========================================================
   Tipografía autoalojada (Poppins) — sin depender del CDN
   ========================================================= */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins/poppins-500.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins/poppins-700.woff2') format('woff2'); }

:root { --bs-body-font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }

body,
.btn, .form-control, .form-select, .form-check-label, .dropdown-item,
.metismenu, .menu-title, .apps-name, .card, .navbar,
h1, h2, h3, h4, h5, h6, input, textarea, select, button, label, table {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}
body { letter-spacing: .1px; }
h1, h2, h3, h4, h5, h6, .fw-bold { font-weight: 600; }

/* =========================================================
   Color de marca — reservavisita.es
   Sobrescribe el "primary" de Bootstrap 5 y la plantilla.
   ========================================================= */

:root {
    --brand: #2F5071;
    --brand-dark: #284460;
    --brand-darker: #233C55;
    --brand-rgb: 47, 80, 113;

    --bs-primary: #2F5071;
    --bs-primary-rgb: 47, 80, 113;
    --bs-link-color: #2F5071;
    --bs-link-color-rgb: 47, 80, 113;
    --bs-link-hover-color: #284460;
}

/* Botones sólidos */
.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand-dark);
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-bg: var(--brand-darker);
    --bs-btn-active-border-color: var(--brand-darker);
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
}

/* Botones outline */
.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--brand);
    --bs-btn-active-border-color: var(--brand);
}

/* Fondos, textos, bordes */
.bg-primary { background-color: var(--brand) !important; }
.text-primary { color: var(--brand) !important; }
.border-primary { border-color: var(--brand) !important; }
.badge.bg-primary { background-color: var(--brand) !important; }
.bg-gradient-cosmic,
.bg-primary.bg-gradient { background-image: linear-gradient(310deg, var(--brand-darker), var(--brand)) !important; }

/* Enlaces */
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }
.text-decoration-none { color: var(--brand); }

/* Barras de progreso y elementos activos */
.progress-bar { background-color: var(--brand); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-switch .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.page-item.active .page-link { background-color: var(--brand); border-color: var(--brand); }
.page-link { color: var(--brand); }

/* Foco de inputs */
.form-control:focus, .form-select:focus {
    border-color: rgba(var(--brand-rgb), .6);
    box-shadow: 0 0 0 .2rem rgba(var(--brand-rgb), .2);
}

/* Menú HOVER/ACTIVO = tinte suave de marca + texto e icono en color de marca
   (la plantilla ponía un relleno azul #0d6efd; lo sustituimos por algo limpio) */
.topbar-nav .metismenu a:hover, .topbar-nav .metismenu a:focus, .topbar-nav .metismenu a:active,
.sidebar-wrapper .metismenu a:hover, .sidebar-wrapper .metismenu a:focus, .sidebar-wrapper .metismenu a:active,
.metismenu a:hover, .metismenu a:focus, .metismenu a.active, .metismenu li.mm-active > a {
    background: rgba(var(--brand-rgb), .10) !important;
    color: var(--brand) !important;
}
.metismenu a:hover .parent-icon, .metismenu a:hover .menu-title,
.metismenu a:focus .parent-icon, .metismenu a:focus .menu-title,
.metismenu a.active .parent-icon, .metismenu a.active .menu-title,
.metismenu .mm-active > a .parent-icon, .metismenu .mm-active > a .menu-title { color: var(--brand) !important; }
/* Accesos rápidos de la cabecera (Inicio/Agenda/Pacientes) */
.top-navbar .nav-link:hover { color: var(--brand) !important; }

/* Horizontal: los submenús SOLO se abren al pasar el ratón.
   (metisMenu marca el activo con mm-show y se quedaba abierto — esto lo evita.) */
.topbar-nav .metismenu > li > ul { display: none !important; }
.topbar-nav .metismenu > li:hover > ul { display: block !important; }

/* Botones de acción en tablas (lápiz/papelera): sin borde, más limpios */
table .btn-outline-primary, table .btn-outline-danger, table .btn-outline-secondary,
table .btn-outline-success, table .btn-outline-warning, table .btn-outline-info {
    border-color: transparent !important;
    background-color: transparent !important;
}
table .btn-outline-primary:hover { background-color: rgba(var(--brand-rgb), .12) !important; color: var(--brand) !important; }
table .btn-outline-danger:hover { background-color: rgba(220, 53, 69, .12) !important; color: #dc3545 !important; }
table .btn-outline-secondary:hover { background-color: rgba(108, 117, 125, .12) !important; color: #6c757d !important; }

/* Cabecera del usuario */
.dropdown-user-name { color: var(--brand); }

/* ---- Login: fondo con el color de marca ---- */
body.bg-login {
    background: linear-gradient(135deg, var(--brand) 0%, var(--brand-darker) 100%) fixed;
    min-height: 100vh;
}
body.bg-login .authentication-content {
    min-height: 100vh;
    display: flex;
    align-items: center;
}
/* El botón "Entrar" con el color de marca (ya hereda de btn-primary, reforzado) */
body.bg-login .btn-primary { background-color: var(--brand); border-color: var(--brand); }