/*
 * Sistema de diseño compartido para las pantallas administrativas y el
 * portal profesional de consultorios/. Un único lugar para colores,
 * tipografía y componentes (botones, tarjetas, tablas, formularios,
 * badges, alertas, KPIs) para que todas las pantallas se vean como parte
 * de un mismo producto.
 *
 * Convención: las pantallas siguen usando las mismas variables CSS que
 * ya tenían (--azul, --gris-bg, etc. o --primary, --ink, etc.) — acá se
 * definen ambos juegos de nombres apuntando a los mismos valores, así
 * no hace falta tocar el markup de cada archivo para modernizar colores.
 * Cada pantalla puede seguir agregando su propio <style> después de este
 * archivo para lo que sea realmente específico de esa vista.
 */

:root {
    /* Paleta de marca (igual a la del sitio público) */
    --azul: #1b6fa8;
    --azul-dark: #114f7a;
    --azul-soft: #e6f1fb;
    --verde: #4a9d8e;
    --verde-soft: #e0f2ef;
    --exito: #1b7f5a;
    --exito-soft: #e4f4ed;
    --rojo: #b5473c;
    --rojo-soft: #fdecea;
    --ambar: #c96b4a;
    --ambar-soft: #fff4ef;
    --naranja: var(--ambar);
    --naranja-soft: var(--ambar-soft);
    --violeta: #6d5bd0;
    --violeta-soft: #eeecfb;

    /* Neutros */
    --gris-bg: #f4f7fa;
    --gris-borde: #d9e3ec;
    --gris-texto: #637b8e;
    --blanco: #ffffff;
    --negro: #0f2536;

    /* Forma */
    --radio: 10px;
    --radio-sm: 8px;
    --radio-lg: 14px;
    --sombra: 0 1px 2px rgba(15, 37, 54, .04), 0 14px 32px rgba(15, 37, 54, .08);
    --sombra-sm: 0 1px 2px rgba(15, 37, 54, .06), 0 4px 12px rgba(15, 37, 54, .06);
    --anillo-foco: 0 0 0 3px rgba(27, 111, 168, .18);
    --transicion: 160ms cubic-bezier(.4, 0, .2, 1);

    /* Alias en inglés usados por algunas pantallas (portal profesional, horarios y valores) */
    --primary: var(--azul);
    --primary-dark: var(--azul-dark);
    --primary-soft: var(--azul-soft);
    --accent: var(--verde);
    --accent-soft: var(--verde-soft);
    --green: var(--exito);
    --green-soft: var(--exito-soft);
    --red: var(--rojo);
    --red-soft: var(--rojo-soft);
    --warm: var(--ambar);
    --warm-soft: var(--ambar-soft);
    --ink: var(--negro);
    --text: #2c4157;
    --muted: var(--gris-texto);
    --bg: var(--gris-bg);
    --white: var(--blanco);
    --line: var(--gris-borde);
    --radius: var(--radio);
    --shadow: var(--sombra);
}

/* -------------------------------------------------------------- */
/* Base                                                            */
/* -------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif;
    background: var(--gris-bg);
    color: var(--negro);
    font-size: 14px;
    line-height: 1.55;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
    color: var(--negro);
    font-weight: 700;
}

a { color: var(--azul); }

::selection { background: var(--azul-soft); color: var(--azul-dark); }

:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
    border-radius: var(--radio-sm);
}

/* -------------------------------------------------------------- */
/* Contenedores y tarjetas                                         */
/* -------------------------------------------------------------- */

.card {
    background: var(--blanco);
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 22px;
    margin-bottom: 18px;
}

@media (max-width: 760px) {
    .card { padding: 16px; }
}

