/*
 * DentalPro — identidad visual del consultorio sobre AdminLTE 3 / Bootstrap 4.
 *
 * Paleta tomada del logo (café #402F24). Fondo "esmalte" (blanco frío, no
 * crema), acento "rubor" para lo seleccionado. Rasgo propio: el doble óvalo
 * del monograma FP, usado solo para marcar "dónde estoy / qué elegí"
 * (ítem activo del menú, turno elegido en la agenda, foco del teclado).
 * Se carga después de adminlte.min.css (config/adminlte.php → plugins).
 */

:root {
    /* Color */
    --fp-espresso: #402F24;      /* marca: texto fuerte, botón principal */
    --fp-espresso-hover: #2E211A;
    --fp-cacao: #6B5A50;         /* texto secundario, íconos */
    --fp-tenue: #74645A;         /* ayudas, metadatos (AA sobre blanco) */
    --fp-esmalte: #F3F4F1;       /* fondo de la aplicación */
    --fp-superficie: #FFFFFF;    /* tarjetas, menú, barra superior */
    --fp-linea: #E3DDD7;         /* bordes */
    --fp-linea-suave: #EEEAE6;
    --fp-rubor: #EFDCD5;         /* seleccionado / activo */
    --fp-rubor-suave: #F7EDE9;   /* hover */

    /* Estados (armonizados con la marca, todos AA con su texto) */
    --fp-salvia: #4E7560;        /* éxito, disponible, cobrar */
    --fp-ladrillo: #A2443A;      /* peligro, anular */
    --fp-miel: #E2B65A;          /* aviso (texto oscuro encima) */
    --fp-miel-texto: #3B2A12;
    --fp-pizarra: #456C79;       /* información */

    /* Tipografía */
    --fp-sans: "Albert Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --fp-serif: "Gloock", "Bodoni 72", Didot, Georgia, serif;

    /* Forma: radios por jerarquía */
    --fp-r-tarjeta: 14px;
    --fp-r-campo: 10px;
    --fp-r-ovalo: 999px;

    /* Doble óvalo (anillo exterior + interior), como el marco del monograma */
    --fp-doble-ovalo: 0 0 0 1px var(--fp-espresso), inset 0 0 0 3px var(--fp-superficie), inset 0 0 0 4px var(--fp-espresso);
}

/* ======================================================================
   Base
   ====================================================================== */

body,
.main-header .navbar,
.main-sidebar,
.content-wrapper,
.modal,
.swal2-popup,
.select2-container {
    font-family: var(--fp-sans);
}

body {
    color: var(--fp-espresso);
    background-color: var(--fp-esmalte);
    font-size: .95rem;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--fp-espresso); }
a:hover { color: var(--fp-espresso-hover); }

.text-muted { color: var(--fp-tenue) !important; }

h1, h2, h3, h4, h5, h6 { color: var(--fp-espresso); }

/* Título de cada pantalla: la serif de la marca, el único gesto tipográfico. */
.content-header h1 {
    font-family: var(--fp-serif);
    font-weight: 400;
    font-size: 2.1rem;
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--fp-espresso);
}

.content-header h1 small {
    display: block;
    margin-top: .2rem;
    font-family: var(--fp-sans);
    font-size: .95rem;
    letter-spacing: 0;
    color: var(--fp-cacao);
}

.content-wrapper { background-color: var(--fp-esmalte); }

/* Foco de teclado visible: el doble óvalo. */
.btn:focus-visible,
.nav-sidebar .nav-link:focus-visible,
a:focus-visible {
    outline: none;
    box-shadow: var(--fp-doble-ovalo) !important;
}

/* ======================================================================
   Barra superior
   ====================================================================== */

.main-header.navbar {
    background-color: var(--fp-superficie);
    border-bottom: 1px solid var(--fp-linea) !important;
}

.main-header .nav-link { color: var(--fp-cacao); }
.main-header .nav-link:hover { color: var(--fp-espresso); }

