/* ============================================================
   desk.css (DESK-01, PARIDAD-2026-10) -- escritorio en "modo enfoque" (>= 1024 px).
   Plan y medidas: docs/worklists/findings/PARIDAD-2026-10/desk/README.md; bocetos desk/*.html (fuente/desk.css).
   - Se enlaza con media="(min-width: 1024px)": en el telefono y la tableta no bloquea el primer pintado y no aplica.
     Ademas todo va dentro de @media (min-width: 1024px): < 1024 px no cambia NADA (prueba pixel a 390 y 820).
   - Ningun color nuevo: los tokens de color y movimiento son los de editorial.css (--ink, --rule, --olive-dk,
     --ease-out, --dur-pop...). Lo nuevo son medidas: --desk-* (escala de espaciado y de letra, radios, alto de control).
   - Las piezas llevan prefijo desk- (.desk-btn, no .btn): .btn ya existe en editorial.css y en ~590 vistas; una .btn
     nueva cambiaria todos los botones del panel.
   ============================================================ */
@media (min-width: 1024px) {
  :root {
    /* una sola escala para el escritorio: espaciado 4-32, seis tamanos de letra, dos radios */
    --desk-1: 4px; --desk-2: 8px; --desk-3: 12px; --desk-4: 16px; --desk-5: 24px; --desk-6: 32px;
    --desk-r-control: 10px;   /* botones, campos, filas activas */
    --desk-r-panel: 14px;     /* paneles flotantes, redactor, tarjetas */
    --desk-t-meta: 12px; --desk-t-sec: 13px; --desk-t-base: 14px; --desk-t-msg: 15px; --desk-t-pane: 17px; --desk-t-page: 22px;
    --desk-ctrl-h: 36px;      /* alto de control con raton */
    --desk-rail: 62px; --desk-rail-abierto: 248px; /* +6 px (Amaury 2026-10-04): el globo de mensajes no se corta */
    --desk-lista: clamp(360px, 21vw, 400px);       /* 1440 -> 360, 1920 -> 400 (de fabrica; DESK-15: la manija lo cambia en .pms-inbox) */
    --desk-inspector: clamp(340px, 20vw, 400px);   /* 1440 -> 340, 1920 -> 384 */
    --desk-cabecera: 64px;
    --desk-hilo-max: 1040px;
    --desk-sombra-flota: 0 12px 32px -12px rgba(0, 0, 0, 0.28), 0 0 0 1px var(--rule-soft);
    --desk-anillo: 0 0 0 2px var(--olive-dk);
    /* DESK-11: estados activos y accion principal con la marca (violeta del pms), no con bloques negros. Tokens para que el
       modo oscuro (DESK-09) solo los redefina. Tinta sobre tinte 4.8:1; blanco sobre --olive-dk 6.2:1. */
    --desk-activo-fondo: var(--blue-bg);
    --desk-activo-tinta: var(--olive-dk);
    --desk-activo-marca: var(--olive);
    --desk-primario: var(--olive-dk);
    --desk-primario-tinta: #fff;
  }

  /* ---------- piezas ---------- */
  .desk-btn {
    display: inline-flex; align-items: center; gap: 6px; height: var(--desk-ctrl-h); margin: 0; padding: 0 12px;
    border: 1px solid var(--rule); border-radius: var(--desk-r-control); background: var(--card-bg); cursor: pointer;
    color: var(--ink); font: inherit; font-size: var(--desk-t-sec); font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none;
    transition: background-color var(--dur-pop) var(--ease-color), transform var(--dur-press) var(--ease-out);
  }
  .desk-btn:hover { background: var(--bg-warm); color: var(--ink); }
  .desk-btn:active:not(:disabled) { transform: scale(0.97); }
  .desk-btn .material-symbols-outlined { font-size: 18px; }
  .desk-btn[aria-pressed="true"], .desk-btn[aria-expanded="true"] { background: var(--desk-activo-fondo); border-color: transparent; color: var(--desk-activo-tinta); }
  .desk-btn-primario { background: var(--desk-primario); border-color: var(--desk-primario); color: var(--desk-primario-tinta); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
  .desk-btn-primario:hover { background: var(--desk-primario); color: var(--desk-primario-tinta); filter: brightness(0.92); }
  .desk-btn-sutil { border-color: transparent; background: none; color: var(--ink-soft); padding: 0 8px; }
  .desk-btn-sutil:hover { background: var(--ghost); }
  .desk-btn-ico {
    position: relative; display: inline-grid; place-items: center; width: var(--desk-ctrl-h); height: var(--desk-ctrl-h); margin: 0; padding: 0;
    border: 0; border-radius: var(--desk-r-control); background: none; cursor: pointer; color: var(--ink-soft);
    transition: background-color var(--dur-pop) var(--ease-color), color var(--dur-pop) var(--ease-color), transform var(--dur-press) var(--ease-out);
  }
  .desk-btn-ico:hover { background: var(--ghost); color: var(--ink); }
  .desk-btn-ico:active:not(:disabled) { transform: scale(0.95); }
  .desk-btn-ico .material-symbols-outlined { font-size: 20px; }
  .desk-btn-ico[aria-pressed="true"], .desk-btn-ico[aria-expanded="true"] { background: var(--ghost); color: var(--ink); }
  .desk-btn:focus-visible, .desk-btn-ico:focus-visible, .desk-filtro:focus-visible, .desk-seg button:focus-visible {
    outline: 2px solid var(--olive-dk); outline-offset: 2px;
  }

  /* Filtros como pestanas tranquilas (no pastillas): interruptores con aria-pressed; activo = subrayado de tinta. */
  .desk-filtro {
    position: relative; display: inline-flex; align-items: center; gap: 5px; height: 38px; margin: 0; padding: 0;
    border: 0; background: none; cursor: pointer; color: var(--ink-soft); font: inherit; font-size: var(--desk-t-sec); font-weight: 500; white-space: nowrap;
  }
  .desk-filtro:hover { color: var(--ink); }
  .desk-filtro b { font-weight: 600; font-variant-numeric: tabular-nums; }
  .desk-filtro[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
  .desk-filtro[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--desk-activo-marca); }

  /* Segmentado (Multi/Mes/Ano, Llegan/Salen): uno a la vez, aria-pressed. */
  .desk-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--desk-r-control); background: var(--ghost); box-shadow: inset 0 0 0 1px var(--rule-soft); }
  .desk-seg button {
    height: 28px; margin: 0; padding: 0 12px; border: 0; border-radius: 7px; background: none; cursor: pointer;
    color: var(--ink-soft); font: inherit; font-size: var(--desk-t-sec); font-weight: 500;
  }
  .desk-seg button[aria-pressed="true"] { background: var(--card-bg); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--rule-soft); }

  /* Panel flotante (Llegan y salen, Mas filtros): nace de su disparador (transform-origin lo pone quien lo abre). */
  .desk-flota {
    position: absolute; z-index: 60; background: var(--card-bg); border-radius: var(--desk-r-panel); box-shadow: var(--desk-sombra-flota);
    transform-origin: top left; animation: desk-flota-entra var(--dur-pop) var(--ease-out);
  }
  .desk-flota[hidden] { display: none; }
  @keyframes desk-flota-entra { from { opacity: 0; transform: scale(0.97) translateY(-4px); } }
}

