/* ============================================================================
 * CAPA COMÚN · modal, hoja inferior, menú ⋯ (rediseño 28-oct-2026, DISENO §4)
 * KAREN para Nico. Única fuente de las reglas de `.modal-card` (antes en 5
 * sitios: app.css ×4 y ritmo.css, hallazgo M9 de la auditoría).
 *
 *   · Escritorio: tarjeta centrada, ancho min(tamaño, 100vw − 48px), alto máx.
 *     min(86dvh, 760px). Tamaños: s 420 · m 560 · l 720.
 *   · Hasta 600 px: hoja inferior a todo el ancho, radio solo arriba, asa.
 *   · Pie SIEMPRE fijo (sticky) con [Secundario] [Primario] a la derecha y
 *     botones de 44 px; el destructivo a la izquierda (`.capa-destructivo`).
 *   · Movimiento: solo transform y opacity. Reducido → fundido de 120 ms.
 * ========================================================================== */

/* ── Raíz, velo y tarjeta ──────────────────────────────────────────────── */
.capa-raiz {
  position: fixed; inset: 0; z-index: 210;
  display: grid; place-items: center; padding: 24px;
}
.capa-raiz > .capa-velo {
  position: absolute; inset: 0; z-index: 0;
  animation: capa-velo-entra var(--dur-med) var(--ease-out) both;
}
.capa {
  --capa-ancho: 560px;
  --capa-pad: var(--ccl-capa-pad);
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: min(var(--capa-ancho), calc(100vw - 48px));
  max-height: min(86dvh, 760px);
  background: var(--surface); color: var(--text-1);
  border: 1px solid var(--line); border-radius: var(--r-panel);
  box-shadow: var(--shadow-capa);
  overflow: hidden;
  animation: capa-entra var(--dur-med) var(--spring-ios) both;
}
.capa-s { --capa-ancho: 420px; }
.capa-m { --capa-ancho: 560px; }
.capa-l { --capa-ancho: 720px; }
.capa:focus { outline: none; }

/* Cuerpo con scroll propio: el pie y el título se quedan a la vista. */
.capa-scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 0 var(--capa-pad);
}
.capa-scroll:not(:has(.capa-pie)) { padding-bottom: var(--capa-pad); }

/* Título (el primer <h3>): fijo arriba, con sitio para la ✕. */
.capa-scroll > h3:first-child,
.capa-scroll > form > h3:first-child {
  position: sticky; top: 0; z-index: 2;
  margin: 0 calc(-1 * var(--capa-pad)) 4px;
  padding: 24px 68px 14px var(--capa-pad);
  background: var(--surface);
  font-size: var(--fs-section); font-weight: 800; line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}

/* ✕ de 44 px a 12 px de arriba y de la derecha; nunca junto a un destructivo. */
.capa-x {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: var(--toque); height: var(--toque);
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--text-2);
  cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-out),
    color var(--dur-hover) var(--ease-out), transform var(--dur-pulsar) var(--ease-out);
}
.capa-x:hover { background: var(--purple-tint); color: var(--text-1); }
.capa-x:active { transform: scale(0.94); }
.capa-x:focus-visible { outline: none; box-shadow: var(--ring); }
.capa-asa { display: none; }

/* ── Pie fijo ──────────────────────────────────────────────────────────── */
.capa-pie {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px;
  margin: 24px calc(-1 * var(--capa-pad)) 0;
  padding: 16px var(--capa-pad) 24px;
  background: var(--surface);
  box-shadow: 0 -1px 0 transparent;
  transition: box-shadow var(--dur-hover) var(--ease-out);
}
/* El filo solo aparece si queda contenido escondido por debajo (M1). */
.capa[data-filo] .capa-pie {
  box-shadow: 0 -1px 0 var(--line), 0 -14px 24px -18px rgba(20, 24, 30, 0.22);
}
.capa-pie > button, .capa-pie > a, .capa-pie > label {
  min-height: var(--toque); padding-left: 20px; padding-right: 20px;
  display: inline-flex; align-items: center; justify-content: center;
}
.capa-pie .capa-destructivo { margin-right: auto; color: var(--salud-riesgo); }

