/* ============================================================================
   CITOFON — Sistema de diseño (v2) para concierge_gc
   Estética: CUADRADA (border-radius:0 en todo) · grid limpio tipo enterprise.
   Paleta citofon.cl: negro/blanco + acento azul #1E90FF.
   App-shell por CSS: convierte el sidebar embebido (.col-sm-2 > .nav-pills) en
   un riel fijo de altura completa, sin tocar las vistas (el estado activo ya
   viene marcado por cada página). Pensado para el conserje en recepción:
   navegación siempre visible, jerarquía clara, tablas legibles, acciones obvias.
   Se carga DESPUÉS de bootstrap.min.css + Unify.
   ============================================================================ */

:root {
  --cf-nav:        #14171d;   /* riel/topbar oscuro */
  --cf-nav-2:      #1b1f27;   /* hover en el riel */
  --cf-nav-line:   #262b34;   /* separadores del riel */
  --cf-nav-txt:    #aeb6c2;   /* texto del riel */
  --cf-nav-muted:  #6b7482;   /* encabezados de grupo del riel */

  --cf-app-bg:     #f3f5f8;   /* fondo de la app */
  --cf-card:       #ffffff;
  --cf-ink:        #101828;   /* titulares */
  --cf-text:       #344054;   /* texto base */
  --cf-muted:      #667085;   /* secundario */
  --cf-border:     #e5e8ee;   /* bordes */
  --cf-border-2:   #d6dae1;   /* bordes fuertes (inputs) */

  --cf-accent:     #1e90ff;
  --cf-accent-dk:  #1877d2;
  --cf-accent-sf:  #e9f3ff;   /* fondo suave del acento */
  --cf-success:    #157347;
  --cf-success-sf: #e7f4ec;
  --cf-danger:     #c62828;
  --cf-warning:    #b76e00;
  --cf-info:       #1565c0;

  --cf-shadow:     0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04);
  --cf-topbar-h:   56px;
  --cf-rail-w:     236px;

  /* --- Ritmo: UNA sola escala de espaciado para toda la app ---------------
     Todo margen/separación sale de aquí. Si algo se ve "descuadrado" es
     porque usa un valor propio en vez de estas variables. */
  --cf-gap:        20px;   /* separación entre tarjetas (horizontal y vertical) */
  --cf-pad:        20px;   /* padding interno de tarjetas y paneles */
  --cf-ctrl-h:     38px;   /* alto único de inputs, selects y botones */
}

/* ---- REGLA DE FORMA: TODO CUADRADO ---------------------------------------- */
*, *::before, *::after { border-radius: 0 !important; }
/* Unify define .rounded-x/.rounded-4x con !important de clase (más específico que *);
   se neutralizan explícitamente para que NADA quede redondeado. */
.rounded, .rounded-x, .rounded-2x, .rounded-3x, .rounded-4x, .img-circle,
.btn, .btn-u, .btn-group > .btn, .dropdown-toggle, .label, .badge,
.ts-control, .ts-dropdown, .form-control, .cf-avatar, .cf-kpi-ico,
.thumbnail, .well, .panel, .alert, .modal-content, .pagination > li > a,
.pagination > li > span, input, select, textarea { border-radius: 0 !important; }