.main-header .custom-select,
.main-header select.form-control {
    border-color: var(--fp-linea);
    border-radius: var(--fp-r-ovalo);
    color: var(--fp-espresso);
}

/* En celular, el selector de sucursal y el nombre del usuario no deben
   ensanchar la página (desborde horizontal). */
@media (max-width: 575.98px) {
    .main-header .navbar-nav select.form-control,
    .main-header .navbar-nav .custom-select { max-width: 44vw; }

    .main-header .user-menu > .nav-link {
        max-width: 28vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .content-header h1 { font-size: 1.75rem; }
}

/* ======================================================================
   Menú lateral (claro, como la recepción del consultorio)
   ====================================================================== */

.main-sidebar,
.main-sidebar.sidebar-light-primary {
    background-color: var(--fp-superficie);
    border-right: 1px solid var(--fp-linea);
    box-shadow: none !important;
}

.main-sidebar .brand-link {
    border-bottom: 1px solid var(--fp-linea) !important;
    color: var(--fp-espresso);
}

.main-sidebar .brand-link .brand-text { color: var(--fp-espresso); }

.sidebar .form-control-sidebar,
.sidebar .btn-sidebar {
    background-color: var(--fp-esmalte);
    border: 1px solid var(--fp-linea);
    color: var(--fp-espresso);
}

.sidebar .form-control-sidebar { border-radius: var(--fp-r-ovalo) 0 0 var(--fp-r-ovalo); }
.sidebar .btn-sidebar { border-radius: 0 var(--fp-r-ovalo) var(--fp-r-ovalo) 0; }

.nav-sidebar .nav-link {
    color: var(--fp-cacao);
    border-radius: var(--fp-r-ovalo);
    margin-bottom: 2px;
}

.nav-sidebar .nav-link .nav-icon { color: var(--fp-tenue); }

.nav-sidebar .nav-link:hover,
.nav-sidebar .menu-open > .nav-link {
    background-color: var(--fp-rubor-suave) !important;
    color: var(--fp-espresso) !important;
}

/* Dónde estoy: doble óvalo sobre rubor. Gana a .sidebar-light-primary .nav-link.active. */
.main-sidebar .nav-sidebar > .nav-item > .nav-link.active,
.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
    background-color: var(--fp-rubor) !important;
    color: var(--fp-espresso) !important;
    font-weight: 600;
    box-shadow: var(--fp-doble-ovalo) !important;
}

.main-sidebar .nav-sidebar .nav-link.active .nav-icon { color: var(--fp-espresso); }

/* El grupo que contiene la pantalla actual (AdminLTE también lo marca .active)
   solo se tiñe: el doble óvalo queda únicamente en la pantalla donde estoy. */
.main-sidebar .nav-sidebar > .nav-item.has-treeview > .nav-link.active,
.main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link.active {
    background-color: var(--fp-rubor-suave) !important;
    box-shadow: none !important;
    font-weight: 600;
}

.nav-sidebar .nav-treeview { padding-left: .35rem; }
.nav-sidebar .nav-header { color: var(--fp-tenue); }

/* ---- Cabecera del menú con el logo del consultorio ---------------------
 * Logo completo centrado, sin recorte circular. Con el menú contraído se
 * muestra el ícono cuadrado (AdminLTE alterna .logo-xl / .logo-xs).
 */
.main-sidebar .brand-link.brand-logo-claro {
    background: var(--fp-superficie);
    height: calc(3.5rem + 1px); /* misma altura que la barra superior */
    position: relative;
    padding: 0;
}

.main-sidebar .brand-link.brand-logo-claro .logo-xl,
.main-sidebar .brand-link.brand-logo-claro .logo-xs {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    margin: 0;
    float: none;
    border-radius: 0;
    box-shadow: none;
}

.main-sidebar .brand-link.brand-logo-claro .logo-xl {
    max-width: calc(100% - 24px);
    max-height: 46px;
}