/* Confirmación «¿Descartar lo escrito?» dentro de la capa */
.modal-confirma-foot button { min-height: var(--toque); padding-left: 18px; padding-right: 18px; }

/* Campos dentro de una capa: 44 px de alto (ley móvil). */
.capa .field input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.capa .field select { min-height: var(--toque); }
/* WebKit ignora el alto de un <select> nativo (medía 24 px): apariencia propia
   con la flecha dibujada con dos degradados (sin imágenes: CSP). */
.capa .field select, .co-cli-ficha select {
  min-height: var(--toque);
  -webkit-appearance: none; appearance: none; height: var(--toque); padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
                    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.capa .field input[type="color"] { width: 64px; height: var(--toque); padding: 4px; }

/* ── Hoja inferior (≤ 600 px) ──────────────────────────────────────────── */
@media (max-width: 600px) {
  .capa-raiz { place-items: end stretch; padding: 0; }
  .capa {
    --capa-pad: 20px;
    width: 100%; max-height: 92dvh;
    border-radius: var(--r-hoja) var(--r-hoja) 0 0; border-bottom: 0;
    animation: capa-sube var(--dur-entrada) var(--ease-out) both;
  }
  .capa-asa {
    display: block; position: absolute; top: 0; left: 50%; z-index: 4;
    width: 96px; height: 24px; transform: translateX(-50%); touch-action: none;
  }
  .capa-asa::before {
    content: ""; position: absolute; left: 30px; top: 8px;
    width: 36px; height: 4px; border-radius: 4px; background: var(--line-strong);
  }
  .capa-x { top: 8px; right: 8px; }
  .capa-scroll > h3:first-child,
  .capa-scroll > form > h3:first-child { padding: 22px 60px 12px var(--capa-pad); }
  .capa-pie {
    margin-top: 20px;
    padding: 12px var(--capa-pad) max(16px, env(safe-area-inset-bottom));
  }
  /* Dos botones del mismo ancho (primario a la derecha). Con tres, el
     destructivo ocupa su propia fila arriba. */
  .capa-pie > button, .capa-pie > a, .capa-pie > label { flex: 1 1 0; min-width: 0; padding-left: 12px; padding-right: 12px; }
  .capa-pie .capa-destructivo { flex-basis: 100%; order: -1; margin-right: 0; }
}

/* ── Salida: el «fantasma» que deja la capa al desmontarse (ui.jsx) ───── */
.capa-sale { pointer-events: none; z-index: 209; }
.capa-sale .capa-velo, .capa-sale > .overlay {
  animation: capa-velo-sale var(--dur-salir) var(--ease-in) both;
}
.capa-sale .capa, .capa-sale .task-modal-card {
  animation: capa-sale var(--dur-salir) var(--ease-in) both;
}
@media (max-width: 600px) {
  .capa-sale .capa, .capa-sale .task-modal-card { animation-name: capa-baja; }
}

/* ── Menú ⋯ (popover; hoja inferior en móvil) ─────────────────────────── */
.ico-btn {
  width: var(--toque); height: var(--toque); flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 50%;
  background: var(--surface); color: var(--text-1); cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-out), transform var(--dur-pulsar) var(--ease-out);
}
.ico-btn:hover { background: var(--purple-tint); }
.ico-btn:active { transform: scale(0.94); }
.ico-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.ico-btn[aria-expanded="true"] { background: var(--purple-tint); color: var(--purple-ink); }

