/* ============================================================
   Demo Clínica Dental · Sistema clínico
   Colores tomados del logo (turquesa #10B1B9)
   ============================================================ */

:root {
    --bv-turquesa: #10b1b9;        /* color exacto del logo */
    --bv-turquesa-600: #0b8f96;    /* botones y enlaces (contraste AA sobre blanco) */
    --bv-turquesa-700: #08757b;
    --bv-turquesa-900: #0a4c52;    /* barra lateral */
    --bv-turquesa-950: #073a3f;
    --bv-turquesa-50: #e9f8f9;
    --bv-turquesa-100: #cfeff1;
    --bv-fondo: #f3f7f8;
    --bv-borde: #e2eaec;
    --bv-texto: #1d3236;
    --bv-texto-suave: #63797d;
    --bv-ancho-menu: 256px;

    --bs-primary: var(--bv-turquesa-600);
    --bs-primary-rgb: 11, 143, 150;
    --bs-body-font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-color: var(--bv-texto);
    --bs-link-color: var(--bv-turquesa-700);
    --bs-link-color-rgb: 8, 117, 123;
    --bs-link-hover-color: var(--bv-turquesa-900);
    --bs-link-hover-color-rgb: 10, 76, 82;
    --bs-border-color: var(--bv-borde);
    --bs-border-radius: .6rem;
    --bs-secondary-color: var(--bv-texto-suave);
}

body {
    background-color: var(--bv-fondo);
    font-size: .95rem;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--bv-texto);
}

.text-suave { color: var(--bv-texto-suave) !important; }
.text-marca { color: var(--bv-turquesa-700) !important; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Botones ---------- */
.btn { font-weight: 700; border-radius: .6rem; }
.btn-primary {
    --bs-btn-bg: var(--bv-turquesa-600);
    --bs-btn-border-color: var(--bv-turquesa-600);
    --bs-btn-hover-bg: var(--bv-turquesa-700);
    --bs-btn-hover-border-color: var(--bv-turquesa-700);
    --bs-btn-active-bg: var(--bv-turquesa-900);
    --bs-btn-active-border-color: var(--bv-turquesa-900);
    --bs-btn-disabled-bg: var(--bv-turquesa-600);
    --bs-btn-disabled-border-color: var(--bv-turquesa-600);
    --bs-btn-focus-shadow-rgb: 16, 177, 185;
}
.btn-outline-primary {
    --bs-btn-color: var(--bv-turquesa-700);
    --bs-btn-border-color: var(--bv-turquesa-100);
    --bs-btn-hover-bg: var(--bv-turquesa-50);
    --bs-btn-hover-color: var(--bv-turquesa-900);
    --bs-btn-hover-border-color: var(--bv-turquesa);
    --bs-btn-active-bg: var(--bv-turquesa-100);
    --bs-btn-active-color: var(--bv-turquesa-900);
    --bs-btn-active-border-color: var(--bv-turquesa);
    --bs-btn-focus-shadow-rgb: 16, 177, 185;
    background: #fff;
}
.btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: var(--bv-borde); --bs-btn-hover-bg: var(--bv-fondo); --bs-btn-hover-border-color: var(--bv-borde); }