.main-sidebar .brand-link.brand-logo-claro .logo-xs {
    max-width: 44px;
    max-height: 44px;
}

/* ---- Sin logo: el nombre del consultorio en hasta dos líneas ------------ */
.main-sidebar .brand-link:not(.brand-logo-claro) .brand-text {
    display: inline-block;
    max-width: calc(100% - 48px);
    white-space: normal;
    line-height: 1.15;
    font-size: .95rem;
    vertical-align: middle;
}

/* ======================================================================
   Tarjetas: borde fino, sin sombra; la jerarquía la da el título
   ====================================================================== */

.card {
    border: 1px solid var(--fp-linea);
    border-radius: var(--fp-r-tarjeta);
    box-shadow: none;
    background-color: var(--fp-superficie);
}

.card > .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--fp-linea-suave);
    border-top-left-radius: var(--fp-r-tarjeta);
    border-top-right-radius: var(--fp-r-tarjeta);
    padding: .9rem 1.25rem;
}

.card-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--fp-espresso);
}

.card-footer {
    background-color: transparent;
    border-top: 1px solid var(--fp-linea-suave);
    border-bottom-left-radius: var(--fp-r-tarjeta) !important;
    border-bottom-right-radius: var(--fp-r-tarjeta) !important;
}

/* Variantes de color de AdminLTE: en vez de cabeceras llenas de color, un
   filo superior con el tono del estado. */
.card.card-outline,
.card[class*="card-primary"],
.card[class*="card-success"],
.card[class*="card-warning"],
.card[class*="card-danger"],
.card[class*="card-info"],
.card[class*="card-secondary"] {
    border-top-width: 3px;
}

.card.card-primary, .card.card-outline.card-primary { border-top-color: var(--fp-espresso); }
.card.card-success, .card.card-outline.card-success { border-top-color: var(--fp-salvia); }
.card.card-warning, .card.card-outline.card-warning { border-top-color: var(--fp-miel); }
.card.card-danger, .card.card-outline.card-danger { border-top-color: var(--fp-ladrillo); }
.card.card-info, .card.card-outline.card-info { border-top-color: var(--fp-pizarra); }
.card.card-secondary, .card.card-outline.card-secondary { border-top-color: var(--fp-cacao); }

.card.card-primary:not(.card-outline) > .card-header,
.card.card-success:not(.card-outline) > .card-header,
.card.card-warning:not(.card-outline) > .card-header,
.card.card-danger:not(.card-outline) > .card-header,
.card.card-info:not(.card-outline) > .card-header {
    background-color: transparent;
    color: var(--fp-espresso);
}

.card.card-primary:not(.card-outline) > .card-header .card-title,
.card.card-success:not(.card-outline) > .card-header .card-title,
.card.card-warning:not(.card-outline) > .card-header .card-title,
.card.card-danger:not(.card-outline) > .card-header .card-title,
.card.card-info:not(.card-outline) > .card-header .card-title {
    color: var(--fp-espresso);
}

.card-header .btn-tool { color: var(--fp-tenue); }
.card-header .btn-tool:hover { color: var(--fp-espresso); }

/* ======================================================================
   Botones: óvalo (la forma del monograma)
   ====================================================================== */