.menu-mas { position: relative; display: inline-flex; }
.menu-mas-panel {
  position: fixed; z-index: 220;
  min-width: 220px; max-width: min(320px, calc(100vw - 32px));
  padding: 6px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-capa);
  transform-origin: top right;
  animation: menu-entra var(--dur-med) var(--spring-ios) both;
}
.menu-mas-panel[data-origen="abajo"] { transform-origin: bottom right; }
.menu-mas-panel .client-option {
  display: flex; align-items: center; width: 100%;
  min-height: var(--toque); padding: 0 14px; border-radius: 10px;
  font-size: 14px; font-weight: 700; color: var(--text-1);
}
.menu-mas-panel .client-option:hover,
.menu-mas-panel .client-option:focus-visible { background: var(--purple-tint); outline: none; }
.menu-mas-panel .menu-peligro { color: var(--salud-riesgo); }
.menu-mas-velo { display: none; }
@media (max-width: 600px) {
  .menu-mas-velo {
    display: block; position: fixed; inset: 0; z-index: 219; background: var(--scrim);
    animation: capa-velo-entra var(--dur-med) var(--ease-out) both;
  }
  .menu-mas-panel.es-hoja {
    left: 0; right: 0; bottom: 0; top: auto; width: 100%; max-width: none;
    padding: 16px 12px max(16px, env(safe-area-inset-bottom));
    border-radius: var(--r-hoja) var(--r-hoja) 0 0;
    animation: capa-sube var(--dur-entrada) var(--ease-out) both;
  }
}

/* Los desplegables de siempre (filtros, campana, sonido): nunca más anchos
   que la pantalla menos 16 px por lado; opciones de 44 px. */
.client-panel { max-width: calc(100vw - 32px); }
button.client-option { min-height: var(--toque); }

/* ── Keyframes (solo transform y opacity) ─────────────────────────────── */
@keyframes capa-entra { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes capa-sale { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(8px) scale(0.97); } }
@keyframes capa-sube { from { transform: translateY(100%); } to { transform: none; } }
@keyframes capa-baja { from { transform: none; } to { transform: translateY(100%); } }
@keyframes capa-velo-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes capa-velo-sale { from { opacity: 1; } to { opacity: 0; } }
@keyframes menu-entra { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ── Movimiento reducido: solo fundidos cortos ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .capa, .capa-raiz > .capa-velo, .menu-mas-panel, .menu-mas-panel.es-hoja, .menu-mas-velo {
    animation: capa-velo-entra 120ms linear both;
  }
  .capa-x, .ico-btn, .capa-pie { transition: none; }
  .capa-x:active, .ico-btn:active { transform: none; }
}

/* ══ Ficha de tarea (task.jsx) con la misma piel de capa ═══════════════════
   Barra [‹ ›] … [✎] [⋯] [✕] dentro de la tarjeta, todo de 44 px (M6); estados
   de 44 px y en rejilla 2×2 por debajo de 480 px (M5, M7: «Aprobado» se salía
   142 px a 320); pie con el botón a su ancho, a la derecha (M8); hoja inferior
   hasta 600 px. */
.task-modal-card {
  background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-capa);
  animation: capa-entra var(--dur-med) var(--spring-ios) both;
}
.task-modal-card .panel-tools {
  position: static; display: flex; align-items: center; gap: 4px;
  padding: 12px 12px 0 16px;
}
.task-modal-card .panel-tools-hueco { flex: 1; }
.task-modal-card .ptool {
  width: var(--toque); height: var(--toque); color: var(--text-2);
  border: 1px solid transparent; border-radius: 50%; background: transparent;
}
.task-modal-card .ptool:hover:not(:disabled) { background: var(--purple-tint); color: var(--text-1); }
.task-modal-card .ptool:disabled { opacity: 0.32; cursor: default; }
.task-modal-card .ptool:focus-visible { outline: none; box-shadow: var(--ring); }
.task-modal-card .ptool-mas .ico-btn { border-color: transparent; background: transparent; color: var(--text-2); }
.task-modal-card .ptool-mas .ico-btn:hover,
.task-modal-card .ptool-mas .ico-btn[aria-expanded="true"] { background: var(--purple-tint); color: var(--text-1); }
.task-modal-card .panel-head { padding: 4px var(--ccl-capa-pad) 16px; }

.task-modal-card .pipe-txt, .task-modal-card .pipe-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--toque); padding: 0 14px; font-size: 13px;
}
.task-modal-card .panel-actions {
  justify-content: flex-end; flex-wrap: wrap; gap: 12px;
  padding: 16px var(--ccl-capa-pad) 24px; background: var(--surface);
}
.task-modal-card .panel-actions > button { min-height: var(--toque); padding-left: 22px; padding-right: 22px; flex: 0 0 auto; }