/* ---------- Formularios ---------- */
.form-label { font-weight: 700; font-size: .85rem; margin-bottom: .3rem; }
.form-control, .form-select { border-color: #d5e0e3; border-radius: .55rem; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--bv-turquesa);
    box-shadow: 0 0 0 .2rem rgba(16, 177, 185, .2);
}
.form-check-input:checked { background-color: var(--bv-turquesa-600); border-color: var(--bv-turquesa-600); }
.requerido::after { content: " *"; color: #c0392b; }

/* ---------- Estructura ---------- */
.menu-lateral {
    --bs-offcanvas-width: var(--bv-ancho-menu);
    width: var(--bv-ancho-menu);
    background: var(--bv-turquesa-900);
    color: #fff;
}
@media (min-width: 992px) {
    .menu-lateral {
        /* Bootstrap vuelve transparente el offcanvas-lg en escritorio */
        background-color: var(--bv-turquesa-900) !important;
        position: fixed;
        inset: 0 auto 0 0;
        display: flex;
        flex-direction: column;
        z-index: 1030;
    }
    .contenido { margin-left: var(--bv-ancho-menu); }
}
.menu-lateral .offcanvas-body { padding: 0; display: flex; flex-direction: column; height: 100%; overflow-y: auto; }

.menu-marca {
    background: var(--bv-turquesa);
    padding: 1.5rem 1.5rem 1.25rem;
    display: block;
    text-align: center;
}
.menu-marca img { width: 100%; max-width: 168px; height: auto; }

.menu-seccion {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    padding: 1.25rem 1.5rem .4rem;
}
.menu-lateral .nav-link {
    color: rgba(255, 255, 255, .82);
    font-weight: 700;
    padding: .6rem 1rem;
    margin: .1rem .75rem;
    border-radius: .55rem;
    display: flex;
    align-items: center;
    gap: .75rem;
}
.menu-lateral .nav-link i { font-size: 1.1rem; opacity: .9; }
.menu-lateral .nav-link:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.menu-lateral .nav-link.active { background: #fff; color: var(--bv-turquesa-900); }
.menu-lateral .nav-link.active i { color: var(--bv-turquesa-600); opacity: 1; }
.menu-lateral .nav-link.proximo { color: rgba(255, 255, 255, .42); cursor: default; }
.menu-lateral .nav-link.proximo:hover { background: none; }
.menu-lateral .nav-link .etiqueta {
    margin-left: auto;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .12);
    padding: .1rem .4rem;
    border-radius: .3rem;
}
.menu-pie { margin-top: auto; padding: 1rem 1.5rem; font-size: .75rem; color: rgba(255, 255, 255, .45); }

.barra-superior {
    background: #fff;
    border-bottom: 1px solid var(--bv-borde);
    padding: .65rem 1.5rem;
    position: sticky;
    top: 0;
    z-index: 1020;
}
.buscador-rapido { max-width: 420px; position: relative; }
.buscador-rapido i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--bv-texto-suave); }
.buscador-rapido .form-control { padding-left: 2.4rem; background: var(--bv-fondo); border-color: transparent; }
.buscador-rapido .form-control:focus { background: #fff; }

.area { padding: 1.75rem 1.5rem 3rem; max-width: 1280px; }
@media (max-width: 575.98px) {
    .barra-superior { padding: .6rem 1rem; }
    .area { padding: 1.25rem 1rem 2.5rem; }
}

.encabezado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.5rem; }
.encabezado h1 { font-size: 1.6rem; margin: 0; }
.encabezado p { margin: .15rem 0 0; color: var(--bv-texto-suave); }