/* ---- Base ----------------------------------------------------------------- */
html, body {
  background: var(--cf-app-bg);
  color: var(--cf-text);
  font-family: "Open Sans", "Segoe UI", system-ui, Arial, sans-serif;
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body { padding-top: var(--cf-topbar-h); }
h1,h2,h3,h4,h5,h6 { color: var(--cf-ink); font-weight: 600; margin-top: 0; }
a { color: var(--cf-accent); }
a:hover, a:focus { color: var(--cf-accent-dk); text-decoration: none; }
hr { border-top: 1px solid var(--cf-border); }
.text-muted { color: var(--cf-muted) !important; }
.text-primary { color: var(--cf-accent) !important; }

/* ============================================================================
   TOPBAR (barra superior fija) — logo + contexto de edificio + usuario
   ============================================================================ */
.cf-header, .wrapper > .header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
  height: var(--cf-topbar-h);
  background: var(--cf-nav) !important;
  border: 0 !important; box-shadow: 0 1px 0 rgba(0,0,0,.25) !important;
}
.cf-header {
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px 0 0; color: #fff;
}
.cf-header .cf-logo {
  display: flex; align-items: center; justify-content: center;
  width: var(--cf-rail-w); height: var(--cf-topbar-h); padding: 0 14px;
  border-right: 1px solid var(--cf-nav-line); flex: 0 0 var(--cf-rail-w);
}
.cf-header .cf-logo img { height: 40px; max-width: 100%; width: auto; filter: invert(1) brightness(2); display: block; }
.cf-navtoggle {
  display: none; background: none; border: 0; color: #fff; font-size: 20px;
  width: 44px; height: var(--cf-topbar-h); cursor: pointer;
}
.cf-header .cf-crumb { color: #fff; font-weight: 600; font-size: 15px; letter-spacing: .2px; }
.cf-header .cf-topbar { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 13px; }
.cf-header .cf-topbar a { color: #c4ccd8; }
.cf-header .cf-topbar a:hover { color: #fff; }
.cf-header .cf-sep { width: 1px; height: 20px; background: var(--cf-nav-line); }
.cf-header .cf-building { display: inline-flex; align-items: center; gap: 7px; color: #c4ccd8; }
.cf-header .cf-building i { color: var(--cf-accent); }
.cf-header .cf-user { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; }
.cf-header .cf-avatar {
  width: 26px; height: 26px; background: var(--cf-accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.cf-header .cf-logout { display: inline-flex; align-items: center; gap: 6px; }

/* ============================================================================
   RIEL LATERAL — el sidebar embebido (.col-sm-2 > .nav-pills) hecho riel fijo
   ============================================================================ */
.tab-v3 > .col-sm-2,
.col-sm-2:has(> .nav.nav-pills.nav-stacked) {
  position: fixed; top: var(--cf-topbar-h); left: 0; bottom: 0;
  width: var(--cf-rail-w); z-index: 1020;
  background: var(--cf-nav); border-right: 1px solid var(--cf-nav-line);
  padding: 12px 0 24px; overflow-y: auto; float: none;
}
.tab-v3 > .col-sm-10,
.col-sm-2:has(> .nav.nav-pills.nav-stacked) + .col-sm-10 {
  margin-left: var(--cf-rail-w); width: auto; float: none;
  padding: var(--cf-gap) var(--cf-gap) calc(var(--cf-gap) * 2);
  min-height: calc(100vh - var(--cf-topbar-h));
}
.tab-v3 { margin: 0; display: block; }

/* Nav dentro del riel */
.tab-v3 > .col-sm-2 .nav-pills,
.col-sm-2 .nav.nav-pills.nav-stacked { margin: 0; }
.nav-pills.nav-stacked > li { margin: 0; }
.nav-pills.nav-stacked > li > a {
  color: var(--cf-nav-txt); background: transparent;
  border: 0; border-left: 3px solid transparent;
  padding: 10px 18px; margin: 0; font-size: 13.5px; font-weight: 500;
  display: flex; align-items: center; gap: 11px; line-height: 1.25;
  transition: background .12s ease, color .12s ease;
}
.nav-pills.nav-stacked > li > a:hover,
.nav-pills.nav-stacked > li > a:focus {
  background: var(--cf-nav-2); color: #fff;
}
.nav-pills.nav-stacked > li.active > a,
.nav-pills.nav-stacked > li.active > a:hover,
.nav-pills.nav-stacked > li.active > a:focus {
  background: rgba(30,144,255,.12); color: #fff;
  border-left: 3px solid var(--cf-accent); font-weight: 600;
}
.nav-pills.nav-stacked > li > a > i {
  width: 18px; text-align: center; font-size: 14px; color: var(--cf-nav-muted); flex: 0 0 18px;
}
.nav-pills.nav-stacked > li.active > a > i,
.nav-pills.nav-stacked > li > a:hover > i { color: var(--cf-accent); }
.nav-pills.nav-stacked > li > a.block-with-text { white-space: normal; }

/* Overlay para el riel en móvil */
.cf-overlay { display: none; position: fixed; inset: var(--cf-topbar-h) 0 0 0; background: rgba(16,24,40,.45); z-index: 1015; }

/* ============================================================================
   ENCABEZADO DE PÁGINA + TARJETAS
   ============================================================================ */
.cf-page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--cf-gap); margin-bottom: var(--cf-gap); flex-wrap: wrap; }
.cf-page-head h1 { font-size: 20px; font-weight: 700; margin: 0; color: var(--cf-ink); }
.cf-page-head .cf-sub { color: var(--cf-muted); font-size: 13px; margin-top: 2px; }

.cf-card, .panel, .well {
  background: var(--cf-card); border: 1px solid var(--cf-border);
  box-shadow: var(--cf-shadow); margin-bottom: var(--cf-gap);
}
/* Tarjeta = columna flex: cabecera fija, cuerpo elástico, pie abajo del todo.
   Así dos tarjetas vecinas terminan SIEMPRE a la misma altura. */
.cf-card { padding: var(--cf-pad); display: flex; flex-direction: column; }
.cf-card > :last-child { margin-bottom: 0; }
.cf-card-head, .option-header {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: var(--cf-muted); margin: 0 0 var(--cf-pad); padding: 0 0 12px;
  border-bottom: 1px solid var(--cf-border); display: flex; align-items: center; gap: 8px;
  flex: 0 0 auto;
}
.cf-card-body { flex: 1 1 auto; min-height: 0; }
.cf-card-foot { flex: 0 0 auto; margin-top: auto; padding-top: 14px; }
.cf-card-foot .pagination { margin: 0; }
.option-header { text-align: left !important; }
.back-color {
  background: var(--cf-card); border: 1px solid var(--cf-border); box-shadow: var(--cf-shadow);
  padding: var(--cf-pad);
}
.table-row { margin-bottom: var(--cf-gap); }

/* ============================================================================
   KPI / STAT TILES
   ============================================================================ */
.cf-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cf-gap); margin-bottom: var(--cf-gap); }
.cf-kpi {
  background: var(--cf-card); border: 1px solid var(--cf-border); box-shadow: var(--cf-shadow);
  padding: 16px var(--cf-pad); display: flex; align-items: center; gap: 14px; position: relative; overflow: hidden;
}
.cf-kpi::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--cf-accent); }
.cf-kpi .cf-kpi-ico {
  width: 44px; height: 44px; flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--cf-accent-sf); color: var(--cf-accent); font-size: 20px;
}
.cf-kpi .cf-kpi-num { font-size: 26px; font-weight: 700; color: var(--cf-ink); line-height: 1.1; }
.cf-kpi .cf-kpi-lbl { font-size: 12.5px; color: var(--cf-muted); text-transform: uppercase; letter-spacing: .3px; margin-top: 2px; }
.cf-kpi.is-green::before { background: var(--cf-success); }
.cf-kpi.is-green .cf-kpi-ico { background: #e7f4ec; color: var(--cf-success); }
.cf-kpi.is-amber::before { background: var(--cf-warning); }
.cf-kpi.is-amber .cf-kpi-ico { background: #fbf1e3; color: var(--cf-warning); }
.cf-kpi.is-ink::before { background: var(--cf-ink); }
.cf-kpi.is-ink .cf-kpi-ico { background: #eef0f4; color: var(--cf-ink); }

/* ============================================================================
   BOTONES
   ============================================================================ */
.btn {
  border: 1px solid transparent; font-weight: 600; padding: 8px 16px; font-size: 13.5px;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
  display: inline-flex; align-items: center; gap: 7px; line-height: 1.2;
}
.btn:focus { box-shadow: 0 0 0 3px rgba(30,144,255,.20); }
.btn-primary, .btn-u, .btn-info { background: var(--cf-accent); border-color: var(--cf-accent); color: #fff; }
.btn-primary:hover, .btn-primary:active, .btn-u:hover, .btn-info:hover { background: var(--cf-accent-dk); border-color: var(--cf-accent-dk); color: #fff; }
.btn-default { background: #fff; border-color: var(--cf-border-2); color: var(--cf-text); }
.btn-default:hover, .btn-default:focus { background: var(--cf-app-bg); border-color: var(--cf-muted); color: var(--cf-ink); }
.btn-success { background: var(--cf-success); border-color: var(--cf-success); color: #fff; }
.btn-success:hover { background: #0f5132; border-color: #0f5132; }
.btn-danger  { background: var(--cf-danger); border-color: var(--cf-danger); color: #fff; }
.btn-danger:hover { background: #9b1c1c; border-color: #9b1c1c; }
.btn-warning { background: var(--cf-warning); border-color: var(--cf-warning); color: #fff; }
.btn-link { color: var(--cf-accent); padding: 8px 6px; }
.btn-xs { padding: 3px 9px; font-size: 12px; }
.btn-sm { padding: 5px 12px; font-size: 12.5px; }

/* ============================================================================
   FORMULARIOS
   ============================================================================ */
.form-control, .sky-form .input input, .sky-form .select select, .sky-form .textarea textarea,
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="search"], input[type="tel"], select, textarea {
  border: 1px solid var(--cf-border-2); box-shadow: none !important;
  color: var(--cf-text); background: #fff; font-size: 13.5px; padding: 8px 11px; height: auto;
}
.form-control:focus, .sky-form .input input:focus, .sky-form .select select:focus,
.sky-form .textarea textarea:focus, input:focus, select:focus, textarea:focus {
  border-color: var(--cf-accent) !important; box-shadow: 0 0 0 3px rgba(30,144,255,.15) !important; outline: none;
}
label, .control-label { color: var(--cf-text); font-weight: 600; font-size: 13px; margin-bottom: 5px; }
.input-group-addon { background: var(--cf-app-bg); border-color: var(--cf-border-2); color: var(--cf-muted); }
.help-block { color: var(--cf-muted); font-size: 12.5px; }
.has-error .form-control { border-color: var(--cf-danger); }
.has-error .help-block, .has-error .control-label { color: var(--cf-danger); }
.cf-error { color: var(--cf-danger); font-size: 12.5px; margin-top: 4px; display: block; }

/* Barra de filtros / toolbar */
.cf-toolbar { display: flex; align-items: flex-end; gap: var(--cf-gap); flex-wrap: wrap; }
.cf-toolbar .sky-form, .cf-toolbar form { display: flex; align-items: flex-end; gap: var(--cf-gap); flex-wrap: wrap; margin: 0; }

/* ============================================================================
   TABLAS / REPORTES
   ============================================================================ */
.table { border: 1px solid var(--cf-border); margin-bottom: 0; background: #fff; }
.table > thead > tr > th {
  background: #f7f9fc; color: var(--cf-muted); border: 0; border-bottom: 1px solid var(--cf-border);
  font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px;
  vertical-align: middle; padding: 11px 14px;
}
.table > tbody > tr > td { border-top: 1px solid var(--cf-border); padding: 10px 14px; vertical-align: middle; color: var(--cf-text); }
.table-striped > tbody > tr:nth-of-type(odd) { background: #fbfcfe; }
.table-hover > tbody > tr:hover { background: var(--cf-accent-sf); }
.table-bordered, .table-bordered > thead > tr > th, .table-bordered > tbody > tr > td { border: 1px solid var(--cf-border); }
.cf-tablecard { border: 1px solid var(--cf-border); box-shadow: var(--cf-shadow); background: #fff; overflow: hidden; }
.cf-tablecard .table { border: 0; }

/* ============================================================================
   BADGES / LABELS / ALERTS / PAGINACIÓN / TABS / DROPDOWN / MODAL
   ============================================================================ */
.label, .badge { padding: 3px 9px; font-weight: 700; font-size: 11px; letter-spacing: .3px; display: inline-block; }
.badge { background: var(--cf-muted); color: #fff; }
.label-default { background: #eef0f4; color: var(--cf-text); }
.label-primary, .label-info { background: var(--cf-accent-sf); color: var(--cf-accent-dk); }
.label-success { background: #e7f4ec; color: var(--cf-success); }
.label-danger  { background: #fdecec; color: var(--cf-danger); }
.label-warning { background: #fbf1e3; color: var(--cf-warning); }

.alert { border: 1px solid var(--cf-border); border-left-width: 4px; padding: 12px 16px; box-shadow: var(--cf-shadow); }
.alert-success { background: #edf7f0; border-left-color: var(--cf-success); color: #0f5132; }
.alert-danger  { background: #fdecec; border-left-color: var(--cf-danger);  color: #7f1d1d; }
.alert-warning { background: #fdf5e6; border-left-color: var(--cf-warning); color: #7a4a00; }
.alert-info    { background: var(--cf-accent-sf); border-left-color: var(--cf-accent); color: #0b4a8f; }

.pagination { margin: 16px 0 0; }
.pagination > li > a, .pagination > li > span { color: var(--cf-accent); border-color: var(--cf-border); margin-left: -1px; padding: 7px 12px; }
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover { background: var(--cf-accent); border-color: var(--cf-accent); color: #fff; }
.pagination > li > a:hover { background: var(--cf-accent-sf); }

.nav-tabs { border-bottom: 1px solid var(--cf-border); }
.nav-tabs > li > a { color: var(--cf-muted); margin-right: 2px; border: 0; padding: 9px 15px; font-weight: 600; font-size: 13px; }
.nav-tabs > li > a:hover { background: transparent; color: var(--cf-ink); border-bottom: 2px solid var(--cf-border-2); }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  border: 0; border-bottom: 2px solid var(--cf-accent); color: var(--cf-accent-dk); background: transparent; font-weight: 700;
}

.panel { box-shadow: var(--cf-shadow); border: 1px solid var(--cf-border); }
.panel-heading { background: #f7f9fc; border-color: var(--cf-border); color: var(--cf-ink); font-weight: 600; }
.panel-primary > .panel-heading { background: var(--cf-ink); border-color: var(--cf-ink); color: #fff; }
.modal-content { border: 1px solid var(--cf-border); box-shadow: 0 12px 40px rgba(16,24,40,.18); }
.modal-header { border-bottom: 1px solid var(--cf-border); }
.modal-footer { border-top: 1px solid var(--cf-border); }
.dropdown-menu { border: 1px solid var(--cf-border); box-shadow: 0 8px 28px rgba(16,24,40,.14); padding: 4px 0; white-space: nowrap; min-width: 185px; }
.dropdown-menu-min { min-width: 185px !important; }
.dropdown-menu > li > a { padding: 8px 16px; color: var(--cf-text); white-space: nowrap; }
.dropdown-menu > li > a:hover { background: var(--cf-accent-sf); color: var(--cf-accent-dk); }
.dropdown-menu > li > a > i { width: 16px; text-align: center; margin-right: 4px; }
.well { background: var(--cf-app-bg); }
.img-circle, .rounded { border-radius: 0 !important; }

/* Mapea el verde viejo (#72c02c) a azul en clases residuales */
.color-green, .green { color: var(--cf-accent) !important; }
.bg-green { background: var(--cf-accent) !important; }

/* ============================================================================
   GRÁFICOS (ECharts)
   El gráfico ocupa TODO el cuerpo de su tarjeta: si la tarjeta vecina de la
   misma fila es más alta (una tabla), el gráfico crece y ambas terminan
   alineadas. min-height evita que se aplaste cuando la fila es baja.
   ============================================================================ */
.cf-chart, .heat-chart, .heat-chart > div,
#chart, #heat_chart, #chart_parcels, #heat_entry_chart, #heat_exit_chart {
  width: 100%; height: 100%; min-height: 280px; flex: 1 1 auto;
}
/* Mapa de calor con las 24 horas en el eje vertical: son 24 filas en vez de 7,
   asi que necesita mas alto o quedan de tres pixeles. Los selectores repiten el
   id porque la regla de arriba tambien lo usa y una clase sola no le gana. */
#heat_chart.is-heat-horas-y,
#heat_entry_chart.is-heat-horas-y,
#heat_exit_chart.is-heat-horas-y { min-height: 420px; }

/* ============================================================================
   SELECTS CON BÚSQUEDA (Tom Select) — cuadrados, iguales a los inputs
   ============================================================================ */
.ts-wrapper { min-width: 150px; }
/* La copia de Tom Select de este proyecto no incluye la regla que esconde el
   <select> original, así que quedaba un recuadro extra al lado del control.
   Se mantiene accesible para lectores de pantalla, pero fuera del flujo. */
select.ts-hidden-accessible,
.ts-hidden-accessible {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
  background: none !important; appearance: auto !important;
}
/* Tom Select copia las clases del <select> original al wrapper; si venía con
   .form-control quedaban DOS marcos (el del wrapper y el del control) uno
   corrido respecto del otro. El marco lo pone solo .ts-control. */
.ts-wrapper.form-control {
  border: 0 !important; padding: 0 !important; height: auto !important;
  background: transparent !important; box-shadow: none !important;
}
.ts-control {
  border: 1px solid var(--cf-border-2) !important; background-color: #fff !important; box-shadow: none !important;
  min-height: var(--cf-ctrl-h); padding: 6px 30px 6px 11px !important; font-size: 13.5px; color: var(--cf-text);
  /* una sola línea: el control no crece ni se deforma con textos largos */
  display: flex !important; align-items: center; flex-wrap: nowrap !important;
  overflow: hidden; line-height: 1.35;
}
.ts-wrapper.focus .ts-control { border-color: var(--cf-accent) !important; box-shadow: 0 0 0 3px rgba(30,144,255,.15) !important; }
/* el texto elegido se recorta con puntos suspensivos en vez de romper la caja,
   y nunca invade el espacio de la flecha */
.ts-wrapper.single .ts-control > .item {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: calc(100% - 6px); flex: 0 1 auto;
}
.cf-toolbar-row .ts-wrapper { min-width: 185px; }
/* AL ESCRIBIR: el cursor y lo tecleado siempre visibles. Tom Select deja el
   input con 4px de ancho y el texto se "perdía" detrás del valor elegido. */
.ts-control > input {
  color: var(--cf-text) !important; font-size: 13.5px !important;
  min-width: 6ch !important; flex: 1 1 auto; opacity: 1 !important;
}
/* background-color, NO el atajo `background`: el atajo reinicia repeat, size y
   position, y como este selector pesa mas que el de la flecha, el triangulo
   quedaba en mosaico rellenando el control al abrir el desplegable. */
.ts-wrapper.single.input-active .ts-control { background-color: #fff !important; cursor: text; }
.ts-wrapper.single.input-active .ts-control > .item { display: none; }   /* deja escribir sin estorbo */
.ts-wrapper.single.input-active .ts-control > input { min-width: 100% !important; }
.ts-control > input::placeholder { color: var(--cf-muted); opacity: 1; }
/* Flecha del desplegable. La copia de Tom Select de este proyecto no trae la
   regla del triángulo (content queda en none), así que se dibuja acá; si no,
   el control se lee como una caja de texto y no como un selector. */
/* El triángulo va como fondo del control: dentro de un contenedor flex, un
   pseudo-elemento se colaba como un ítem más y quedaba pegado al texto. */
.ts-wrapper.single .ts-control {
  position: relative;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23667085'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 10px 6px !important;
}
.ts-wrapper.single .ts-control:after { content: none !important; }
.ts-wrapper.single.dropdown-active .ts-control {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M5 0l5 6H0z' fill='%231e90ff'/%3E%3C/svg%3E") !important;
}

/* Selects nativos (los que no pasan por Tom Select): misma flecha dibujada */
select.form-control:not(.ts-hidden-accessible),
.sky-form select:not(.ts-hidden-accessible),
.cf-pager select:not(.ts-hidden-accessible),
.cf-toolbar-row select:not(.ts-hidden-accessible) {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23667085'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 10px 6px;
  padding-right: 30px !important;
}
select.form-control::-ms-expand { display: none; }
.ts-wrapper.plugin-remove_button .item .remove { border-left-color: #cfe4ff; }
/* el desplegable nunca es más angosto que su control ni se sale de la pantalla */
.ts-dropdown { min-width: 100%; max-width: 100vw; }
.ts-dropdown .ts-dropdown-content { max-height: 260px; }
.ts-dropdown {
  border: 1px solid var(--cf-border) !important; box-shadow: 0 8px 28px rgba(16,24,40,.14) !important;
  margin-top: 2px; font-size: 13.5px; padding: 3px 0;
}
.ts-dropdown .option { padding: 8px 12px; color: var(--cf-text); }
.ts-dropdown .option.active { background: var(--cf-accent-sf) !important; color: var(--cf-accent-dk) !important; }
.ts-dropdown .ts-dropdown-content .option[aria-selected="true"] { font-weight: 600; }
.ts-dropdown .no-results, .ts-dropdown .optgroup-header { padding: 8px 12px; color: var(--cf-muted); }
.ts-wrapper.multi .ts-control > .item { background: var(--cf-accent-sf); color: var(--cf-accent-dk); border: 1px solid #cfe4ff; }
/* mismo motivo que arriba: el atajo borraria la flecha del control deshabilitado */
.ts-wrapper.disabled .ts-control { background-color: #f2f4f7 !important; }
/* sky-form: ocultar la flecha nativa de Unify cuando Tom Select toma el control.
   Unify NO la dibuja con un :after del contenedor, sino con el elemento <i> que
   el markup deja despues del <select> (ver .sky-form .select i en sky-forms.css).
   Al apuntar solo al :after, el triangulo de Unify se seguia pintando encima del
   de Tom Select: dos flechas superpuestas y corridas en todos los formularios
   (crear/editar residentes, propietarios, residentes temporales, etc.). */
.sky-form .select:has(.ts-wrapper) > i,
.sky-form .select:has(.ts-wrapper):after { display: none !important; }
.sky-form .select .ts-wrapper { width: 100%; }

/* ============================================================================
   TABLAS — ordenables + estándar del sistema (una sola apariencia)
   ============================================================================ */
.table-responsive { border: 1px solid var(--cf-border); box-shadow: var(--cf-shadow); background: #fff; padding: 0; }
.table-responsive > .table { border: 0; margin-bottom: 0; }
.table.back-color { padding: 0; background: #fff; }
.cf-card .table, .table-responsive .table { box-shadow: none; }

th.cf-sortable { cursor: pointer; user-select: none; position: relative; padding-right: 24px !important; white-space: nowrap; }
th.cf-sortable::after {
  content: "\f0dc"; font-family: FontAwesome; position: absolute; right: 9px; top: 50%;
  transform: translateY(-50%); color: #c4cad4; font-size: 11px; font-weight: normal;
}
th.cf-sortable:hover { color: var(--cf-ink); }
th.cf-sortable:hover::after { color: var(--cf-muted); }
th.cf-sort-asc::after  { content: "\f0de"; color: var(--cf-accent); }
th.cf-sort-desc::after { content: "\f0dd"; color: var(--cf-accent); }

/* Botones de acción de fila (dropdown "Opciones" + accesos directos) */
.table .btn-group > .dropdown-toggle { display: inline-flex; align-items: center; gap: 6px; }
.table td .btn-xs, .table td .btn-sm { white-space: nowrap; }
.cf-rowactions { display: inline-flex; gap: 6px; align-items: center; }
.btn-edit { background: var(--cf-accent-sf); border: 1px solid #cfe4ff; color: var(--cf-accent-dk); }
.btn-edit:hover { background: #d8ebff; color: var(--cf-accent-dk); }
.btn-del { background: #fdecec; border: 1px solid #f5c6c6; color: var(--cf-danger); }
.btn-del:hover { background: #f9dede; color: var(--cf-danger); }

/* ============================================================================
   LAYOUT — grilla, gutters y ritmo vertical (lo que ordena la página)
   ----------------------------------------------------------------------------
   Problema que resuelve: Bootstrap separa columnas con 30px, el grid de KPIs
   usaba 16px y los márgenes verticales 20px → todo se veía descuadrado.
   Ahora TODA separación (horizontal y vertical) vale --cf-gap.
   ============================================================================ */

/* 1) Gutter de Bootstrap y de sky-forms igualado a --cf-gap dentro del contenido */
.tab-v3 > .col-sm-10 .row,
.col-sm-2:has(> .nav.nav-pills.nav-stacked) + .col-sm-10 .row,
.tab-v3 > .col-sm-10 .sky-form .row {
  margin-left: calc(var(--cf-gap) / -2); margin-right: calc(var(--cf-gap) / -2);
}
.tab-v3 > .col-sm-10 .row > [class*="col-"],
.col-sm-2:has(> .nav.nav-pills.nav-stacked) + .col-sm-10 .row > [class*="col-"],
.tab-v3 > .col-sm-10 .sky-form .row > .col {
  padding-left: calc(var(--cf-gap) / 2); padding-right: calc(var(--cf-gap) / 2);
}
/* .row usada solo como contenedor (sin columnas dentro): sin gutter negativo,
   si no su contenido se sale 10px del panel y no calza con el título. */
.tab-v3 > .col-sm-10 .row:not(:has(> [class*="col-"])):not(:has(> .col)),
.col-sm-2:has(> .nav.nav-pills.nav-stacked) + .col-sm-10 .row:not(:has(> [class*="col-"])):not(:has(> .col)) {
  margin-left: 0; margin-right: 0;
}

/* 2) Grilla del panel de control — 12 columnas, mismo gap en ambos ejes y
      tarjetas de igual altura por fila (align-items:stretch es el default). */
.cf-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--cf-gap); margin-bottom: var(--cf-gap); }
.cf-grid > * { min-width: 0; }
.cf-grid > .cf-card { margin-bottom: 0; }
.cf-w3  { grid-column: span 3; }
.cf-w4  { grid-column: span 4; }
.cf-w5  { grid-column: span 5; }
.cf-w6  { grid-column: span 6; }
.cf-w7  { grid-column: span 7; }
.cf-w8  { grid-column: span 8; }
.cf-w12 { grid-column: span 12; }

/* 3) Tabla dentro de una tarjeta: a sangre (bordes laterales fuera) y con la
      primera/última celda alineadas al padding de la tarjeta. Sin marco doble. */
.cf-card-table { margin: 0 calc(var(--cf-pad) * -1); overflow-x: auto; }
.cf-card-table > .table { border: 0; margin: 0; box-shadow: none; }
/* si la tarjeta vecina es más alta, las filas reparten el alto sobrante en vez
   de dejar un hueco blanco al pie */
.cf-card-body.cf-card-table > .table { height: 100%; }
.cf-card-table > .table > thead > tr > th { border-bottom: 1px solid var(--cf-border); }
.cf-card-table > .table > * > tr > *:first-child { padding-left: var(--cf-pad); }
.cf-card-table > .table > * > tr > *:last-child  { padding-right: var(--cf-pad); }

/* 4) Vistas de listado: .tab-content pasa a ser una tarjeta igual que .cf-card */
.tab-v3 .tab-content {
  background: var(--cf-card) !important; border: 1px solid var(--cf-border) !important;
  box-shadow: var(--cf-shadow); padding: var(--cf-pad) !important;
}
.tab-v3 .tab-content > .tab-pane { padding: 0; }
/* dentro del panel las tablas no llevan marco propio (ya lo pone el panel) */
.tab-v3 .tab-content .table-responsive { border: 0; box-shadow: none; background: transparent; }
.tab-v3 .tab-content .table.back-color { box-shadow: none; }

/* 5) Encabezado de sección (.headline): una sola línea, mismo margen siempre */
.headline {
  margin: 0 0 var(--cf-gap); padding: 0 0 12px;
  border-bottom: 1px solid var(--cf-border) !important;
}
.headline h1, .headline h2, .headline h3, .headline h4 {
  display: block; margin: 0; padding: 0; border-bottom: 0 !important;
  font-size: 18px; font-weight: 700; color: var(--cf-ink);
}
.headline-md { margin-bottom: var(--cf-gap); }

/* 6) Barras de filtro / formularios sky-form: controles alineados por su base,
      misma altura y misma separación. Se acabó el desnivel botón/input. */
/* Solo pasan a flex las filas cuyas columnas cuelgan DIRECTAMENTE de ellas.
   Varias vistas intercalan un <div> entre .row y las <section class="col">;
   ahí se conserva el flotado original (con flex se apilarían en una columna). */
.sky-form .row:has(> .col) { display: flex; flex-wrap: wrap; align-items: flex-end; }
.sky-form .row:has(> .col) > .col { float: none; }
/* El botón de acción de una barra de filtros va SIEMPRE al final de la barra.
   En las vistas de listado está declarado primero, lo que dejaba un hueco
   grande a la izquierda y el botón descolgado del resto de los controles. */
.sky-form .row:has(> .col) > .col:has(button[type="submit"]),
.sky-form .row:has(> .col) > .col:has(input[type="submit"]) { order: 99; width: auto; flex: 0 0 auto; margin-left: auto; }
.sky-form .row:has(> .col) > .col.text-right { text-align: left; }
/* input/select en bloque y sin margen inferior heredado de `label`: sin esto
   cada control quedaba 5px más arriba que su vecino en la misma barra */
.sky-form label.input > input, .sky-form label.select > select,
.sky-form label.textarea > textarea { display: block; width: 100%; }
.sky-form .input, .sky-form .select, .sky-form .textarea { margin-bottom: 0; }
.sky-form .row + .row { margin-top: 14px; }
.tab-v3 .tab-content form.sky-form { margin-bottom: var(--cf-gap); }
.sky-form fieldset { padding: 0; border: 0; margin: 0; }
.sky-form footer { background: transparent; border: 0; padding: var(--cf-gap) 0 0; }
.sky-form .label, .sky-form label.label { display: block; margin-bottom: 5px; }

/* altura única de controles (inputs, selects, botones y Tom Select) */
.form-control, .sky-form .input input, .sky-form .select select,
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="search"], input[type="tel"] {
  height: var(--cf-ctrl-h); line-height: normal;
}
.sky-form .input i.icon-append, .sky-form .input i.icon-prepend { height: calc(var(--cf-ctrl-h) - 2px); line-height: calc(var(--cf-ctrl-h) - 2px); }
.sky-form .select i { top: 14px; }
.btn { min-height: var(--cf-ctrl-h); }
.btn-xs, .btn-sm { min-height: 0; }
.ts-control { min-height: var(--cf-ctrl-h); }

/* 7) Utilidades de espaciado de Unify (5/10/20/30/40/50/60px sueltos) llevadas
      a la misma escala: un paso (--cf-gap) o dos. Son las que hacían que dos
      bloques equivalentes quedaran separados 10px en una vista y 40 en otra. */
.margin-bottom-5  { margin-bottom: 12px !important; }
.margin-bottom-10, .margin-bottom-15, .margin-bottom-20 { margin-bottom: var(--cf-gap) !important; }
.margin-bottom-25, .margin-bottom-30, .margin-bottom-40,
.margin-bottom-50, .margin-bottom-60 { margin-bottom: calc(var(--cf-gap) * 2) !important; }
.margin-top-5  { margin-top: 12px !important; }
.margin-top-10, .margin-top-15, .margin-top-20 { margin-top: var(--cf-gap) !important; }
.margin-top-30, .margin-top-40, .margin-top-50, .margin-top-60 { margin-top: calc(var(--cf-gap) * 2) !important; }

/* 8) Otros bloques sueltos que rompían el ritmo vertical */
.btn-group.pull-right + .row, .pull-right + .row { clear: both; }
.tab-v3 .tab-content > .text-center:last-child,
.tab-v3 .tab-content > .row + .text-center { margin-top: 4px; }
.pagination { margin: var(--cf-gap) 0 0; }
.alert { margin-bottom: var(--cf-gap); }

/* barras de progreso (tablas de estadísticas) en la paleta de la marca */
.progress { background: #eef1f5; height: 10px; box-shadow: none; margin-bottom: 0; }
.progress-bar, .progress-bar-info, .progress-bar-primary { background: var(--cf-accent); box-shadow: none; }
.progress-bar-success { background: var(--cf-success); }
.progress-bar-danger  { background: var(--cf-danger); }
.progress-bar-warning { background: var(--cf-warning); }

/* ============================================================================
   INTERFAZ v2 — encabezado de página, rango de fechas, menú de acciones y
   tabla de cabecera negra.
   Todo cuelga de `body.cf-ui2`, que cf-ui.js pone solo en las páginas donde
   la nueva interfaz está habilitada. Quitar esa condición = despliegue total.
   ============================================================================ */

/* ---- Encabezado de página -------------------------------------------------- */
body.cf-ui2 .cf-pagehead {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--cf-gap);
  flex-wrap: wrap; margin: 0 0 var(--cf-gap); padding: 0 0 14px;
  border-bottom: 1px solid var(--cf-border);
}
body.cf-ui2 .cf-pagehead-txt { min-width: 0; }
body.cf-ui2 .cf-pagehead h1 {
  font-size: 21px; font-weight: 700; color: var(--cf-ink); margin: 0; line-height: 1.2;
  display: flex; align-items: center; gap: 10px;
}
body.cf-ui2 .cf-pagehead h1::before {
  content: ""; width: 4px; height: 20px; background: var(--cf-accent); flex: 0 0 4px;
}
body.cf-ui2 .cf-pagehead-sub { color: var(--cf-muted); font-size: 12.5px; margin-top: 5px; padding-left: 14px; }
body.cf-ui2 .cf-pagehead-sub:empty { display: none; }
body.cf-ui2 .cf-pagehead-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body.cf-ui2 .cf-pagehead-actions .btn-group,
body.cf-ui2 .cf-pagehead-actions .btn { margin: 0 !important; float: none !important; }

/* ---- Menú de acciones (antes: botón partido en dos) ------------------------ */
body.cf-ui2 .cf-btn-menu {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; font-weight: 600;
}
body.cf-ui2 .cf-btn-menu .cf-menu-caret { font-size: 12px; opacity: .85; margin-left: 2px; }
body.cf-ui2 .cf-btn-menu::after { content: none; }

/* Menú de acciones general (barra de herramientas y encabezado): claro, con
   engranaje a la izquierda y flecha a la derecha. Los de cada fila de la tabla
   conservan el botón azul compacto. */
body.cf-ui2 .cf-btn-menu--general {
  background: #fff !important; border: 1px solid var(--cf-border-2) !important;
  color: var(--cf-text) !important; height: var(--cf-ctrl-h); padding: 0 14px;
  font-weight: 600; box-shadow: none !important;
}
body.cf-ui2 .cf-btn-menu--general:hover,
body.cf-ui2 .cf-btn-menu--general:focus,
body.cf-ui2 .btn-group.open > .cf-btn-menu--general {
  background: var(--cf-app-bg) !important; border-color: var(--cf-muted) !important;
  color: var(--cf-ink) !important;
}
body.cf-ui2 .cf-btn-menu--general > i.fa-cog { color: var(--cf-ink); font-size: 13px; }
body.cf-ui2 .cf-btn-menu--general .cf-menu-caret { color: var(--cf-muted); opacity: 1; }
body.cf-ui2 .btn-group > .btn + .dropdown-menu { margin-top: 2px; }

/* ---- Barra de filtros ------------------------------------------------------ */
body.cf-ui2 .cf-search-box { position: relative; display: block; }
body.cf-ui2 .cf-search-box .cf-search-ico {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--cf-muted); font-size: 13px; pointer-events: none; z-index: 2;
}
body.cf-ui2 .cf-search-box input,
body.cf-ui2 .cf-search-box .form-control { padding-left: 32px !important; }
body.cf-ui2 .cf-dr-oculto { display: none !important; }

/* ---- Selector de rango de fechas ------------------------------------------- */
.cf-dr { position: relative; display: inline-block; }
.cf-dr-trigger {
  display: inline-flex; align-items: center; gap: 9px; min-height: var(--cf-ctrl-h);
  padding: 8px 12px; background: #fff; border: 1px solid var(--cf-border-2);
  color: var(--cf-text); font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.cf-dr-trigger:hover { border-color: var(--cf-muted); }
.cf-dr.is-open .cf-dr-trigger { border-color: var(--cf-accent); box-shadow: 0 0 0 3px rgba(30,144,255,.15); }
.cf-dr-trigger > .fa-calendar { color: var(--cf-accent); font-size: 13px; flex: 0 0 auto; }
.cf-dr-trigger .cf-dr-label {
  flex: 1 1 auto; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cf-dr-trigger .cf-dr-caret { color: var(--cf-muted); font-size: 12px; margin-left: auto; flex: 0 0 auto; }
.cf-dr-trigger:not(.has-value) .cf-dr-label { color: var(--cf-muted); }

.cf-dr-panel {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 1050;
  background: #fff; border: 1px solid var(--cf-border); box-shadow: 0 12px 40px rgba(16,24,40,.18);
  padding: 14px; min-width: 560px;
}
.cf-dr-panel.align-right { left: auto; right: 0; }
.cf-dr.is-open .cf-dr-panel { display: block; }

.cf-dr-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cf-dr-preset {
  border: 1px solid var(--cf-border); background: #fff; color: var(--cf-text);
  padding: 5px 10px; font-size: 12.5px; cursor: pointer;
}
.cf-dr-preset:hover { background: var(--cf-accent-sf); border-color: #cfe4ff; color: var(--cf-accent-dk); }

.cf-dr-nav { display: flex; align-items: flex-start; gap: 8px; }
.cf-dr-nav-btn {
  border: 1px solid var(--cf-border); background: #fff; color: var(--cf-text);
  width: 30px; height: 30px; cursor: pointer; flex: 0 0 30px; margin-top: 2px;
}
.cf-dr-nav-btn:hover { background: var(--cf-accent-sf); color: var(--cf-accent-dk); }
.cf-dr-months { display: flex; gap: 18px; flex: 1 1 auto; }
.cf-dr-month { flex: 1 1 0; min-width: 0; }
.cf-dr-mes {
  text-align: center; font-size: 13px; font-weight: 700; color: var(--cf-ink);
  text-transform: capitalize; margin-bottom: 8px;
}
.cf-dr-dow-head { display: grid; grid-template-columns: repeat(7, 1fr); }
.cf-dr-dow {
  text-align: center; font-size: 10.5px; font-weight: 700; color: var(--cf-muted);
  padding: 2px 0 5px; text-transform: uppercase;
}
.cf-dr-dow.finde { color: var(--cf-warning); }
.cf-dr-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cf-dr-day {
  min-height: 30px; display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; color: var(--cf-text); cursor: pointer; user-select: none;
}
.cf-dr-day.empty { pointer-events: none; }
.cf-dr-day:hover:not(.empty):not(.range-start):not(.range-end) { background: var(--cf-accent-sf); }
.cf-dr-day.finde { color: var(--cf-warning); }
.cf-dr-day.today { box-shadow: inset 0 0 0 1px var(--cf-accent); font-weight: 700; }
.cf-dr-day.in-range { background: var(--cf-accent-sf); color: var(--cf-accent-dk); }
.cf-dr-day.range-start, .cf-dr-day.range-end {
  background: var(--cf-accent) !important; color: #fff !important; font-weight: 700;
}
.cf-dr-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--cf-border);
}
.cf-dr-resumen { font-size: 12.5px; color: var(--cf-muted); }
.cf-dr-clear {
  border: 0; background: none; color: var(--cf-muted); font-size: 12.5px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.cf-dr-clear:hover { color: var(--cf-danger); }

/* ---- Barra de filtros de listado ------------------------------------------- */
body.cf-ui2 .cf-filtros { margin-bottom: var(--cf-gap); }
body.cf-ui2 .cf-filtros .row { align-items: center; }
body.cf-ui2 .cf-filtros section.col { padding-bottom: 0; }
/* la fecha ocupa el ancho que necesita, no el de su columna */
body.cf-ui2 .cf-filtros .cf-dr { width: 100%; }
body.cf-ui2 .cf-filtros .cf-dr-trigger { width: 100%; justify-content: flex-start; }

/* ---- Pestañas internas: mismo lenguaje que el menú lateral ------------------
   Barra negra con texto claro; la pestaña activa en azul de marca. Aplica a las
   pestañas de Residentes/Propietarios/Vehículos, Gastos comunes, etc.          */
body.cf-ui2 .nav-tabs {
  background: var(--cf-nav); border: 0; display: flex; flex-wrap: wrap;
  margin: 0 0 var(--cf-gap); padding: 0;
}
body.cf-ui2 .tab-v1 .nav-tabs { border: 0; }
body.cf-ui2 .nav-tabs > li { margin: 0; float: none; }
body.cf-ui2 .nav-tabs > li > a {
  color: var(--cf-nav-txt); background: transparent; border: 0; margin: 0;
  padding: 12px 18px; font-size: 13px; font-weight: 600; line-height: 1.2;
  border-bottom: 3px solid transparent; display: flex; align-items: center; gap: 8px;
  transition: background .12s ease, color .12s ease;
}
body.cf-ui2 .nav-tabs > li > a:hover,
body.cf-ui2 .nav-tabs > li > a:focus {
  background: var(--cf-nav-2); color: #fff; border-bottom-color: var(--cf-nav-line);
}
body.cf-ui2 .nav-tabs > li.active > a,
body.cf-ui2 .nav-tabs > li.active > a:hover,
body.cf-ui2 .nav-tabs > li.active > a:focus {
  background: var(--cf-accent); color: #fff; border: 0;
  border-bottom: 3px solid var(--cf-accent-dk); font-weight: 700;
}
body.cf-ui2 .nav-tabs > li > a > i { opacity: .9; }
/* el contenido de la pestaña ya no lleva marco propio: la barra lo delimita */
body.cf-ui2 .tab-v1 .tab-content,
body.cf-ui2 .nav-tabs + .tab-content { border: 0 !important; box-shadow: none; padding: 0 !important; }
@media (max-width: 760px) {
  body.cf-ui2 .nav-tabs { overflow-x: auto; flex-wrap: nowrap; }
  body.cf-ui2 .nav-tabs > li > a { white-space: nowrap; padding: 11px 14px; }
}

/* ---- Ventanas emergentes ---------------------------------------------------
   Mismo lenguaje que el resto: cabecera negra, cuerpo en fichas de dato y pie
   claro con las acciones a la derecha. Sirve para los modales propios
   (.cf-modal) y armoniza los de Bootstrap (.modal) que usan otras vistas.    */
.cf-modal {
  display: none; position: fixed; inset: 0; z-index: 10000;
  background: rgba(16, 24, 40, .55); padding: 24px 16px; overflow-y: auto;
}
.cf-modal.is-open { display: block; animation: cfFade .12s ease-out; }
body.cf-modal-abierto { overflow: hidden; }
@keyframes cfFade { from { opacity: 0; } to { opacity: 1; } }

.cf-modal-card {
  background: #fff; width: 100%; max-width: 560px; margin: 6vh auto;
  border: 1px solid var(--cf-border); box-shadow: 0 24px 60px rgba(16, 24, 40, .35);
  animation: cfSubir .14s ease-out;
}
@keyframes cfSubir { from { transform: translateY(8px); } to { transform: none; } }

.cf-modal-head {
  display: flex; align-items: center; gap: 10px;
  background: var(--cf-nav); color: #fff; padding: 13px 20px;
}
.cf-modal-head > i { color: var(--cf-accent); font-size: 15px; }
.cf-modal-head h4 {
  flex: 1 1 auto; margin: 0; color: #fff; font-size: 13.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
}
.cf-modal-close {
  background: none; border: 0; color: var(--cf-nav-txt); font-size: 22px;
  line-height: 1; cursor: pointer; padding: 0 2px;
}
.cf-modal-close:hover { color: #fff; }

.cf-modal-body { padding: 0 20px; }
.cf-modal-foot {
  display: flex; justify-content: flex-end; align-items: center; gap: 10px;
  padding: 14px 20px; background: #fbfcfe; border-top: 1px solid var(--cf-border);
}
.cf-modal-foot form { margin: 0; }

/* Ficha de datos: etiqueta discreta a la izquierda, valor destacado a la derecha */
.cf-datalist { display: grid; grid-template-columns: 38% 1fr; margin: 0; }
.cf-datalist dt, .cf-datalist dd {
  margin: 0; padding: 11px 0; border-bottom: 1px solid var(--cf-border); min-width: 0;
}
.cf-datalist dt {
  color: var(--cf-muted); font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; padding-right: 12px;
  display: flex; align-items: center;
}
.cf-datalist dd {
  color: var(--cf-ink); font-size: 13.5px; font-weight: 500;
  overflow-wrap: anywhere; display: flex; align-items: center;
}
.cf-datalist > :nth-last-child(-n+2) { border-bottom: 0; }

/* Modales de Bootstrap: misma cabecera y pie que los propios */
body.cf-ui2 .modal-content { border: 1px solid var(--cf-border); box-shadow: 0 24px 60px rgba(16,24,40,.35); }
body.cf-ui2 .modal-header {
  background: var(--cf-nav); color: #fff; padding: 13px 20px; border-bottom: 0;
}
body.cf-ui2 .modal-header .modal-title {
  color: #fff; font-size: 13.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
}
body.cf-ui2 .modal-header .close {
  color: var(--cf-nav-txt); opacity: 1; text-shadow: none; font-size: 22px; margin-top: -2px;
}
body.cf-ui2 .modal-header .close:hover { color: #fff; }
body.cf-ui2 .modal-body { padding: 20px; }
body.cf-ui2 .modal-footer {
  background: #fbfcfe; border-top: 1px solid var(--cf-border); padding: 14px 20px;
}

@media (max-width: 560px) {
  .cf-modal { padding: 0; }
  .cf-modal-card { margin: 0; max-width: none; min-height: 100%; border: 0; }
  .cf-datalist { grid-template-columns: 1fr; }
  .cf-datalist dt { padding-bottom: 0; border-bottom: 0; }
  .cf-datalist dd { padding-top: 4px; }
  .cf-modal-foot { position: sticky; bottom: 0; }
}

/* ---- Paginador ------------------------------------------------------------- */
body.cf-ui2 .cf-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-top: var(--cf-gap); padding-top: 14px;
  border-top: 1px solid var(--cf-border); text-align: left;
  /* varias vistas envuelven el paginador en un contenedor que lo encoge
     (text-center, celdas, columnas): se fuerza el ancho completo */
  width: 100% !important; min-width: 0; float: none !important; clear: both;
}
body.cf-ui2 .cf-pager-size,
body.cf-ui2 .cf-pager-goto {
  display: flex; align-items: center; gap: 8px; margin: 0; flex-wrap: wrap;
}
body.cf-ui2 .cf-pager label {
  margin: 0; font-size: 12.5px; font-weight: 600; color: var(--cf-muted);
  text-transform: none; letter-spacing: 0;
}
body.cf-ui2 .cf-pager select,
body.cf-ui2 .cf-pager input[type="number"] {
  height: 32px; padding: 4px 8px; font-size: 13px; width: auto; min-width: 62px;
}
body.cf-ui2 .cf-pager input[type="number"] { width: 72px; text-align: center; }
body.cf-ui2 .cf-pager .btn-sm { height: 32px; min-height: 32px; padding: 4px 12px; }
body.cf-ui2 .cf-pager-info { font-size: 12.5px; color: var(--cf-muted); white-space: nowrap; }
body.cf-ui2 .cf-pager .pagination { margin: 0; }
body.cf-ui2 .cf-pager-links > li > a,
body.cf-ui2 .cf-pager-links > li > span { min-width: 34px; text-align: center; }
body.cf-ui2 .cf-pager-gap > span {
  border: 0 !important; background: transparent !important; color: var(--cf-muted); padding: 7px 4px;
}
body.cf-ui2 .cf-pager .pagination > .disabled > span { color: #c4cad4; background: #fbfcfe; }

/* ---- Barra de herramientas: filtros y acciones en UNA fila ------------------
   Antes cada listado gastaba tres filas (buscador, botón suelto, acciones).   */
body.cf-ui2 .cf-toolbar-row {
  /* stretch en la fila + center dentro de cada bloque: filtros y acciones
     comparten exactamente la misma línea, sin desfase de unos pocos píxeles */
  display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap;
  margin: 0 0 var(--cf-gap);
}
body.cf-ui2 .cf-toolbar-row > form {
  flex: 1 1 auto; margin: 0 !important; display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap; min-width: 0;
}
body.cf-ui2 .cf-toolbar-row .cf-toolbar-actions {
  display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap;
}
/* Todo lo que vive en la barra comparte el mismo alto y la misma línea */
body.cf-ui2 .cf-toolbar-row .btn,
body.cf-ui2 .cf-toolbar-row .form-control,
body.cf-ui2 .cf-toolbar-row input[type="text"],
body.cf-ui2 .cf-toolbar-row select,
body.cf-ui2 .cf-toolbar-row .ts-control,
body.cf-ui2 .cf-toolbar-row .cf-dr-trigger {
  height: var(--cf-ctrl-h); min-height: var(--cf-ctrl-h); box-sizing: border-box;
}
body.cf-ui2 .cf-toolbar-row .btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding-top: 0; padding-bottom: 0; margin: 0;
}
body.cf-ui2 .cf-toolbar-row label { margin: 0; display: block; }
body.cf-ui2 .cf-toolbar-row .cf-toolbar-actions .btn,
body.cf-ui2 .cf-toolbar-row .cf-toolbar-actions .btn-group { margin: 0 !important; float: none !important; }
body.cf-ui2 .cf-toolbar-row .cf-toolbar-actions > a { margin: 0; }

/* dentro de la barra los controles van uno al lado del otro, sin gutters */
body.cf-ui2 .cf-toolbar-row form fieldset,
body.cf-ui2 .cf-toolbar-row form .row,
body.cf-ui2 .cf-toolbar-row form .row > div:not([class*="col-"]) {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 !important; padding: 0 !important; width: 100%;
}
body.cf-ui2 .cf-toolbar-row form fieldset,
body.cf-ui2 .cf-toolbar-row form .row,
body.cf-ui2 .cf-toolbar-row form .row > div:not([class*="col-"]) { justify-content: flex-start; }
body.cf-ui2 .cf-toolbar-row form section.col,
body.cf-ui2 .cf-toolbar-row form .row > [class*="col-"] {
  float: none; padding: 0 !important; margin: 0 !important; width: auto !important;
  flex: 1 1 190px; min-width: 150px; max-width: 320px; text-align: left !important;
}
/* sin líneas fantasma: la barra mide exactamente lo que miden sus controles */
body.cf-ui2 .cf-toolbar-row form,
body.cf-ui2 .cf-toolbar-row form .row,
body.cf-ui2 .cf-toolbar-row form fieldset,
body.cf-ui2 .cf-toolbar-row form .row > div:not([class*="col-"]) { line-height: 1; min-height: 0; }
/* filas de filtros consecutivas: se juntan en vez de apilarse con aire */
body.cf-ui2 .cf-toolbar-row form > .row + .row,
body.cf-ui2 .cf-toolbar-row form fieldset > .row + .row { margin-top: 10px !important; }
body.cf-ui2 .cf-toolbar-row .cf-filtro-busqueda { flex: 1 1 260px; min-width: 200px; max-width: 340px; }
body.cf-ui2 .cf-toolbar-row .cf-filtro-accion { flex: 0 0 auto; min-width: 0; }
body.cf-ui2 .cf-toolbar-row .cf-filtro-accion .btn { white-space: nowrap; }
body.cf-ui2 .cf-toolbar-row .cf-dr { width: auto; }
body.cf-ui2 .cf-toolbar-row .cf-dr-trigger { width: auto; min-width: 210px; }
/* utilidades de separación que sobran dentro de la barra */
body.cf-ui2 .cf-toolbar-row [class*="margin-top-"],
body.cf-ui2 .cf-toolbar-row [class*="margin-bottom-"] { margin-top: 0 !important; margin-bottom: 0 !important; }

@media (max-width: 760px) {
  body.cf-ui2 .cf-toolbar-row > form { width: 100%; }
  body.cf-ui2 .cf-toolbar-row .cf-toolbar-actions { margin-left: 0; width: 100%; }
  body.cf-ui2 .cf-toolbar-row .cf-filtro-busqueda,
  body.cf-ui2 .cf-toolbar-row .cf-filtro-accion,
  body.cf-ui2 .cf-toolbar-row .cf-toolbar-actions .btn,
  body.cf-ui2 .cf-toolbar-row .cf-toolbar-actions .btn-group { width: 100% !important; max-width: none; }
}

/* ---- Estado vacío ---------------------------------------------------------- */
body.cf-ui2 .cf-empty {
  text-align: center; color: var(--cf-muted); padding: 34px 20px !important; font-size: 13.5px;
}
body.cf-ui2 .cf-empty i { display: block; font-size: 22px; color: #c4cad4; margin-bottom: 8px; }

/* ---- Tabla con cabecera negra ---------------------------------------------- */
body.cf-ui2 .table > thead > tr > th {
  background: var(--cf-nav); color: #fff; border-bottom: 0;
  font-size: 11.5px; letter-spacing: .5px;
}
body.cf-ui2 .table > thead > tr > th a { color: #fff; }
body.cf-ui2 th.cf-sortable::after { color: #7d8899; }
body.cf-ui2 th.cf-sortable:hover { color: #fff; background: var(--cf-nav-2); }
body.cf-ui2 th.cf-sortable:hover::after { color: #c4ccd8; }
body.cf-ui2 th.cf-sort-asc::after, body.cf-ui2 th.cf-sort-desc::after { color: #fff; }
body.cf-ui2 .cf-card-table > .table > thead > tr > th:first-child { padding-left: var(--cf-pad); }

@media (max-width: 760px) {
  body.cf-ui2 .cf-filtros .btn-primary { width: 100%; justify-content: center; }
  body.cf-ui2 .cf-pagehead-actions .btn-group,
  body.cf-ui2 .cf-pagehead-actions .btn-group .btn { width: 100%; }
  .cf-dr-panel { min-width: 0; width: calc(100vw - 32px); left: 0; }
  .cf-dr-months { flex-direction: column; gap: 10px; }
  .cf-dr-month:nth-child(2) { display: none; }
  body.cf-ui2 .cf-pagehead { align-items: flex-start; }
  body.cf-ui2 .cf-pagehead-actions { width: 100%; }
}

/* ============================================================================
   RESPONSIVE — el riel se vuelve cajón (drawer) < 992px
   ============================================================================ */
@media (max-width: 1279px) {
  /* pares 7/5 y 8/4 pasan a ancho completo antes de que el gráfico se estreche */
  .cf-w7, .cf-w5, .cf-w8, .cf-w4 { grid-column: span 12; }
}
@media (max-width: 991px) {
  .cf-navtoggle { display: inline-block; }
  .cf-w6, .cf-w3 { grid-column: span 12; }
  .cf-header .cf-logo { width: auto; flex: 0 0 auto; padding: 0 14px; border-right: 0; justify-content: flex-start; }
  .tab-v3 > .col-sm-2,
  .col-sm-2:has(> .nav.nav-pills.nav-stacked) {
    transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 12px 40px rgba(0,0,0,.3);
  }
  body.cf-nav-open .tab-v3 > .col-sm-2,
  body.cf-nav-open .col-sm-2:has(> .nav.nav-pills.nav-stacked) { transform: translateX(0); }
  body.cf-nav-open .cf-overlay { display: block; }
  .tab-v3 > .col-sm-10,
  .col-sm-2:has(> .nav.nav-pills.nav-stacked) + .col-sm-10 { margin-left: 0; padding: 16px 14px 32px; }
  .cf-kpis { grid-template-columns: repeat(2, 1fr); }
  .cf-header .cf-topbar .cf-building { display: none; }
}
@media (max-width: 560px) {
  .cf-kpis { grid-template-columns: 1fr; }
  .cf-header .cf-user .cf-uname { display: none; }
}

/* ============================================================================
   Exportación de tarjetas (cf-export.js) — botones JPG / Excel / PDF en la
   cabecera de cada .cf-card. Estética cuadrada, como el resto del tema.
   ============================================================================ */
.cf-card-head .cf-export {
  margin-left: auto;
  display: inline-flex;
  gap: 4px;
  flex: 0 0 auto;
}
.cf-card-head .cf-export-btn {
  border: 1px solid var(--cf-border);
  background: transparent;
  color: var(--cf-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  line-height: 1;
  padding: 5px 8px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.cf-card-head .cf-export-btn:hover,
.cf-card-head .cf-export-btn:focus {
  background: var(--cf-accent, #1e90ff);
  border-color: var(--cf-accent, #1e90ff);
  color: #fff;
  outline: none;
}
.cf-card-head .cf-export-btn:active { background: #1466c0; border-color: #1466c0; }

@media print { .cf-card-head .cf-export { display: none; } }

@media (max-width: 640px) {
  .cf-card-head .cf-export-btn { padding: 4px 6px; font-size: 9px; }
}

/* ============================================================================
   SELECTOR DE EDIFICIO (pantalla previa al portal, user/validate.blade.php)
   Vive sobre layout_login, cuyo .container mide 320px: una tabla no cabe. El
   ancho se amplia solo aqui, con .container.cf-pick, para no tocar el login.
   ============================================================================ */
.container.cf-pick { max-width: 880px; border: 0; padding: 0; }
.cf-pick .overlay {
  background: var(--cf-card);
  border: 1px solid var(--cf-border);
  box-shadow: var(--cf-shadow);
  padding: var(--cf-pad);
}
/* Encabezado: el logo ancla a la izquierda y el titulo a la derecha, sobre la
   misma linea y separados de la tabla por un filete. Apilados se veian como
   dos bloques sueltos flotando en una tarjeta ancha. */
.cf-pick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cf-gap);
  padding-bottom: 14px;
  margin-bottom: var(--cf-gap);
  border-bottom: 1px solid var(--cf-border);
}
/* img.logo mide 70% del contenedor: en el login son 320px y da ~200, pero aqui
   el contenedor es de 880 y saldria de 616. Se acota a su tamano real. */
.cf-pick-head img.logo { width: auto; max-width: 170px; flex: none; }
.cf-pick-head .header {
  margin: 0;
  text-align: right;
  color: var(--cf-ink);
  font-size: 20px;
  font-weight: 600;
}
/* En pantalla angosta no caben lado a lado: se apilan centrados. */
@media (max-width: 560px) {
  .cf-pick-head { flex-direction: column; text-align: center; }
  .cf-pick-head .header { text-align: center; }
}
.cf-pick-search { position: relative; margin-bottom: 12px; }
.cf-pick-search .fa {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cf-muted);
  pointer-events: none;
}
.cf-pick-search input { padding-left: 32px; }
/* La lista completa puede ser larga: se desplaza dentro de su marco y el
   encabezado queda fijo, en vez de estirar la pagina. */
.cf-pick-table { max-height: 60vh; overflow: auto; border: 1px solid var(--cf-border); }
.cf-pick-table .table { border: 0; }
.cf-pick-table thead th { position: sticky; top: 0; z-index: 1; }
/* El nombre del edificio: es un <button> por el POST, pero se lee como enlace. */
.cf-pick-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--cf-accent);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.cf-pick-link:hover, .cf-pick-link:focus { color: var(--cf-accent-dk); text-decoration: underline; }
.cf-pick-link:focus { outline: 2px solid var(--cf-accent-sf); outline-offset: 2px; }
.cf-pick-empty { padding: 14px 2px 0; margin: 0; color: var(--cf-muted); }
/* Filas ocultas por el buscador. */
.cf-pick-table tr[hidden] { display: none !important; }