@media (max-width: 600px) {
  .task-modal { padding: 0; place-items: end stretch; }
  .task-modal-card {
    width: 100%; height: auto; max-height: 94dvh;
    border-radius: var(--r-hoja) var(--r-hoja) 0 0; border-bottom: 0;
    animation: capa-sube var(--dur-entrada) var(--ease-out) both;
  }
  .task-modal-card .panel-tools { padding: 14px 8px 0 12px; }
  .task-modal-card .panel-head { padding: 4px 20px 14px; }
  .task-modal-card .panel-body { padding-left: 20px; padding-right: 20px; }
  .task-modal-card .panel-actions { padding: 12px 20px max(16px, env(safe-area-inset-bottom)); }
  .task-modal-card .panel-actions > button { flex: 1 1 0; min-width: 0; padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 480px) {
  .task-modal-card .pipe {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
    overflow: visible; margin-right: 0; padding-right: 0;
  }
  .task-modal-card .pipe-p::after { display: none; }
  .task-modal-card .pipe-txt, .task-modal-card .pipe-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .task-modal-card { animation: capa-velo-entra 120ms linear both; }
}

/* Selector de personas («+ Tarea», «Editar tarea»): chips de 44 px (M3). */
.picker-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.picker-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--toque); padding: 0 12px 0 6px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--text-1); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-out), transform var(--dur-pulsar) var(--ease-out);
}
.picker-chip:hover { background: var(--purple-tint); }
.picker-chip:active { transform: scale(0.97); }
.picker-chip:focus-visible { outline: none; box-shadow: var(--ring); }
.picker-chip.on { border-color: var(--purple); background: color-mix(in srgb, var(--purple) 18%, var(--surface)); font-weight: 800; }
.picker-carga { font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--c, var(--text-3)) 66%, var(--ccl-ink)); }
.picker-principal { font-size: 11px; color: var(--purple-ink); }
@media (prefers-reduced-motion: reduce) { .picker-chip { transition: none; } .picker-chip:active { transform: none; } }

/* Todo botón dentro de una capa mide 44 px (no solo los del pie). */
.capa .btn-ghost, .capa .btn-primary, .capa .btn-descartar, .capa .co-btn,
.task-modal-card .btn-ghost, .task-modal-card .btn-primary {
  min-height: var(--toque);
}

/* ── Pasar de una tarea a otra (recorrido.mjs) ──────────────────────────────
   La ficha nueva entra desde el lado al que vas: 28 px y opacidad, solo
   transform y opacity. Dos nombres de animación alternos para repetir al pasar
   varias seguidas. Con «reducir movimiento» el cambio es instantáneo. */
.task-modal-card { overscroll-behavior-x: contain; }   /* el «atrás» del trackpad no se lo lleva */
.task-modal-card[data-desliza] .panel-head,
.task-modal-card[data-desliza] .panel-body { animation-duration: 240ms; animation-timing-function: var(--ease-out); animation-fill-mode: both; }
.task-modal-card[data-desliza="sig-a"] .panel-head, .task-modal-card[data-desliza="sig-a"] .panel-body { animation-name: ficha-desliza-sig-a; }
.task-modal-card[data-desliza="sig-b"] .panel-head, .task-modal-card[data-desliza="sig-b"] .panel-body { animation-name: ficha-desliza-sig-b; }
.task-modal-card[data-desliza="ant-a"] .panel-head, .task-modal-card[data-desliza="ant-a"] .panel-body { animation-name: ficha-desliza-ant-a; }
.task-modal-card[data-desliza="ant-b"] .panel-head, .task-modal-card[data-desliza="ant-b"] .panel-body { animation-name: ficha-desliza-ant-b; }
@keyframes ficha-desliza-sig-a { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes ficha-desliza-sig-b { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes ficha-desliza-ant-a { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes ficha-desliza-ant-b { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .task-modal-card[data-desliza] .panel-head, .task-modal-card[data-desliza] .panel-body { animation: none; }
}

.task-pos-quien { max-width: 26ch; }