/* =====================================================================
   MET SALUD - Sistema de gestión para centro de rehabilitación
   Diseño: moderno, limpio y responsive. Modo claro / oscuro.
   ===================================================================== */
:root {
  --brand: #0f766e;
  --brand-600: color-mix(in srgb, var(--brand) 88%, #000);
  --brand-700: color-mix(in srgb, var(--brand) 75%, #000);
  --brand-soft: color-mix(in srgb, var(--brand) 12%, transparent);
  --brand-softer: color-mix(in srgb, var(--brand) 6%, transparent);
  --sidebar-w: 264px;
  --sidebar-mini-w: 76px;
  --topbar-h: 64px;
  --radius: 14px;
  --radius-sm: 10px;
  --page-bg: #f3f6f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --border: #e5e9f0;
  --text: #0f172a;
  --text-2: #475569;
  --muted: #64748b;
  --sidebar-bg: #0b1324;
  --sidebar-text: #aab4c5;
  --sidebar-hover: rgba(255, 255, 255, .06);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 6px 18px rgba(15, 23, 42, .05);
  /* series de gráficos (paleta validada) */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --grid: #e5e7eb;
  --axis-text: #6b7280;
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-bg: var(--page-bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--border);
  --bs-primary: var(--brand);
  --bs-link-color: var(--brand);
  --bs-link-hover-color: var(--brand-700);
  --bs-focus-ring-color: color-mix(in srgb, var(--brand) 25%, transparent);
}

[data-bs-theme="dark"] {
  --page-bg: #070d19;
  --surface: #111827;
  --surface-2: #0f1726;
  --border: #1f2a3c;
  --text: #e5e9f0;
  --text-2: #b6c0cf;
  --muted: #8b97a8;
  --sidebar-bg: #0a1120;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 8px 24px rgba(0, 0, 0, .25);
  --brand-soft: color-mix(in srgb, var(--brand) 22%, transparent);
  --brand-softer: color-mix(in srgb, var(--brand) 12%, transparent);
  --series-1: #3987e5;
  --series-2: #d95926;
  --grid: #1f2937;
  --axis-text: #9ca3af;
  --bs-body-bg: var(--page-bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--border);
  --bs-secondary-bg: #0f1726;
  --bs-tertiary-bg: #131c2d;
}

html, body { height: 100%; }
body { font-size: .9rem; background: var(--page-bg); color: var(--text); -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }
::selection { background: var(--brand-soft); }

/* ----------------------------------------------------------- Botones */
.btn { border-radius: 10px; font-weight: 500; }
.btn-primary {
  --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-600); --bs-btn-hover-border-color: var(--brand-600);
  --bs-btn-active-bg: var(--brand-700); --bs-btn-active-border-color: var(--brand-700);
  --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand);
}
.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-600); --bs-btn-active-border-color: var(--brand-600);
}
.btn-soft { background: var(--brand-soft); color: var(--brand); border: 0; }
.btn-soft:hover, .btn-soft.active { background: var(--brand); color: #fff; }
.btn-light.active { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 600; }
.btn-light { --bs-btn-bg: var(--surface-2); --bs-btn-border-color: var(--border); }
[data-bs-theme="dark"] .btn-light { --bs-btn-color: var(--text); --bs-btn-hover-bg: #1b2538; --bs-btn-hover-color: var(--text); }
.btn-icon {
  width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; font-size: .95rem;
}
.btn-icon.btn-sm { width: 28px; height: 28px; font-size: .85rem; }
.btn-whatsapp { background: #25d366; color: #fff; border: 0; }
.btn-whatsapp:hover { background: #1ebe5b; color: #fff; }
.text-brand { color: var(--brand) !important; }
.bg-brand { background: var(--brand) !important; color: #fff; }
.bg-brand-soft { background: var(--brand-soft) !important; }

/* ----------------------------------------------------------- Layout */
.app { display: flex; min-height: 100vh; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); background: var(--sidebar-bg); color: var(--sidebar-text);
  display: flex; flex-direction: column; z-index: 1040; transition: width .2s ease, transform .25s ease;
}
.sidebar-brand { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.1rem; height: var(--topbar-h); color: #fff; }
.sidebar-brand img { width: 38px; height: 38px; object-fit: contain; border-radius: 10px; background: #fff; padding: 3px; }
.sidebar-brand .brand-text { line-height: 1.1; overflow: hidden; white-space: nowrap; }
.sidebar-brand .brand-text strong { font-size: 1rem; letter-spacing: .3px; display: block; }
.sidebar-brand .brand-text small { color: var(--sidebar-text); font-size: .72rem; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: .25rem .75rem 1rem; scrollbar-width: thin; scrollbar-color: #253047 transparent; }
.nav-section { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #6b778c; margin: 1rem .6rem .35rem; white-space: nowrap; }
.nav-item-link {
  display: flex; align-items: center; gap: .75rem; padding: .55rem .7rem; border-radius: 10px; color: var(--sidebar-text);
  font-weight: 500; white-space: nowrap; margin-bottom: 2px; position: relative;
}
.nav-item-link i { font-size: 1.1rem; width: 1.3rem; text-align: center; flex-shrink: 0; }
.nav-item-link:hover { background: var(--sidebar-hover); color: #fff; }
.nav-item-link.active { background: color-mix(in srgb, var(--brand) 85%, #fff 0%); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 35%, transparent); }
.sidebar-footer { padding: .8rem 1.1rem; font-size: .72rem; color: #6b778c; border-top: 1px solid rgba(255, 255, 255, .06); white-space: nowrap; overflow: hidden; }
.main { flex: 1; margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; transition: margin-left .2s ease; }

body.sidebar-mini .sidebar { width: var(--sidebar-mini-w); }
body.sidebar-mini .main { margin-left: var(--sidebar-mini-w); }
body.sidebar-mini .sidebar .brand-text, body.sidebar-mini .sidebar .nav-section, body.sidebar-mini .nav-item-link span,
body.sidebar-mini .sidebar-footer { display: none; }
body.sidebar-mini .nav-item-link { justify-content: center; }
body.sidebar-mini .sidebar-brand { justify-content: center; padding: 1rem .5rem; }

.topbar {
  position: sticky; top: 0; z-index: 1030; height: var(--topbar-h); display: flex; align-items: center; gap: .75rem;
  padding: 0 1.25rem; background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar .btn-toggle { border: 0; background: transparent; color: var(--text-2); font-size: 1.35rem; padding: .25rem .4rem; border-radius: 8px; }
.topbar .btn-toggle:hover { background: var(--brand-soft); color: var(--brand); }
.global-search { position: relative; flex: 1; max-width: 520px; }
.global-search input { padding-left: 2.3rem; border-radius: 12px; background: var(--surface-2); border-color: var(--border); }
.global-search > i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
.global-search kbd { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); font-size: .68rem; background: var(--surface); color: var(--muted); border: 1px solid var(--border); }
.search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); max-height: 70vh; overflow-y: auto; display: none; z-index: 1050; }
.search-results.show { display: block; }
.search-results .grupo { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: .6rem .9rem .2rem; }
.search-results a { display: flex; gap: .6rem; align-items: center; padding: .5rem .9rem; color: var(--text); }
.search-results a:hover, .search-results a.activo { background: var(--brand-softer); }
.search-results a i { color: var(--brand); }
.topbar-actions { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: inline-flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; flex-shrink: 0; object-fit: cover;
}
.avatar-lg { width: 64px; height: 64px; font-size: 1.3rem; }
.avatar-xl { width: 88px; height: 88px; font-size: 1.6rem; }
.content { padding: 1.4rem 1.5rem 2rem; flex: 1; }
.app-footer { padding: .9rem 1.5rem; color: var(--muted); font-size: .78rem; border-top: 1px solid var(--border); }

.sidebar-backdrop { display: none; }
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); width: var(--sidebar-w) !important; }
  .main { margin-left: 0 !important; }
  body.sidebar-open .sidebar { transform: none; }
  body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(2, 6, 23, .5); z-index: 1035; }
  body.sidebar-mini .sidebar .brand-text, body.sidebar-mini .sidebar .nav-section,
  body.sidebar-mini .nav-item-link span, body.sidebar-mini .sidebar-footer { display: revert; }
  .content { padding: 1rem; }
  .topbar { padding: 0 .75rem; }
}
@media (max-width: 575.98px) {
  .global-search kbd { display: none; }
  .hide-xs { display: none !important; }
}

/* ----------------------------------------------------------- Encabezado de página */
.page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.2rem; }
.page-header h1 { font-size: 1.35rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: .6rem; }
.page-header h1 .icono { width: 40px; height: 40px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.page-header .subtitulo { color: var(--muted); font-size: .85rem; margin-top: .15rem; }
.page-header .acciones { display: flex; flex-wrap: wrap; gap: .5rem; }
.breadcrumb { font-size: .78rem; margin-bottom: .25rem; }
.breadcrumb a { color: var(--muted); }

/* ----------------------------------------------------------- Tarjetas */
.card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.card-header { background: transparent; border-bottom: 1px solid var(--border); padding: .9rem 1.1rem; }
.card-header:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.card-title { font-size: 1rem; font-weight: 600; margin: 0; }
.card-body { padding: 1.1rem; }
.card-footer { background: transparent; border-top: 1px solid var(--border); }
.section-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; margin-bottom: .6rem; }

.kpi { display: flex; gap: .9rem; align-items: center; padding: 1rem 1.1rem; height: 100%; }
.kpi .kpi-icon { width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; background: var(--brand-soft); color: var(--brand); }
.kpi .kpi-label { color: var(--muted); font-size: .78rem; font-weight: 500; }
.kpi .kpi-value { font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
.kpi .kpi-delta { font-size: .75rem; font-weight: 600; }
/* En tarjetas KPI angostas se oculta el ícono para que el valor quepa en una línea */
.kpi { container-type: inline-size; }
.kpi > div { min-width: 0; }
@container (max-width: 219.98px) { .kpi .kpi-icon { display: none; } }
.kpi-icon.azul { background: rgba(42, 120, 214, .12); color: #2a78d6; }
.kpi-icon.verde { background: rgba(22, 163, 74, .12); color: #16a34a; }
.kpi-icon.ambar { background: rgba(217, 119, 6, .12); color: #d97706; }
.kpi-icon.rojo { background: rgba(220, 38, 38, .12); color: #dc2626; }
.kpi-icon.violeta { background: rgba(124, 58, 237, .12); color: #7c3aed; }
.hero-figure { font-size: clamp(1.4rem, 13cqi, 2.6rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; }
.card-body:has(> .hero-figure) { container-type: inline-size; } /* el monto se ajusta al ancho de su tarjeta */

/* ----------------------------------------------------------- Tablas y listas */
.card-list .card-header { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-start; justify-content: space-between; }
.card-list .card-header > .filtros { flex: 1 1 520px; }
.card-list .card-header > :not(.filtros) { flex-shrink: 0; }
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.filtros .form-control, .filtros .form-select { height: 36px; font-size: .85rem; border-radius: 10px; }
.filtros .form-select { max-width: 230px; text-overflow: ellipsis; }
.filtros .buscador { position: relative; flex: 1 1 220px; min-width: 200px; max-width: 360px; }
.filtros .buscador i { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
.filtros .buscador input { padding-left: 2rem; }
/* Rango de fechas en un solo control */
.rango-fechas { display: inline-flex; align-items: center; gap: .35rem; height: 36px; padding: 0 .6rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--muted); font-size: .82rem; }
.rango-fechas input { border: 0; background: transparent; color: var(--text); font-size: .82rem; width: 118px; padding: 0; outline: none; }
.rango-fechas .sep { color: var(--muted); }
.rango-fechas:focus-within { border-color: var(--brand); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand) 18%, transparent); }
[data-bs-theme="dark"] .rango-fechas input { color-scheme: dark; }

.table { --bs-table-bg: transparent; --bs-table-color: var(--text); margin-bottom: 0; }
.table > thead th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600;
  background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; padding: .65rem .65rem;
}
.table > tbody td { padding: .6rem .65rem; border-color: var(--border); vertical-align: middle; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: var(--brand-softer); }
.table .num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table tr.anulado td { opacity: .55; }
.celda-principal { font-weight: 600; color: var(--text); }
.card-body.row { margin-left: 0; margin-right: 0; } /* evita que el .row desborde la tarjeta */
.celda-codigo, td > code, .text-nowrap { white-space: nowrap; }
td > code.codigo-largo { white-space: normal; word-break: break-all; }
.celda-sub { font-size: .76rem; color: var(--muted); }
.celda-sub .badge { font-size: .66rem; }
@media (max-width: 1399.98px) {
  .card-list .table { font-size: .84rem; }
  .card-list .celda-sub { font-size: .72rem; }
}
/* Columnas opcionales según el ancho real de la tabla (no de la ventana): con la barra lateral abierta
   la tabla dispone de ~260 px menos, y al plegarla vuelven a aparecer. Las clases *-solo muestran el
   dato dentro de otra celda solo cuando su columna está oculta. */
.card-list .table-responsive { container-type: inline-size; }
.cq-sm-solo, .cq-md-solo, .cq-lg-solo, .cq-xl-solo, .cq-xxl-solo { display: none; }
@container (max-width: 1259.98px) { .cq-xxl { display: none !important; } .cq-xxl-solo { display: revert; } }
@container (max-width: 1099.98px) { .cq-xl { display: none !important; } .cq-xl-solo { display: revert; } }
@container (max-width: 939.98px) { .cq-lg { display: none !important; } .cq-lg-solo { display: revert; } }
@container (max-width: 759.98px) {
  .cq-md { display: none !important; } .cq-md-solo { display: revert; }
  .table > thead th, .table > tbody td { padding-left: .45rem; padding-right: .45rem; }
  .table > thead th { white-space: normal; }
}
@container (max-width: 699.98px) { .cq-sm { display: none !important; } .cq-sm-solo { display: revert; } }
/* Columna de acciones fija a la derecha cuando la tabla necesita desplazarse (tablets y celulares) */
.card-list .table:has(.acciones-lista) > thead > tr > th:last-child,
.card-list .table > tbody > tr > td:has(> .acciones-lista),
.card-list .table > tbody > tr > td:has(> .d-inline-flex > .acciones-lista) {
  position: sticky; right: 0; z-index: 2;
}
.card-list .table > tbody > tr > td:has(> .acciones-lista),
.card-list .table > tbody > tr > td:has(> .d-inline-flex > .acciones-lista) { background-color: var(--surface); }
.card-list .table > tbody > tr > td:has(> .acciones-lista)::before,
.card-list .table > tbody > tr > td:has(> .d-inline-flex > .acciones-lista)::before,
.card-list .table:has(.acciones-lista) > thead > tr > th:last-child::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -12px; width: 12px; pointer-events: none;
  background: linear-gradient(to left, rgba(15, 23, 42, .08), transparent); opacity: 0; transition: opacity .2s;
}
.table-responsive.con-desborde .table > tbody > tr > td:has(> .acciones-lista)::before,
.table-responsive.con-desborde .table > tbody > tr > td:has(> .d-inline-flex > .acciones-lista)::before,
.table-responsive.con-desborde .table:has(.acciones-lista) > thead > tr > th:last-child::before { opacity: 1; }
.card-list .table tr.anulado td:has(.acciones-lista) { opacity: 1; }
/* Celulares: cada registro se muestra como una tarjeta «etiqueta: valor». app.js marca las tablas con
   acciones por fila (o con .tabla-apilable) y copia el título de cada columna en data-label. */
@container (max-width: 575.98px) {
  .card-list .table.tabla-apilable, .card-list .table.tabla-apilable > tbody { display: block; }
  .card-list .table.tabla-apilable > thead { display: none; }
  .card-list .table.tabla-apilable > tbody > tr { display: block; padding: .7rem .9rem; border-bottom: 1px solid var(--border); }
  .card-list .table.tabla-apilable > tbody > tr:hover { background: var(--brand-softer); }
  .card-list .table.tabla-apilable > tbody > tr > td {
    display: grid; grid-template-columns: minmax(88px, 34%) minmax(0, 1fr); column-gap: .75rem; align-items: baseline; justify-items: start;
    padding: .15rem 0; border: 0; text-align: left; --bs-table-bg-state: transparent;
  }
  .card-list .table.tabla-apilable > tbody > tr > td::before {
    content: attr(data-label); grid-column: 1; grid-row: 1 / span 12;
    font-size: .66rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  }
  .card-list .table.tabla-apilable > tbody > tr > td:first-child,
  .card-list .table.tabla-apilable > tbody > tr > td[colspan] { display: block; padding-bottom: .35rem; }
  .card-list .table.tabla-apilable > tbody > tr > td:empty { display: none; }
  .card-list .table.tabla-apilable > tbody > tr > td:first-child::before,
  .card-list .table.tabla-apilable > tbody > tr > td[colspan]::before { content: none; }
  .card-list .table.tabla-apilable > tbody > tr > td:has(.acciones-lista) { display: block; position: static; padding-top: .5rem; background: transparent; }
  .card-list .table.tabla-apilable > tbody > tr > td:has(.acciones-lista)::before { content: none; }
}
.acciones-lista { display: inline-flex; gap: .3rem; justify-content: flex-end; flex-wrap: nowrap; }
.acciones-lista .btn-icon { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); }
.acciones-lista .btn-icon:hover { color: #fff; }
.acciones-lista .accion-ver:hover { background: #0284c7; border-color: #0284c7; }
.acciones-lista .accion-editar:hover { background: #d97706; border-color: #d97706; }
.acciones-lista .accion-anular:hover { background: #dc2626; border-color: #dc2626; }
.acciones-lista .accion-pdf:hover { background: #b91c1c; border-color: #b91c1c; }
.acciones-lista .accion-extra:hover { background: var(--brand); border-color: var(--brand); }
.acciones-lista .disabled, .acciones-lista :disabled { opacity: .35; pointer-events: none; }
.acciones-lista .wrap-disabled { display: inline-flex; cursor: not-allowed; }
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.empty-state i { font-size: 2.6rem; color: color-mix(in srgb, var(--brand) 45%, var(--muted)); display: block; margin-bottom: .5rem; }
.paginacion { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; padding: .8rem 1.1rem; border-top: 1px solid var(--border); font-size: .82rem; color: var(--muted); }
.pagination { margin: 0; --bs-pagination-active-bg: var(--brand); --bs-pagination-active-border-color: var(--brand); --bs-pagination-color: var(--text-2); --bs-pagination-border-radius: 8px; --bs-pagination-bg: var(--surface); --bs-pagination-border-color: var(--border); }
.dato-lista dt { font-size: .74rem; color: var(--muted); font-weight: 500; }
.dato-lista dd { font-weight: 500; margin-bottom: .7rem; }

/* Badges suaves */
.badge-soft { font-weight: 600; font-size: .72rem; padding: .38em .7em; border: 1px solid transparent; }
.badge-soft.badge-primary { background: rgba(37, 99, 235, .12); color: #1d4ed8; }
.badge-soft.badge-info { background: rgba(8, 145, 178, .12); color: #0e7490; }
.badge-soft.badge-success { background: rgba(22, 163, 74, .12); color: #15803d; }
.badge-soft.badge-warning { background: rgba(217, 119, 6, .14); color: #b45309; }
.badge-soft.badge-danger { background: rgba(220, 38, 38, .12); color: #b91c1c; }
.badge-soft.badge-secondary { background: rgba(100, 116, 139, .14); color: #475569; }
.badge-soft.badge-dark { background: rgba(15, 23, 42, .12); color: #0f172a; }
[data-bs-theme="dark"] .badge-soft.badge-primary { color: #93c5fd; background: rgba(59, 130, 246, .18); }
[data-bs-theme="dark"] .badge-soft.badge-info { color: #67e8f9; background: rgba(6, 182, 212, .16); }
[data-bs-theme="dark"] .badge-soft.badge-success { color: #86efac; background: rgba(34, 197, 94, .16); }
[data-bs-theme="dark"] .badge-soft.badge-warning { color: #fcd34d; background: rgba(245, 158, 11, .16); }
[data-bs-theme="dark"] .badge-soft.badge-danger { color: #fca5a5; background: rgba(239, 68, 68, .16); }
[data-bs-theme="dark"] .badge-soft.badge-secondary { color: #cbd5e1; background: rgba(148, 163, 184, .16); }
[data-bs-theme="dark"] .badge-soft.badge-dark { color: #e2e8f0; background: rgba(226, 232, 240, .1); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* ----------------------------------------------------------- Formularios */
.form-label { font-weight: 500; font-size: .82rem; color: var(--text-2); margin-bottom: .3rem; }
.form-control, .form-select { border-radius: 10px; border-color: var(--border); background-color: var(--surface); color: var(--text); }
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand) 18%, transparent); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand) 18%, transparent); }
.form-control-color { width: 3.2rem; height: 38px; padding: .25rem; }
.required-mark { color: #dc2626; margin-left: 2px; }
.form-section { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: 1rem; }
.form-section > .fs-title { display: flex; align-items: center; gap: .6rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--border); font-weight: 600; }
.form-section > .fs-title i { color: var(--brand); font-size: 1.1rem; }
.form-section > .fs-body { padding: 1.1rem; }
.sticky-actions { position: sticky; bottom: 0; z-index: 5; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(6px); border-top: 1px solid var(--border); padding: .8rem 1.1rem; display: flex; gap: .5rem; justify-content: flex-end; border-radius: 0 0 var(--radius) var(--radius); }
.opciones-radio { display: flex; flex-wrap: wrap; gap: .5rem; }
.opciones-radio .opcion input { display: none; }
.opciones-radio .opcion label {
  display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border: 1px solid var(--border);
  border-radius: 999px; cursor: pointer; font-size: .82rem; background: var(--surface); transition: all .15s;
}
.opciones-radio .opcion input:checked + label { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.checks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .35rem .9rem; }
.checks-grid label { font-size: .84rem; }
.nav-tabs-app { border-bottom: 1px solid var(--border); gap: .25rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.nav-tabs-app .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 500; white-space: nowrap; border-radius: 0; padding: .7rem .9rem; }
.nav-tabs-app .nav-link:hover { color: var(--text); }
.nav-tabs-app .nav-link.active { color: var(--brand); border-bottom-color: var(--brand); background: transparent; }
.nav-tabs-app .nav-link .badge { font-size: .65rem; }
.invalid-feedback { font-size: .78rem; }

/* Tom Select */
.ts-wrapper .ts-control { border-radius: 10px; border-color: var(--border); background: var(--surface); color: var(--text); min-height: 38px; }
.ts-wrapper.focus .ts-control { border-color: var(--brand); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand) 18%, transparent); }
.ts-dropdown { border-radius: 10px; border-color: var(--border); background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.ts-dropdown .active { background: var(--brand-soft); color: var(--text); }
.ts-dropdown .option .sub { font-size: .75rem; color: var(--muted); }
[data-bs-theme="dark"] .ts-control input { color: var(--text); }

/* ----------------------------------------------------------- Editor de documentos */
.doc-items td { vertical-align: middle; }
.doc-items .form-control, .doc-items .form-select { height: 34px; font-size: .85rem; }
.doc-items .col-cant { width: 96px; }
.doc-items .col-precio { width: 120px; }
.doc-items .col-desc { width: 100px; }
.doc-items .col-afect { width: 130px; }
.doc-items .col-total { width: 120px; }
.totales-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; }
.totales-box .fila { display: flex; justify-content: space-between; padding: .25rem 0; font-size: .88rem; }
.totales-box .fila.total { border-top: 1px dashed var(--border); margin-top: .35rem; padding-top: .6rem; font-size: 1.15rem; font-weight: 700; }
.stock-chip { font-size: .7rem; }

/* ----------------------------------------------------------- POS */
.pos { display: grid; grid-template-columns: 1fr 420px; gap: 1rem; align-items: start; }
.pos-productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; }
.pos-item { border: 1px solid var(--border); background: var(--surface); border-radius: 12px; padding: .8rem; cursor: pointer; transition: all .15s; display: flex; flex-direction: column; gap: .35rem; min-height: 118px; position: relative; }
.pos-item:hover { border-color: var(--brand); box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 18%, transparent); transform: translateY(-1px); }
.pos-item .nombre { font-weight: 600; font-size: .84rem; line-height: 1.25; }
.pos-item .precio { font-weight: 700; color: var(--brand); margin-top: auto; }
.pos-item .tipo { font-size: .68rem; color: var(--muted); display: flex; justify-content: space-between; gap: .3rem; }
.pos-item.sin-stock { opacity: .5; }
.pos-cart { position: sticky; top: calc(var(--topbar-h) + 1rem); }
.pos-cart .carrito { max-height: 38vh; overflow-y: auto; }
.cart-line { display: grid; grid-template-columns: 1fr auto; gap: .25rem .5rem; padding: .6rem 0; border-bottom: 1px dashed var(--border); }
.cart-line .qty { display: inline-flex; align-items: center; gap: .25rem; }
.cart-line .qty input { width: 58px; height: 28px; text-align: center; padding: 0 .25rem; }
.tipo-doc .btn { flex: 1; }
.medios-pago { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.medios-pago .btn { font-size: .78rem; padding: .45rem .25rem; display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.medios-pago .btn i { font-size: 1.1rem; }
.pos-total { font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; }
@media (max-width: 1199.98px) { .pos { grid-template-columns: 1fr; } .pos-cart { position: static; } }

/* ----------------------------------------------------------- Timeline / historial */
.timeline { position: relative; padding-left: 1.6rem; }
.timeline::before { content: ""; position: absolute; left: .55rem; top: .3rem; bottom: .3rem; width: 2px; background: var(--border); }
.tl-item { position: relative; padding-bottom: 1.1rem; }
.tl-item .tl-dot { position: absolute; left: -1.6rem; top: .1rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--surface); border: 2px solid var(--brand); display: flex; align-items: center; justify-content: center; font-size: .6rem; color: var(--brand); }
.tl-item .tl-fecha { font-size: .74rem; color: var(--muted); }
.tl-item .tl-titulo { font-weight: 600; }

/* ----------------------------------------------------------- Calendario */
.fc { --fc-border-color: var(--border); --fc-page-bg-color: var(--surface); --fc-neutral-bg-color: var(--surface-2); --fc-today-bg-color: var(--brand-softer); --fc-button-bg-color: var(--surface); --fc-button-border-color: var(--border); --fc-button-text-color: var(--text-2); --fc-button-hover-bg-color: var(--brand-soft); --fc-button-hover-border-color: var(--brand); --fc-button-active-bg-color: var(--brand); --fc-button-active-border-color: var(--brand); --fc-event-border-color: transparent; font-size: .82rem; }
.fc .fc-button { border-radius: 9px !important; text-transform: capitalize; font-weight: 500; }
.fc .fc-button-primary:not(:disabled).fc-button-active { color: #fff; }
.fc .fc-button-primary:hover { color: var(--brand); }
.fc .fc-toolbar-title { font-size: 1.1rem; font-weight: 700; text-transform: capitalize; }
.fc .fc-event { border-radius: 7px; padding: 1px 3px; cursor: pointer; }
.fc .fc-timegrid-slot { height: 2.2em; }
.fc .fc-col-header-cell-cushion { text-transform: capitalize; color: var(--text-2); }
.leyenda-estados { display: flex; flex-wrap: wrap; gap: .8rem; font-size: .78rem; color: var(--text-2); }
.leyenda-estados span { display: inline-flex; align-items: center; gap: .35rem; }

/* ----------------------------------------------------------- Mapa corporal */
.mapa-corporal { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; }
.mapa-corporal svg { width: 170px; height: auto; }
.mapa-corporal .silueta { fill: var(--surface-2); stroke: color-mix(in srgb, var(--muted) 60%, transparent); stroke-width: 1.2; }
.mapa-corporal .zona { fill: color-mix(in srgb, var(--brand) 18%, transparent); stroke: color-mix(in srgb, var(--brand) 50%, transparent); stroke-width: 1; cursor: pointer; transition: all .15s; }
.mapa-corporal .zona:hover { fill: color-mix(in srgb, #dc2626 35%, transparent); }
.mapa-corporal .zona.activa { fill: #dc2626; stroke: #fff; stroke-width: 1.5; }
.mapa-corporal .vista-titulo { font-size: 9px; fill: var(--muted); text-anchor: middle; }
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: .75rem; font-weight: 600; margin: 0 .25rem .3rem 0; }
.chip.rojo { background: rgba(220, 38, 38, .12); color: #b91c1c; }

/* ----------------------------------------------------------- Gráficos */
.chart-box { position: relative; height: 280px; }
.chart-box.sm { height: 220px; }
.chart-tabla { display: none; }
.chart-card.ver-tabla .chart-box { display: none; }
.chart-card.ver-tabla .chart-tabla { display: block; }
.meter { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--series-1) 18%, transparent); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--series-1); border-radius: 99px; }

/* ----------------------------------------------------------- Flujo de caja */
.tabla-flujo { font-size: .78rem; }
.tabla-flujo th, .tabla-flujo td { white-space: nowrap; padding: .45rem .55rem !important; }
.tabla-flujo td:first-child, .tabla-flujo th:first-child { position: sticky; left: 0; background: var(--surface); z-index: 1; min-width: 200px; white-space: normal; }
.tabla-flujo .fila-seccion td { background: var(--brand-soft) !important; color: var(--brand); font-weight: 700; text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; }
.tabla-flujo .fila-subtotal td { font-weight: 700; background: var(--surface-2) !important; }
.tabla-flujo .fila-total td { font-weight: 800; background: color-mix(in srgb, var(--brand) 10%, var(--surface)) !important; }
.tabla-flujo .negativo { color: #dc2626; }
.tabla-flujo .proyectado { color: var(--muted); font-size: .7rem; display: block; }

/* ----------------------------------------------------------- Login */
.login-page { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--surface); }
.login-hero { background: linear-gradient(145deg, var(--brand-700), var(--brand) 55%, color-mix(in srgb, var(--brand) 60%, #22d3ee)); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.login-hero::after { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: rgba(255, 255, 255, .07); right: -160px; bottom: -160px; }
.login-hero h1 { font-size: 2.3rem; font-weight: 800; letter-spacing: -.02em; }
.login-hero .feature { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: 1rem; opacity: .95; }
.login-hero .feature i { font-size: 1.3rem; background: rgba(255, 255, 255, .15); border-radius: 10px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.login-form { display: flex; align-items: center; justify-content: center; padding: 2rem; }
.login-form .inner { width: 100%; max-width: 380px; }
@media (max-width: 991.98px) { .login-page { grid-template-columns: 1fr; } .login-hero { display: none; } }

/* ----------------------------------------------------------- Varios */
.toast-container { z-index: 1090; }
.toast { border-radius: 12px; border: 0; box-shadow: var(--shadow); }
.list-group-item { background: var(--surface); border-color: var(--border); color: var(--text); }
.dropdown-menu { border-radius: 12px; border-color: var(--border); box-shadow: var(--shadow); font-size: .88rem; background: var(--surface); }
.dropdown-item { border-radius: 8px; }
.dropdown-menu { padding: .4rem; }
.dropdown-item:active { background: var(--brand); }
.modal-content { border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.progress { background: var(--surface-2); }
.progress-bar { background: var(--brand); }
.text-muted { color: var(--muted) !important; }
.border-dashed { border-style: dashed !important; }
.obj-foto { width: 100%; max-height: 160px; object-fit: cover; border-radius: 12px; }
.monto-grande { font-size: 1.6rem; font-weight: 700; }
.alerta-simulacion { background: repeating-linear-gradient(45deg, rgba(245, 158, 11, .10), rgba(245, 158, 11, .10) 10px, rgba(245, 158, 11, .04) 10px, rgba(245, 158, 11, .04) 20px); border: 1px solid rgba(245, 158, 11, .35); border-radius: 12px; }
.matriz-permisos td, .matriz-permisos th { text-align: center; }
.matriz-permisos td:first-child, .matriz-permisos th:first-child { text-align: left; }
.estado-pill { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.swal2-popup { border-radius: 16px !important; font-family: var(--bs-body-font-family) !important; }
[data-bs-theme="dark"] .swal2-popup { background: var(--surface) !important; color: var(--text) !important; }
[data-bs-theme="dark"] .swal2-textarea, [data-bs-theme="dark"] .swal2-input { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.swal2-confirm { background: var(--brand) !important; }
.cursor-pointer { cursor: pointer; }
.min-w-0 { min-width: 0; }
.list-group-item > .badge, .list-group-item > span > .badge { flex-shrink: 0; }
.fw-600 { font-weight: 600; }
.small-2 { font-size: .76rem; }

@media print {
  .sidebar, .topbar, .app-footer, .page-header .acciones, .no-print { display: none !important; }
  .main { margin: 0 !important; }
  .card { box-shadow: none; }
}