/* ---------- Avatar ---------- */
.avatar {
    width: 2.25rem; height: 2.25rem; flex: 0 0 auto;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .8rem;
    background: var(--bv-turquesa-50); color: var(--bv-turquesa-700);
}
.avatar-lg { width: 4rem; height: 4rem; font-size: 1.35rem; }
.avatar-blanco { background: rgba(255, 255, 255, .22); color: #fff; }

/* ---------- Tarjetas ---------- */
.card { border: 1px solid var(--bv-borde); border-radius: .85rem; box-shadow: 0 1px 2px rgba(10, 76, 82, .04); }
.card-header { background: #fff; border-bottom: 1px solid var(--bv-borde); padding: .9rem 1.25rem; font-weight: 800; border-radius: .85rem .85rem 0 0 !important; }
.card-header i { color: var(--bv-turquesa-600); margin-right: .4rem; }
.card-body { padding: 1.25rem; }

.indicador { display: flex; align-items: center; gap: 1rem; }
.indicador .icono {
    width: 3rem; height: 3rem; border-radius: .8rem; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem; background: var(--bv-turquesa-50); color: var(--bv-turquesa-600);
}
.indicador .valor { font-size: 1.75rem; font-weight: 800; line-height: 1; }
.indicador .nombre { color: var(--bv-texto-suave); font-size: .85rem; margin-top: .25rem; }

.bienvenida {
    background: var(--bv-turquesa);
    color: #fff;
    border: 0;
    border-radius: 1rem;
    padding: 1.75rem;
    position: relative;
    overflow: hidden;
}
.bienvenida h1 { color: #fff; font-size: 1.6rem; margin-bottom: .25rem; }
.bienvenida p { margin: 0; opacity: .95; }
.bienvenida::after {
    /* la sonrisa del logo, como marca de agua */
    content: "";
    position: absolute; right: -30px; bottom: -150px;
    width: 300px; height: 300px;
    border: 44px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
}
.bienvenida > * { position: relative; z-index: 1; }
.bienvenida .btn-light { --bs-btn-color: var(--bv-turquesa-900); border: 0; }

/* ---------- Tablas ---------- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--bv-texto); margin: 0; }
.table > thead th {
    font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--bv-texto-suave); background: #f8fbfb;
    border-bottom: 1px solid var(--bv-borde); padding: .7rem 1.25rem; white-space: nowrap;
}
.table > tbody td { padding: .8rem 1.25rem; vertical-align: middle; border-color: var(--bv-borde); }
.table > tbody tr:last-child td { border-bottom: 0; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--bv-turquesa-50); }
.fila-enlace { cursor: pointer; }
.fila-inactiva { opacity: .6; }

.estado { font-size: .72rem; font-weight: 800; padding: .25rem .55rem; border-radius: 2rem; white-space: nowrap; display: inline-block; }
.estado-activo { background: #dff5e7; color: #17663a; }
.estado-inactivo { background: #eceff0; color: #5b6b6e; }
.estado-pendiente { background: #fff1d6; color: #8a5a00; }
.rol { font-size: .72rem; font-weight: 800; padding: .25rem .55rem; border-radius: .4rem; white-space: nowrap; background: var(--bv-turquesa-50); color: var(--bv-turquesa-700); }
.rol-admin { background: var(--bv-turquesa-900); color: #fff; }

.vacio { text-align: center; padding: 3rem 1.5rem; color: var(--bv-texto-suave); }
.vacio i { font-size: 2.5rem; color: var(--bv-turquesa-100); display: block; margin-bottom: .75rem; }
.vacio h2 { font-size: 1.1rem; }

.pagination { --bs-pagination-color: var(--bv-turquesa-700); --bs-pagination-active-bg: var(--bv-turquesa-600); --bs-pagination-active-border-color: var(--bv-turquesa-600); --bs-pagination-hover-color: var(--bv-turquesa-900); --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(16,177,185,.2); margin: 0; }

/* ---------- Ficha del paciente ---------- */
.ficha-cabecera { background: #fff; border: 1px solid var(--bv-borde); border-radius: .85rem; padding: 1.25rem; }
.ficha-cabecera h1 { font-size: 1.45rem; margin: 0; }
.ficha-datos { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; color: var(--bv-texto-suave); font-size: .9rem; margin-top: .3rem; }
.ficha-datos i { color: var(--bv-turquesa-600); margin-right: .3rem; }

.alerta-clinica {
    background: #fdeceb; border: 1px solid #f3c2bf; color: #8f2219;
    border-radius: .7rem; padding: .7rem 1rem; display: flex; gap: .7rem; align-items: flex-start;
}
.alerta-clinica i { font-size: 1.15rem; margin-top: .05rem; }
.alerta-clinica strong { display: block; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; }
.alerta-clinica.aviso { background: #fff6e2; border-color: #f1dba8; color: #7a5200; }

.nav-ficha { border-bottom: 1px solid var(--bv-borde); gap: .25rem; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
.nav-ficha .nav-link {
    border: 0; border-bottom: 3px solid transparent; border-radius: 0;
    color: var(--bv-texto-suave); font-weight: 700; padding: .7rem 1rem; white-space: nowrap;
}
.nav-ficha .nav-link:hover { color: var(--bv-turquesa-700); }
.nav-ficha .nav-link.active { color: var(--bv-turquesa-700); border-bottom-color: var(--bv-turquesa); background: none; }
.nav-ficha .nav-link.disabled { color: #a9b8bb; }

.dato dt { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bv-texto-suave); margin-bottom: .1rem; }
.dato dd { margin: 0 0 1rem; font-weight: 600; overflow-wrap: anywhere; white-space: pre-line; }
.dato dd.sin-dato { color: #a9b8bb; font-weight: 400; }

.seccion-form { font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--bv-turquesa-700); margin: 0 0 1rem; display: flex; align-items: center; gap: .6rem; }
.seccion-form::after { content: ""; flex: 1; height: 1px; background: var(--bv-borde); }

.clave-temporal {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.25rem; font-weight: 700; letter-spacing: .08em;
    background: #fff; border: 1px dashed var(--bv-turquesa); border-radius: .5rem;
    padding: .35rem .8rem; display: inline-block; user-select: all;
}

/* ---------- Acceso (login) ---------- */
.acceso { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: #fff; }
.acceso-marca {
    background: var(--bv-turquesa);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 3rem; position: relative; overflow: hidden; color: #fff; text-align: center;
}
.acceso-marca img { width: min(380px, 78%); height: auto; position: relative; z-index: 1; }
.acceso-marca p { position: relative; z-index: 1; margin: 2rem 0 0; font-weight: 700; opacity: .95; max-width: 26rem; }
.acceso-marca::before, .acceso-marca::after {
    content: ""; position: absolute; border-radius: 50%; border: 70px solid rgba(255, 255, 255, .1);
}
.acceso-marca::before { width: 520px; height: 520px; left: -220px; top: -260px; }
.acceso-marca::after { width: 620px; height: 620px; right: -280px; bottom: -340px; }
.acceso-form { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; }
.acceso-caja { width: 100%; max-width: 380px; }
.acceso-caja h1 { font-size: 1.7rem; }
.acceso-logo-movil { display: none; }
@media (max-width: 899.98px) {
    .acceso { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .acceso-marca { padding: 2rem 1.5rem; }
    .acceso-marca img { width: 190px; }
    .acceso-marca p { display: none; }
    .acceso-form { align-items: flex-start; }
}
.codigo-error { font-size: 4rem; font-weight: 800; color: var(--bv-turquesa); line-height: 1; }

@media print {
    .menu-lateral, .barra-superior, .no-imprimir { display: none !important; }
    .contenido { margin: 0 !important; }
    body { background: #fff; }
}

/* En pantallas angostas la tabla se desplaza: la primera columna no debe apretarse */
.table > tbody td:first-child { min-width: 13rem; }
.table > tbody td.text-nowrap:first-child, .table > tbody td.num:first-child { min-width: 0; }

/* ============================================================
   Fase 2 · Atenciones y archivos
   ============================================================ */
.contador {
    display: inline-block; min-width: 1.35rem; padding: 0 .35rem; margin-left: .25rem;
    font-size: .7rem; font-weight: 800; line-height: 1.35rem; text-align: center;
    border-radius: 1rem; background: var(--bv-turquesa-50); color: var(--bv-turquesa-700);
}
.btn.active .contador { background: rgba(255, 255, 255, .7); }
.etiqueta-campo { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bv-texto-suave); }
.texto-corto { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }

/* ---------- Línea de tiempo de atenciones ---------- */
.linea-tiempo { position: relative; padding-left: 1.6rem; }
.linea-tiempo::before { content: ""; position: absolute; left: .4rem; top: .5rem; bottom: .5rem; width: 2px; background: var(--bv-turquesa-100); }
.linea-tiempo:empty { display: none; }
.atencion {
    position: relative; background: #fff; border: 1px solid var(--bv-borde); border-radius: .85rem;
    margin-bottom: 1rem; scroll-margin-top: 5rem;
}
.atencion::before {
    content: ""; position: absolute; left: -1.6rem; top: 1.15rem; width: .9rem; height: .9rem; margin-left: -.02rem;
    border-radius: 50%; background: var(--bv-turquesa); border: 3px solid var(--bv-fondo);
}
.atencion-borrador { border-style: dashed; border-color: #e3c98c; background: #fffdf7; }
.atencion-borrador::before { background: #e0a526; }
.atencion:target { box-shadow: 0 0 0 3px rgba(16, 177, 185, .25); }
.atencion-encabezado {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
    padding: .85rem 1.25rem; border-bottom: 1px solid var(--bv-borde);
}
.atencion-fecha { font-size: 1.05rem; font-weight: 800; margin-right: .35rem; }
.atencion-cuerpo { padding: 1.1rem 1.25rem .35rem; }
.atencion-motivo { font-weight: 700; font-size: 1.02rem; margin-bottom: .9rem; }
.atencion-cuerpo .dato dd { font-weight: 400; }
.atencion-pie {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    padding: .7rem 1.25rem; border-top: 1px solid var(--bv-borde); background: #fafcfc; border-radius: 0 0 .85rem .85rem;
}
.atencion-borrador .atencion-pie { background: #fff8e8; }
.pieza {
    display: inline-block; font-weight: 800; font-size: .8rem; padding: .15rem .5rem; margin: 0 .2rem .2rem 0;
    border-radius: .4rem; background: var(--bv-turquesa-50); color: var(--bv-turquesa-700); border: 1px solid var(--bv-turquesa-100);
}
.notas { margin: 0 0 1rem; }
.nota { background: #f6f8f9; border-left: 3px solid var(--bv-turquesa); border-radius: 0 .5rem .5rem 0; padding: .6rem .9rem; margin-top: .5rem; overflow-wrap: anywhere; }
.nota-meta { font-size: .75rem; font-weight: 700; color: var(--bv-texto-suave); margin-bottom: .2rem; }

/* ---------- Archivos ---------- */
.filtros-archivos { display: flex; flex-wrap: wrap; gap: .4rem; }
.filtros-archivos .btn { border-radius: 2rem; }
.filtros-archivos .btn.active { background: var(--bv-turquesa-600); border-color: var(--bv-turquesa-600); color: #fff; }
.grilla-archivos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
.archivo { background: #fff; border: 1px solid var(--bv-borde); border-radius: .85rem; overflow: hidden; display: flex; flex-direction: column; }
.archivo[hidden] { display: none; }
.archivo-vista { display: block; aspect-ratio: 4 / 3; background: #0f1b1d; overflow: hidden; }
.archivo-vista img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.archivo-vista:hover img { transform: scale(1.04); }
.archivo-documento {
    background: var(--bv-turquesa-50); color: var(--bv-turquesa-700); text-decoration: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; font-weight: 800; letter-spacing: .08em;
}
.archivo-documento i { font-size: 2.6rem; }
.archivo-documento:hover { background: var(--bv-turquesa-100); color: var(--bv-turquesa-900); }
.archivo-info { padding: .75rem .9rem .6rem; display: flex; flex-direction: column; flex: 1; }
.archivo-titulo { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.archivo-acciones { display: flex; align-items: center; gap: .25rem; margin-top: auto; padding-top: .6rem; }
.lista-archivos li { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--bv-borde); min-width: 0; }
.lista-archivos li:last-child { border-bottom: 0; padding-bottom: 0; }
.lista-archivos li:first-child { padding-top: 0; }
.lista-archivos i { color: var(--bv-turquesa-600); }
.lista-archivos a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.visor { background: #0f1b1d; border: 0; }
.visor .modal-header { border-bottom-color: rgba(255, 255, 255, .12); }
.visor .modal-title { color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visor .modal-body { padding: 0; text-align: center; }
.visor img { max-width: 100%; max-height: 80vh; }

@media (prefers-reduced-motion: reduce) { .archivo-vista img { transition: none; } }
@media (max-width: 575.98px) {
    .linea-tiempo { padding-left: 1.2rem; }
    .atencion::before { left: -1.2rem; }
    .linea-tiempo::before { left: .2rem; }
    .grilla-archivos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
}

/* ============================================================
   Fase 3 · Recetas y presupuestos
   ============================================================ */
.estado-info { background: #dcecfb; color: #154a7d; }
.estado-anulado { background: #fbe2df; color: #8f2219; }

/* ---------- Tarjeta de documento (receta) ---------- */
.documento { background: #fff; border: 1px solid var(--bv-borde); border-radius: .85rem; margin-bottom: 1rem; scroll-margin-top: 5rem; }
.documento-encabezado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .85rem 1.25rem; border-bottom: 1px solid var(--bv-borde); }
.documento-numero { font-size: 1.05rem; font-weight: 800; }
.documento-cuerpo { padding: 1rem 1.25rem; }
.documento-anulado { background: #fcfcfc; }
.documento-anulado .lista-medicamentos, .documento-anulado .documento-numero { text-decoration: line-through; color: var(--bv-texto-suave); }
.lista-medicamentos { margin: 0; padding-left: 1.3rem; }
.lista-medicamentos li { padding: .25rem 0; }
.lista-medicamentos li::marker { font-weight: 800; color: var(--bv-turquesa-700); }

/* ---------- Filas dinámicas (medicamentos, prestaciones) ---------- */
.fila-item { display: flex; align-items: flex-start; gap: .5rem; padding: .5rem 0; border-bottom: 1px dashed var(--bv-borde); }
.fila-cabecera { display: flex; gap: .5rem; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bv-texto-suave); padding-bottom: .35rem; border-bottom: 1px solid var(--bv-borde); }
.fila-numero { width: 1.6rem; flex: 0 0 auto; font-weight: 800; color: var(--bv-turquesa-700); padding-top: .45rem; text-align: right; }
.btn-quitar { flex: 0 0 2.4rem; width: 2.4rem; padding-left: 0; padding-right: 0; color: var(--bv-texto-suave); }
.btn-quitar:hover { color: #c0392b; }
.fila-total { font-weight: 800; text-align: right; padding-top: .45rem; white-space: nowrap; }
@media (max-width: 991.98px) {
    .fila-item { padding: .9rem 0; }
    .fila-total { text-align: left; padding-top: 0; }
    .fila-total::before { content: "Total: "; font-weight: 400; color: var(--bv-texto-suave); }
}

.caja-totales { background: var(--bv-turquesa-50); border-radius: .7rem; padding: 1rem 1.15rem; }
.caja-totales .total { font-size: 1.35rem; font-weight: 800; color: var(--bv-turquesa-900); border-top: 1px solid var(--bv-turquesa-100); margin-top: .6rem; padding-top: .6rem; }
.totales { display: grid; grid-template-columns: auto auto; gap: .3rem 2rem; width: max-content; max-width: 100%; }
.totales dt { font-weight: 400; color: var(--bv-texto-suave); }
.totales dd { margin: 0; text-align: right; font-weight: 700; }
.totales .total { font-size: 1.3rem; font-weight: 800; color: var(--bv-turquesa-900); padding-top: .4rem; border-top: 1px solid var(--bv-borde); }

/* ============================================================
   Fase 4 · Odontograma, agenda y pagos
   ============================================================ */
.leyenda { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; padding: 0; margin: 1rem 0 0; font-size: .82rem; color: var(--bv-texto-suave); }
.leyenda li { display: flex; align-items: center; }
.muestra { display: inline-block; width: .95rem; height: .95rem; border-radius: .2rem; margin-right: .4rem; border: 1px solid rgba(0, 0, 0, .12); flex: 0 0 auto; }
.cifra { font-size: 1.6rem; font-weight: 800; line-height: 1.2; }

/* ---------- Odontograma ---------- */
:root {
    --od-caries: #d9382b;
    --od-restauracion: #2f6fbd;
    --od-sellante: #2e9e5b;
    --od-fractura: #e08a1e;
    --od-corona: #c8961e;
    --od-endodoncia: #7a3fb0;
}
.odontograma-lienzo { overflow-x: auto; padding-bottom: .25rem; }
.odontograma-svg { display: block; margin: 0 auto; max-width: none; height: auto; overflow: visible; }
.odontograma-lados { display: flex; justify-content: space-between; min-width: 748px; max-width: 760px; margin: 0 auto .25rem; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #a9b8bb; }
.linea-media { stroke: var(--bv-turquesa-100); stroke-width: 1.5; stroke-dasharray: 4 4; }
.diente { outline: none; }
.diente-numero { font-size: 11px; font-weight: 800; fill: var(--bv-texto-suave); font-family: inherit; }
.cara { fill: #fff; stroke: #7b9296; stroke-width: 1; }
.cara[data-valor="caries"] { fill: var(--od-caries); }
.cara[data-valor="restauracion"] { fill: var(--od-restauracion); }
.cara[data-valor="sellante"] { fill: var(--od-sellante); }
.cara[data-valor="fractura"] { fill: var(--od-fractura); }
.marca { display: none; pointer-events: none; fill: none; }
.marca-x { stroke: #7f8f92; stroke-width: 3.5; stroke-linecap: round; }
.marca-corona { stroke: var(--od-corona); stroke-width: 3.5; }
.marca-endodoncia { stroke: var(--od-endodoncia); stroke-width: 4.5; stroke-linecap: round; }
.marca-implante { fill: var(--bv-texto); font-size: 10px; font-weight: 800; font-family: inherit; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.marca-nota { fill: var(--bv-turquesa); stroke: #fff; stroke-width: 1.5; }
.diente[data-estado="ausente"] .marca-x,
.diente[data-estado="extraccion"] .marca-x { display: block; }
.diente[data-estado="extraccion"] .marca-x { stroke: var(--od-caries); }
.diente[data-estado="ausente"] .cara { fill: #eef1f2; stroke: #c3cfd2; }
.diente[data-estado="corona"] .marca-corona { display: block; }
.diente[data-estado="endodoncia"] .marca-endodoncia { display: block; }
.diente[data-estado="implante"] .marca-implante { display: block; }
.diente[data-estado="implante"] .cara { fill: #e3e8ea; }
.diente[data-estado="sin_erupcionar"] .cara { fill: #fafbfb; stroke: #b7c4c7; stroke-dasharray: 3 2; }
.diente[data-estado="sin_erupcionar"] .diente-numero { fill: #b7c4c7; }
.diente:not([data-nota=""]) .marca-nota { display: block; }
.diente.modificado .diente-numero { fill: var(--bv-turquesa-700); text-decoration: underline; }
.diente.elegido .diente-numero { fill: #fff; paint-order: stroke; stroke: var(--bv-turquesa-600); stroke-width: 7px; stroke-linejoin: round; }
.odontograma[data-editable="1"] .cara { cursor: pointer; }
.odontograma[data-editable="1"] .diente-numero { cursor: pointer; }
.odontograma[data-editable="1"] .cara:hover { stroke: var(--bv-turquesa-900); stroke-width: 2; }
.diente:focus-visible .cara { stroke: var(--bv-turquesa-600); stroke-width: 2; }

.herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.herramientas-grupo { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--bv-texto-suave); margin-right: .25rem; }
.herramienta { border: 1px solid var(--bv-borde); background: #fff; color: var(--bv-texto); display: inline-flex; align-items: center; border-radius: 2rem; padding: .25rem .7rem; }
.herramienta:hover { border-color: var(--bv-turquesa); background: var(--bv-turquesa-50); }
.herramienta.active { background: var(--bv-turquesa-900); border-color: var(--bv-turquesa-900); color: #fff; }
.muestra-caries { background: var(--od-caries); }
.muestra-restauracion { background: var(--od-restauracion); }
.muestra-sellante { background: var(--od-sellante); }
.muestra-fractura { background: var(--od-fractura); }
.muestra-corona { background: #fff; border: 3px solid var(--od-corona); border-radius: 50%; }
.muestra-endo { background: var(--od-endodoncia); width: .3rem; border: 0; margin-left: .3rem; margin-right: .7rem; }
.muestra-nota { background: var(--bv-turquesa); border-radius: 50%; width: .7rem; height: .7rem; }
.muestra-x-gris, .muestra-x-roja { border: 0; position: relative; background: none; }
.muestra-x-gris::before, .muestra-x-roja::before { content: "✕"; position: absolute; inset: -.2rem 0 0; font-weight: 800; font-size: .95rem; line-height: 1.2; text-align: center; color: #7f8f92; }
.muestra-x-roja::before { color: var(--od-caries); }

/* ---------- Agenda ---------- */
.agenda-tarjeta { overflow-x: auto; }
.agenda { display: grid; grid-template-columns: 3.4rem repeat(var(--columnas), minmax(9.5rem, 1fr)); min-width: min-content; }
.agenda-esquina, .agenda-titulo { position: sticky; top: 0; background: #fff; border-bottom: 1px solid var(--bv-borde); z-index: 3; }
.agenda-titulo { padding: .6rem .5rem; text-align: center; border-left: 1px solid var(--bv-borde); line-height: 1.2; }
.agenda-titulo strong { display: block; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-titulo span { font-size: .78rem; color: var(--bv-texto-suave); }
.agenda-titulo.es-hoy strong { color: var(--bv-turquesa-700); }
.agenda-horas { position: relative; }
.agenda-horas span { position: absolute; right: .45rem; transform: translateY(-50%); font-size: .72rem; font-weight: 700; color: var(--bv-texto-suave); font-variant-numeric: tabular-nums; }
.agenda-horas span:first-child { transform: none; }
.agenda-columna {
    position: relative; border-left: 1px solid var(--bv-borde);
    background-image: linear-gradient(to bottom, var(--bv-borde) 1px, transparent 1px);
    background-size: 100% var(--hora);
}
.agenda-columna.es-hoy { background-color: #fbfefe; }
.agenda-bloque { position: absolute; left: 0; right: 0; display: block; border-bottom: 1px dashed #edf2f3; text-decoration: none; }
.agenda-bloque span { display: none; font-size: .72rem; font-weight: 800; color: var(--bv-turquesa-700); padding: .15rem .4rem; }
a.agenda-bloque:hover, a.agenda-bloque:focus-visible { background: var(--bv-turquesa-50); outline: none; }
a.agenda-bloque:hover span, a.agenda-bloque:focus-visible span { display: block; }
.agenda-bloque.pasado { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(99, 121, 125, .05) 6px 12px); }
.agenda-ahora { position: absolute; left: 0; right: 0; height: 2px; background: #d9382b; z-index: 2; pointer-events: none; }
.agenda-ahora::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #d9382b; }
.cita {
    position: absolute; left: 3px; right: 3px; z-index: 1; overflow: hidden;
    border-radius: .45rem; border-left: 4px solid; padding: .2rem .45rem; font-size: .8rem; line-height: 1.25; text-decoration: none;
    display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(10, 76, 82, .12);
}
.cita:hover, .cita:focus-visible { filter: brightness(.96); z-index: 2; outline: none; }
.cita-linea { display: flex; align-items: baseline; gap: .35rem; min-width: 0; white-space: nowrap; }
.cita-hora { font-size: .72rem; font-weight: 800; opacity: .8; flex: 0 0 auto; }
.cita-nombre { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cita-motivo { opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cita-corta { justify-content: center; padding-top: 0; padding-bottom: 0; }
.cita-agendada, .muestra.cita-agendada { background: #e3f1fb; border-color: #3f86c4; color: #143d5e; }
.cita-confirmada, .muestra.cita-confirmada { background: var(--bv-turquesa-100); border-color: var(--bv-turquesa-600); color: var(--bv-turquesa-950); }
.cita-espera, .muestra.cita-espera { background: #fff1d6; border-color: #e0a526; color: #6e4700; }
.cita-atendida, .muestra.cita-atendida { background: #e1f4e7; border-color: #2e9e5b; color: #17502f; }
.estado.cita-agendada, .estado.cita-confirmada, .estado.cita-espera, .estado.cita-atendida { border: 0; }
.estado.cita-ausente, .estado.cita-cancelada { background: #eceff0; color: #5b6b6e; }

.paciente-elegido { display: flex; align-items: center; gap: .75rem; background: var(--bv-turquesa-50); border: 1px solid var(--bv-turquesa-100); border-radius: .7rem; padding: .6rem .8rem; }
.paciente-elegido[hidden] { display: none; }
.lista-resultados { border: 1px solid var(--bv-borde); border-radius: .6rem; margin-top: .35rem; overflow: hidden; }
.lista-resultados:empty { display: none; }
.lista-resultados button { display: flex; align-items: center; gap: .65rem; width: 100%; text-align: left; background: #fff; border: 0; border-bottom: 1px solid var(--bv-borde); padding: .5rem .75rem; }
.lista-resultados button:last-child { border-bottom: 0; }
.lista-resultados button:hover, .lista-resultados button:focus-visible { background: var(--bv-turquesa-50); outline: none; }
.lista-resultados .sin-resultados { padding: .6rem .75rem; color: var(--bv-texto-suave); font-size: .9rem; }

/* ---------- Pagos ---------- */
.tarjeta-saldo { border-color: #f1dba8; background: #fffaf0; }
.tarjeta-total { background: var(--bv-turquesa-50); border-color: var(--bv-turquesa-100); }
.tarjeta-total .cifra { color: var(--bv-turquesa-900); }
.progress { --bs-progress-bar-bg: var(--bv-turquesa-600); --bs-progress-bg: var(--bv-turquesa-50); height: .55rem; }
.medios { display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.medios div { display: flex; flex-direction: column; }
.medios strong { font-size: 1.1rem; }

/* Indicadores del inicio: se reparten parejo sea cual sea la cantidad */
.fila-indicadores > * { flex: 1 1 9.5rem; width: auto; max-width: 100%; }

/* ============================================================
   GestioDent · marca de la plataforma y de cada clínica
   ============================================================ */
.gd-logo { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; letter-spacing: -.01em; line-height: 1; color: inherit; }
.gd-logo svg { width: 1.45em; height: 1.45em; flex-shrink: 0; }
.gd-logo b { font-weight: 800; }
.gd-logo span { font-weight: 600; }
.gd-logo-claro { color: #fff; font-size: 1.6rem; }
.acceso-marca .gd-logo-claro { font-size: 2.6rem; position: relative; z-index: 1; }

.logo-propio {
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border-radius: .8rem; padding: .7rem .9rem;
    max-width: 100%; box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.logo-propio img { max-width: 100%; max-height: 64px; width: auto; height: auto; object-fit: contain; }
.acceso-marca .logo-propio { padding: 1.4rem 1.8rem; border-radius: 1.1rem; position: relative; z-index: 1; }
.acceso-marca .logo-propio img { max-height: 150px; max-width: min(320px, 70vw); }

.marca-texto { display: flex; flex-direction: column; gap: .3rem; color: #fff; text-align: center; line-height: 1.15; }
.marca-texto strong { font-size: 1.25rem; font-weight: 800; }
.marca-texto small { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.acceso-marca .marca-texto { position: relative; z-index: 1; }
.acceso-marca .marca-texto strong { font-size: 2.2rem; }
.acceso-marca .marca-texto small { font-size: .85rem; }

/* Cupos de odontólogos */
.cupos { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.cupos-barra { flex: 1; min-width: 8rem; height: .55rem; border-radius: 1rem; background: var(--bv-turquesa-50); overflow: hidden; }
.cupos-barra i { display: block; height: 100%; background: var(--bv-turquesa-600); border-radius: 1rem; }
.cupos-barra.lleno i { background: #c0392b; }

/* Panel central (superadministrador) */
.zona-central { --bv-turquesa: #2b6cb0; --bv-turquesa-600: #245a94; --bv-turquesa-700: #1d4a7a; --bv-turquesa-900: #142c4c; --bv-turquesa-950: #0d1f36; --bv-turquesa-50: #edf3fa; --bv-turquesa-100: #d5e3f3; --bs-primary-rgb: 36, 90, 148; --bs-link-color-rgb: 29, 74, 122; }
.zona-central .menu-marca { background: var(--bv-turquesa-950); text-align: left; }
.zona-central .menu-marca small { display: block; color: rgba(255, 255, 255, .6); font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-top: .45rem; }
.color-muestra { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: .3rem; vertical-align: -.2rem; border: 1px solid rgba(0, 0, 0, .1); }
.codigo-clinica { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .85em; background: var(--bv-turquesa-50); color: var(--bv-turquesa-900); padding: .1rem .4rem; border-radius: .3rem; }