.btn {
    border-radius: var(--fp-r-ovalo);
    font-weight: 500;
    padding-left: 1rem;
    padding-right: 1rem;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn-sm { padding-left: .75rem; padding-right: .75rem; }
.btn-xs { padding-left: .5rem; padding-right: .5rem; border-radius: var(--fp-r-ovalo); }
.btn-block { padding-left: 1rem; padding-right: 1rem; }
.btn.btn-flat { border-radius: var(--fp-r-ovalo); }
.btn-tool, .btn-link { padding-left: .25rem; padding-right: .25rem; }

.btn-primary,
.btn-dark {
    background-color: var(--fp-espresso);
    border-color: var(--fp-espresso);
    color: #fff;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active,
.btn-dark:hover, .btn-dark:focus, .btn-dark:not(:disabled):not(.disabled):active {
    background-color: var(--fp-espresso-hover);
    border-color: var(--fp-espresso-hover);
    color: #fff;
}

.btn-default,
.btn-secondary,
.btn-light {
    background-color: var(--fp-superficie);
    border: 1px solid var(--fp-linea);
    color: var(--fp-espresso);
}

.btn-default:hover, .btn-default:focus,
.btn-secondary:hover, .btn-secondary:focus,
.btn-light:hover, .btn-light:focus {
    background-color: var(--fp-rubor-suave);
    border-color: var(--fp-linea);
    color: var(--fp-espresso);
}

.btn-success { background-color: var(--fp-salvia); border-color: var(--fp-salvia); color: #fff; }
.btn-success:hover, .btn-success:focus { background-color: #3F6250; border-color: #3F6250; color: #fff; }

.btn-danger { background-color: var(--fp-ladrillo); border-color: var(--fp-ladrillo); color: #fff; }
.btn-danger:hover, .btn-danger:focus { background-color: #873830; border-color: #873830; color: #fff; }

.btn-warning { background-color: var(--fp-miel); border-color: var(--fp-miel); color: var(--fp-miel-texto); }
.btn-warning:hover, .btn-warning:focus { background-color: #D7A643; border-color: #D7A643; color: var(--fp-miel-texto); }

.btn-info { background-color: var(--fp-pizarra); border-color: var(--fp-pizarra); color: #fff; }
.btn-info:hover, .btn-info:focus { background-color: #385966; border-color: #385966; color: #fff; }

.btn-outline-primary, .btn-outline-dark { color: var(--fp-espresso); border-color: var(--fp-espresso); }
.btn-outline-primary:hover, .btn-outline-dark:hover { background-color: var(--fp-espresso); color: #fff; }
.btn-outline-secondary { color: var(--fp-cacao); border-color: var(--fp-linea); }
.btn-outline-secondary:hover { background-color: var(--fp-rubor-suave); color: var(--fp-espresso); border-color: var(--fp-linea); }
.btn-outline-success { color: var(--fp-salvia); border-color: var(--fp-salvia); }
.btn-outline-success:hover { background-color: var(--fp-salvia); color: #fff; }
.btn-outline-danger { color: var(--fp-ladrillo); border-color: var(--fp-ladrillo); }
.btn-outline-danger:hover { background-color: var(--fp-ladrillo); color: #fff; }
.btn-outline-warning { color: #8A6420; border-color: var(--fp-miel); }
.btn-outline-warning:hover { background-color: var(--fp-miel); color: var(--fp-miel-texto); }

.btn.disabled, .btn:disabled { opacity: .45; }

/* ======================================================================
   Campos
   ====================================================================== */

.form-control,
.custom-select,
.input-group-text {
    border-color: var(--fp-linea);
    border-radius: var(--fp-r-campo);
    color: var(--fp-espresso);
}

.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child),
.input-group-append .input-group-text { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group-prepend .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.input-group-text { background-color: var(--fp-esmalte); color: var(--fp-cacao); }

.form-control:focus,
.custom-select:focus {
    border-color: var(--fp-espresso);
    box-shadow: 0 0 0 3px rgba(64, 47, 36, .14);
    outline: none;
}

.input-group .form-control:focus ~ .input-group-append .input-group-text,
.input-group .form-control:focus ~ .input-group-prepend .input-group-text,
.input-group:focus-within .input-group-text {
    border-color: var(--fp-espresso) !important;
}

label:not(.form-check-label):not(.custom-control-label) {
    font-weight: 600;
    color: var(--fp-espresso);
}

.form-text { color: var(--fp-tenue); }

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--fp-espresso);
    border-color: var(--fp-espresso);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px rgba(64, 47, 36, .14);
}

/* Select2 (buscador de pacientes, diagnósticos) */
body .select2-container--bootstrap4 .select2-selection {
    border-color: var(--fp-linea);
    border-radius: var(--fp-r-campo);
}

body .select2-container--bootstrap4.select2-container--focus .select2-selection {
    border-color: var(--fp-espresso);
    box-shadow: 0 0 0 3px rgba(64, 47, 36, .14);
}

body .select2-container--bootstrap4 .select2-results__option--highlighted,
body .select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected=true] {
    background-color: var(--fp-espresso);
}

/* ======================================================================
   Tablas
   ====================================================================== */

.table { color: var(--fp-espresso); }

.table thead th {
    border-top: 0;
    border-bottom: 1px solid var(--fp-linea);
    color: var(--fp-cacao);
    font-weight: 600;
    font-size: .85rem;
    background-color: transparent;
}

.table .thead-light th {
    background-color: var(--fp-esmalte);
    border-color: var(--fp-linea);
    color: var(--fp-cacao);
}

.table td, .table th { border-top-color: var(--fp-linea-suave); }
.table-bordered, .table-bordered td, .table-bordered th { border-color: var(--fp-linea-suave); }

.table-hover tbody tr:hover,
.table-striped tbody tr:nth-of-type(odd):hover {
    background-color: var(--fp-rubor-suave);
}

.table-striped tbody tr:nth-of-type(odd) { background-color: #FAFAF8; }

/* ======================================================================
   Etiquetas, avisos, pestañas, paginación
   ====================================================================== */

.badge {
    border-radius: var(--fp-r-ovalo);
    font-weight: 600;
    padding: .3em .7em;
}

.badge-primary { background-color: var(--fp-espresso); }
.badge-secondary { background-color: var(--fp-cacao); }
.badge-success { background-color: var(--fp-salvia); }
.badge-danger { background-color: var(--fp-ladrillo); }
.badge-warning { background-color: var(--fp-miel); color: var(--fp-miel-texto); }
.badge-info { background-color: var(--fp-pizarra); }
.badge-light { background-color: var(--fp-esmalte); color: var(--fp-espresso); }

/* Utilidades de color de Bootstrap (barras de avance, montos en verde/rojo). */
.bg-success { background-color: var(--fp-salvia) !important; }
.bg-danger { background-color: var(--fp-ladrillo) !important; }
.bg-warning { background-color: var(--fp-miel) !important; }
.bg-info { background-color: var(--fp-pizarra) !important; }
.bg-primary { background-color: var(--fp-espresso) !important; }
.text-success { color: var(--fp-salvia) !important; }
.text-danger { color: var(--fp-ladrillo) !important; }
.text-warning { color: #8A6420 !important; }
.text-info { color: var(--fp-pizarra) !important; }
.text-primary { color: var(--fp-espresso) !important; }

.progress { background-color: var(--fp-linea-suave); border-radius: var(--fp-r-ovalo); }
.progress-bar { border-radius: var(--fp-r-ovalo); }

/* Avisos: fondo teñido y texto oscuro del mismo tono; legibles y sin gritar. */
.alert {
    border-radius: var(--fp-r-campo);
    border: 1px solid transparent;
    color: var(--fp-espresso);
}

.alert .close { color: inherit; opacity: .6; }

.alert-success { background-color: #E6EFE9; border-color: #C9DCCF; color: #2E4A3A; }
.alert-danger { background-color: #F6E3E0; border-color: #E9C4BF; color: #6E2B23; }
.alert-warning { background-color: #FBF0D9; border-color: #EFD9A6; color: #5A4112; }
.alert-info { background-color: #E3ECEF; border-color: #C5D6DC; color: #2C4852; }
.alert-secondary, .alert-light { background-color: var(--fp-esmalte); border-color: var(--fp-linea); color: var(--fp-espresso); }

.alert a, .alert .alert-link { color: inherit; text-decoration: underline; }

/* Pestañas (historia clínica): subrayado café en la activa. */
.nav-tabs { border-bottom-color: var(--fp-linea); }

.nav-tabs .nav-link {
    color: var(--fp-cacao);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-weight: 500;
}

.nav-tabs .nav-link:hover { color: var(--fp-espresso); border-bottom-color: var(--fp-linea); }

.nav-tabs .nav-link.active,
.card-header .nav-tabs .nav-link.active {
    color: var(--fp-espresso);
    background-color: transparent;
    border-bottom-color: var(--fp-espresso);
    font-weight: 600;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: var(--fp-espresso);
    border-radius: var(--fp-r-ovalo);
}

.page-link {
    color: var(--fp-espresso);
    border-color: var(--fp-linea);
}

.page-item:first-child .page-link { border-top-left-radius: var(--fp-r-ovalo); border-bottom-left-radius: var(--fp-r-ovalo); }
.page-item:last-child .page-link { border-top-right-radius: var(--fp-r-ovalo); border-bottom-right-radius: var(--fp-r-ovalo); }
.page-item.active .page-link { background-color: var(--fp-espresso); border-color: var(--fp-espresso); }
.page-link:hover { background-color: var(--fp-rubor-suave); color: var(--fp-espresso); }

/* ======================================================================
   Ventanas (modales) y SweetAlert
   ====================================================================== */

.modal-content {
    border: 0;
    border-radius: var(--fp-r-tarjeta);
}

.modal-header { border-bottom-color: var(--fp-linea-suave); }
.modal-footer { border-top-color: var(--fp-linea-suave); }

.modal-title {
    font-family: var(--fp-serif);
    font-weight: 400;
    font-size: 1.5rem;
}

.swal2-popup { border-radius: var(--fp-r-tarjeta) !important; }
.swal2-title { font-family: var(--fp-serif) !important; font-weight: 400 !important; color: var(--fp-espresso) !important; }
.swal2-styled.swal2-confirm { background-color: var(--fp-espresso) !important; border-radius: var(--fp-r-ovalo) !important; }
.swal2-styled.swal2-cancel { border-radius: var(--fp-r-ovalo) !important; }

/* ======================================================================
   Panel de control: indicadores sobre blanco; el número en la serif de la
   marca y el tono del estado solo en el ícono (no bloques de color).
   ====================================================================== */

.small-box,
.small-box[class*="bg-"] {
    background-color: var(--fp-superficie) !important;
    color: var(--fp-espresso) !important;
    border: 1px solid var(--fp-linea);
    border-radius: var(--fp-r-tarjeta);
    box-shadow: none;
    overflow: hidden;
}

.small-box > .inner { padding: 1rem 1.15rem .75rem; }

.small-box > .inner h3 {
    font-family: var(--fp-serif);
    font-weight: 400;
    font-size: 2.4rem;
    line-height: 1.05;
    margin-bottom: .35rem;
    color: var(--fp-espresso);
}

.small-box > .inner p { color: var(--fp-cacao); font-size: .95rem; margin-bottom: 0; }

.small-box .icon > i,
.small-box .icon > i.fa,
.small-box .icon > i.fas,
.small-box .icon > i.far,
.small-box .icon > i.fab,
.small-box:hover .icon > i,
.small-box:hover .icon > i.fa,
.small-box:hover .icon > i.fas,
.small-box:hover .icon > i.far {
    top: 16px;
    right: 18px;
    font-size: 26px;
    opacity: .75;
    transition: none;
}

.small-box > .inner { padding-right: 3.25rem; }

.small-box > .small-box-footer {
    background-color: transparent !important;
    border-top: 1px solid var(--fp-linea-suave);
    color: var(--fp-cacao) !important;
    text-align: left;
    padding: .45rem 1.15rem;
}

.small-box > a.small-box-footer:hover { background-color: var(--fp-rubor-suave) !important; color: var(--fp-espresso) !important; }

.small-box.bg-primary .icon > i { color: var(--fp-espresso); }
.small-box.bg-secondary .icon > i { color: var(--fp-cacao); }
.small-box.bg-info .icon > i { color: var(--fp-pizarra); }
.small-box.bg-teal .icon > i { color: #3E6F6A; }
.small-box.bg-success .icon > i { color: var(--fp-salvia); }
.small-box.bg-danger .icon > i { color: var(--fp-ladrillo); }
.small-box.bg-orange .icon > i { color: #9A5B33; }
.small-box.bg-warning .icon > i { color: #B98A2E; }

/* ======================================================================
   Agenda (FullCalendar)
   ====================================================================== */

body .fc .fc-toolbar-title {
    font-family: var(--fp-serif);
    font-weight: 400;
    font-size: 1.6rem;
    color: var(--fp-espresso);
    text-transform: lowercase;
}

body .fc .fc-toolbar-title::first-letter { text-transform: uppercase; }

body .fc .fc-button-primary {
    background-color: var(--fp-superficie);
    border-color: var(--fp-linea);
    color: var(--fp-espresso);
    text-transform: none;
    box-shadow: none !important;
}

body .fc .fc-button-primary:hover {
    background-color: var(--fp-rubor-suave);
    border-color: var(--fp-linea);
    color: var(--fp-espresso);
}

body .fc .fc-button-primary:not(:disabled).fc-button-active,
body .fc .fc-button-primary:not(:disabled):active {
    background-color: var(--fp-espresso);
    border-color: var(--fp-espresso);
    color: #fff;
}

body .fc .fc-button-primary:disabled {
    background-color: var(--fp-esmalte);
    border-color: var(--fp-linea);
    color: var(--fp-tenue);
}

body .fc .fc-button-group > .fc-button:first-child { border-top-left-radius: var(--fp-r-ovalo); border-bottom-left-radius: var(--fp-r-ovalo); }
body .fc .fc-button-group > .fc-button:last-child { border-top-right-radius: var(--fp-r-ovalo); border-bottom-right-radius: var(--fp-r-ovalo); }
body .fc .fc-today-button { border-radius: var(--fp-r-ovalo); }

body .fc .fc-col-header-cell-cushion,
body .fc .fc-daygrid-day-number { color: var(--fp-espresso); }

body .fc .fc-col-header-cell-cushion { font-weight: 600; text-transform: capitalize; }

body .fc-theme-standard td, body .fc-theme-standard th, body .fc-theme-standard .fc-scrollgrid { border-color: var(--fp-linea-suave); }

body .fc .fc-day-today { background-color: var(--fp-rubor-suave) !important; }

body .fc .fc-day-today .fc-daygrid-day-number {
    background-color: var(--fp-espresso);
    color: #fff;
    border-radius: var(--fp-r-ovalo);
    min-width: 1.8em;
    text-align: center;
    margin: 4px;
    padding: 2px 6px;
}

body .fc .fc-event { border-radius: 6px; }
body .fc .fc-non-business { background-color: rgba(64, 47, 36, .05); }

/* Turno elegido en "Nueva cita": el doble óvalo. */
.slot-btn { border-radius: var(--fp-r-ovalo) !important; }
.slot-btn.slot-elegido { box-shadow: var(--fp-doble-ovalo) !important; }
.slot-btn.btn-success.slot-elegido { background-color: var(--fp-espresso); border-color: var(--fp-espresso); }

/* ======================================================================
   Inicio de sesión
   ====================================================================== */

.login-page,
.register-page {
    background-color: var(--fp-esmalte);
}

.login-box .card,
.register-box .card {
    border-top: 0;
    border-radius: var(--fp-r-tarjeta);
}

.login-card-body, .register-card-body { border-radius: var(--fp-r-tarjeta); color: var(--fp-espresso); }
.login-box-msg { color: var(--fp-cacao); }

.auth-logo-clinica {
    display: block;
    max-width: 100%;
    max-height: 110px;
    margin: 0 auto .5rem;
}

/* ======================================================================
   Movimiento reducido
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}