/* ============================================================
   DESK-02 -- rail de 56 px en lugar de la barra lateral de 248 px (UX-03) y de la franja superior.
   Marcado: components/app/navegacion.blade.php (nav.app-lateral). Comportamiento: public/js/desk.js.
   html.app-rail-abierto = desplegado SOBRE el contenido (no lo mueve); html.app-rail-fijo = fijo, empuja el contenido.
   z-index: rail 44 (arriba de la franja/bandeja 40, debajo de las hojas 45, x-modal 50 y los modales del admin 1050);
   panel de Avisos 46.
   ============================================================ */
@media (min-width: 1024px) {
  body.app-con-nav { --app-side-w: var(--desk-rail); padding-left: var(--app-side-w); }
  html.app-rail-fijo body.app-con-nav { --app-side-w: var(--desk-rail-abierto); }

  /* La franja superior no se ve. Se queda en el DOM (0x0) solo para el panel de la UNICA campana de Livewire: su
     boton no se ve y el panel lo abre "Avisos" del rail. Lo demas (Menú, lupa, marca, nombre) se mudo al rail. */
  body.app.app-con-nav .top-bar {
    position: fixed; top: 0; left: 0; z-index: 46; width: 0; height: 0; min-height: 0; margin: 0; padding: 0;
    border: 0; overflow: visible; box-shadow: none;
  }
  body.app.app-con-nav .top-bar::before { content: none; }
  body.app.app-con-nav .top-bar > :not(.pms-notif), body.app.app-con-nav .top-bar .pms-notif-bell { display: none !important; }
  body.app.app-con-nav .top-bar .pms-notif { position: static; margin: 0; }
  body.app-con-nav .pms-notif-panel {
    position: fixed; top: 8px; right: auto; left: calc(var(--app-side-w) + 8px); width: 360px;
    max-height: min(520px, calc(100vh - 16px)); border: 0; border-radius: var(--desk-r-panel);
    box-shadow: var(--desk-sombra-flota); transform-origin: top left;
  }

  /* Lo enfocado con el teclado ya no tiene cabecera encima; lo pegado arriba, tampoco. */
  html { scroll-padding-top: 16px; }
  .app .kb-sidebar { top: 20px; }

  /* ---------- el rail ---------- */
  .app-lateral {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 44;
    display: flex; flex-direction: column; gap: 2px; width: var(--desk-rail); padding: 10px 0;
    overflow: hidden; overscroll-behavior: contain; contain: layout paint;
    background: var(--bg-warm); box-shadow: inset -1px 0 0 var(--rule-soft);
    font-family: "Epilogue", "Epilogue Fallback", system-ui, sans-serif;
    transition: width var(--dur-panel) var(--ease-out), box-shadow var(--dur-pop) var(--ease-out);
  }
  html.app-rail-abierto .app-lateral, html.app-rail-fijo .app-lateral { width: var(--desk-rail-abierto); overflow-y: auto; }
  html.app-rail-abierto:not(.app-rail-fijo) .app-lateral { box-shadow: inset -1px 0 0 var(--rule-soft), 16px 0 40px -18px rgba(0, 0, 0, 0.3); }
  .app-lateral-lista { list-style: none; margin: 0; padding: 0; }
  .app-lateral a, .app-lateral button {
    position: relative; display: flex; align-items: center; gap: var(--desk-3); flex: none;
    width: calc(100% - 16px); height: 40px; min-height: 0; margin: 1px 8px; padding: 0 10px;
    border: 0; border-radius: var(--desk-r-control); background: none; box-shadow: none; cursor: pointer;
    color: var(--ink-soft); font: inherit; font-size: var(--desk-t-base); font-weight: 400; line-height: 1.2;
    text-align: left; text-decoration: none; white-space: nowrap;
    transition: background-color var(--dur-pop) var(--ease-color), color var(--dur-pop) var(--ease-color), transform var(--dur-press) var(--ease-out);
  }
  .app-lateral .material-symbols-outlined { flex: none; width: 20px; font-size: 20px; }
  /* Las etiquetas se quedan en el DOM (el lector de pantalla las lee) y solo se desvanecen en reposo. */
  .app-lateral-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity 120ms linear; }
  html.app-rail-abierto .app-lateral-lbl, html.app-rail-fijo .app-lateral-lbl { opacity: 1; transition-delay: 60ms; }
  /* DESK-11: el destino activo ya no es un cuadro negro: tinte de la marca, icono relleno y una barra de 3 px a la orilla. */
  .app-lateral a.active { background: var(--desk-activo-fondo); color: var(--desk-activo-tinta); font-weight: 600; box-shadow: inset 3px 0 0 var(--desk-activo-marca); }
  .app-lateral button[aria-expanded="true"] { background: rgba(0, 0, 0, 0.05); color: var(--ink); }
  .app-lateral a.active .material-symbols-outlined { font-variation-settings: "FILL" 1; }
  .app-lateral a:focus-visible, .app-lateral button:focus-visible { outline: 2px solid var(--olive-dk); outline-offset: -2px; }
  @media (hover: hover) and (pointer: fine) {
    .app-lateral a:not(.active):hover, .app-lateral button:hover { background: rgba(0, 0, 0, 0.05); color: var(--ink); }
  }
  /* Contadores: en reposo, sobre el icono; desplegado, al final del renglon. */
  .app-lateral .app-cuenta {
    position: absolute; top: 3px; left: 24px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px;
    box-shadow: 0 0 0 2px var(--bg-warm);
  }
  .app-lateral a.active .app-cuenta { box-shadow: 0 0 0 2px var(--desk-activo-fondo); }
  html.app-rail-abierto .app-lateral .app-cuenta, html.app-rail-fijo .app-lateral .app-cuenta { position: static; margin-left: auto; box-shadow: none; }

  /* Marca: monograma en reposo, logo de siempre (invertido a tinta, como en la franja) desplegado. */
  .app-lateral a.app-rail-marca { height: 40px; margin: 0 8px 6px; padding: 0 8px; color: var(--ink); }
  .app-lateral a.app-rail-marca:hover { background: none; }
  .app-rail-mono {
    flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px;
    background: var(--desk-activo-fondo); color: var(--desk-activo-tinta);
    font-size: 10px; font-weight: 700; letter-spacing: -0.02em;
  }
  .app-rail-logo { width: auto; height: 22px; filter: invert(1); opacity: 0; transition: opacity 120ms linear; }
  html.app-rail-abierto .app-rail-logo, html.app-rail-fijo .app-rail-logo { opacity: 1; transition-delay: 60ms; }

  /* Buscar: campo de verdad cuando el rail esta desplegado; "Ctrl K" (o "⌘K") a la derecha. */
  .app-rail-kbd {
    display: none; margin-left: auto; padding: 1px 6px; border-radius: 6px; background: var(--card-bg);
    box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink-soft); font: inherit; font-size: 11px; line-height: 1.5;
  }
  html.app-rail-abierto .app-rail-kbd, html.app-rail-fijo .app-rail-kbd { display: inline-block; }
  html.app-rail-abierto .app-lateral .app-rail-buscar, html.app-rail-fijo .app-lateral .app-rail-buscar { background: var(--card-bg); box-shadow: inset 0 0 0 1px var(--rule); }

  .app-rail-sep { flex: none; height: 1px; margin: 8px 14px; background: var(--rule); }
  .app-lateral-titulo { margin: 12px 18px 4px; color: var(--mustard-dk); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; }
  .app-rail-resto { display: none; }
  html.app-rail-abierto .app-rail-resto, html.app-rail-fijo .app-rail-resto { display: block; }
  html.app-rail-abierto .app-rail-solo-cerrado, html.app-rail-fijo .app-rail-solo-cerrado { display: none; }
  .app-lateral-pie { margin-top: auto; padding-top: 8px; }
  .app-rail-avatar {
    flex: none; display: grid; place-items: center; width: 24px; height: 24px; margin: 0 -2px;
    border-radius: 999px; background: var(--olive-dk); color: var(--sobre-marca); font-size: 10px; font-weight: 700;
  }
  .app-rail-fijar .material-symbols-outlined { transition: transform var(--dur-panel) var(--ease-out); }
  html.app-rail-fijo .app-rail-fijar .material-symbols-outlined { transform: rotate(180deg); }

  /* ---------- bandeja ----------
     DESK-02 movia aqui los dos flotantes de la bandeja (buscador de /inbox y barra Checkins/Reserva/Checkouts) y le daba
     su alto; desde DESK-03 en >= 1024 px no se pintan (modo enfoque, unified-inbox.css) y DESK-04 quito esas reglas. */

  /* Contraste (hallazgos del README §4, axe "serious"): textos en --ink-faint (2.2:1) y la hora en --olive (4.1:1). Solo en
     escritorio, donde hoy se mide axe; mismos tokens de la paleta. */
  body.app-con-nav .pms-inbox .wa-conv-meta .wa-preview,
  body.app-con-nav .pms-inbox .wa-conv:not(.pms-unread) .wa-last,
  body.app-con-nav .pms-inbox .pms-inbox-time,
  body.app-con-nav .pms-inbox .pms-daterange,
  body.app-con-nav .pms-filtro.is-cero,
  body.app-con-nav .pms-notif-empty, body.app-con-nav .pms-notif-item-body small { color: var(--ink-soft); }
  body.app-con-nav .pms-inbox .wa-conv.pms-unread .pms-inbox-time { color: var(--olive-dk); }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .desk-btn, .desk-btn-ico { transition: none; }
  .app-lateral, .app-lateral a, .app-lateral button, .app-lateral-lbl, .app-rail-logo, .app-rail-fijar .material-symbols-outlined { transition: none !important; }
  .desk-btn:active:not(:disabled), .desk-btn-ico:active:not(:disabled) { transform: none; opacity: 0.85; }
  .desk-flota { animation: none; }
}
@media (min-width: 1024px) and (prefers-contrast: more) {
  .app-lateral { box-shadow: inset -1px 0 0 var(--ink); }
  .app-lateral a, .app-lateral button { color: var(--ink); }
  .desk-btn, .desk-seg { border-color: var(--ink-soft); }
  .desk-filtro, .desk-btn-ico, .desk-btn-sutil { color: var(--ink); }
}
@media (min-width: 1024px) {
  /* DESK-11: chips activos (app-shell.css, todos los anchos) sin bloque negro en la computadora. body delante: app-shell.css
     se carga despues. */
  body .app-chip.is-activo, body .app-chip[aria-pressed="true"] { background: var(--desk-activo-fondo); border-color: transparent; color: var(--desk-activo-tinta); font-weight: 600; }
}