/* -------------------------------------------------------------- */
/* Botones                                                         */
/* -------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    border: 0;
    border-radius: var(--radio-sm);
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transicion), border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion), filter var(--transicion), opacity var(--transicion);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled,
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--azul); color: #fff; box-shadow: 0 6px 16px rgba(27, 111, 168, .25); }
.btn-primary:hover { background: var(--azul-dark); box-shadow: 0 8px 20px rgba(27, 111, 168, .32); }

.btn-soft { background: var(--azul-soft); color: var(--azul-dark); border: 1px solid #c7ddeb; }
.btn-soft:hover { background: #d9ebf7; }

.btn-light { background: #eef2ff; color: #1f2937; }
.btn-light:hover { background: #e2e8f0; }

.btn-dark { background: var(--negro); color: #fff; }
.btn-dark:hover { background: #17344b; }

.btn-danger { background: var(--rojo); color: #fff; }
.btn-danger:hover { background: #8f2f27; }

.btn-green,
.btn-success { background: var(--exito); color: #fff; }
.btn-green:hover,
.btn-success:hover { filter: brightness(.93); }

.btn-outline { background: var(--azul-soft); color: var(--azul); border: 1px solid #bfdbfe; }
.btn-outline:hover { background: #d9ebf7; }

.btn-secondary { background: #6d5bd0; color: #fff; }
.btn-secondary:hover { filter: brightness(.93); }

.btn-black { background: var(--negro); color: #fff; }
.btn-black:hover { background: #17344b; }

.btn-full { width: 100%; }
.btn-mini { min-height: 32px; padding: 6px 11px; font-size: 12px; border-radius: 7px; }

/* -------------------------------------------------------------- */
/* Formularios                                                     */
/* -------------------------------------------------------------- */

label,
.campo label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--gris-texto);
    margin-bottom: 6px;
}

input,
select,
textarea {
    width: 100%;
    border: 1.5px solid var(--gris-borde);
    border-radius: var(--radio-sm);
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: var(--negro);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}

textarea { min-height: 84px; resize: vertical; }

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: var(--anillo-foco);
}

