/* ============================================================
   app-shell.css (UX-02, PARIDAD-2026-10) -- armazon de app del panel.
   Se carga DESPUES de editorial.css/mobile.css/admin-components.css y no cambia ningun color:
   usa los tokens de editorial.css (--ink, --rule-soft, --bg-warm, --ease-out...). Lo nuevo va con --app-.
   Criterio /apple: material translucido con sombra solo cuando hay contenido debajo, titulo grande,
   respuesta en pointer-down, prefers-reduced-motion / -transparency / -contrast.
   Diseno y medicion: docs/worklists/findings/PARIDAD-2026-10/ux-app/README.md (UX-02).
   ============================================================ */
:root {
  --app-material: rgba(255, 255, 255, 0.74);
  --app-blur: saturate(180%) blur(20px);
  --app-sombra-cabecera: 0 1px 0 var(--rule-soft), 0 8px 20px -14px rgba(0, 0, 0, 0.35);
  /* DARK-01: superficies que flotan (hoja, inspector, modal centrado, buscador) y rellenos sobre ellas, como tokens: claro =
     los valores fijos de siempre; tema-oscuro.css los redefine (antes la hoja quedaba blanca con texto claro en oscuro). */
  --app-material-hoja: rgba(255, 255, 255, 0.94);
  --app-material-barra: rgba(255, 255, 255, 0.95);
  --app-material-busca: rgba(255, 255, 255, 0.92);
  --app-relleno-suave: rgba(0, 0, 0, 0.05);
  --app-relleno: rgba(0, 0, 0, 0.06);
  --app-relleno-fuerte: rgba(0, 0, 0, 0.1);
  --app-velo: rgba(26, 22, 18, 0.32);
  --app-sombra-inspector: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 18px 50px -12px rgba(30, 25, 60, 0.28);
  --app-sombra-modal: 0 24px 64px -16px rgba(30, 25, 60, 0.35);
  --app-sombra-tarjeta: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 16px 40px -12px rgba(30, 25, 60, 0.3);
  /* UX-03: alto de la barra inferior (< 1024 px) y ancho de la lateral (>= 1024 px); 0 sin navegacion. */
  --app-tab-h: 0px;
  --app-side-w: 0px;
  /* /apple 1: la respuesta al presionar dura 100 ms (antes 120); aplica tambien a los botones de UX-F1-02. */
  --dur-press: 100ms;
}

/* ---------- cabecera fija ----------
   El contenedor de @persist no dibuja caja (display: contents) para que .top-bar sea, en la practica,
   hija de <body> y position: sticky funcione contra el scroll de la pagina. El material va en ::before:
   un backdrop-filter en la propia barra volveria a .top-bar el bloque contenedor de todo lo fixed que
   lleva adentro (el panel de Avisos) y lo recortaria a la altura de la barra. */
[x-persist="app-cabecera"] { display: contents; }
.app .top-bar {
  position: sticky; top: 0; z-index: 40;
  background: transparent; border-bottom: 0;
  transition: box-shadow 160ms linear;
}
.app .top-bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--app-material);
  -webkit-backdrop-filter: var(--app-blur); backdrop-filter: var(--app-blur);
}
.app .top-bar.is-scrolled { box-shadow: var(--app-sombra-cabecera); }
/* overflow-x: hidden en html/body (editorial.css <= 720 px, mobile.css .is-mobile) vuelve a body un
   contenedor de scroll y apaga sticky; clip corta igual sin crear contenedor. */
@media (max-width: 720px) { html, body.app { overflow-x: clip; } }
body.app.is-mobile { overflow-x: clip; }
/* iOS instalada (viewport-fit=cover): el area segura de arriba la cubre la cabecera, no el body. */
body.app.is-ios { padding-top: 0; }
/* UX-12: la app instalada ya gira (orientation: any). Con el telefono acostado, la muesca queda a un lado: cabecera y
   contenido se apartan de ella (0 en vertical, en tableta y en escritorio). La barra inferior ya lo hace por su cuenta. */