/* ============================================================
   DESK-13 (PARIDAD-2026-10) -- densidad de escritorio. Amaury (2026-10-03, 1280x720 a zoom 100 %): "está muy grande,
   preferiría que estuviera así" (su captura a ~80 %). En >= 1024 px se baja la escala del armazon ~0.8 por TOKENS
   (espaciado, alto de control, rail, cabeceras, anchos de columna, radios) y la letra con piso de 12 px (texto efectivo
   >= 12 px: la letra baja menos que el resto). Sin CSS zoom: las coordenadas del arrastre (CAL-20, Dock, bordes de
   columnas) siguen siendo 1:1. < 1024 px no cambia nada (todo va en este @media; el enlace ya es media="(min-width:
   1024px)"). Reglas de clase con `html body` delante: las hojas de cada pantalla (unified-inbox.css, hoy.css...) se cargan despues y
   repiten el mismo selector con `body`; sin el `html` extra pierden.
   ============================================================ */
@media (min-width: 1024px) {
  :root {
    --desk-1: 3px; --desk-2: 6px; --desk-3: 10px; --desk-4: 13px; --desk-5: 19px; --desk-6: 26px;
    --desk-r-control: 8px; --desk-r-panel: 12px;
    --desk-t-meta: 12px; --desk-t-sec: 12px; --desk-t-base: 13px; --desk-t-msg: 13.5px; --desk-t-pane: 15px; --desk-t-page: 19px;
    --desk-ctrl-h: 30px;
    --desk-rail: 54px; --desk-rail-abierto: 212px;
    --desk-cabecera: 52px;
  }
  html body .pms-inbox { --pms-hdr-h: 48px; }

  /* Bandeja: renglon de 3 lineas de 82 a ~64 px, avatar 28, aviso de pre-aprobar y redactor mas bajos. Los anchos de
     columna (--desk-lista / --desk-inspector) NO cambian: el guion de primer pintado de la bandeja los repite. */
  html body.app-con-nav .pms-inbox .wa-list-body > .wa-conv { gap: 10px; padding: 8px 13px; contain-intrinsic-size: auto 80px; } /* DESK-15: vista previa de hasta 2 lineas (72-88 px) */
  html body.app-con-nav .pms-inbox .wa-list-body > .wa-conv.active::before { top: 8px; bottom: 8px; }
  html body.app-con-nav .pms-inbox .wa-conv .wa-avatar { width: 28px; height: 28px; }
  html body.app-con-nav .pms-inbox .wa-conv .wa-name, html body.app-con-nav .pms-inbox .wa-conv .wa-preview,
  html body.app-con-nav .pms-inbox .wa-conv.pms-sin-casa .wa-last { line-height: 1.35; }
  html body.app-con-nav .pms-inbox .wa-conv .wa-last { line-height: 1.3; }
  html body.app-con-nav .pms-inbox .wa-conv .pms-fila-canal, html body.app-con-nav .pms-fila-fin .wa-badge-unread { font-size: 12px; }
  html body .pms-aviso-fila { gap: 8px; padding: 6px 13px; }
  html body .pms-lista-busca { padding-bottom: 6px; }
  html body .pms-lista-desk .desk-filtro, html body .pms-lista-filtros .desk-filtro { height: 32px; }
  html body.app-con-nav .pms-inbox .wa-send-box { gap: 6px; padding: 8px; }
  html body.app-con-nav .pms-inbox .wa-send-box textarea { min-height: 48px; padding: 9px 13px; }
  /* Look Airbnb: renglon con avatar de 48 a 38. */
  html body .pms-airbnb-conv { gap: 8px; padding: 7px 6px; }
  html body .pms-airbnb-list-body .pms-airbnb-avatar { width: 38px; height: 38px; font-size: 0.95rem; }
  html body .pms-airbnb-list-body > .pms-airbnb-conv { contain-intrinsic-size: auto 56px; }
}

/* DARK-01: acciones de la tarjeta de reserva en la computadora (lo comun -- 44 px, sin mayusculas ni texto partido, hidden,
   icono de "Abrir reserva" -- esta en app-shell.css igual que en el telefono). En el inspector de 380 px la principal va sola
   arriba y Puertas / Abrir reserva / Listo abajo, cada una del ancho de su texto. */
@media (min-width: 1024px) {
  .tr-acciones > [data-cmx-h="chat"] { flex-basis: 100%; }
  .app-hoja-acciones.tr-acciones > * { padding: 0 12px; }
  /* flotante del Multi sin Puertas (sin "Listo": la X, Esc y el clic fuera cierran): dos, lado a lado, como en el telefono */
  .cmx-flota .tr-acciones:not(:has(> [data-cmx-h="puertas"]:not([hidden]))) > * { flex: 1 1 0; }
}