input:hover,
select:hover { border-color: #c2d3e0; }

/* -------------------------------------------------------------- */
/* Tablas                                                           */
/* -------------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla-wrap, .table-wrap { overflow-x: auto; }

thead th,
table th {
    background: #f7fafc;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--gris-texto);
    padding: 11px 14px;
    border-bottom: 2px solid var(--gris-borde);
    text-align: left;
    white-space: nowrap;
}

td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--gris-borde);
    vertical-align: middle;
}

tbody tr { transition: background var(--transicion); }
tbody tr:hover td { background: #f8fbff; }

.th-right, .td-right { text-align: right; }
.th-center, .td-center { text-align: center; }

.td-vacio,
.empty,
td.empty {
    text-align: center;
    color: var(--gris-texto);
    font-style: italic;
    padding: 30px;
}

/* -------------------------------------------------------------- */
/* Badges, chips y estados                                         */
/* -------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--azul-soft);
    color: var(--azul-dark);
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 700;
}
.badge-green,
.badge-vigente { background: var(--exito-soft); color: var(--exito); }
.badge-amber,
.badge-warn { background: var(--ambar-soft); color: #9a5138; border: 1px solid #f3cab9; }

.chip {
    display: inline-block;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.period-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 14px;
    border: 1px solid var(--gris-borde);
    background: #fff;
    border-radius: 999px;
    color: var(--negro);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    transition: all var(--transicion);
}
.period-chip:hover { border-color: var(--azul); color: var(--azul-dark); }
.period-chip.is-active { background: var(--azul); border-color: var(--azul); color: #fff; }

/* -------------------------------------------------------------- */
/* KPIs                                                             */
/* -------------------------------------------------------------- */

.kpi {
    background: #fbfdff;
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-sm);
    padding: 16px;
}
.kpi-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 700;
    color: var(--gris-texto);
    margin-bottom: 8px;
}
.kpi-valor,
.kpi-value {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--negro);
}
.kpi-red,
.kpi-rojo { background: var(--rojo-soft); border-color: #f1c2bd; }
.kpi-red .kpi-value, .kpi-red .kpi-valor,
.kpi-rojo .kpi-value, .kpi-rojo .kpi-valor { color: #8f2f27; }
.kpi-green,
.kpi-verde { background: var(--exito-soft); border-color: #b6dfcb; }
.kpi-green .kpi-value, .kpi-green .kpi-valor,
.kpi-verde .kpi-value, .kpi-verde .kpi-valor { color: #1b6643; }
.kpi-blue,
.kpi-azul { background: var(--azul-soft); border-color: #c7ddeb; }
.kpi-blue .kpi-value, .kpi-blue .kpi-valor,
.kpi-azul .kpi-value, .kpi-azul .kpi-valor { color: var(--azul-dark); }
.kpi-amber,
.kpi-naranja,
.kpi-caja { background: var(--ambar-soft); border-color: #f3cab9; }
.kpi-amber .kpi-value, .kpi-amber .kpi-valor,
.kpi-naranja .kpi-value, .kpi-naranja .kpi-valor,
.kpi-caja .kpi-value, .kpi-caja .kpi-valor { color: #9a5138; }
.kpi-violeta { background: var(--violeta-soft); border-color: #d8d3f5; }
.kpi-violeta .kpi-value, .kpi-violeta .kpi-valor { color: var(--violeta); }

/* -------------------------------------------------------------- */
/* Alertas y mensajes (cubre los distintos nombres usados por pantalla) */
/* -------------------------------------------------------------- */

.alert,
.alerta,
.mensaje {
    border-radius: var(--radio-sm);
    padding: 13px 16px;
    margin-bottom: 16px;
    font-weight: 700;
    border: 1px solid transparent;
}
.alert-error, .alerta-error, .mensaje-error, .err, .error,
.alert.err {
    background: var(--rojo-soft);
    border-color: #f1c2bd;
    color: #8f2f27;
}
.alert-ok, .alerta-ok, .mensaje-ok, .ok,
.alert.ok {
    background: var(--exito-soft);
    border-color: #b6dfcb;
    color: #1b6643;
}
.alert-info, .alerta-info, .info,
.alert.info {
    background: var(--azul-soft);
    border-color: #c7ddeb;
    color: var(--azul-dark);
}

/* -------------------------------------------------------------- */
/* Encabezados de sección                                           */
/* -------------------------------------------------------------- */

.seccion-titulo,
.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--gris-borde);
    color: var(--azul);
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
}

/* -------------------------------------------------------------- */
/* Utilidades                                                       */
/* -------------------------------------------------------------- */

.muted { color: var(--gris-texto); }

@media (max-width: 760px) {
    .acciones { flex-direction: column; }
    .acciones .btn { width: 100%; }
}

/* -------------------------------------------------------------- */
/* Layout de página (contenedor + hero + encabezado simple)         */
/* -------------------------------------------------------------- */

.wrap {
    max-width: 1420px;
    margin: 0 auto;
    padding: 24px 20px 42px;
}
@media (max-width: 640px) {
    .wrap { padding: 16px 14px 28px; }
}

.hero {
    background: linear-gradient(135deg, #0f2536 0%, var(--azul) 58%, var(--verde) 100%);
    color: #fff;
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 28px 30px;
    margin-bottom: 22px;
}
.hero-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;
}
.hero h1,
.hero-title {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 27px;
    line-height: 1.15;
    margin: 0 0 8px;
    color: #fff;
}
.hero p,
.hero-sub {
    max-width: 760px;
    color: rgba(255, 255, 255, .88);
    margin: 0;
    font-size: 13.5px;
}
.hero-box {
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--radio);
    padding: 16px 18px;
    min-width: 240px;
}
.hero-box label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .7px;
    font-weight: 700;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, .84);
}
.hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.hero .btn-primary { background: #fff; color: var(--azul-dark); }
.hero .btn-primary:hover { background: #eff6ff; }
.hero .btn-soft { background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .3); }
.hero .btn-soft:hover { background: rgba(255, 255, 255, .26); }
.hero .badge { background: rgba(255, 255, 255, .16); color: #fff; }
@media (max-width: 640px) {
    .hero { padding: 20px; }
    .hero h1, .hero-title { font-size: 22px; }
    .hero-box { min-width: 0; width: 100%; }
}

/* Encabezado simple de página (para pantallas de administración liviana,
   sin hero, ej. dentro de un card superior). */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--gris-borde);
    margin-bottom: 20px;
}
.page-header-title { font-family: 'Montserrat', Arial, sans-serif; font-size: 24px; font-weight: 800; color: var(--negro); }
.page-header-sub { color: var(--gris-texto); font-size: 13px; margin-top: 4px; max-width: 900px; }

/* -------------------------------------------------------------- */
/* Grillas reutilizables (KPIs, filtros, columnas)                  */
/* -------------------------------------------------------------- */

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.filtros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    align-items: end;
}
.campo { margin-bottom: 0; }
.form-stack .campo,
form:not(.filtros) .campo { margin-bottom: 14px; }
.filtros .campo { margin-bottom: 0; }

.subgrid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 20px;
}
@media (max-width: 1100px) {
    .subgrid { grid-template-columns: 1fr; }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .kpi-grid { grid-template-columns: 1fr; }
}

/* Barra de filtros compacta en una sola fila (alternativa liviana a .filtros
   para toolbars de búsqueda simples: fecha/select/texto + botón). */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.toolbar .campo { margin-bottom: 0; display: flex; flex-direction: column; gap: 0; }
.toolbar label.sr-only,
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.toolbar input,
.toolbar select {
    width: auto;
    min-height: 36px;
    padding: 7px 12px;
    border-radius: 7px;
    font-size: 12.5px;
}
.toolbar .btn {
    min-height: 36px;
    padding: 8px 16px;
    font-size: 12.5px;
}
.toolbar-icon-field {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1.5px solid var(--gris-borde);
    border-radius: 7px;
    padding: 0 10px;
    background: #fff;
    min-height: 36px;
}
.toolbar-icon-field i { font-size: 14px; color: #8794a1; }
.toolbar-icon-field input,
.toolbar-icon-field select {
    border: 0;
    padding: 7px 0;
    min-height: 34px;
}
.toolbar-icon-field:focus-within { border-color: var(--azul); box-shadow: var(--anillo-foco); }
.toolbar-spacer { flex: 1; }
@media (max-width: 640px) {
    .toolbar { flex-direction: column; align-items: stretch; }
    .toolbar .btn, .toolbar-icon-field, .toolbar select, .toolbar input { width: 100%; }
}

/* -------------------------------------------------------------- */
/* KPIs "quiet" — tarjeta blanca con ícono de acento en vez de     */
/* fondo pastel completo. Usar como default; reservar las         */
/* variantes de color (.kpi-red/.kpi-green/...) para 1-2 tarjetas */
/* realmente semánticas (saldo negativo, alerta) por sección.      */
/* -------------------------------------------------------------- */

.kpi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    margin-bottom: 8px;
}
.kpi-icon.c-azul { color: var(--azul); }
.kpi-icon.c-verde { color: var(--exito); }
.kpi-icon.c-rojo { color: var(--rojo); }
.kpi-icon.c-ambar { color: var(--ambar); }
.kpi-icon.c-violeta { color: var(--violeta); }

/* -------------------------------------------------------------- */
/* Utilidades de espaciado (evitar style="" sueltos por pantalla)  */
/* -------------------------------------------------------------- */

.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-18 { margin-top: 18px; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }
.mb-18 { margin-bottom: 18px; }

/* -------------------------------------------------------------- */
/* Barra de navegación (renderNavConsultorios, en nav_consultorios.php) */
/* Se centraliza acá porque antes se repetía inline en cada pantalla. */
/* -------------------------------------------------------------- */

.nav-consultorios {
    position: sticky;
    top: 0;
    z-index: 1000;
    margin: 0 0 18px 0;
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-sm);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px);
    box-shadow: var(--sombra);
    overflow: hidden;
}
.nav-consultorios__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    flex-wrap: wrap;
}
.nav-consultorios__brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 140px;
}
.nav-consultorios__title {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: var(--negro);
    line-height: 1.1;
}
.nav-consultorios__links {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.nav-consultorios__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 6px 3px;
    border-radius: 0;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    color: #526676;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    transition: color var(--transicion), border-color var(--transicion);
}
.nav-consultorios__link:hover {
    background: none;
    border-color: #c7ddeb;
    color: var(--azul-dark);
}
.nav-consultorios__link.is-active {
    background: none;
    border-color: var(--azul);
    color: var(--azul-dark);
    box-shadow: none;
    font-weight: 700;
}
.nav-consultorios__link--config {
    font-weight: 600;
    color: var(--gris-texto);
}
.nav-consultorios__link--config:hover {
    background: none;
    border-color: #c7ddeb;
    color: var(--azul-dark);
}
.nav-consultorios__link--config.is-active { color: var(--azul-dark); }
.nav-consultorios__divider {
    width: 1px;
    height: 20px;
    background: var(--gris-borde);
    display: inline-block;
    margin: 0 2px;
    flex: 0 0 auto;
}

