/* ============================================================
   Editorial theme — Calendario Liberatured
   REM-14: rebrand pedido por el usuario ("CSS/look and feel muy
   'Boilerplate Claude', siempre negro+khaki+cafe doradito, no me
   gusta") -- portado look & feel + tipografia REAL de
   https://www.daveandnathosting.com/ (autorizacion expresa del
   usuario para navegarlo), verificado via Playwright/getComputedStyle
   contra el sitio real, no adivinado:
     - Tipografia: Marcellus (titulos/display), Wix Madefor Text
       (cuerpo), Marmelad (botones/etiquetas) -- las 3 son Google
       Fonts reales, cargadas via fonts.googleapis.com.
     - Paleta: blanco/negro/crema minimalista (D&N NO usa
       mostaza/oliva/terracota en su UI -- el color viene solo de
       las fotos, el chrome de la pagina es monocromatico). Los
       nombres de las variables --mustard/--olive/--terra/--sage se
       CONSERVAN (para no tener que tocar cada blade que ya los usa)
       pero sus VALORES cambian a tonos neutros de tinta/carbon.
     - Colores SEMANTICOS (--ok/--ko/--warn/--blue: exito/error/
       alerta/info) NO se tocan -- son funcionales, no de marca.
   ============================================================ */

:root {
  --bg:         #ffffff;
  --bg-warm:    #f6f5f2;
  --card-bg:    #ffffff;
  --ink:        #232323;
  --ink-soft:   #5e5e5e;
  --ink-faint:  #b0b0b0;
  --mustard:    #e777aa;
  --mustard-dk: #b72f6d;
  --olive:      #736dea;
  --olive-dk:   #544ed6;
  --terra:      #5e5e5e;
  --terra-soft: #dddddd;
  --sage:       #717171;
  --rule:       #dddddd;
  --rule-soft:  #ebebeb;
  --ok:         #00aa30;
  --ok-bg:      #d9f2e0;
  /* A11Y-02: texto verde sobre --ok-bg (avisos, insignias, chips): --ok daba 2.6:1; mismo tono, mas hondo (= --hoy-ok-t / --ops-ok-t). */
  --ok-t:       #0b7a2e;
  --ko:         #d22200;
  --ko-bg:      #fbdcd4;
  --warn:       #cea821;
  --warn-bg:    #fdf3d3;
  --ghost:      #f7f7f7;
  --blue:       #736dea;
  --blue-bg:    #e4e2fb;
  /* DESK-09: texto sobre un fondo de la marca (violeta): blanco en claro; en oscuro la marca se aclara y el texto va oscuro. */
  --sobre-marca: #ffffff;
  /* DESK-09: texto sobre un fondo de tinta (var(--ink)): blanco en claro; en oscuro la tinta es clara y el texto va oscuro. */
  --sobre-tinta: #ffffff;
  /* DARK-01: cabecera de modales y del cajon del menu (barra de tinta con texto blanco en claro). tema-oscuro.css la vuelve
     superficie oscura con texto claro: con la tinta clara del oscuro quedaba una barra gris con el titulo blanco invisible. */
  --cabeza-fondo: var(--ink);
  --cabeza-tinta: #ffffff;
  --cabeza-relleno: rgba(255, 255, 255, 0.12);
  --cabeza-relleno-fuerte: rgba(255, 255, 255, 0.22);

  /* Movimiento (UX-2026-09 UX-F1-01, skills /apple y /animate, docs/kb/ux-2026-09/movimiento.md).
     UNICA fuente de curvas y duraciones del panel: no inventar otras.
     ease-out fuerte para entrar/salir, ease-in-out para mover en pantalla, curva de cajon estilo iOS;
     'ease' (color/fondo) es la de hover. Nunca curva de arranque lento. UI siempre < 300ms. */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-color:  ease;
  --dur-press:   120ms;  /* presionar un boton */
  --dur-pop:     180ms;  /* popovers, tooltips, flechas */
  --dur-panel:   240ms;  /* modales, paneles */
  --dur-drawer:  280ms;  /* cajon del menu */
}

* { box-sizing: border-box; }
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Epilogue', 'Epilogue Fallback', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .display-font {
  font-family: 'Epilogue', 'Epilogue Fallback', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.display-font { font-style: italic; }
h1 em, .display-em { font-style: italic; color: var(--ink); }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--ink-soft); text-decoration: underline; }

code, pre, .mono { font-family: ui-monospace, 'JetBrains Mono', Menlo, monospace; font-size: 0.88em; }

hr { border: 0; border-top: 1px solid var(--rule); margin: 20px 0; }

/* ============================================================
   Layout primitives
   ============================================================ */

.top-bar {
  background: var(--card-bg);
  border-bottom: 1px solid var(--rule);
  padding: 14px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.top-bar a.back { color: var(--ink); font-weight: 500; font-size: 0.9rem; }
.top-bar a.back:hover { color: var(--mustard-dk); }
.top-bar .brand { font-family: 'Epilogue', 'Epilogue Fallback', serif; font-size: 1.1rem; font-weight: 500; letter-spacing: -0.01em; }
.pms-brand-logo { height: 26px; width: auto; display: block; filter: invert(1); }
@media (max-width: 576px) { .pms-brand-logo { height: 22px; } }
.top-bar .brand em { font-style: italic; color: var(--mustard); }
.top-bar .user { color: var(--ink-soft); font-size: 0.85rem; }
.top-bar nav { display: flex; gap: 6px; align-items: center; }
.top-bar nav a {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.top-bar nav a:hover { background: var(--ghost); color: var(--ink); }
.top-bar nav a.active { background: var(--ink); color: var(--sobre-tinta); }

.masthead {
  padding: 44px 28px 20px;
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid var(--rule);
  gap: 20px;
  flex-wrap: wrap;
}
.masthead .eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mustard-dk);
  margin-bottom: 10px;
  font-weight: 600;
}
.masthead h1 {
  font-size: 2.8rem;
  line-height: 1;
  margin: 0;
}
.masthead .kpis {
  color: var(--ink-soft);
  font-size: 0.9rem;
  text-align: right;
  min-width: 160px;
}
.masthead .kpis .kpi-label { color: var(--ink-faint); font-size: 0.78rem; }
.masthead .kpis b { color: var(--ink); font-weight: 600; }