body.app { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
/* Lo que se pegaba arriba ahora se pega debajo de la cabecera. */
.app .kb-sidebar { top: calc(65px + 20px); }
/* Un mapa Leaflet (z-index 400-1000 interno) no debe pasar por encima de la cabecera al hacer scroll. */
.app .leaflet-container { z-index: 0; }

/* ---------- area de contenido: hueco listo para la barra inferior (UX-03) ---------- */
.app main.page, .app main.page-narrow { padding-bottom: calc(80px + var(--app-tab-h) + env(safe-area-inset-bottom)); }
body.app.is-mobile main.page { padding-bottom: calc(60px + var(--app-tab-h) + env(safe-area-inset-bottom)); }

/* ---------- titulo grande (sustituye al .masthead de revista) ---------- */
.app-titulo {
  max-width: 1240px; margin: 0 auto; padding: 22px 28px 0;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 20px;
}
.app-titulo > div { width: 100%; }
.app-titulo + main.page, .app-titulo + main.page-narrow { padding-top: 16px; }
.app-titulo-h1 {
  margin: 0; color: var(--ink);
  font-family: "Epilogue", "Epilogue Fallback", system-ui, sans-serif; font-weight: 600;
  font-size: clamp(1.75rem, 1.35rem + 1.2vw, 2.25rem); line-height: 1.08; letter-spacing: -0.022em;
  font-optical-sizing: auto;
}
.app-titulo-sub { color: var(--ink-soft); font-weight: 400; }
@media (max-width: 720px) { .app-titulo { padding: 14px 14px 0; } }
body.app.is-mobile .app-titulo { padding: 14px 14px 0; }
.app-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Telefono: cuando el titulo grande ya salio de la pantalla, la cabecera dice en que pantalla estas (iOS).
   La barra no se parte en dos renglones: la seccion se recorta con puntos suspensivos. */
body.app.is-mobile .top-bar { flex-wrap: nowrap; }
body.app.is-mobile .top-bar .pms-menu-toggle { min-width: 0; flex: 0 1 auto; }
body.app.is-mobile .pms-seccion-actual { display: inline-block; max-width: 28vw; opacity: 0; transition: opacity 160ms linear; }
html.app-titulo-fuera body.app.is-mobile .pms-seccion-actual { opacity: 1; }

/* ---------- respuesta en pointer-down ---------- */
.press, .segmented-control button, .segmented-control .segmented-option, button.chip, a.chip {
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-pop) var(--ease-color), color var(--dur-pop) var(--ease-color);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.press:active:not(:disabled), .segmented-control button:active:not(:disabled),
.segmented-control .segmented-option:active, button.chip:active, a.chip:active { transform: scale(0.97); }
.press-fila:active, .pms-drawer-accordion > summary:active { background: var(--bg-warm); transition-duration: 0s; }

/* ---------- navegacion persistente (UX-03) ----------
   Barra inferior < 1024 px (destinos con 'tab' en config/menu.php + "Más" = el cajon) y, en >= 1024 px, el rail de
   DESK-02 (desk.css). Las dos viven en @persist junto a la cabecera, fuera de .top-bar. */
.app-lateral, .app-tabs { display: none; }
.app-cuenta {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--olive-dk); color: var(--sobre-marca); font-size: 0.72rem; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.app-cuenta[hidden] { display: none; }
.pms-drawer-item a .app-cuenta { margin-left: auto; }
.pms-drawer-item a.active .app-cuenta { background: var(--card-bg); color: var(--ink); }
.app-tab:focus-visible, .app-lateral a:focus-visible, .app-lateral button:focus-visible { outline: 2px solid var(--olive-dk); outline-offset: -2px; }

@media (max-width: 1023.98px) {
  body.app-con-nav { --app-tab-h: 58px; }
  .app-tabs {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    height: calc(var(--app-tab-h) + env(safe-area-inset-bottom));
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: var(--app-material); -webkit-backdrop-filter: var(--app-blur); backdrop-filter: var(--app-blur);
    box-shadow: 0 -1px 0 var(--rule-soft);
  }
  .app-tab {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-width: 0; min-height: 48px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
    color: var(--ink-soft); font-family: "Epilogue", "Epilogue Fallback", system-ui, sans-serif; font-size: 0.75rem; font-weight: 500;
    line-height: 1.1; letter-spacing: 0.01em; text-decoration: none;
  }
  .app-tab-lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-tab-ico {
    display: grid; place-items: center; width: 52px; height: 30px; border-radius: 999px;
    transition: background-color var(--dur-pop) var(--ease-color), color var(--dur-pop) var(--ease-color);
  }
  .app-tab-ico .material-symbols-outlined { font-size: 1.4rem; }
  .app-tab.active, .app-tab[aria-expanded="true"] { color: var(--ink); font-weight: 600; }
  .app-tab.active .app-tab-ico { background: var(--ink); color: var(--sobre-tinta); }
  .app-tab.active .material-symbols-outlined { font-variation-settings: "FILL" 1; }
  .app-tab[aria-expanded="true"] .app-tab-ico { background: var(--rule-soft); }
  .app-tab .app-cuenta { position: absolute; top: 3px; left: calc(50% + 8px); box-shadow: 0 0 0 2px var(--card-bg); }
  /* La bandeja mide su alto contra la ventana: le quita el de la barra para que el redactor no quede debajo.
     UX-15: llena exacto hasta la barra de pestanas (12 px de aire, como el calendario): --app-inbox-top es donde empieza, lo
     mide app-shell.js (la cabecera de cada look y la tarjeta cambian); antes de medir, el calculo de siempre. La pagina no
     gana scroll por el relleno de abajo. */
  body.app-con-nav .pms-inbox { height: calc(100vh - 180px - var(--app-tab-h) - env(safe-area-inset-bottom)); }
  html[style*="--app-inbox-top"] body.app-con-nav .pms-inbox { height: calc(100dvh - var(--app-inbox-top) - var(--app-tab-h) - env(safe-area-inset-bottom) - 12px); }
  body.app-con-nav main.page:has(.pms-inbox) { padding-bottom: calc(var(--app-tab-h) + env(safe-area-inset-bottom) + 12px); }

  /* UX-15: la barra se esconde al bajar y vuelve al subir (app-shell.js, 8). Solo transform: no mueve nada.
     app-barra-hueco = lo que se desliza es un contenedor y la pagina estaba arriba (la bandeja): la pagina gana el alto de la
     barra al fondo y app-shell.js la desliza ese alto (un scroll: nada cambia de acomodo); la bandeja crece lo mismo. */
  .app .top-bar { transition: box-shadow 160ms linear, transform 300ms cubic-bezier(.32, .72, 0, 1); }
  html.app-barra-oculta .app .top-bar { transform: translateY(calc(-100% - 16px)); box-shadow: none; }
  html.app-barra-hueco body.app-con-nav { padding-bottom: var(--app-barra-h, 64px); }
  html.app-barra-hueco[style*="--app-inbox-top"] body.app-con-nav .pms-inbox { height: calc(100dvh - var(--app-inbox-top) - var(--app-tab-h) - env(safe-area-inset-bottom) - 12px + var(--app-barra-h, 64px)); }
}

/* UX-15 / DARK-01: acciones de la tarjeta de reserva (x-app.tarjeta-reserva) en TODOS los anchos: una principal (Abrir chat)
   y las demas iguales entre si, sin mayusculas forzadas ni texto partido, 44 px, y lo que trae hidden (Puertas sin liga) no se
   ve. Lo propio de la computadora (principal sola arriba en el inspector de 380 px) vive en desk.css. */
.app-hoja-acciones.tr-acciones { flex-wrap: wrap; gap: 8px; }
.tr-acciones > .btn { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 14px; white-space: nowrap; text-transform: none; letter-spacing: normal; font-size: .92rem; font-weight: 500; }
.tr-acciones > .btn .material-symbols-outlined { font-size: 1.15rem; }
.tr-acciones > .btn-primary { order: -1; font-weight: 600; }
.tr-acciones > [hidden] { display: none; }
@media (max-width: 1023.98px) {
  /* UX-15: en el telefono las acciones se reparten igual; "Listo" sobra: cerrar ya es la X, el velo y bajar la hoja. */
  .tr-acciones > .btn { flex: 1 1 0; }
  .tr-acciones > .tr-listo { display: none; }
  /* con Puertas son tres: la principal a todo lo ancho y las dos secundarias abajo */
  .tr-acciones:has(> [data-cmx-h="puertas"]:not([hidden])) > .btn-primary { flex-basis: 100%; }
}
@media (min-width: 600px) and (max-width: 1023.98px) {
  .tr-acciones:has(> [data-cmx-h="puertas"]:not([hidden])) > .btn-primary { flex-basis: 0; }
}

/* >= 1024 px: el rail de 56 px (DESK-02) vive en desk.css, que solo se aplica en escritorio. */

/* ---------- busqueda global (UX-10): lupa en el telefono, caja con "Ctrl K" en escritorio ----------
   Solo el disparador vive aqui; la paleta (busqueda.css/.js) se baja al abrirla por primera vez. */
.top-bar .app-lupa { order: 2; }
.top-bar .pms-notif { order: 3; }
.top-bar .brand { order: 4; }
.app-lupa {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
  min-width: 44px; height: 44px; margin: 0 0 0 auto; padding: 0; border: 0; border-radius: 999px;
  background: none; color: var(--ink); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.app-lupa .material-symbols-outlined { font-size: 1.35rem; }
.app-lupa-txt, .app-lupa-kbd { display: none; }
.app-lupa:focus-visible { outline: 2px solid var(--olive-dk); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .app-lupa:hover { background: var(--ghost); } }
/* En escritorio la franja superior (con esta caja) no se ve: Buscar vive en el rail (DESK-02, desk.css). */

/* ---------- accesibilidad ---------- */
/* Saltar al contenido: invisible hasta que el teclado llega a el (primer Tab). */
.app-saltar {
  position: fixed; top: 8px; left: 8px; z-index: 1100; padding: 10px 16px; border-radius: 999px;
  background: var(--ink); color: var(--sobre-tinta); font-weight: 600; text-decoration: none; transform: translateY(-200%);
}
.app-saltar:focus-visible { transform: none; outline: 2px solid var(--olive-dk); outline-offset: 2px; }
main#contenido:focus { outline: none; }
/* WCAG 2.4.11: lo enfocado con el teclado no queda debajo de la cabecera fija ni de la barra inferior. */
html { scroll-padding-top: 84px; }
@media (max-width: 1023.98px) { html:has(> body.app-con-nav) { scroll-padding-bottom: calc(66px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) {
  .app .top-bar, body.app.is-mobile .pms-seccion-actual, .app-tab-ico { transition: none !important; }
  .press:active, .segmented-control button:active, .segmented-control .segmented-option:active,
  button.chip:active, a.chip:active { transform: none !important; opacity: 0.85; }
}
@media (prefers-reduced-transparency: reduce) {
  .app .top-bar::before, .app-tabs { background: var(--card-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .app .top-bar { box-shadow: 0 1px 0 var(--ink); }
  .app .top-bar::before, .app-tabs { background: var(--card-bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .app-tabs { box-shadow: 0 -1px 0 var(--ink); }
  .app-lateral { box-shadow: inset -1px 0 0 var(--ink); }
  .app-tab, .app-lateral a, .app-lateral button { color: var(--ink); }
}
@media print {
  .app .top-bar { position: static; }
  .app-tabs, .app-lateral { display: none !important; }
  body.app-con-nav { padding-left: 0; }
  body.app-con-nav .top-bar { margin-left: 0; }
}

/* ===== UX-06: estados vacios <x-app.vacio>, esqueletos <x-app.esqueleto> y filtros en chips (docs/kb/ux-2026-09/vacios.md) ===== */
:root { --vacio-ok-t: #1a6e38; }
.app-vacio { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 20px 44px; text-align: center; color: var(--ink-soft); }
.app-vacio-icono { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 999px; font-size: 26px;
  background: var(--ghost); color: var(--ink-soft); box-shadow: inset 0 0 0 1px var(--rule-soft); }
.app-vacio--listo .app-vacio-icono { background: var(--ok-bg); color: var(--vacio-ok-t); box-shadow: none; }
.app-vacio--sin-datos .app-vacio-icono { background: var(--blue-bg); color: var(--olive-dk); box-shadow: none; }
.app-vacio-cuerpo { display: flex; flex-direction: column; align-items: inherit; gap: 4px; min-width: 0; }
.app-vacio-titulo { margin: 0; max-width: 34ch; color: var(--ink); font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.app-vacio-texto { margin: 0; max-width: 46ch; font-size: 0.9rem; line-height: 1.45; text-wrap: pretty; }
.app-vacio-accion { display: flex; flex-wrap: wrap; justify-content: inherit; gap: 8px; margin-top: 10px; }
.app-vacio--compacto { flex-direction: row; align-items: flex-start; gap: 14px; padding: 14px 0; text-align: left; }
.app-vacio--compacto .app-vacio-icono { width: 40px; height: 40px; font-size: 22px; }
.app-vacio--compacto .app-vacio-cuerpo { align-items: flex-start; padding-top: 2px; }
.app-vacio--compacto .app-vacio-titulo { font-size: 0.975rem; max-width: none; }
.app-vacio--compacto .app-vacio-accion { justify-content: flex-start; margin-top: 6px; }
.app-vacio-boton { min-height: 40px; padding: 0 16px; border: 1px solid var(--rule); border-radius: 999px; display: inline-flex; align-items: center; gap: 6px;
  background: var(--card-bg); color: var(--ink); font: inherit; font-size: 0.875rem; font-weight: 600; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color 120ms var(--ease-color), transform var(--dur-press) var(--ease-out); }
.app-vacio-boton .material-symbols-outlined { font-size: 1.05rem; }
.app-vacio-boton:hover { background: var(--bg-warm); color: var(--ink); text-decoration: none; }
.app-vacio-boton:active { transform: scale(0.97); }
.app-vacio-boton:focus-visible { outline: 2px solid var(--olive-dk); outline-offset: 2px; }

/* Esqueleto: la forma de lo que viene. El latido espera 300 ms: una carga rapida nunca parpadea. */
.app-esq-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center; padding: 15px 2px; border-top: 1px solid var(--rule-soft); }
.app-esq-fila:first-child { border-top: 0; }
.app-esq-a, .app-esq-b, .app-esq-c, .app-esq-lienzo b { display: block; border-radius: 6px; background: #ececec;
  animation: app-esq-latido 1.1s ease-in-out 300ms infinite alternate; }
.app-esq-a { height: 13px; width: var(--esq-a, 45%); }
.app-esq-b { grid-row: 2; height: 10px; width: var(--esq-b, 65%); background: var(--ghost); }
.app-esq-c { grid-column: 2; grid-row: 1 / span 2; width: 72px; height: 24px; border-radius: 12px; background: var(--ghost); }
.app-esq-lienzo { position: relative; height: 100%; min-height: 160px; }
.app-esq-lienzo i { position: absolute; left: 36px; right: 0; border-top: 1px solid var(--rule-soft); }
.app-esq-lienzo i:nth-child(1) { top: 8%; } .app-esq-lienzo i:nth-child(2) { top: 31%; } .app-esq-lienzo i:nth-child(3) { top: 54%; } .app-esq-lienzo i:nth-child(4) { top: 77%; }
.app-esq-lienzo b { position: absolute; left: 36px; right: 0; bottom: 0; height: 62%; border-radius: 0; background: var(--ghost);
  clip-path: polygon(0 55%, 12% 40%, 25% 48%, 38% 22%, 50% 30%, 62% 12%, 75% 26%, 88% 8%, 100% 18%, 100% 100%, 0 100%); }
@keyframes app-esq-latido { to { opacity: 0.45; } }
@media (max-width: 767.98px) {
  .app-esq--lista .app-esq-fila { grid-template-columns: minmax(0, 1fr); margin-bottom: 10px; padding: 14px 16px; border: 1px solid var(--rule-soft); border-radius: 14px; }
  .app-esq--lista .app-esq-c { grid-column: 1; grid-row: 3; width: 38%; height: 12px; }
}

/* Filtros en chips: una fila (en el telefono se desliza de lado), en lugar del formulario de ~240 px. */
.app-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.app-chip { flex: 0 0 auto; min-height: 36px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 999px; display: inline-flex; align-items: center; gap: 6px;
  background: var(--card-bg); color: var(--ink); font: inherit; font-size: 0.85rem; font-weight: 500; line-height: 1.2; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color 120ms var(--ease-color), color 120ms var(--ease-color), border-color 120ms var(--ease-color), transform var(--dur-press) var(--ease-out); }
.app-chip .material-symbols-outlined { font-size: 1.05rem; }
.app-chip.is-activo, .app-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--card-bg); }
.app-chip:active { transform: scale(0.96); }
.app-chip:focus-visible, .app-chip-select:focus-within { outline: 2px solid var(--olive-dk); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .app-chip:not(.is-activo):not([aria-pressed="true"]):hover { background: var(--bg-warm); } }
.app-chip-select { position: relative; padding-right: 8px; }
/* el select del pms trae borde, relleno, fondo, color y letra con !important (editorial.css, regla de formularios): dentro
   del chip se anulan solo aqui, con el mismo !important. El chip pone el borde, el fondo y el foco (:focus-within). */
.app-filtros .app-chip-select select { -webkit-appearance: none; appearance: none; width: auto; max-width: 14rem; height: auto; min-height: 34px; margin: 0;
  padding: 0 18px 0 0 !important; border: 0 !important; border-radius: 0 !important; outline: 0; box-shadow: none !important;
  background: transparent none !important; color: inherit !important; font: inherit; font-size: inherit !important; line-height: inherit; text-overflow: ellipsis; cursor: pointer; }
.app-chip-select select option { color: var(--ink); background: var(--card-bg); }
.app-chip-select > .material-symbols-outlined:last-child { position: absolute; right: 8px; pointer-events: none; }
.app-chip-busca { cursor: text; padding-right: 6px; }
.app-filtros .app-chip-busca input { width: 11rem; height: auto; border-radius: 0; box-shadow: none; min-height: 34px; padding: 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; }
.app-filtros .app-chip-busca input:focus { box-shadow: none !important; border-color: transparent !important; }
.app-filtros .app-chip-busca input::placeholder { color: var(--ink-soft); opacity: 1; }
.app-chip-sep { flex: none; align-self: stretch; width: 1px; margin: 6px 2px; background: var(--rule); }
.app-chip-quitar { color: var(--ink-soft); }
.app-filtros-fechas { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: -6px 0 16px; padding: 12px; border-radius: 12px; background: var(--bg-warm); }
.app-filtros-fechas label { display: flex; flex-direction: column; gap: 4px; margin: 0; color: var(--ink-soft); font-size: 0.78rem; font-weight: 500; }
.app-filtros-fechas input { min-height: 40px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 10px; background: var(--card-bg); color: var(--ink); font: inherit; font-size: 16px; }
@media (pointer: coarse) { .app-chip { min-height: 44px; } .app-filtros .app-chip-select select, .app-filtros .app-chip-busca input { min-height: 42px; }
  .app-filtros .app-chip-busca input { font-size: 16px; } /* < 16 px y iOS acerca la pantalla al enfocar */ }
@media (max-width: 767.98px) {
  .app-filtros { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 2px; margin: 0 -2px 14px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
  .app-filtros::-webkit-scrollbar { display: none; }
  .app-filtros > :last-child { margin-right: 24px; }
  .app-filtros .app-chip-select select { max-width: 11rem; }
}
@media (prefers-reduced-motion: reduce) {
  .app-esq-a, .app-esq-b, .app-esq-c, .app-esq-lienzo b { animation: none; }
  .app-chip:active, .app-vacio-boton:active { transform: none; opacity: 0.85; }
}
@media (prefers-contrast: more) {
  .app-chip, .app-vacio-boton { border-color: var(--ink-soft); }
  .app-esq-fila { border-color: var(--ink-faint); }
}

/* Mensajes programados (UX-06): tabla en >= 768 px, tarjetas debajo. */
table.fin-table.app-prog tr.scheduled-message-row { cursor: pointer; }
table.fin-table.app-prog .pc-evento span { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--ghost); font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
table.fin-table.app-prog .pc-previa, table.fin-table.app-prog .pc-fecha { color: var(--ink-soft); }
table.fin-table.app-prog .pc-fecha { font-variant-numeric: tabular-nums; }
.app-prog-abrir { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.app-prog-abrir:focus-visible { outline: 2px solid var(--olive-dk); outline-offset: 2px; border-radius: 4px; }
table.fin-table.app-prog tr.scheduled-message-detail td { background: var(--bg-warm); white-space: pre-line; }
@media (max-width: 767.98px) {
  /* .card trae borde izquierdo de 4 px forzado (acento) y sombra con !important: solo se vuelven invisibles */
  .card.app-prog-caja { border-left-color: transparent; background: transparent; box-shadow: none !important; }
  .card.app-prog-caja > .card-body { padding: 0 !important; }
  .app-prog-caja .table-responsive { overflow: visible; }
  table.fin-table.app-prog { display: block; width: 100% !important; min-width: 0 !important; }
  table.fin-table.app-prog colgroup, table.fin-table.app-prog thead { display: none; }
  table.fin-table.app-prog tbody { display: block; }
  table.fin-table.app-prog tr.scheduled-message-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; margin: 0 0 10px; padding: 14px 16px;
    grid-template-areas: "fecha evento" "huesped huesped" "casa casa" "asunto asunto" "previa previa" "canal canal";
    border: 1px solid var(--rule-soft); border-radius: 14px; background: var(--card-bg); }
  table.fin-table.app-prog tr.scheduled-message-row.is-abierta { margin-bottom: 0; border-bottom: 0; border-radius: 14px 14px 0 0; }
  table.fin-table.app-prog td { display: block; padding: 0; border: 0; background: none; text-align: left; font-size: 0.9rem; white-space: normal; }
  table.fin-table.app-prog td::before { content: none; }
  table.fin-table.app-prog .pc-fecha { grid-area: fecha; align-self: center; font-size: 0.8rem; }
  table.fin-table.app-prog .pc-evento { grid-area: evento; }
  table.fin-table.app-prog .pc-huesped { grid-area: huesped; margin-top: 6px; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
  table.fin-table.app-prog .pc-casa { grid-area: casa; color: var(--ink-soft); font-size: 0.85rem; }
  table.fin-table.app-prog .pc-asunto { grid-area: asunto; margin-top: 8px; font-weight: 500; }
  table.fin-table.app-prog .pc-previa { grid-area: previa; font-size: 0.85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  table.fin-table.app-prog .pc-canal { grid-area: canal; margin-top: 6px; color: var(--ink-soft); font-size: 0.75rem; }
  table.fin-table.app-prog tr.scheduled-message-detail { display: block; margin: 0 0 10px; border: 1px solid var(--rule-soft); border-top: 0; border-radius: 0 0 14px 14px; background: var(--bg-warm); }
  table.fin-table.app-prog tr.scheduled-message-detail td { padding: 12px 16px 14px; background: none; }
  .app-prog-abrir { min-height: 24px; }
}