/* Menú "Más" (agrupa las pantallas administrativas: profesionales, consultorios, tarifas, usuarios) */
.nav-consultorios__more {
    position: relative;
    display: inline-flex;
}
.nav-consultorios__more-btn {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 34px;
    padding: 6px 3px;
    font-size: 13px;
    font-weight: 600;
    color: #526676;
    border-bottom: 2px solid transparent;
    transition: color var(--transicion), border-color var(--transicion);
}
.nav-consultorios__more-btn::-webkit-details-marker { display: none; }
.nav-consultorios__more-btn::marker { display: none; content: ''; }
.nav-consultorios__more-btn:hover { color: var(--azul-dark); }
.nav-consultorios__more[open] > .nav-consultorios__more-btn { color: var(--azul-dark); }
.nav-consultorios__more.has-active > .nav-consultorios__more-btn {
    color: var(--azul-dark);
    font-weight: 700;
    border-color: var(--azul);
}
.nav-consultorios__more-chevron { font-size: 10px; transition: transform var(--transicion); }
.nav-consultorios__more[open] .nav-consultorios__more-chevron { transform: rotate(180deg); }
.nav-consultorios__more-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    background: #fff;
    border: 1px solid var(--gris-borde);
    border-radius: var(--radio-sm);
    box-shadow: var(--sombra);
    padding: 6px;
    display: none;
    flex-direction: column;
    min-width: 190px;
    z-index: 1200;
}
.nav-consultorios__more[open] > .nav-consultorios__more-menu { display: flex; }
.nav-consultorios__more-link {
    padding: 9px 12px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #2c4157;
    text-decoration: none;
    transition: background var(--transicion), color var(--transicion);
}
.nav-consultorios__more-link:hover { background: var(--azul-soft); color: var(--azul-dark); }
.nav-consultorios__more-link.is-active { background: var(--azul-soft); color: var(--azul-dark); }
@media (max-width: 860px) {
    .nav-consultorios__more-menu { left: auto; right: 0; }
}
.nav-consultorios__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.nav-consultorios__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 6px 14px;
    border-radius: var(--radio-sm);
    font-size: 13px;
    font-weight: 800;
    color: #9a5138;
    background: var(--ambar-soft);
    border: 1px solid #f3cab9;
}
.nav-consultorios__badge::before {
    content: '📅';
    font-size: 14px;
    line-height: 1;
}
.nav-consultorios__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    border-radius: var(--radio-sm);
    font-size: 18px;
    font-weight: 800;
    color: var(--azul-dark);
    background: var(--azul-soft);
    border: 1px solid #c7ddeb;
    cursor: pointer;
    line-height: 1;
    transition: all var(--transicion);
}
.nav-consultorios__btn:hover { background: #d9ebf7; }
.nav-consultorios__btn:disabled { cursor: wait; opacity: .7; }
.nav-consultorios__btn.is-syncing { animation: nav-consultorios-spin .9s linear infinite; }
.nav-consultorios__sr-only {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    white-space: nowrap;
}
.nav-consultorios__sync-status {
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--gris-texto);
    transition: opacity .2s ease;
    opacity: 0;
}
.nav-consultorios__sync-status.is-ok { color: #1b6643; }
.nav-consultorios__sync-status.is-error { color: #8f2f27; }
.nav-consultorios__user {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: var(--radio-sm);
    font-size: 12px;
    font-weight: 800;
    color: #2c4157;
    background: #fbfdff;
    border: 1px solid var(--gris-borde);
}
.nav-consultorios__logout,
.nav-consultorios__public {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 12px;
    border-radius: var(--radio-sm);
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    transition: background var(--transicion);
}
.nav-consultorios__public {
    color: var(--azul-dark);
    background: var(--verde-soft);
    border: 1px solid #b8dfd8;
}
.nav-consultorios__public:hover { background: #d3eee9; }
.nav-consultorios__logout { background: var(--negro); }
.nav-consultorios__logout:hover { background: #17344b; }

@keyframes nav-consultorios-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (max-width: 860px) {
    .nav-consultorios__inner { flex-direction: column; align-items: flex-start; gap: 12px; }
    .nav-consultorios__brand { order: 1; }
    .nav-consultorios__links {
        order: 2;
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }
    .nav-consultorios__actions { order: 3; width: 100%; flex-wrap: wrap; gap: 8px; }
    .nav-consultorios__divider { flex: 0 0 auto; }
}