/* REM-31 (usuario, 2026-08-06): "en el espacio verde quiero ver
   metricas" -- tira de KPIs de portafolio en el masthead, a la derecha
   del titulo (mismo <div style="display:flex; justify-content:
   space-between"> que .masthead ya trae). */
.pms-header-metrics {
  display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap;
  justify-content: flex-end; position: relative;
}
.pms-header-metric { display: flex; flex-direction: column; align-items: flex-end; min-width: 90px; }
.pms-header-metric-label { font-size: 0.7rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.pms-header-metric-value { font-size: 1.4rem; line-height: 1.2; color: var(--ink); }
.pms-header-metric-range { position: absolute; top: -16px; right: 0; font-size: 0.68rem; color: var(--ink-faint); }
@media (max-width: 900px) {
  .pms-header-metrics { justify-content: flex-start; gap: 16px; }
  .pms-header-metric { align-items: flex-start; }
  .pms-header-metric-range { position: static; margin-bottom: 4px; width: 100%; }
}

.tabbar {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  gap: 4px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.tabbar button, .tabbar .tab-link {
  background: none;
  border: 0;
  font-family: 'Epilogue', 'Epilogue Fallback', sans-serif;
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--ink-soft);
  padding: 14px 18px 12px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.tabbar button .count, .tabbar .tab-link .count {
  background: var(--ghost);
  color: var(--ink-soft);
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  margin-left: 6px;
}
.tabbar button.active, .tabbar .tab-link.active {
  color: var(--ink);
  border-bottom-color: var(--mustard);
}
.tabbar button.active .count, .tabbar .tab-link.active .count {
  background: var(--mustard);
  color: var(--sobre-marca);
}
.tabbar .spacer { flex: 1; }
.tabbar .pill-btn {
  background: var(--olive);
  color: var(--sobre-marca);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 0.8rem;
  margin-bottom: 8px;
  border: 0;
  cursor: pointer;
}
.tabbar .pill-btn:hover { background: var(--olive-dk); }

.page {
  max-width: 1240px;
  margin: 0 auto;
  padding: 30px 28px 80px;
}

.page-narrow {
  max-width: 820px;
  margin: 0 auto;
  padding: 30px 28px 80px;
}

/* UX-2026-09 UX-F2-01: pantallas de gestion con tabla. Usan el ancho de .page (1240px) en vez de
   los 820px de .page-narrow, que en escritorio partia palabras y apilaba acciones. .page-narrow
   se queda para formularios y lectura. */
.page-tabla {
  margin: 0 auto;
  padding-top: 4px;
}

/* F7-05 (usuario, 2026-08-20): ".page-full" ya existia como patron
   probado (AppLayout::$fullWidth) pero SOLO vivia en unified-inbox.css
   (cargado nomas en /inbox) -- generico de verdad (desactiva el
   max-width de .page para cualquier pagina full-width), pertenece aqui
   junto a .page/.page-narrow, no en un CSS de una sola pantalla. */
.page.page-full {
  max-width: none;
  padding-left: 20px;
  padding-right: 20px;
}

/* ============================================================
   Buttons
   ============================================================ */

/* Consistencia visual 2026-08-18 (V0.1): REEMPLAZA el boton REM-14
   (outline negro/mayusculas, portado del sitio VIEJO daveandnathosting.com
   pre-reskin -- ya no coincide con nada, /sitio actual usa un gradiente
   rosa solido). Mismo gradiente y forma que .pms-site-btn-primary de
   /sitio (public/css/site.css): relleno solido, sin mayusculas forzadas,
   sin letter-spacing exagerado. */
.btn-action, .btn.btn-primary, .btn.btn-dark {
  border: 0;
  background: linear-gradient(135deg, var(--mustard) 0%, var(--mustard-dk) 100%);
  color: var(--sobre-marca) !important;
  border-radius: 999px;
  padding: 8px 20px;
  font-size: 0.85rem;
  font-family: 'Epilogue', 'Epilogue Fallback', sans-serif;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.btn-action:hover, .btn.btn-primary:hover, .btn.btn-dark:hover {
  opacity: .92;
  color: var(--sobre-marca) !important;
}

.btn-ghost, .btn.btn-outline-primary, .btn.btn-outline-secondary, .btn.btn-outline-dark {
  border: 1.5px solid var(--rule);
  background: transparent;
  color: var(--ink) !important;
  border-radius: 999px;
  padding: 7px 18px;
  font-size: 0.82rem;
  font-family: 'Epilogue', 'Epilogue Fallback', sans-serif;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
}
.btn-ghost:hover, .btn.btn-outline-primary:hover, .btn.btn-outline-secondary:hover, .btn.btn-outline-dark:hover {
  background: var(--ghost);
  color: var(--ink) !important;
  border-color: var(--ink);
}

.btn.btn-success {
  background: var(--olive) !important;
  border-color: var(--olive) !important;
  color: var(--sobre-marca) !important;
  border-radius: 999px !important;
}
.btn.btn-success:hover { background: var(--olive-dk) !important; border-color: var(--olive-dk) !important; }

/* Hallazgo real (V1.06): a diferencia de .btn-ghost/.btn-outline-primary
   (que si declaran border:1.5px solid), esta regla solo traia
   border-color -- sin Bootstrap real cargado en el proyecto no hay ningun
   border-style base que lo herede, asi que "Borrar" se veia como texto
   rojo plano en vez de pildora outline. */
.btn.btn-danger, .btn.btn-outline-danger {
  border: 1.5px solid var(--ko) !important;
  color: var(--ko) !important;
  background: transparent !important;
  border-radius: 999px !important;
}
.btn.btn-danger { background: var(--ko) !important; color: var(--sobre-marca) !important; }
.btn.btn-danger:hover { background: #8b2f1e !important; }
.btn.btn-outline-danger:hover { background: var(--ko-bg) !important; }

.btn.btn-warning {
  background: var(--mustard) !important;
  border-color: var(--mustard) !important;
  color: var(--sobre-marca) !important;
  border-radius: 999px !important;
}
.btn.btn-warning:hover { background: var(--mustard-dk) !important; }

.btn.btn-sm, .btn-ghost.btn-sm, .btn-action.btn-sm { padding: 4px 12px; font-size: 0.8rem; }
.btn.btn-lg { padding: 12px 26px; font-size: 1rem; }

/* ============================================================
   Cards
   ============================================================ */

/* Consistencia visual 2026-08-18 (V0.1): mismo lenguaje de card que
   /sitio (public/css/site.css .pms-site-property-card/.pms-site-
   testimonial--v2) -- sombra suave real en vez de box-shadow:none
   forzado, radio mas grande, sin borde duro. Es la clase .card/
   .editorial-card de Bootstrap, reusada en 53 vistas blade de todo el
   proyecto -- este cambio se propaga solo a todas ellas. */
.card, .editorial-card {
  background: var(--card-bg);
  /* FIX de regresion real (3 forks paralelos la encontraron
     independientemente: property editor tabs basic-info/address/
     amenities): "border: none !important" es un shorthand -- ademas de
     border-style, TAMBIEN resetea border-color a su valor inicial
     (currentColor) con el MISMO !important en los 4 lados. Eso hacia
     imposible que la regla de acento de abajo (border-left-color:
     transparent, sin !important a proposito) le ganara nunca -- todas
     las cards del sitio mostraban una barra izquierda oscura de 4px
     aunque nunca pidieran ningun acento. Fix: longhands individuales
     (style/width) en vez del shorthand "border", para nunca tocar
     border-color aqui. */
  border-style: none !important;
  border-width: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 4px rgba(30, 25, 60, .08), 0 1px 2px rgba(0, 0, 0, .04) !important;
}
/* Consistencia visual -- hallazgo real (V1.11): al menos 13 vistas
   (whatsapp/lines, quejas, finanzas, sat, sat/efirma, y la mayoria de
   operaciones/*) usan class="card editorial-card" style="border-color: X"
   para pintar un acento de color en banners de error/exito/advertencia --
   funcionaba porque el .card de antes tenia border:1px solid !important
   (solo el canal de color quedaba libre para el inline). Con border:none
   !important arriba, border-style queda "none" y ningun border-color
   inline puede pintar nada, sin importar el valor. Fix: dejar el borde
   IZQUIERDO con style/width forzados (never !important en el color), asi
   cualquier inline border-color de esas 13 vistas se aplica solo ahi --
   mismo patron de "barra de acento" que ya usa
   calendar/partials/reservation-detail.blade.php a mano. Sin esto, .card
   sin ningun border-color inline se ve exactamente igual (acento
   transparente = invisible).

   FIX de un bug real introducido en el primer intento de este mismo
   arreglo (hallado por 2 forks paralelos, property editor tabs
   basic-info/address): "border: none !important" de arriba NO es solo
   "border-style: none" -- es un shorthand que TAMBIEN resetea
   border-color a su valor inicial (currentColor) con el MISMO
   !important, en los 4 lados. Un "border-left-color: transparent" sin
   !important despues nunca podia ganarle a ese !important heredado del
   shorthand -- resultado: TODAS las cards del sitio (no solo las 13 con
   acento intencional) mostraban una barra izquierda oscura
   (currentColor) de 4px, incluidas las que nunca pidieron ningun acento.
   Fix real: usar propiedades longhand individuales (nunca el shorthand
   "border"/"border-left") para que border-color nunca se toque
   implicitamente -- asi border-left-color puede quedar como la UNICA
   declaracion sin !important de todo este bloque, y un inline
   style="border-color: X" (no importante) SI le gana, mientras
   width/style siguen forzados. */
.card, .editorial-card {
  border-left-style: solid !important;
  border-left-width: 4px !important;
  border-left-color: transparent;
}
.card-header, .editorial-card .card-header {
  background: var(--bg-warm) !important;
  border-bottom: 1px solid var(--rule-soft) !important;
  border-radius: 16px 16px 0 0 !important;
  font-family: 'Epilogue', 'Epilogue Fallback', serif;
  font-weight: 500;
  color: var(--ink);
  padding: 12px 18px !important;
}
.card-body { padding: 18px !important; color: var(--ink); }
.card-footer {
  background: var(--bg-warm) !important;
  border-top: 1px solid var(--rule) !important;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

/* ============================================================
   Forms
   ============================================================ */

.form-label, label {
  font-weight: 500;
  color: var(--ink);
  font-size: 0.85rem;
  margin-bottom: 4px;
}

.wiz-form-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mustard-dk);
  margin-bottom: 6px;
  font-weight: 700;
}

/* REM (usuario, 2026-08-10): fix de ancho -- excepcion puntual a
   "editorial.css copiado sin modificar" (ver layouts/editorial.blade.php),
   autorizada explicitamente para esta correccion. Sin width:100% los
   inputs nativos usaban su ancho intrinseco (~20 caracteres) en vez de
   llenar la celda de .admin-form-grid (admin.css, CSS grid con
   minmax(0,1fr) que SI dimensiona bien la celda) -- efecto: cajas
   chiquitas con espacio en blanco enorme a la derecha, reportado via
   captura de pantalla en el modal "Editar template" de
   /operaciones/templates-hostaway. input[type=color] queda FUERA de
   este selector a proposito (no esta listado abajo), asi que el swatch
   de color no se estira -- ver admin.css para el override defensivo
   adicional. */
.form-control, .form-select, input[type=text], input[type=email], input[type=password],
input[type=number], input[type=date], input[type=time], textarea, select {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--rule) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  background: var(--card-bg) !important;
  color: var(--ink) !important;
  font-family: inherit;
  font-size: 0.95rem !important;
  box-shadow: none !important;
}
.form-control:focus, .form-select:focus, textarea:focus, input:focus {
  border-color: var(--mustard) !important;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12) !important;
  outline: 0;
}
/* Consistencia visual (V1.09): .small-muted se usa en 12 vistas
   (los 9 tabs del editor de propiedad, change-request-show,
   calendar-date-modal y el PDF de CFDI) para texto secundario/ayuda
   junto a inputs y tarjetas de resumen, pero la clase nunca tuvo
   definicion en ningun CSS del proyecto (verificado: 0 matches en
   git log -S de todos los .css) -- se veia como texto negro plano
   del tamano normal del body, igual de prominente que el contenido
   principal, en vez del texto gris chico de apoyo que su nombre y su
   uso (junto a .form-text/.text-muted en el resto del sitio)
   claramente piden. Mismo token que .form-text/.text-muted, nunca
   uno nuevo. */
.small-muted, .form-text, .text-muted { color: var(--ink-soft) !important; font-size: 0.82rem; }
.form-check-input { accent-color: var(--olive); }
.form-switch .form-check-input:checked { background-color: var(--olive) !important; border-color: var(--olive) !important; }

input:disabled, select:disabled, textarea:disabled, .form-control:disabled {
  background: var(--ghost) !important;
  color: var(--ink-faint) !important;
}

.input-group-text {
  background: var(--ghost) !important;
  border: 1px solid var(--rule) !important;
  color: var(--ink-soft) !important;
  border-radius: 8px !important;
}

/* ============================================================
   Tables
   ============================================================ */

.table, table {
  background: var(--card-bg);
  border-collapse: collapse;
  width: 100%;
}
.table th, table th {
  background: var(--ghost);
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid var(--rule);
  padding: 8px 10px;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-align: left;
  vertical-align: middle;
}
.table td, table td {
  border-bottom: 1px solid var(--rule);
  padding: 8px 10px;
  font-size: 0.88rem;
  color: var(--ink);
  vertical-align: middle;
}
.table tbody tr:hover { background: var(--bg-warm); }
.table-sm th, .table-sm td { padding: 5px 8px !important; font-size: 0.82rem !important; }
table.fin-table { table-layout: fixed; width: 100%; font-size: 0.82rem; }
table.fin-table th, table.fin-table td { padding: 8px 10px; vertical-align: top; word-wrap: break-word; }
table.fin-table th { font-size: 0.7rem; letter-spacing: 0.02em; font-weight: 600; text-transform: none; white-space: nowrap; }
table.fin-table th.client-col { background: var(--ok-bg); color: var(--ok); }
table.fin-table th.host-col   { background: var(--ko-bg); color: var(--ko); }
table.fin-table th.num, table.fin-table td.num { text-align: center; }
table.fin-table td code { font-size: 0.78rem; background: var(--ghost); padding: 1px 6px; border-radius: 4px; }
table.fin-table .cell-sub { font-size: 0.72rem; color: var(--ink-soft); margin-top: 2px; line-height: 1.3; }
table.fin-table .cell-sub.neg { color: var(--ko); }
table.fin-table td.cli-stack { background: #f7fbf5; }
table.fin-table td.host-stack { background: #fdf6f3; }
table.fin-table tr.prop-header td { background: var(--bg-warm); font-weight: 600; font-family: 'Epilogue', 'Epilogue Fallback', serif; }
table.fin-table tr.prop-header td.cli-stack  { background: #e9f3e3; }
table.fin-table tr.prop-header td.host-stack { background: #f3dcd3; }
/* Column widths: sum to 100% */
table.fin-table col.c-res  { width: 11%; }
table.fin-table col.c-gst  { width: 18%; }
table.fin-table col.c-n    { width: 5%; }
table.fin-table col.c-cli  { width: 17%; }
table.fin-table col.c-host { width: 17%; }
table.fin-table col.c-usd  { width: 10%; }
table.fin-table col.c-fx   { width: 7%; }
table.fin-table col.c-mxn  { width: 15%; }

/* Columnas de /admin/properties (V1.01) -- sin <col> antes, table-layout:
   fixed repartia el ancho ~parejo entre 6 columnas y la de Acciones (3
   botones: Ficha completa/Editar/Borrar) quedaba tan angosta que cada
   boton caia en su propia linea, ilegible. */
table.fin-table col.c-prop-icon { width: 6%; }
table.fin-table col.c-prop-name { width: 24%; }
table.fin-table col.c-prop-host { width: 13%; }
table.fin-table col.c-prop-addr { width: 27%; }
table.fin-table col.c-prop-code { width: 12%; }
table.fin-table col.c-prop-actions { width: 18%; }
/* UX-F2-03: la celda sigue siendo celda de tabla (display:flex la sacaba del layout de la fila y su
   borde inferior no alineaba). Botones a la derecha, separados, y pueden bajar de linea si no caben. */
table.fin-table td[data-label="Acciones"] { text-align: right; }
table.fin-table td[data-label="Acciones"] .btn { white-space: nowrap; margin: 2px 0 2px 6px; }

/* Fix real 2026-08-31: table.fin-table td[data-label="Acciones"] arriba
   (pensada solo para /admin/propiedades) queda SIN scope -- cualquier
   .fin-table con una celda data-label="Acciones" la hereda. display:flex
   directo en un <td> lo saca del algoritmo de layout de tabla (deja de
   comportarse como table-cell), y en /admin/propietarios eso hacia que
   la celda de Acciones se desbordara sobre Salvedades cuando esa fila
   tenia el textarea de edicion abierto -- reportado en vivo por Amaury.
   .owners-table ya envuelve sus botones en un div flex propio (ver
   livewire/admin/owners/index.blade.php), asi que aqui solo se
   restaura el comportamiento normal de celda. */
table.fin-table.owners-table td[data-label="Acciones"] {
  display: table-cell;
}

.money, .num { font-variant-numeric: tabular-nums; font-family: ui-monospace, monospace; }
.money { text-align: right; }

/* ============================================================
   Chips / badges
   ============================================================ */

.chip {
  display: inline-block;
  background: var(--ghost);
  color: var(--ink-soft);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  margin: 2px 3px 2px 0;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.chip-olive   { background: var(--olive); color: var(--sobre-marca); }
.chip-mustard { background: var(--mustard); color: var(--sobre-marca); }
.chip-terra   { background: var(--terra); color: var(--sobre-marca); }
.chip-ghost   { background: var(--ghost); color: var(--ink-soft); }
.chip-ok      { background: var(--ok-bg); color: var(--ok-t); }
.chip-ko      { background: var(--ko-bg); color: var(--ko); }
.chip-warn    { background: var(--warn-bg); color: var(--warn); }
.chip-blue    { background: var(--blue-bg); color: var(--blue); }

.badge, .bs-badge {
  background: var(--ghost) !important;
  color: var(--ink-soft) !important;
  font-weight: 500 !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.02em;
}
.badge.bg-success, .badge.text-bg-success { background: var(--ok-bg) !important; color: var(--ok-t) !important; }
.badge.bg-danger,  .badge.text-bg-danger  { background: var(--ko-bg) !important; color: var(--ko) !important; }
.badge.bg-warning, .badge.text-bg-warning { background: var(--warn-bg) !important; color: var(--warn) !important; }
.badge.bg-info,    .badge.text-bg-info    { background: var(--blue-bg) !important; color: var(--blue) !important; }
.badge.bg-primary, .badge.text-bg-primary { background: var(--ink) !important; color: var(--sobre-tinta) !important; }
/* Consistencia visual (V1.01): bg-secondary era la unica variante de
   .badge con relleno solido oscuro -- las demas (ok/danger/warning/info)
   son pastel suave + texto de color. Es el badge "Sin configurar" que
   domina /admin/properties (119/130 propiedades) -- con fondo solido se
   leia como una alerta, cuando es un estado neutro. */
.badge.bg-secondary { background: var(--ghost) !important; color: var(--ink-soft) !important; }

/* ============================================================
   Switch toggle
   ============================================================ */

.switch {
  display: inline-block;
  width: 36px; height: 20px;
  background: var(--rule);
  border-radius: 20px;
  position: relative;
  cursor: pointer;
  transition: background-color var(--dur-pop) var(--ease-color);
}
.switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--card-bg);
  border-radius: 50%;
  transition: transform var(--dur-pop) var(--ease-out);
}
.switch.on { background: var(--olive); }
.switch.on::after { transform: translateX(16px); }

/* ============================================================
   Alerts
   ============================================================ */

.alert {
  border-radius: 10px !important;
  border: 1px solid var(--rule) !important;
  padding: 12px 16px !important;
}
.alert-info, .alert-primary { background: var(--blue-bg) !important; color: var(--blue) !important; border-color: var(--blue) !important; }
.alert-warning { background: var(--warn-bg) !important; color: var(--warn) !important; border-color: var(--mustard) !important; }
.alert-danger  { background: var(--ko-bg) !important; color: var(--ko) !important; border-color: var(--ko) !important; }
.alert-success { background: var(--ok-bg) !important; color: var(--ok-t) !important; border-color: var(--ok) !important; }

/* ============================================================
   Nav tabs (bootstrap tabs → editorial)
   ============================================================ */

.nav.nav-tabs {
  border-bottom: 1px solid var(--rule) !important;
  gap: 4px;
}
.nav.nav-tabs .nav-link {
  border: 0 !important;
  color: var(--ink-soft) !important;
  padding: 10px 16px !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  font-weight: 500;
  border-radius: 0 !important;
}
.nav.nav-tabs .nav-link.active {
  color: var(--ink) !important;
  border-bottom-color: var(--mustard) !important;
  background: transparent !important;
}
.nav.nav-tabs .nav-link:hover { color: var(--ink) !important; background: var(--bg-warm) !important; }

.nav.nav-pills .nav-link {
  color: var(--ink-soft);
  border-radius: 999px !important;
  padding: 6px 14px !important;
}
.nav.nav-pills .nav-link.active {
  background: var(--ink) !important;
  color: var(--sobre-tinta) !important;
}

/* ============================================================
   Modals
   ============================================================ */

.modal-content {
  background: var(--bg) !important;
  border: 0 !important;
  border-radius: 18px !important;
  overflow: hidden;
}
.modal-header {
  background: var(--cabeza-fondo) !important;
  color: var(--cabeza-tinta) !important;
  border-radius: 0 !important;
  padding: 18px 24px !important;
  border: 0 !important;
  /* FIX real (REM-12): faltaba display:flex -- el bloque de titulo y el
     boton de cerrar se apilaban uno debajo del otro (bloque + bloque),
     el boton quedaba como una cajita suelta debajo de los badges en vez
     de a la derecha del titulo. Reportado por el usuario como "no tiene
     como cerrarse" (el boton SI funcionaba, wire:click intacto, pero
     visualmente parecia parte rota del layout, no una X reconocible). */
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.modal-header h5, .modal-title {
  font-family: 'Epilogue', 'Epilogue Fallback', serif !important;
  font-weight: 500 !important;
  font-size: 1.3rem !important;
  margin: 0;
  color: var(--cabeza-tinta) !important;
}
/* Hallazgo real (V1.21, /operaciones/templates-hostaway): .btn-close
   es un <button class="btn-close">&times;</button> con texto literal
   (no un icono SVG de Bootstrap real, este proyecto no carga Bootstrap)
   -- sin tamano/forma propios, renderizaba a ~9px con fuente de 15px,
   practicamente invisible junto al titulo del modal. El filter:invert(1)
   de abajo asumia un icono tipo Bootstrap; sobre texto plano tambien
   invierte cualquier fondo que se le agregue, asi que se reemplaza por
   color:#fff directo (mismo patron que .pms-modal-close, un boton
   circular de 34x34 que YA existe en el proyecto para el mismo caso). */
.modal-header .btn-close {
  color: var(--cabeza-tinta);
  opacity: 0.8;
  width: 34px; height: 34px; min-width: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  line-height: 1;
  background: var(--cabeza-relleno);
  flex-shrink: 0;
}
.modal-header .btn-close:hover { opacity: 1; background: var(--cabeza-relleno-fuerte); }

.pms-guest-avatar {
  width: 88px; height: 88px; border-radius: 50%; object-fit: cover;
  border: 3px solid rgba(255,255,255,0.35); flex-shrink: 0; background: var(--card-bg);
  transition: transform var(--dur-pop) var(--ease-out);
}
.pms-modal-close {
  background: var(--cabeza-relleno); border: 0; color: var(--cabeza-tinta);
  width: 34px; height: 34px; min-width: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; cursor: pointer; flex-shrink: 0;
}
.pms-modal-close:hover { background: var(--cabeza-relleno-fuerte); }
.modal-body { padding: 22px 24px !important; background: var(--bg); }
.modal-footer {
  padding: 14px 24px !important;
  border-top: 1px solid var(--rule) !important;
  background: var(--card-bg) !important;
}

/* ============================================================
   Bubble (WhatsApp preview)
   ============================================================ */

.bubble-wrap { padding: 14px; background: #efe8dc; border-radius: 10px; }
.bubble {
  background: #d9fdd3;
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 10px 10px 10px 2px;
  white-space: pre-wrap;
  max-width: 440px;
  font-size: 0.88rem;
  line-height: 1.45;
  box-shadow: 0 1px 1px rgba(0,0,0,0.08);
  font-family: 'Segoe UI', Roboto, sans-serif;
  word-wrap: break-word;
}

/* ============================================================
   Empty state
   ============================================================ */

.empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--ink-soft);
  background: var(--card-bg);
  border: 1px dashed var(--rule);
  border-radius: 14px;
}
.empty .display-font, .empty h3 {
  font-size: 1.5rem;
  color: var(--ink);
  display: block;
  margin-bottom: 8px;
}

/* ============================================================
   Rows (active, contact, list item)
   ============================================================ */

.row-item {
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 10px;
}

.active-row {
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: 14px;
  align-items: center;
}
.active-row .icon-cell { font-size: 1.5rem; }
.active-row .title { font-weight: 600; font-size: 1rem; }
.active-row .meta { color: var(--ink-soft); font-size: 0.82rem; }

/* ============================================================
   Utility
   ============================================================ */

.ink        { color: var(--ink) !important; }
.ink-soft   { color: var(--ink-soft) !important; }
.ink-faint  { color: var(--ink-faint) !important; }
.mustard    { color: var(--mustard) !important; }
.mustard-dk { color: var(--mustard-dk) !important; }
.olive      { color: var(--olive) !important; }
.terra      { color: var(--terra) !important; }
.ok         { color: var(--ok) !important; }
.ko         { color: var(--ko) !important; }

.bg-cream { background: var(--bg) !important; }
.bg-warm  { background: var(--bg-warm) !important; }
.bg-white { background: var(--card-bg) !important; }
.bg-ink   { background: var(--ink) !important; color: var(--sobre-tinta) !important; }

.rule      { border-top: 1px solid var(--rule); }
.rule-soft { border-top: 1px solid var(--rule-soft); }

.small, small { font-size: 0.82rem; }
.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mustard-dk);
  font-weight: 600;
}

/* Consistencia visual -- hallazgo real (V1.33, /finanzas): .stat (usado
   tambien en rendimiento y home/supervision) seguia el borde duro
   pre-reskin, inconsistente con .card ya arreglado. Mismo lenguaje real
   de /sitio (sombra suave, radio 16, sin borde duro) + mismo patron de
   acento de borde izquierdo para el unico uso con color dinamico
   (finance-dashboard.blade.php linea 544, style="border-color: X"). */
.stat {
  background: var(--card-bg);
  border-style: none !important;
  border-width: 0 !important;
  border-left-style: solid !important;
  border-left-width: 4px !important;
  border-left-color: transparent;
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(30, 25, 60, .08), 0 1px 2px rgba(0, 0, 0, .04);
  padding: 18px;
}
.stat .stat-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.stat .stat-value {
  font-family: 'Epilogue', 'Epilogue Fallback', serif;
  font-size: 2rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.1;
  margin-top: 4px;
}
.stat .stat-sub { font-size: 0.82rem; color: var(--ink-soft); margin-top: 4px; }

/* Dropdowns */
.dropdown-menu {
  border: 1px solid var(--rule) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(26,22,18,0.08) !important;
  background: var(--card-bg) !important;
}
.dropdown-item { color: var(--ink) !important; padding: 8px 14px !important; }
.dropdown-item:hover { background: var(--bg-warm) !important; color: var(--ink) !important; }

/* Scrollbar (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
::-webkit-scrollbar-track { background: transparent; }

/* Progress */
.progress {
  background: var(--ghost) !important;
  border-radius: 999px !important;
  height: 10px !important;
}
.progress-bar { background: var(--olive) !important; border-radius: 999px !important; }

/* Spinner */
.spinner-border { color: var(--mustard) !important; }

/* ============================================================
   Responsive tweaks
   ============================================================ */

@media (max-width: 720px) {
  .masthead { padding: 28px 18px 14px; }
  .masthead h1 { font-size: 2rem; }
  .tabbar, .page, .page-narrow { padding-left: 14px !important; padding-right: 14px !important; }
  .active-row { grid-template-columns: 28px 1fr; }
  .active-row > :nth-child(3), .active-row > :nth-child(4) { grid-column: 2; justify-self: start; }
}

/* ============================================================
   HOMOLOGACIÓN DE MENÚ + RESPONSIVE MÓVIL  (2026-05-31)
   - Menú canónico (_topbar.html) compacto en móvil
   - Tablas anchas con scroll horizontal (arregla iPhone SE)
   ============================================================ */

/* Menú: en móvil solo iconos; si aún no caben, scroll horizontal */
@media (max-width: 576px) {
  .top-bar { padding: 10px 14px; }
  .top-bar .brand { font-size: 1rem; }
  .top-bar .user { display: none; }
  .top-bar nav {
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .top-bar nav a { padding: 6px 9px; flex: 0 0 auto; }
  .top-bar nav a .lbl { display: none; }
}

/* Tablas anchas (.fin-table): en pantallas chicas NO comprimir.
   El bug del iPhone SE era table-layout:fixed + width:100% (línea ~362):
   forzaba la tabla a caber en el viewport y partía el texto carácter
   por carácter. Aquí la dejamos crecer y que .table-responsive scrollee. */
@media (max-width: 720px) {
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-responsive > table.fin-table,
  .table-responsive > table.table {
    table-layout: auto !important;
    width: auto !important;
    min-width: 640px;
  }
  table.fin-table th, table.fin-table td {
    white-space: nowrap;
    overflow-wrap: normal;
    word-wrap: normal;
    word-break: normal;
  }
  .masthead h1 { font-size: 1.7rem; }
}

/* Sin scroll horizontal accidental de toda la página
   (cada tabla scrollea dentro de su .table-responsive) */
@media (max-width: 720px) {
  html, body { max-width: 100%; overflow-x: hidden; }
}

/* REM-27: paginacion real (Laravel default view republicada y portada
   a este sistema, ver resources/views/vendor/pagination/tailwind.blade.php) */
.pms-pagination { margin-top: 16px; }
.pms-pagination-compact { display: flex; justify-content: space-between; gap: 10px; }
.pms-pagination-full { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.pms-pagination-count { color: var(--ink-soft); font-size: 0.85rem; margin: 0; }
.pms-pagination-links { display: flex; flex-wrap: wrap; gap: 4px; }
.pms-pagination-dots { padding: 6px 10px; color: var(--ink-faint); font-size: 0.85rem; }

/* ── REM-31 — bell + panel de notificaciones (topbar) ──────────────────── */
.pms-notif { position: relative; display: inline-flex; align-items: center; margin: 0 4px; }
.pms-notif-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: 1.05rem;
  cursor: pointer;
  border-radius: 999px;
}
.pms-notif-bell:hover { background: var(--ghost); }
.pms-notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--ko);
  color: var(--sobre-marca);
  font-size: 0.62rem;
  line-height: 16px;
  text-align: center;
  font-weight: 700;
}
.pms-notif-panel {
  display: none;
  position: absolute;
  top: 44px;
  right: 0;
  width: 320px;
  max-width: calc(100vw - 24px);
  max-height: 420px;
  overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid var(--rule);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 200;
}
.pms-notif-panel.show { display: block; }
/* UX-F4-01 (/apple §7, /animate): el panel nace de la campana (esquina superior derecha) y se va por el
   mismo camino; transition (no keyframes) porque se abre y cierra seguido. */
.pms-notif-panel {
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: scale(0.96);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity var(--dur-press) var(--ease-out), transform var(--dur-press) var(--ease-out), visibility 0s linear var(--dur-press);
}
.pms-notif-panel.show {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity var(--dur-pop) var(--ease-out), transform var(--dur-pop) var(--ease-out), visibility 0s;
}
.pms-notif-panel-header {
  padding: 10px 14px;
  font-family: 'Epilogue', 'Epilogue Fallback', serif;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
.pms-notif-item {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule-soft);
  text-decoration: none;
  color: var(--ink);
}
.pms-notif-item:hover { background: var(--ghost); }
.pms-notif-item-icon { margin-top: 3px; color: var(--sage); flex-shrink: 0; }
.pms-notif-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pms-notif-item-body strong { font-size: 0.82rem; font-weight: 600; }
.pms-notif-item-body span {
  font-size: 0.78rem;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pms-notif-item-body small { font-size: 0.68rem; color: var(--ink-faint); }
.pms-notif-empty { padding: 18px 14px; color: var(--ink-faint); font-size: 0.82rem; text-align: center; }

@media (max-width: 600px) {
  .pms-notif-panel { position: fixed; top: 56px; right: 8px; left: 8px; width: auto; }
}

/* ── REM-31 seguimiento (usuario, 2026-08-06): toast no aparecia en
   mobile. Hallazgo real: SweetAlert2 usa z-index:1060 por default para
   .swal2-container -- COLISION EXACTA con .pms-drawer-overlay
   (mobile.css, tambien z-index:1060). En empate, el orden en el DOM
   decide, pero el toast se inyecta dinamicamente muy tarde y en algunos
   navegadores moviles el overlay del drawer (aunque estuviera oculto,
   opacity:0/visibility:hidden) ganaba el stacking context. Fuerza el
   toast muy por encima de CUALQUIER overlay mobile (max real en este
   proyecto: 1070, .pms-drawer). ────────────────────────────────────── */
.swal2-container { z-index: 99999 !important; }

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  vertical-align: -0.15em;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.material-symbols-outlined.spin-icon { animation: ms-spin 1s linear infinite; }
@keyframes ms-spin { to { transform: rotate(360deg); } }


/* ============================================================
   UX-2026-09 UX-F1-01 — movimiento reducido y alto contraste
   (/apple §14, /animate paso 7; docs/kb/ux-2026-09/movimiento.md)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* Menos y mas suave, no cero: se quedan los cambios de opacidad y color que ayudan a
     entender; se va todo lo que desplaza, escala o gira. */
  *, *::before, *::after {
    transition-property: opacity, color, background-color, border-color, outline-color, box-shadow !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .material-symbols-outlined.spin-icon { animation: none !important; }
}

@media (prefers-contrast: more) {
  .card, .editorial-card { border: 1px solid var(--ink) !important; }
  .btn-ghost, .btn.btn-outline-primary, .btn.btn-outline-secondary, .btn.btn-outline-dark,
  .btn.btn-outline-danger, .form-control, .form-select { border-color: var(--ink) !important; }
  .top-bar { border-bottom: 1px solid var(--ink); }
}

/* ============================================================
   UX-2026-09 UX-F1-02 — respuesta al presionar (/apple §1: feedback en pointer-down)
   Todo lo que se presiona contesta en el acto. Botones y pildoras se hunden un poco
   (0.97, nunca menos); filas de lista cambian de fondo sin esperar. Sin cambios en reposo.
   ============================================================ */
.btn, .btn-ghost, .btn-action, .pill-btn, .pms-panel-toggle-btn, .pms-panel-reset-btn,
.pms-menu-toggle, .pms-notif-bell, .pms-modal-close, .pms-drawer-close {
  transition: transform var(--dur-press) var(--ease-out),
              background-color var(--dur-pop) var(--ease-color),
              color var(--dur-pop) var(--ease-color),
              border-color var(--dur-pop) var(--ease-color),
              opacity var(--dur-pop) var(--ease-color);
}
.btn:active:not(:disabled), .btn-ghost:active:not(:disabled), .btn-action:active:not(:disabled),
.pill-btn:active:not(:disabled), .pms-panel-toggle-btn:active, .pms-panel-reset-btn:active,
.pms-menu-toggle:active, .pms-notif-bell:active, .pms-modal-close:active, .pms-drawer-close:active {
  transform: scale(0.97);
}
/* Filas: el fondo cambia AL PRESIONAR, sin transicion (la de hover no debe retrasar el pointer-down). */
.wa-conv:active, .pms-list-row:active, .pms-airbnb-conv:active, .pms-drawer-item a:active,
.pms-notif-item:active {
  background: var(--bg-warm);
  transition-duration: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .btn:active, .btn-ghost:active, .btn-action:active, .pill-btn:active, .pms-panel-toggle-btn:active,
  .pms-panel-reset-btn:active, .pms-menu-toggle:active, .pms-notif-bell:active, .pms-modal-close:active,
  .pms-drawer-close:active { transform: none !important; opacity: 0.85; }
}

/* ============================================================
   UX-2026-09 UX-F1-03 — foco visible con teclado (/apple §16 Flexibility)
   Anillo de la marca SOLO al navegar con teclado (:focus-visible); el clic con mouse
   no lo muestra. :where() deja la especificidad en 0 para no pisar el foco propio de
   los campos (borde tinta). Filas clicables: tabindex=0 + role=button + Enter/Espacio
   en la vista (sin Alpine por fila).
   ============================================================ */
:where(a, button, summary, [tabindex], [role="button"], .btn, .btn-ghost):focus-visible {
  outline: 2px solid var(--olive);
  outline-offset: 2px;
}
:where(.wa-conv, .pms-list-row, .pms-airbnb-conv):focus-visible {
  outline-offset: -2px;
  background: var(--bg-warm);
}

/* ============================================================
   UX-2026-09 UX-F1-04 — tipografia (/apple §15)
   ============================================================ */
/* Un boton nunca hereda la fuente de su celda: habia .btn-danger en ui-monospace dentro de tablas. */
.btn, .btn-action, .btn-ghost { font-family: 'Epilogue', 'Epilogue Fallback', system-ui, sans-serif; }
/* Tracking por tamano: lo grande se aprieta un poco; el cuerpo queda en 0. */
.masthead h1, .masthead h2 { letter-spacing: -0.02em; line-height: 1.1; }
/* Cifras que se leen en columna: todas del mismo ancho. */
table.fin-table td, .pms-inbox-time, .pms-airbnb-conv-time, .pms-side-pane-count { font-variant-numeric: tabular-nums; }
/* Correos en tablas: texto normal que parte en cualquier punto, no codigo monoespaciado. */
td.pms-email { overflow-wrap: anywhere; }

/* UX-2026-09 UX-F2-01: un chip o badge nunca se parte en dos lineas ("Administrado/r"). */
.badge, .bs-badge, .pms-channel-chip { white-space: nowrap; }

/* UX-2026-09 UX-F2-02: encabezado de tarjeta que ya solo trae controles (el titulo vive en la pagina).
   Busqueda y boton en una fila a la derecha; la busqueda no ocupa todo el ancho. En movil siguen las
   reglas de mobile.css (ancho completo, una fila cada uno). */
.pms-card-controles > div { flex-wrap: nowrap; }
.pms-card-controles .form-control, .pms-card-controles input[type=text] { width: 320px; max-width: 100%; }
body.is-mobile .pms-card-controles > div { flex-wrap: wrap; }

/* ============================================================
   UX-2026-09 UX-F2-03 — acciones destructivas discretas (/apple §16 Agency; una accion primaria)
   En filas: pildora outline roja con icono, igual de tamano y tipografia que EDITAR (.btn-ghost).
   El rojo solido se reserva para el boton que CONFIRMA dentro del dialogo.
   ============================================================ */
.btn.btn-outline-danger {
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.btn > .material-symbols-outlined:first-child {
  font-size: 1.1em;
  vertical-align: -0.2em;
  margin-right: 0.25em;
}

/* ============================================================
   UX-2026-09 UX-F2-04 — cifras que caben (/rendimiento)
   "$457,855.09" medía 170px en una caja de 130px y se salía de su tarjeta.
   ============================================================ */
/* (la regla de tamano vive en el <style> de la vista, que carga despues de este archivo) */
table.rem-ranking th[role="button"] { cursor: pointer; }

/* ============================================================
   UX-2026-09 UX-F3-01 — el boton avisa que esta trabajando (/apple §16 feedback de estado)
   data-trabajando lo pone el script del layout si la respuesta tarda > 150ms. Sin clics dobles.
   ============================================================ */
[data-trabajando] {
  opacity: 0.6;
  cursor: progress;
  pointer-events: none;
}
[data-trabajando]::before {
  content: 'progress_activity';
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 1.1em;
  line-height: 1;
  display: inline-block;
  vertical-align: -0.2em;
  margin-right: 0.3em;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  animation: ms-spin 1s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  [data-trabajando]::before { animation: none; }
}

/* ============================================================
   UX-2026-09 UX-F4-01 — transiciones de Alpine con los tokens (/animate pasos 4-6)
   Entrar con --ease-out; salir por el mismo camino y un poco mas rapido. Nunca ease-in, nunca scale(0).
   Popovers usan el origin del disparador (Tailwind origin-*); modales van centrados (exentos).
   ============================================================ */
.pms-t-pop { transition: opacity var(--dur-pop) var(--ease-out), transform var(--dur-pop) var(--ease-out); }
.pms-t-pop-salida { transition: opacity var(--dur-press) var(--ease-out), transform var(--dur-press) var(--ease-out); }
.pms-t-oculto-pop { opacity: 0; transform: scale(0.96); }
.pms-t-panel { transition: opacity var(--dur-panel) var(--ease-out), transform var(--dur-panel) var(--ease-out); }
.pms-t-panel-salida { transition: opacity var(--dur-pop) var(--ease-out), transform var(--dur-pop) var(--ease-out); }
.pms-t-oculto-panel { opacity: 0; transform: translateY(8px) scale(0.97); }
.pms-t-fondo { transition: opacity var(--dur-panel) var(--ease-out); }
.pms-t-fondo-salida { transition: opacity var(--dur-pop) var(--ease-out); }
.pms-t-fade { transition: opacity var(--dur-pop) var(--ease-out); }
.pms-t-fade-salida { transition: opacity var(--dur-pop) var(--ease-out); }
.pms-t-transparente { opacity: 0; }
.pms-t-visible { opacity: 1; transform: none; }

/* UX-F5-01: el respaldo de avatar tambien vive fuera de la bandeja (detalle de reserva del calendario). */
.pms-avatar-respaldo { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--olive); color: var(--sobre-marca); font-weight: 600; }
.pms-guest-avatar.pms-avatar-respaldo { font-size: 2rem; }