/* ==========================================================================
   Alquila Ya · «Libro claro» — componentes
   Botones, tarjetas, cifras, tablas, formularios, chips, avisos, diálogos y
   menús. Viste también las clases de siempre de los módulos (.btn, .tarjeta,
   .tabla, .campo, .chip, .aviso…) mientras llega el rediseño de cada uno.
   ========================================================================== */

@layer componentes {
  /* ---------- Íconos ------------------------------------------------------ */
  .ico { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: -0.25em; }
  .ic { display: inline-flex; align-items: center; justify-content: center; flex: none; }
  .ic > .ico { display: block; }

  /* ---------- Botones ----------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--esp-2);
    min-height: var(--control-alto);
    padding: 0 var(--control-px);
    border: 1px solid var(--color-borde-fuerte);
    border-radius: var(--btn-radio);
    background: var(--color-superficie);
    color: var(--color-texto);
    font: inherit;
    font-size: var(--texto-m);
    font-weight: var(--btn-peso);
    line-height: var(--lh-m);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 1px 1px rgba(14, 23, 38, .04);
    transition: background-color var(--dur-rapida) var(--curva),
                border-color var(--dur-rapida) var(--curva),
                color var(--dur-rapida) var(--curva),
                transform var(--dur-rapida) var(--curva);
  }
  .btn:hover {
    background: var(--color-superficie-sutil);
    border-color: var(--color-borde-control);
    color: var(--color-texto);
    text-decoration: none;
  }
  .btn:active { background: var(--color-borde); }
  /* Al presionar, el botón cede un poco: se siente que respondió */
  .btn:not([aria-disabled="true"]):not(:disabled):active { transform: scale(.97); }
  @media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }
  .btn .ico { width: 16px; height: 16px; }

  /* Una sola acción de color: azul. «acento» queda como sinónimo de principal */
  .btn-primario, .btn-acento {
    background: var(--color-primario-relleno);
    border-color: var(--color-primario-relleno);
    color: var(--color-sobre-primario);
    box-shadow: 0 1px 2px rgba(31, 59, 168, .24);
  }
  .btn-primario:hover, .btn-acento:hover,
  .btn-primario:active, .btn-acento:active {
    background: var(--color-primario-relleno-hover);
    border-color: var(--color-primario-relleno-hover);
    color: var(--color-sobre-primario);
  }
  .btn-peligro {
    background: var(--color-negativo-relleno);
    border-color: var(--color-negativo-relleno);
    color: var(--color-sobre-primario);
  }
  .btn-peligro:hover, .btn-peligro:active {
    background: var(--color-negativo-relleno-hover);
    border-color: var(--color-negativo-relleno-hover);
    color: var(--color-sobre-primario);
  }
  .btn-fantasma {
    background: transparent;
    border-color: transparent;
    color: var(--color-texto-2);
    box-shadow: none;
  }
  .btn-fantasma:hover {
    background: var(--color-superficie-sutil);
    border-color: transparent;
    color: var(--color-texto);
  }
  .btn-chico {
    min-height: var(--control-alto-s);
    padding: 0 10px;
    font-size: var(--texto-s);
    gap: 6px;
  }
  .btn-bloque { width: 100%; }
  .btn-icono { padding: 0; width: var(--control-alto); }
  .btn-chico.btn-icono { width: var(--control-alto-s); }
  .btn[disabled], .btn:disabled, .btn[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
  }
  summary.btn { display: inline-flex; list-style: none; }

  /* ---------- Tarjetas ---------------------------------------------------- */
  .tarjeta {
    background: var(--tarjeta-fondo);
    border: 1px solid var(--tarjeta-borde);
    border-radius: var(--tarjeta-radio);
    padding: var(--tarjeta-pad);
    min-width: 0;
  }
  .tarjeta > h2, .tarjeta > h3, .tarjeta-titulo h2, .tarjeta-titulo h3 {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
    font-size: var(--titulo-3);
    line-height: var(--lh-l);
  }
  .tarjeta-titulo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--esp-2) var(--esp-3);
    margin-bottom: var(--esp-4);
  }
  .tarjeta-titulo h2, .tarjeta-titulo h3 { margin: 0; }
  .tarjeta-titulo .der { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }
  details.tarjeta > summary { font-weight: 600; font-size: var(--texto-l); flex-wrap: wrap; }
  details.tarjeta[open] > summary { margin-bottom: var(--esp-3); }
  .tarjeta small, .aviso small { color: var(--color-texto-2); }

  /* Rejillas */
  .rejilla { display: grid; gap: var(--esp-4); }
  .rejilla > * { min-width: 0; }
  .rejilla-4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
  .rejilla-3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
  .rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); }

  /* ---------- Cifras (tarjetas KPI) --------------------------------------- */
  .kpi { position: relative; display: flex; flex-direction: column; gap: var(--esp-1); }
  .kpi .rotulo {
    padding-right: var(--esp-8);
    font-size: var(--texto-s);
    line-height: var(--lh-s);
    font-weight: 500;
    color: var(--color-texto-2);
  }
  .kpi .valor {
    font-size: var(--cifra-kpi);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }
  .kpi .base { font-size: var(--texto-xs); line-height: var(--lh-xs); color: var(--color-texto-3); }
  .kpi.ingreso .valor { color: var(--color-positivo); }
  .kpi.egreso .valor { color: var(--color-negativo); }
  .kpi-acciones-pie { margin-top: auto; padding-top: var(--esp-2); }
  .cuadre {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--texto-xs);
    font-weight: 500;
  }
  .cuadre .ico { width: 14px; height: 14px; }
  .cuadre.ok { color: var(--color-positivo); }
  .cuadre.mal { color: var(--color-negativo); }

  /* Botón «¿De dónde sale?»: discreto, en la esquina de la tarjeta */
  .cifra-btn {
    min-height: 28px;
    min-width: 28px;
    width: 28px;
    padding: 0;
    border-radius: var(--radio-pleno);
    color: var(--color-texto-3);
  }
  .cifra-btn:hover { color: var(--color-primario); background: var(--color-primario-sutil); }
  .cifra-icono-esquina { position: absolute; top: var(--esp-3); right: var(--esp-3); }
  .cifra-drilldown-link {
    font-size: var(--texto-s);
    font-weight: 500;
    color: var(--color-primario);
    text-decoration: none;
  }
  .cifra-drilldown-link:hover { text-decoration: underline; }
  .base-rotulo {
    display: inline;
    font-size: var(--texto-xs);
    line-height: var(--lh-xs);
    font-weight: 400;
    color: var(--color-texto-3);
  }

  /* ---------- Tablas ------------------------------------------------------ */
  /* Toda tabla se desplaza dentro de su caja: nunca se recortan columnas */
  .tabla-envoltura {
    position: relative;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-m);
    background: var(--color-superficie);
  }
  .tabla-envoltura > table.tabla { border: 0; }
  table.tabla {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--tabla-fuente);
    line-height: var(--tabla-lh);
    font-variant-numeric: tabular-nums;
  }
  table.tabla caption {
    caption-side: top;
    padding: var(--esp-3) var(--celda-px);
    text-align: left;
    font-weight: 600;
    color: var(--color-texto);
  }
  table.tabla th, table.tabla td {
    padding: var(--celda-py) var(--celda-px);
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-borde);
  }
  table.tabla thead th {
    background: var(--tabla-cab-fondo);
    color: var(--tabla-cab-texto);
    font-size: var(--texto-xs);
    line-height: var(--lh-xs);
    font-weight: 500;
    white-space: nowrap;
  }
  table.tabla tbody tr { transition: background-color var(--dur-rapida) var(--curva); }
  table.tabla tbody tr:hover > td { background: var(--color-fila-hover); }
  table.tabla tbody tr:last-child > td { border-bottom: 0; }
  table.tabla th.num, table.tabla td.num { text-align: right; white-space: nowrap; }
  table.tabla tfoot th, table.tabla tfoot td, table.tabla tr.total > td, table.tabla tr.total > th {
    font-weight: 600;
    background: var(--color-superficie-sutil);
    border-top: 1px solid var(--color-borde-control);
    border-bottom: 0;
  }
  table.tabla tr.anulado > td { color: var(--color-texto-3); text-decoration: line-through; }
  .celda-acciones { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 6px; }

  /* Cabecera fija dentro de una caja con alto propio */
  .tabla-sticky-wrap { max-height: min(72vh, 900px); overflow: auto; }
  .tabla-sticky-wrap .tabla thead th { position: sticky; top: 0; z-index: 2; }

  /* Con desborde (lo marca app.js): primera columna fija y sombra de «hay más» */
  .tabla-envoltura.desborda table.tabla tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--color-superficie);
    max-width: 42vw;
  }
  .tabla-envoltura.desborda table.tabla thead tr > :first-child { background: var(--tabla-cab-fondo); z-index: 3; }
  .tabla-envoltura.desborda table.tabla tbody tr:hover > :first-child { background: var(--color-fila-hover); }
  .tabla-envoltura.desborda table.tabla :is(tfoot tr, tr.total) > :first-child { background: var(--color-superficie-sutil); }
  .tabla-envoltura.hay-mas-izq table.tabla tr > :first-child { box-shadow: 8px 0 10px -8px rgba(10, 37, 66, .28); }
  .tabla-envoltura.hay-mas-der {
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 40px);
    mask-image: linear-gradient(to left, transparent 0, #000 40px);
  }

  /* ---------- Formularios ------------------------------------------------- */
  .campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .campo > label, .rotulo-campo {
    font-size: var(--texto-s);
    line-height: var(--lh-s);
    font-weight: 500;
    color: var(--color-texto);
  }
  .campo .ayuda { font-size: var(--texto-xs); line-height: var(--lh-xs); color: var(--color-texto-3); margin: 0; }
  .campo .msg { font-size: var(--texto-s); line-height: var(--lh-s); min-height: 0; }
  .campo .msg.error { color: var(--color-negativo); font-weight: 500; }
  .campo .msg.ok { color: var(--color-positivo); }
  input[type="text"], input[type="number"], input[type="date"], input[type="time"],
  input[type="datetime-local"], input[type="month"], input[type="password"],
  input[type="search"], input[type="tel"], input[type="email"], input[type="url"],
  input:not([type]), select, textarea {
    width: 100%;
    min-width: 0;
    min-height: var(--control-alto);
    padding: 0 12px;
    border: 1px solid var(--campo-borde);
    border-radius: var(--radio-s);
    background: var(--campo-fondo);
    color: var(--color-texto);
    font-size: var(--texto-l);
    line-height: var(--lh-l);
    transition: border-color var(--dur-rapida) var(--curva), box-shadow var(--dur-rapida) var(--curva);
  }
  textarea { min-height: 88px; padding: var(--esp-2) 12px; resize: vertical; }
  select { cursor: pointer; padding-right: var(--esp-6); }
  input:hover, select:hover, textarea:hover { border-color: var(--color-texto-3); }
  input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--color-foco); }
  input::placeholder, textarea::placeholder { color: var(--color-texto-3); opacity: 1; }
  input[readonly] { background: var(--color-superficie-sutil); color: var(--color-texto-2); }
  input:disabled, select:disabled, textarea:disabled { opacity: .6; cursor: not-allowed; }
  input.monto, .monto { font-variant-numeric: tabular-nums; }
  input.monto { text-align: right; }
  input.error, select.error, textarea.error, [aria-invalid="true"] {
    border-color: var(--color-negativo);
    box-shadow: 0 0 0 1px var(--color-negativo);
  }
  input.ok { border-color: var(--color-positivo); }
  input[type="checkbox"], input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--color-primario-relleno);
    cursor: pointer;
    flex: none;
  }
  input[type="file"] { max-width: 100%; font-size: var(--texto-m); }
  input[type="file"]::file-selector-button {
    margin-right: var(--esp-3);
    min-height: var(--control-alto-s);
    padding: 0 12px;
    border: 1px solid var(--color-borde-control);
    border-radius: var(--radio-s);
    background: var(--color-superficie);
    color: var(--color-texto);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
  }

  /* Opciones en fila (tipo de asiento, moneda…): control segmentado */
  .seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 2px;
    border-radius: 8px;
    background: var(--color-superficie-sutil);
    border: 1px solid var(--color-borde);
  }
  .seg input { position: absolute; opacity: 0; pointer-events: none; }
  .seg label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: calc(var(--control-alto) - 6px);
    padding: 0 var(--esp-4);
    border-radius: var(--radio-s);
    font-size: var(--texto-m);
    font-weight: 500;
    color: var(--color-texto-2);
    cursor: pointer;
  }
  .seg label:hover { color: var(--color-texto); }
  .seg input:checked + label {
    background: var(--color-superficie);
    color: var(--color-texto);
    box-shadow: 0 1px 2px rgba(14, 23, 38, .12), 0 0 0 1px var(--color-borde);
  }
  .seg input:focus-visible + label { outline: 2px solid var(--color-foco); outline-offset: 0; }

  /* Filtros */
  .filtros {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--esp-3) var(--esp-4);
    align-items: start;
  }
  .filtros .campo { min-width: 0; }
  .filtros input, .filtros select, .campo-filtro input, .campo-filtro select { font-size: var(--texto-m); }
  .filtros .acciones { padding-top: 24px; }
  .campo-filtro { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .campo-filtro label { font-size: var(--texto-s); font-weight: 500; }
  .campo-filtro-botones { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: flex-end; }
  @media (max-width: 767px) {
    .filtros { grid-template-columns: 1fr; }
  }

  /* Ayudas y textos de apoyo */
  .ayuda { font-size: var(--texto-s); line-height: var(--lh-s); color: var(--color-texto-2); }
  .lista-ayuda { margin: 0; padding-left: var(--esp-5); }
  .lista-ayuda li { margin-bottom: var(--esp-2); }
  .ayuda-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--esp-4) var(--esp-6); }
  .mas-ayuda { font-size: var(--texto-s); }
  .ayuda-campo > summary {
    min-height: 28px;
    font-size: var(--texto-s);
    color: var(--color-primario);
  }
  .ayuda-campo-cuerpo {
    margin-top: var(--esp-2);
    padding: var(--esp-3);
    border-radius: var(--radio-s);
    background: var(--color-superficie-sutil);
    font-size: var(--texto-s);
  }
  .acciones { display: flex; flex-wrap: wrap; gap: var(--esp-2); align-items: center; }
  .leyenda { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-4); margin-top: var(--esp-2); font-size: var(--texto-xs); color: var(--color-texto-3); }

  /* ---------- Combo accesible <ay-combo> --------------------------------- */
  .combo { position: relative; }
  .combo-lista {
    position: absolute;
    z-index: 60;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: var(--esp-1);
    list-style: none;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-m);
    box-shadow: var(--sombra-flotante);
  }
  .combo-lista li {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
    min-height: 36px;
    padding: var(--esp-2) var(--esp-3);
    border-radius: var(--radio-s);
    cursor: pointer;
  }
  .combo-lista li .nom { font-weight: 500; }
  .combo-lista li .meta { margin-left: auto; font-size: var(--texto-xs); color: var(--color-texto-3); }
  .combo-lista li:hover { background: var(--color-superficie-sutil); }
  .combo-lista li[aria-selected="true"] { background: var(--color-primario-sutil); }
  .combo-lista .vacio, .combo-lista .grupo { cursor: default; }
  .combo-lista .vacio { color: var(--color-texto-3); }
  .combo-lista .grupo { padding: var(--esp-2) var(--esp-3) 2px; min-height: 0; font-size: var(--texto-xs); font-weight: 500; color: var(--color-texto-3); }

  /* ---------- Chips de estado: punto + texto ------------------------------ */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--chip-alto);
    padding: 0 var(--esp-2);
    border-radius: var(--radio-s);
    border: 1px solid transparent;
    background: var(--color-superficie-sutil);
    color: var(--color-texto-2);
    font-size: var(--texto-xs);
    line-height: var(--lh-xs);
    font-weight: 500;
    white-space: nowrap;
    vertical-align: middle;
  }
  .chip .ico { width: 14px; height: 14px; }
  .chip-ingreso { background: var(--color-positivo-sutil); color: var(--color-positivo); }
  .chip-egreso { background: var(--color-negativo-sutil); color: var(--color-negativo); }
   .chip-dato { background: var(--color-primario-sutil); color: var(--color-primario); }
  .chip-apertura, .chip-supuesto { background: var(--color-aviso-sutil); color: var(--color-aviso); }
  .chip-gris, .chip-neutro { background: var(--color-superficie-sutil); color: var(--color-texto-2); border-color: var(--color-borde); }
  :is(.chip-ingreso, .chip-egreso, .chip-apertura, .chip-supuesto)::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: var(--radio-pleno);
    background: currentColor;
  }
  .chip-filtro { background: var(--color-primario-sutil); color: var(--color-texto); border-color: var(--color-primario-borde); }
  .chip-filtro-quitar {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-right: -4px;
    border-radius: var(--radio-pleno);
    color: var(--color-texto-2);
    text-decoration: none;
  }
  .chip-filtro-quitar:hover { background: var(--color-superficie); color: var(--color-negativo); }

  /* ---------- Avisos ------------------------------------------------------ */
  .aviso {
    display: flex;
    align-items: flex-start;
    gap: var(--esp-3);
    margin-bottom: var(--esp-4);
    padding: var(--esp-3) var(--esp-4);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-m);
    background: var(--color-superficie);
    color: var(--color-texto);
  }
  .aviso > .ic { margin-top: 1px; color: var(--color-texto-3); }
  .aviso > div { min-width: 0; }
  .aviso.info > .ic { color: var(--color-primario); }
  .aviso.ok { background: var(--color-positivo-sutil); border-color: var(--color-positivo-borde); }
  .aviso.ok > .ic { color: var(--color-positivo); }
  .aviso.alerta { background: var(--color-aviso-sutil); border-color: var(--color-aviso-borde); }
  .aviso.alerta > .ic { color: var(--color-aviso); }
  .aviso.error { background: var(--color-negativo-sutil); border-color: var(--color-negativo-borde); }
  .aviso.error > .ic { color: var(--color-negativo); }
  .aviso p:last-child { margin-bottom: 0; }

  /* Estados vacíos: ícono, título, una frase y la acción */
  .vacio {
    padding: var(--esp-10) var(--esp-6);
    text-align: center;
    color: var(--color-texto-2);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-m);
  }
  .vacio > .ic { width: 48px; height: 48px; margin: 0 auto var(--esp-3); border-radius: var(--radio-pleno); background: var(--color-superficie-sutil); color: var(--color-texto-3); }
  .vacio > .ic .ico { width: 22px; height: 22px; }
  .vacio :is(h2, h3) { margin: 0 0 var(--esp-1); font-size: var(--titulo-3); line-height: var(--lh-l); color: var(--color-texto); }
  .vacio .acciones { justify-content: center; margin-top: var(--esp-4); }

  /* Panel de problemas del formulario */
  .panel-problemas { border-left: 3px solid var(--color-negativo); }
  .panel-problemas ul { margin: var(--esp-2) 0 0; padding-left: var(--esp-5); }
  .panel-problemas li { margin-bottom: var(--esp-2); }
  .panel-problemas li.error { color: var(--color-negativo); }
  .panel-problemas li.aviso { display: list-item; margin: 0 0 var(--esp-2); padding: 0; border: 0; background: none; color: var(--color-aviso); }
  .p-mensaje { font-weight: 500; }
  .p-campo, .p-como { display: block; color: var(--color-texto-2); font-size: var(--texto-s); }

  /* ---------- Pestañas ---------------------------------------------------- */
  .pestanas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-1);
    margin-bottom: var(--esp-4);
    border-bottom: 1px solid var(--color-borde);
  }
  .pestanas button {
    min-height: var(--control-alto);
    padding: 0 var(--esp-3);
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--color-texto-2);
    font-weight: 500;
    cursor: pointer;
  }
  .pestanas button:hover { color: var(--color-texto); }
  .pestanas button[aria-selected="true"] { color: var(--color-texto); border-bottom-color: var(--color-primario); }

  /* ---------- Interruptor (role="switch") -------------------------------- */
  .interruptor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
    width: 100%;
    min-height: var(--control-alto);
    padding: 0 var(--esp-3);
    border: 0;
    border-radius: var(--radio-s);
    background: transparent;
    color: var(--color-texto);
    font-size: var(--texto-m);
    text-align: left;
    cursor: pointer;
  }
  .interruptor:hover { background: var(--color-superficie-sutil); }
  .interruptor-pista {
    position: relative;
    flex: none;
    width: 34px;
    height: 20px;
    border-radius: var(--radio-pleno);
    background: var(--color-borde-control);
    transition: background-color var(--dur-base) var(--curva);
  }
  .interruptor-pista::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: var(--radio-pleno);
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: transform var(--dur-base) var(--curva);
  }
  .interruptor[aria-checked="true"] .interruptor-pista { background: var(--color-primario-relleno); }
  .interruptor[aria-checked="true"] .interruptor-pista::after { transform: translateX(14px); }

  /* ---------- Menú desplegable (botón + panel) --------------------------- */
  .desplegable { position: relative; }
  .desplegable-panel {
    position: absolute;
    z-index: 70;
    top: calc(100% + 6px);
    right: 0;
    min-width: 240px;
    max-width: min(360px, calc(100vw - 2 * var(--esp-4)));
    max-height: min(70vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--esp-2);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-m);
    box-shadow: var(--sombra-flotante);
    animation: aparece var(--dur-base) var(--curva);
  }
  .desplegable-panel.a-la-izquierda { right: auto; left: 0; }
  .desplegable-lista { margin: 0; padding: 0; list-style: none; }
  .desplegable-lista > li > :is(a, button):not(.interruptor),
  .cab-acciones-menu > :is(a, button, form > button) {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    width: 100%;
    min-height: var(--control-alto);
    padding: 0 var(--esp-3);
    border: 0;
    border-radius: var(--radio-s);
    background: transparent;
    color: var(--color-texto);
    font-size: var(--texto-m);
    font-weight: 400;
    text-align: left;
    text-decoration: none;
    white-space: normal;
    box-shadow: none;
    cursor: pointer;
  }
  .desplegable-lista > li > :is(a, button):not(.interruptor):hover,
  .cab-acciones-menu > :is(a, button, form > button):hover {
    background: var(--color-superficie-sutil);
    color: var(--color-texto);
  }
  .desplegable-lista .ico { color: var(--color-texto-3); }
  .desplegable-sep { height: 1px; margin: var(--esp-2) 0; background: var(--color-borde); }
  .desplegable-rotulo { padding: var(--esp-2) var(--esp-3) var(--esp-1); font-size: var(--texto-xs); font-weight: 500; color: var(--color-texto-3); }
  .opciones-fila { display: flex; gap: 2px; margin: 0 var(--esp-3) var(--esp-2); padding: 2px; border-radius: 8px; background: var(--color-superficie-sutil); border: 1px solid var(--color-borde); }
  .opciones-fila label {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    border-radius: var(--radio-s);
    font-size: var(--texto-s);
    font-weight: 500;
    color: var(--color-texto-2);
    cursor: pointer;
  }
  .opciones-fila input { position: absolute; opacity: 0; pointer-events: none; }
  .opciones-fila input:checked + label { background: var(--color-superficie); color: var(--color-texto); box-shadow: 0 1px 2px rgba(14, 23, 38, .12), 0 0 0 1px var(--color-borde); }
  .opciones-fila input:focus-visible + label { outline: 2px solid var(--color-foco); outline-offset: 0; }

  /* ---------- Diálogos ---------------------------------------------------- */
  dialog {
    width: min(560px, calc(100vw - 2 * var(--esp-4)));
    max-height: calc(100dvh - 2 * var(--esp-6));
    padding: 0;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-l);
    background: var(--color-superficie);
    color: var(--color-texto);
    box-shadow: var(--sombra-flotante);
  }
  dialog[open] { animation: aparece var(--dur-lenta) var(--curva); }
  /* Salida suave y más rápida que la entrada (la entrada la da la animación de [open]) */
  dialog {
    transition: opacity var(--dur-rapida) var(--curva-salida), transform var(--dur-rapida) var(--curva-salida),
                overlay var(--dur-rapida) allow-discrete, display var(--dur-rapida) allow-discrete;
  }
  dialog:not([open]) { opacity: 0; transform: scale(.98); }
  dialog.panel-lateral:not([open]) { transform: translateX(24px); }
  @media (prefers-reduced-motion: reduce) {
    dialog, dialog:not([open]) { transition: none; transform: none; }
  }
  dialog::backdrop { background: var(--color-velo); }
  dialog .dlg-cab {
    padding: var(--esp-5) var(--esp-6) var(--esp-3);
    font-size: var(--titulo-3);
    line-height: var(--lh-l);
    font-weight: 600;
  }
  dialog .dlg-cuerpo { padding: var(--esp-2) var(--esp-6) var(--esp-5); overflow-wrap: anywhere; }
  dialog .dlg-pie {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--esp-2);
    padding: var(--esp-4) var(--esp-6);
    border-top: 1px solid var(--color-borde);
    background: var(--color-superficie-sutil);
    border-radius: 0 0 var(--radio-l) var(--radio-l);
  }
  .dlg-consecuencias { display: grid; grid-template-columns: auto 1fr; gap: var(--esp-1) var(--esp-2); margin: var(--esp-3) 0 0; }
  .dlg-consecuencias dt { color: var(--color-texto-3); }
  .dlg-consecuencias dd { margin: 0; }
  .cifra-valor { font-size: var(--texto-l); }
  .cifra-valor b { font-variant-numeric: tabular-nums; }
  .cifra-base, .cifra-nota { color: var(--color-texto-2); font-size: var(--texto-s); }
  .cifra-bloque { margin: var(--esp-3) 0; padding: var(--esp-3) var(--esp-4); border-radius: var(--radio-m); background: var(--color-superficie-sutil); }
  .cifra-bloque h3 { font-size: var(--texto-m); margin-bottom: var(--esp-1); }
  .cifra-bloque p { margin-bottom: var(--esp-1); font-size: var(--texto-s); }

  /* Paleta «Buscar o ejecutar» (Ctrl K) */
  dialog.dlg-paleta { width: min(640px, calc(100vw - 2 * var(--esp-4))); margin-top: 12vh; }
  .dlg-paleta .dlg-cab { padding-bottom: var(--esp-2); }
  .dlg-paleta #paleta-q { min-height: 48px; font-size: var(--texto-l); }
  .paleta-lista { max-height: 52vh; margin: var(--esp-3) 0 0; padding: 0; overflow: auto; list-style: none; }
  .dlg-paleta #paleta-estado { margin: var(--esp-2) 0 0; }
  #paleta-lista li[role="option"] {
    display: flex;
    align-items: center;
    gap: var(--esp-3);
    min-height: 44px;
    padding: var(--esp-2) var(--esp-3);
    border-radius: var(--radio-s);
    cursor: pointer;
  }
  #paleta-lista li[aria-selected="true"] { background: var(--color-primario-sutil); }
  #paleta-lista .paleta-grupo { padding: var(--esp-3) var(--esp-3) var(--esp-1); font-size: var(--texto-xs); font-weight: 500; color: var(--color-texto-3); }
  .paleta-ic { display: inline-flex; color: var(--color-texto-3); }
  .paleta-txt { display: flex; flex-direction: column; min-width: 0; }
  .paleta-txt small { color: var(--color-texto-3); }
  .paleta-atajo { margin-left: auto; }

  /* ---------- Avisos flotantes -------------------------------------------- */
  .flotantes {
    position: fixed;
    right: var(--esp-4);
    bottom: var(--esp-4);
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: var(--esp-2);
    width: max-content;
    max-width: min(420px, calc(100vw - 2 * var(--esp-4)));
  }
  .flotante {
    min-width: 0;
    padding: var(--esp-3) var(--esp-4);
    border: 1px solid var(--color-borde);
    border-left: 3px solid var(--color-positivo);
    border-radius: var(--radio-m);
    background: var(--color-superficie);
    box-shadow: var(--sombra-flotante);
    overflow-wrap: anywhere;
    animation: aparece var(--dur-base) var(--curva);
  }
  .flotante.error { border-left-color: var(--color-negativo); }
  .flotante.info { border-left-color: var(--color-primario); }
  /* En el teléfono los avisos suben por encima de la barra inferior */
  @media (max-width: 767px) {
    .flotantes { bottom: calc(var(--inferior-alto) + var(--esp-3)); left: var(--esp-4); width: auto; }
  }

  /* Modo presentación: cifras y tablas más grandes para una reunión */
  html[data-presentacion="1"] .kpi .valor { font-size: var(--cifra-heroe); line-height: 1.1; }
  html[data-presentacion="1"] table.tabla { --tabla-fuente: var(--texto-l); --tabla-lh: var(--lh-l); }

  /* Cifra negativa: siempre en rojo y con su signo */
  .es-negativo { color: var(--color-negativo); }

  /* ---------- Carga ------------------------------------------------------- */
  .esqueleto {
    display: block;
    height: 12px;
    border-radius: var(--radio-s);
    background: linear-gradient(90deg, var(--color-superficie-sutil) 25%, var(--color-borde) 50%, var(--color-superficie-sutil) 75%);
    background-size: 200% 100%;
    animation: brillo 1.4s linear infinite;
  }

  @keyframes aparece { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  @keyframes brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }
}

/* ── D2 Movimientos: tabla financiera ──────────────────────────────────────
   Componente único para las tablas de dinero (macro `templates/_tabla.html`):
   vistas como pestañas, barra de filtros, resumen en una línea, tabla con
   cabecera fija y cifras tabulares, tipo con punto de color, paginación
   «1–100 de 1.439», estados vacíos y, en el teléfono, lista de dos líneas. */
@layer componentes {
  /* Vistas rápidas (pestañas que son enlaces) */
  .tf-vistas {
    display: flex;
    gap: var(--esp-1);
    margin: 0 0 var(--esp-4);
    border-bottom: 1px solid var(--color-borde);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tf-vista {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--esp-2);
    min-height: var(--control-alto);
    padding: 0 var(--esp-3);
    color: var(--color-texto-2);
    font-size: var(--texto-m);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--dur-rapida) var(--curva);
  }
  .tf-vista:hover { color: var(--color-texto); }
  .tf-vista[aria-current="page"] { color: var(--color-texto); }
  .tf-vista[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: var(--esp-3);
    right: var(--esp-3);
    bottom: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--color-primario);
  }
  .tf-vista-n { font-size: var(--texto-xs); color: var(--color-texto-3); font-variant-numeric: tabular-nums; }

  /* Resumen en una línea: cifras de todo el filtro */
  /* Separadores finos entre cifras; el de la primera de cada línea queda fuera
     (margen negativo + recorte horizontal), así una línea partida no empieza con «|». */
  .tf-resumen {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: var(--esp-1);
    margin-left: calc(-1 * var(--esp-3) - 1px);
    color: var(--color-texto-2);
    font-size: var(--texto-m);
  }
  .tf-resumen-item { padding: 0 var(--esp-3); border-left: 1px solid var(--color-borde); line-height: 28px; white-space: nowrap; }
  .cab-descripcion:has(> .tf-resumen) { overflow-x: clip; }
  .tf-resumen-item b { color: var(--color-texto); font-weight: 600; font-variant-numeric: tabular-nums; }
  .tf-resumen-item b.es-negativo { color: var(--color-negativo); }
  .tf-resumen-info { width: 28px; min-height: 28px; margin-left: var(--esp-1); }
  .tf-resumen-info .ico { width: 16px; height: 16px; }
  /* Pantallas medianas: cifras más juntas para que el resumen siga en una línea. */
  @media (min-width: 768px) and (max-width: 1279px) {
    .tf-resumen { margin-left: calc(-1 * var(--esp-2) - 1px); font-size: var(--texto-s); }
    .tf-resumen-item { padding: 0 var(--esp-2); }
  }

  /* Tarjeta: barra de filtros + tabla + pie, en una sola pieza */
  .tf-tarjeta {
    min-width: 0;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-m);
    background: var(--color-superficie);
  }
  .tf-barra { position: relative; padding: var(--esp-3) var(--esp-4); border-bottom: 1px solid var(--color-borde); }
  .tf-barra-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); }
  .tf-buscar { position: relative; flex: 1 1 240px; min-width: 0; }
  .tf-buscar > .ico { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--color-texto-3); pointer-events: none; }
  .tf-buscar input { padding-left: 36px; font-size: var(--texto-m); background: var(--color-superficie-sutil); border-color: var(--color-borde); }
  .tf-buscar input:hover { border-color: var(--color-borde-control); }
  .tf-buscar input:focus-visible { background: var(--color-superficie); }
  .tf-barra-extra { display: contents; }
  .tf-barra-alternar { display: none; }
  /* Filtro con su etiqueta adentro: «Cuenta  Todas» */
  .tf-filtro {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-alto);
    padding-left: 12px;
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-s);
    background: var(--color-superficie);
    font-size: var(--texto-m);
    cursor: pointer;
    transition: border-color var(--dur-rapida) var(--curva);
  }
  .tf-filtro:hover { border-color: var(--color-borde-control); }
  .tf-filtro:focus-within { border-color: var(--color-foco); box-shadow: 0 0 0 1px var(--color-foco); }
  .tf-filtro-rotulo { color: var(--color-texto-3); white-space: nowrap; }
  .tf-filtro :is(select, input) {
    width: auto;
    min-height: calc(var(--control-alto) - 2px);
    padding-left: var(--esp-2);
    border: 0;
    background-color: transparent;
    font-size: var(--texto-m);
    font-weight: 500;
    box-shadow: none;
  }
  .tf-filtro select { max-width: 180px; }
  .tf-filtro input[type="date"] { width: 8.75rem; padding-right: var(--esp-2); }
  .tf-filtro :is(select, input):focus-visible { outline: none; }
  /* «Más filtros»: panel plegable que flota sobre la tabla */
  .tf-mas { position: static; }
  .tf-mas > summary { list-style: none; }
  .tf-mas > summary::before { content: none; }
  .tf-mas[open] > summary { background: var(--color-superficie-sutil); border-color: var(--color-borde-control); }
  .tf-mas-n {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radio-pleno);
    background: var(--color-primario-relleno);
    color: var(--color-sobre-primario);
    font-size: var(--texto-xs);
    font-weight: 600;
  }
  .tf-mas-panel {
    position: absolute;
    z-index: 40;
    top: calc(100% - var(--esp-2));
    right: var(--esp-4);
    width: min(560px, calc(100vw - 2 * var(--esp-4)));
    padding: var(--esp-4);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-m);
    background: var(--color-superficie);
    box-shadow: var(--sombra-flotante);
    animation: aparece var(--dur-base) var(--curva);
  }
  .tf-mas-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3) var(--esp-4); }
  .tf-mas-rejilla select { font-size: var(--texto-m); }
  .tf-mas-pie { display: flex; justify-content: flex-end; margin-top: var(--esp-4); padding-top: var(--esp-3); border-top: 1px solid var(--color-borde); }

  /* Filtros puestos, cada uno con su × */
  .tf-activos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); padding: var(--esp-3) var(--esp-4); border-bottom: 1px solid var(--color-borde); }
  .tf-activos-rotulo { font-size: var(--texto-xs); font-weight: 500; color: var(--color-texto-3); }
  .tf-activos-lista { display: contents; list-style: none; }
  .tf-activo {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 28px;
    padding: 0 2px 0 10px;
    border: 1px solid var(--color-primario-borde);
    border-radius: var(--radio-pleno);
    background: var(--color-primario-sutil);
    font-size: var(--texto-s);
    font-weight: 500;
  }
  .tf-activo-quitar { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radio-pleno); color: var(--color-texto-2); }
  .tf-activo-quitar:hover { background: var(--color-superficie); color: var(--color-negativo); }
  .tf-activo-quitar .ico { width: 14px; height: 14px; }
  .tf-activos-limpiar { margin-left: var(--esp-1); font-size: var(--texto-s); font-weight: 500; }

  /* La tabla */
  .tf-caja { position: relative; min-width: 0; }
  table.tf {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--tabla-fuente);
    line-height: var(--tabla-lh);
    font-variant-numeric: tabular-nums;
  }
  .tf th, .tf td {
    padding: var(--celda-py) var(--celda-px);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--color-borde);
  }
  .tf thead th {
    position: sticky;
    top: var(--barra-alto);
    z-index: 2;
    padding-top: 10px;
    padding-bottom: 10px;
    background: var(--color-superficie-sutil);
    color: var(--color-texto-2);
    font-size: var(--texto-xs);
    line-height: var(--lh-xs);
    font-weight: 500;
    white-space: nowrap;
  }
  .tf .num { text-align: right; white-space: nowrap; }
  .tf tbody tr:last-child > td { border-bottom: 0; }
  .tf-fila > td { transition: background-color var(--dur-rapida) var(--curva); }
  .tf-fila[data-href] { cursor: pointer; }
  .tf-fila:hover > td { background: var(--color-fila-hover); }
  .tf-fila.es-activa > td { background: var(--color-primario-sutil); }
  .tf-enlace { color: var(--color-texto); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
  .tf-enlace:hover { color: var(--color-primario); text-decoration: underline; text-underline-offset: 3px; }
  .tf-enlace-txt { font-weight: 500; overflow-wrap: anywhere; }
  .tf-sub, .tf-n { display: block; margin-top: 2px; font-size: var(--texto-s); line-height: var(--lh-s); color: var(--color-texto-3); }
  .tf-n { font-size: var(--texto-xs); }
  .tf-monto { font-weight: 500; color: var(--color-texto); }
  .tf-monto.es-negativo { color: var(--color-negativo); }
  .tf-monto.es-neutro { color: var(--color-texto-2); }
  .tf-cifra { color: var(--color-texto-2); }
  .tf-fila.es-anulado > td, .tf-fila.es-anulado .tf-enlace { color: var(--color-texto-3); }
  .tf-fila.es-anulado :is(.tf-enlace, .tf-monto, .tf-cifra) { text-decoration: line-through; text-decoration-thickness: 1px; }
  /* Tipo de asiento: punto de color y texto */
  .tf-tipo { display: inline-flex; align-items: center; gap: 6px; color: var(--color-texto-2); white-space: nowrap; }
  .tf-tipo::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: var(--radio-pleno); background: var(--color-texto-3); }
  .tf-tipo-ingreso::before { background: var(--color-positivo); }
  .tf-tipo-egreso::before { background: var(--color-negativo); }
  .tf-tipo-traspaso::before { background: var(--color-primario); }
  .tf-tipo-apertura::before { background: var(--color-aviso); }
  .tf-anulado { display: block; margin-top: 2px; font-size: var(--texto-xs); font-weight: 500; color: var(--color-negativo); }

  /* Pie: rango, filas por página y páginas */
  .tf-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); border-top: 1px solid var(--color-borde); font-size: var(--texto-s); color: var(--color-texto-2); }
  .tf-rango { margin: 0; }
  .tf-rango-n { color: var(--color-texto); font-weight: 600; font-variant-numeric: tabular-nums; }
  .tf-pie-der { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-4); }
  .tf-tamano { display: flex; align-items: center; gap: var(--esp-2); }
  .tf-tamano select { width: auto; min-height: var(--control-alto-s); padding: 0 var(--esp-6) 0 var(--esp-2); font-size: var(--texto-s); }
  .tf-paginas { display: flex; align-items: center; gap: 2px; }
  .tf-pag {
    display: inline-grid;
    place-items: center;
    min-width: var(--control-alto-s);
    height: var(--control-alto-s);
    padding: 0 var(--esp-2);
    border-radius: var(--radio-s);
    color: var(--color-texto-2);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
  }
  .tf-pag:hover { background: var(--color-superficie-sutil); color: var(--color-texto); }
  .tf-pag[aria-current="page"] { background: var(--color-primario-sutil); color: var(--color-primario); box-shadow: inset 0 0 0 1px var(--color-primario-borde); }
  .tf-pag[aria-disabled="true"] { opacity: .4; pointer-events: none; }
  .tf-pag-flecha .ico { width: 16px; height: 16px; transform: rotate(90deg); }
  .tf-pag-sig .ico { transform: rotate(-90deg); }
  .tf-pag-puntos { padding: 0 4px; color: var(--color-texto-3); }

  /* Estado vacío: ícono, título, una frase y la acción */
  .tf-vacio { display: flex; flex-direction: column; align-items: center; gap: var(--esp-2); padding: var(--esp-12) var(--esp-6); text-align: center; }
  .tf-vacio-ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--esp-2); border-radius: var(--radio-pleno); background: var(--color-superficie-sutil); color: var(--color-texto-3); }
  .tf-vacio-ic .ico { width: 22px; height: 22px; }
  .tf-vacio-titulo { margin: 0; font-size: var(--titulo-3); line-height: var(--lh-l); }
  .tf-vacio p { max-width: 46ch; margin: 0; color: var(--color-texto-2); }
  .tf-vacio .tf-vacio-titulo { font-weight: 600; color: var(--color-texto); }
  .tf-vacio-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--esp-2); margin-top: var(--esp-3); }

  /* Cargando (búsqueda al escribir): la tabla se atenúa, sin saltos */
  .tf-region[aria-busy="true"] .tf-caja { opacity: .55; transition: opacity var(--dur-base) var(--curva); }

  /* Pantallas medianas: la tabla se desplaza dentro de su caja */
  @media (max-width: 1279px) {
    .tf-caja { overflow-x: auto; overscroll-behavior-x: contain; }
    .tf thead th { top: 0; }
  }

  /* Teléfono: lista de dos líneas (los roles de tabla van explícitos en el HTML) */
  @media (max-width: 767px) {
    .tf-barra, .tf-activos, .tf-pie { padding-left: var(--esp-3); padding-right: var(--esp-3); }
    .tf-buscar { flex: 1 1 0; }
    .tf-barra-alternar:not([hidden]) { display: inline-flex; }
    .tf-barra-extra { display: flex; flex-wrap: wrap; flex-basis: 100%; gap: var(--esp-2); }
    .tf-barra-extra[data-plegado] { display: none; }
    .tf-resumen { display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-4); margin-left: 0; }
    .tf-resumen-item, .tf-resumen-item + .tf-resumen-item { padding: 0; border: 0; white-space: normal; }
    .tf-resumen-item b { white-space: nowrap; }
    .tf-vista { padding: 0 var(--esp-2); font-size: var(--texto-s); }
    .tf-vista[aria-current="page"]::after { left: var(--esp-2); right: var(--esp-2); }
    /* Un filtro con opciones largas no empuja la página de lado */
    .tf-filtro { flex: 1 1 auto; min-width: 0; max-width: 100%; }
    .tf-filtro select { max-width: none; flex: 1; min-width: 0; width: 100%; text-overflow: ellipsis; }
    .tf-mas-panel { position: fixed; top: auto; left: var(--esp-3); right: var(--esp-3); bottom: calc(var(--inferior-alto) + var(--esp-2)); width: auto; max-height: 70dvh; overflow-y: auto; }
    .tf-mas-rejilla { grid-template-columns: minmax(0, 1fr); }
    .tf-lista-movil { overflow-x: clip; }
    .tf-lista-movil :is(table.tf, tbody) { display: block; }
    .tf-lista-movil thead { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .tf-lista-movil .tf-fila {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 2px var(--esp-2);
      padding: var(--esp-3);
      border-bottom: 1px solid var(--color-borde);
    }
    .tf-lista-movil tbody .tf-fila:last-child { border-bottom: 0; }
    .tf-lista-movil .tf-fila > td { display: block; padding: 0; border: 0; background: none; }
    .tf-lista-movil .m-principal { order: 1; flex: 1 1 55%; min-width: 0; }
    .tf-lista-movil .m-monto { order: 2; flex: 0 1 auto; margin-left: auto; text-align: right; }
    .tf-lista-movil .tf-fila::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
    /* Cada dato viaja entero con su «·»: el separador nunca queda solo al final de una línea */
    .tf-lista-movil .m-meta { order: 3; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--texto-s); color: var(--color-texto-3); }
    .tf-lista-movil .m-meta ~ .m-meta::before { content: "·"; margin-right: var(--esp-2); color: var(--color-texto-3); }
    /* Una etiqueta de estado ya se separa sola: sin «·» delante (no queda suelto al saltar de línea) */
    .tf-lista-movil .m-meta:has(> :is(.cb-chip, .chip, .estado):first-child)::before { content: none; }
    .tf-lista-movil .m-eq { order: 4; margin-left: auto; font-size: var(--texto-s); }
    .tf-lista-movil .tf-fila > .m-acciones { order: 5; flex-basis: 100%; padding-top: var(--esp-2); }
    .tf-lista-movil .tf-fila > .m-oculta, .tf-lista-movil :is(.m-principal, .m-meta) .tf-sub, .tf-lista-movil .tf-n { display: none; }
    .tf-lista-movil .m-meta .tf-tipo { color: inherit; }
    .tf-lista-movil .tf-anulado { display: inline; margin-left: var(--esp-1); }
    .tf-pie { justify-content: space-between; }
    .tf-pag:not([aria-current]):not(.tf-pag-flecha), .tf-pag-puntos { display: none; }
    .tf-tamano label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  }
}

/* ── D2 Movimientos: panel lateral ─────────────────────────────────────────
   El detalle de una fila se abre a la derecha sin perder la lista (en el
   teléfono, a pantalla completa). Es un <dialog>: el foco queda adentro y Esc
   lo cierra. */
@layer componentes {
  dialog.panel-lateral {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(480px, 100vw);
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-left: 1px solid var(--color-borde);
    border-radius: 0;
    flex-direction: column;
  }
  dialog.panel-lateral[open] { display: flex; animation: panel-entra var(--dur-lenta) var(--curva); }
  dialog.panel-lateral::backdrop { background: color-mix(in srgb, var(--color-velo) 45%, transparent); }
  .panel-lateral-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
    min-height: var(--barra-alto);
    padding: var(--esp-2) var(--esp-3) var(--esp-2) var(--esp-6);
    border-bottom: 1px solid var(--color-borde);
  }
  .panel-lateral-titulo { margin: 0; font-size: var(--titulo-3); line-height: var(--lh-l); }
  .panel-lateral-nav { display: flex; gap: 2px; }
  .panel-lateral-nav .ico-arriba { transform: rotate(180deg); }
  .panel-lateral-cuerpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--esp-6); }
  @keyframes panel-entra { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    dialog.panel-lateral[open] { animation: aparece var(--dur-base) linear; }
  }
  /* Cargando el detalle: esqueleto de título y dos líneas (Movimientos y Cobros) */
  :is(.panel-cargando, .cb-cargando) { display: flex; flex-direction: column; gap: var(--esp-3); padding-top: var(--esp-2); }
  :is(.panel-cargando, .cb-cargando) .esqueleto:first-child { width: 40%; height: 28px; }
  :is(.panel-cargando, .cb-cargando) .esqueleto:nth-child(2) { width: 70%; }
  @media (max-width: 767px) {
    dialog.panel-lateral { width: 100vw; border-left: 0; }
    .panel-lateral-cuerpo { padding: var(--esp-4); }
  }
}

/* ── D2 Bancos: franja de cifras, pasos, bloque y datos ─────────────────────
   Piezas que comparten Bancos y cierre y Personal (macros en
   `templates/_bancos.html`) y que sirven a cualquier módulo:
   · `.cifras`   hasta 4 cifras en una sola superficie, con filetes entre ellas;
   · `.asistente`    asistente de 3 pasos visibles (hecho · actual · pendiente);
   · `.bloque`   sección con cabecera (título, dato y acción) y cuerpo;
   · `.plegable` explicación o detalle técnico plegado;
   · `.datos`    pares etiqueta / valor alineados. */
@layer componentes {
  /* Franja de cifras. `.hoy-cifra*` (Hoy y Resumen del mes) y `.sc-info` (Saldos)
     son los nombres que fijan las pruebas de esas pantallas: comparten estas reglas. */
  :is(.cifras, .hoy-cifras) {
    --n: 4;
    display: grid;
    grid-template-columns: repeat(var(--n), minmax(0, 1fr));
    gap: 1px;
    margin: 0 0 var(--esp-6);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-m);
    background: var(--color-borde);
    overflow: hidden;
  }
  .cifras[data-n="2"] { --n: 2; }
  .cifras[data-n="3"] { --n: 3; }
  :is(.cifra, .hoy-cifra) { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; padding: var(--esp-5) var(--esp-6); background: var(--color-superficie); }
  .hoy-cifra-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); }
  :is(.cifra-etq, .hoy-cifra-etq) { margin: 0; font-size: var(--texto-s); line-height: var(--lh-s); font-weight: 500; color: var(--color-texto-2); text-decoration: none; }
  a:is(.cifra-etq, .hoy-cifra-etq):hover { color: var(--color-primario); text-decoration: underline; text-underline-offset: 3px; }
  /* «ⓘ ¿De dónde sale?» de una cifra o de un bloque */
  :is(.hoy-cifra-info, .sc-info) {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    margin: -6px -8px -6px 0;
    padding: 0;
    border: 0;
    border-radius: var(--radio-pleno);
    background: transparent;
    color: var(--color-texto-3);
    cursor: pointer;
  }
  :is(.hoy-cifra-info, .sc-info):hover { background: var(--color-primario-sutil); color: var(--color-primario); }
  :is(.hoy-cifra-info, .sc-info) .ico { width: 16px; height: 16px; }
  :is(.cifra-valor, .hoy-cifra-valor) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 5px;
    margin: 0;
    font-size: clamp(1.375rem, 1.1rem + 0.7vw, 1.75rem);
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--color-texto);
  }
  :is(.cifra-num, .hoy-cifra-num) { white-space: nowrap; }
  :is(.cifra-moneda, .hoy-cifra-moneda) { font-size: var(--texto-m); font-weight: 500; letter-spacing: 0; color: var(--color-texto-3); }
  :is(.cifra-signo, .hoy-cifra-signo) { margin-right: -3px; }
  .hoy-cifra-pct { margin-left: -1px; }
  .cifra-valor.es-texto { font-size: var(--titulo-2); line-height: var(--lh-l); letter-spacing: -0.01em; }
  .cifra-valor.es-texto .cifra-num { white-space: normal; }
  :is(.cifra-valor, .hoy-cifra-valor).es-negativo, :is(.cifra-valor, .hoy-cifra-valor).es-negativo :is(.cifra-moneda, .hoy-cifra-moneda) { color: var(--color-negativo); }
  .cifra-valor.es-aviso { color: var(--color-aviso); }
  :is(.cifra-nota, .hoy-cifra-nota) { margin: 0; font-size: var(--texto-s); line-height: var(--lh-s); color: var(--color-texto-3); font-variant-numeric: tabular-nums; }
  .cifra-nota.es-aviso { color: var(--color-aviso); font-weight: 500; }
  .cifra-nota.es-ok { color: var(--color-positivo); font-weight: 500; }
  .cifra-nota a { color: inherit; }

  /* Asistente: pasos numerados unidos por un filete */
  .asistente { display: flex; gap: var(--esp-3); margin: 0 0 var(--esp-6); padding: 0; list-style: none; counter-reset: asis; }
  .asis-paso { display: flex; flex: 1 1 0; align-items: center; gap: var(--esp-3); min-width: 0; counter-increment: asis; }
  .asis-paso:last-child { flex: 0 1 auto; }
  .asis-paso:not(:last-child)::after { content: ""; flex: 1 1 var(--esp-6); min-width: var(--esp-4); height: 1px; background: var(--color-borde-control); opacity: .5; }
  .asis-paso.es-hecho:not(:last-child)::after { background: var(--color-primario); opacity: .45; }
  .asis-n {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-borde-control);
    border-radius: var(--radio-pleno);
    background: var(--color-superficie);
    color: var(--color-texto-2);
    font-size: var(--texto-s);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .asis-n::before { content: counter(asis); }
  .asis-n .ico { display: none; width: 15px; height: 15px; }
  .asis-paso.es-hecho .asis-n { border-color: var(--color-primario-borde); background: var(--color-primario-sutil); color: var(--color-primario); }
  .asis-paso.es-hecho .asis-n::before { content: none; }
  .asis-paso.es-hecho .asis-n .ico { display: block; }
  .asis-paso.es-actual .asis-n { border-color: var(--color-primario-relleno); background: var(--color-primario-relleno); color: var(--color-sobre-primario); }
  .asis-txt { display: flex; flex-direction: column; min-width: 0; }
  .asis-titulo { font-size: var(--texto-m); line-height: var(--lh-m); font-weight: 600; color: var(--color-texto); white-space: nowrap; }
  .asis-paso.es-pendiente .asis-titulo { font-weight: 500; color: var(--color-texto-2); }
  a.asis-titulo { text-decoration: none; }
  a.asis-titulo:hover { color: var(--color-primario); text-decoration: underline; text-underline-offset: 3px; }
  .asis-sub { overflow: hidden; font-size: var(--texto-xs); line-height: var(--lh-xs); color: var(--color-texto-3); text-overflow: ellipsis; white-space: nowrap; }

  /* Bloque: una sección con su cabecera */
  .bloque { min-width: 0; border: 1px solid var(--color-borde); border-radius: var(--radio-m); background: var(--color-superficie); }
  .bloque-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--esp-1) var(--esp-3);
    min-height: 56px;
    padding: var(--esp-3) var(--esp-5);
    border-bottom: 1px solid var(--color-borde);
  }
  .bloque-cab :is(h2, h3), .bloque-titulo { margin: 0; font-size: var(--titulo-3); line-height: var(--lh-l); font-weight: 600; letter-spacing: -0.005em; }
  .bloque-textos { flex: 1 1 260px; min-width: 0; }
  .bloque-sub { margin: 2px 0 0; font-size: var(--texto-s); line-height: var(--lh-s); color: var(--color-texto-3); }
  .bloque-meta { font-size: var(--texto-s); line-height: var(--lh-s); color: var(--color-texto-3); font-variant-numeric: tabular-nums; }
  .bloque-der { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); margin-left: auto; }
  :is(.bloque-ir, .hoy-panel-ir) { display: inline-flex; align-items: center; gap: 4px; font-size: var(--texto-s); font-weight: 500; color: var(--color-primario); text-decoration: none; white-space: nowrap; }
  :is(.bloque-ir, .hoy-panel-ir):hover { text-decoration: underline; text-underline-offset: 3px; }
  :is(.bloque-ir, .hoy-panel-ir) .ico { width: 14px; height: 14px; }
  .bloque-cuerpo { padding: var(--esp-5); }
  .bloque-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
    margin: 0;
    padding: var(--esp-3) var(--esp-5);
    border-top: 1px solid var(--color-borde);
    border-radius: 0 0 var(--radio-m) var(--radio-m);
    background: var(--color-superficie-sutil);
    font-size: var(--texto-s);
    line-height: var(--lh-s);
    color: var(--color-texto-2);
  }
  .bloque.es-mal { border-color: var(--color-negativo-borde); }
  .bloque .tf-tarjeta { border: 0; border-radius: 0; background: transparent; }
  .bloque .tf thead th { top: 0; }
  /* Las tablas de siempre dentro de un bloque: sin caja propia y alineadas con la cabecera */
  .bloque > .tabla-envoltura, .bloque > form > .tabla-envoltura { border: 0; border-radius: 0; }
  .bloque > .tabla-envoltura:last-child { border-radius: 0 0 var(--radio-m) var(--radio-m); }
  .bloque .tabla tr > :first-child { padding-left: var(--esp-5); }
  .bloque .tabla tr > :last-child { padding-right: var(--esp-5); }

  /* Plegable: explicaciones y detalles técnicos fuera de la vista */
  .plegable { border: 1px solid var(--color-borde); border-radius: var(--radio-m); background: var(--color-superficie); }
  .plegable > summary {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
    min-height: 52px;
    padding: var(--esp-3) var(--esp-5);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
  }
  .plegable > summary::-webkit-details-marker { display: none; }
  .plegable > summary::before { content: none; }
  .plegable > summary > .ico:first-child { width: 16px; height: 16px; color: var(--color-texto-3); transform: rotate(-90deg); transition: transform var(--dur-base) var(--curva); }
  .plegable[open] > summary > .ico:first-child { transform: none; }
  .plegable-meta { margin-left: auto; font-size: var(--texto-s); font-weight: 400; color: var(--color-texto-3); }
  .plegable-cuerpo { padding: 0 var(--esp-5) var(--esp-5); color: var(--color-texto-2); }
  .plegable-cuerpo > :first-child { margin-top: 0; }
  .plegable-cuerpo > :last-child { margin-bottom: 0; }
  .plegable-cuerpo p, .plegable-cuerpo li { max-width: 76ch; }

  /* Pares etiqueta / valor */
  .datos { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin: 0; }
  .datos > dt, .datos > dd { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--color-borde); font-size: var(--texto-m); line-height: var(--lh-m); }
  .datos > dt { padding-right: var(--esp-4); color: var(--color-texto-3); }
  .datos > dd { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .datos > :is(dt, dd):nth-last-child(-n + 2) { border-bottom: 0; }

  /* Estado con punto de color: el color acompaña al texto, nunca lo reemplaza */
  /* Estado: punto y texto sobre una pastilla sutil; el color acompaña al texto,
     nunca lo reemplaza. `.cb-chip*` es el nombre de Cobros (lo fijan sus pruebas). */
  :is(.etq-estado, .cb-chip) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 22px;
    padding: 0 8px 0 7px;
    border-radius: var(--radio-pleno);
    background: var(--color-superficie-sutil);
    color: var(--color-texto-2);
    font-size: var(--texto-xs);
    line-height: var(--lh-xs);
    font-weight: 500;
    white-space: nowrap;
  }
  :is(.etq-estado, .cb-chip)::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: var(--radio-pleno); background: var(--color-texto-3); }
  :is(.etq-estado.es-ok, .cb-chip-ok) { background: var(--color-positivo-sutil); color: var(--color-positivo); }
  :is(.etq-estado.es-aviso, .cb-chip-aviso) { background: var(--color-aviso-sutil); color: var(--color-aviso); }
  :is(.etq-estado.es-mal, .cb-chip-negativo) { background: var(--color-negativo-sutil); color: var(--color-negativo); }
  :is(.etq-estado.es-dato, .cb-chip-info) { background: var(--color-primario-sutil); color: var(--color-primario); }
  :is(.etq-estado:is(.es-ok, .es-aviso, .es-mal, .es-dato), .cb-chip-ok, .cb-chip-aviso, .cb-chip-negativo, .cb-chip-info)::before { background: currentColor; }

  @media (max-width: 1023px) {
    :is(.cifras, .hoy-cifras) { --n: 2; }
    .asis-sub { display: none; }
  }
  @media (max-width: 767px) {
    :is(.cifras, .hoy-cifras), .cifras[data-n="3"] { --n: 2; margin-bottom: var(--esp-4); }
    .cifras[data-n="3"] > .cifra:first-child { grid-column: 1 / -1; }
    :is(.cifra, .hoy-cifra) { gap: var(--esp-1); padding: var(--esp-3) var(--esp-4); }
    :is(.cifra-moneda, .hoy-cifra-moneda) { font-size: var(--texto-xs); }
    :is(.cifra-nota, .hoy-cifra-nota) { font-size: var(--texto-xs); line-height: var(--lh-xs); }
    .asistente { gap: var(--esp-2); margin-bottom: var(--esp-4); }
    .asis-paso { gap: var(--esp-2); }
    .asis-paso:not(:last-child)::after { min-width: var(--esp-2); }
    .asis-n { width: 24px; height: 24px; font-size: var(--texto-xs); }
    .asis-titulo { font-size: var(--texto-s); line-height: var(--lh-s); }
    .bloque-cab { padding: var(--esp-3) var(--esp-4); }
    .bloque-cuerpo { padding: var(--esp-4); }
    .bloque-pie { padding: var(--esp-3) var(--esp-4); }
    .plegable > summary { padding: var(--esp-3) var(--esp-4); }
    .plegable-cuerpo { padding: 0 var(--esp-4) var(--esp-4); }
  }
}

/* ── D2 Ajustes: filas que se deslizan ─────────────────────────────────────
   Toda fila de pestañas o de pastillas que no cabe a lo ancho (Pendientes,
   vistas de la tabla financiera, índice del lector en el teléfono, saltos y
   subnavegación de Ajustes) muestra un degradado en el borde que todavía
   tiene contenido: así se ve que se puede deslizar. Sin JavaScript: el
   degradado sigue la posición del desplazamiento (scroll-driven animations);
   si la fila cabe entera o el navegador no lo soporta, no aparece nada. */
@property --desliza-izq { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --desliza-der { syntax: "<length>"; inherits: false; initial-value: 0px; }
@layer componentes {
  :is(.desliza-x, .band-pestanas, .tf-vistas, .lr-indice ol, .plantillas-grupo) {
    overflow-x: auto;
    scrollbar-width: none;
  }
  @supports (animation-timeline: scroll()) {
    :is(.desliza-x, .band-pestanas, .tf-vistas, .lr-indice ol, .plantillas-grupo) {
      -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--desliza-izq), #000 calc(100% - var(--desliza-der)), transparent 100%);
      mask-image: linear-gradient(to right, transparent 0, #000 var(--desliza-izq), #000 calc(100% - var(--desliza-der)), transparent 100%);
      animation: desliza-bordes linear both;
      animation-timeline: scroll(self inline);
    }
  }
  @keyframes desliza-bordes {
    from { --desliza-izq: 0px; --desliza-der: 40px; }
    8% { --desliza-izq: 40px; }
    92% { --desliza-der: 40px; }
    to { --desliza-izq: 40px; --desliza-der: 0px; }
  }
}

/* ── D4: lista de enlaces, grupos y notas ──────────────────────────────────
   Una sola pieza para las filas que llevan a otra pantalla (portada de
   Ajustes, índice de Reportes, accesos de Ayuda): ícono opcional, nombre, una
   línea, un dato y la flecha. `.nota`: frase breve de apoyo dentro de la página. */
@layer componentes {
  .grupo-cab { margin-bottom: var(--esp-3); }
  .grupo-cab h2 { margin: 0 0 2px; font-size: var(--titulo-3); line-height: var(--lh-l); }
  .grupo-cab p { margin: 0; font-size: var(--texto-s); line-height: var(--lh-s); color: var(--color-texto-3); }
  .enlaces { margin: 0; padding: 0; list-style: none; border: 1px solid var(--color-borde); border-radius: var(--radio-m); background: var(--color-superficie); }
  .enlaces > li + li { border-top: 1px solid var(--color-borde); }
  .enlace { display: flex; align-items: center; gap: var(--esp-4); min-height: 64px; padding: var(--esp-3) var(--esp-5); color: inherit; text-decoration: none; transition: background-color var(--dur-rapida) var(--curva); }
  .enlaces > li:first-child .enlace { border-radius: var(--radio-m) var(--radio-m) 0 0; }
  .enlaces > li:last-child .enlace { border-radius: 0 0 var(--radio-m) var(--radio-m); }
  .enlaces > li:only-child .enlace { border-radius: var(--radio-m); }
  .enlace:hover { background: var(--color-fila-hover); color: inherit; text-decoration: none; }
  .enlace:focus-visible { outline-offset: -2px; }
  .enlace-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 1px solid var(--color-borde); border-radius: var(--radio-m); background: var(--color-superficie-sutil); color: var(--color-texto-2); }
  .enlace-txt { flex: 1 1 auto; min-width: 0; }
  .enlace-nombre { display: block; margin: 0; font-size: var(--texto-m); line-height: var(--lh-m); font-weight: 600; color: var(--color-texto); }
  .enlace-desc { display: block; margin: 2px 0 0; font-size: var(--texto-s); line-height: var(--lh-s); color: var(--color-texto-2); }
  .enlace-dato { flex: none; font-size: var(--texto-s); color: var(--color-texto-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .enlace-flecha { display: inline-flex; }
  .enlace > :is(.enlace-flecha, .ico:last-child) { flex: none; color: var(--color-texto-3); transition: transform var(--dur-rapida) var(--curva), color var(--dur-rapida) var(--curva); }
  .enlace:hover > :is(.enlace-flecha, .ico:last-child) { color: var(--color-primario); transform: translateX(2px); }
  /* Definiciones: término a la izquierda y su explicación (decisiones, roles) */
  .definiciones { margin: 0; padding: var(--esp-2) var(--esp-5) var(--esp-4); }
  .definiciones > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--esp-4); padding: var(--esp-3) 0; font-size: var(--texto-s); }
  .definiciones > div + div { border-top: 1px solid var(--color-borde); }
  .definiciones dt { font-weight: 600; }
  .definiciones dd { margin: 0; color: var(--color-texto-2); }
  .nota { margin: 0; font-size: var(--texto-s); line-height: var(--lh-s); color: var(--color-texto-3); }
  .nota a { color: var(--color-texto-2); }
  @media (max-width: 767px) {
    .enlace { gap: var(--esp-3); padding: var(--esp-3) var(--esp-4); }
    .enlace-dato { display: none; }
    .definiciones { padding-left: var(--esp-4); padding-right: var(--esp-4); }
    .definiciones > div { grid-template-columns: minmax(0, 1fr); gap: var(--esp-1); }
  }
}

/* ── Zona de carga: arrastrar o elegir archivos ───────────────────────────
   La usan el comprobante de un asiento (movimientos.js) y los archivos del
   portal de Cashea (cobros.js). Vivía en movimientos.css. */
@layer componentes {
  /* ---------- Zona de carga de un archivo ------------------------------- */
  .zona-carga { position: relative; }
  .zona-carga-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .zona-carga-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--esp-1);
    min-height: 200px;
    padding: var(--esp-8) var(--esp-6);
    border: 1.5px dashed var(--color-borde-control);
    border-radius: var(--radio-m);
    background: var(--color-superficie-sutil);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--dur-rapida) var(--curva), background-color var(--dur-rapida) var(--curva);
  }
  .zona-carga-area[hidden] { display: none; }
  .zona-carga-area:hover, .zona-carga.es-arrastre .zona-carga-area { border-color: var(--color-primario); background: var(--color-primario-sutil); }
  .zona-carga-input:focus-visible + .zona-carga-area { outline: 2px solid var(--color-foco); outline-offset: 2px; }
  .zona-carga-ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--esp-2); border-radius: var(--radio-pleno); background: var(--color-superficie); color: var(--color-primario); box-shadow: 0 0 0 1px var(--color-borde); }
  .zona-carga-ic .ico { width: 22px; height: 22px; }
  .zona-carga-titulo { font-size: var(--texto-l); font-weight: 600; }
  .zona-carga-sub { font-size: var(--texto-s); color: var(--color-texto-2); }
  .zona-carga-elegir { color: var(--color-primario); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
  .zona-carga-elegido { display: flex; align-items: center; gap: var(--esp-4); padding: var(--esp-3); border: 1px solid var(--color-borde); border-radius: var(--radio-m); background: var(--color-superficie); }
  .zona-carga-elegido[hidden] { display: none; }
  .zona-carga-vista { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radio-s); border: 1px solid var(--color-borde); }
  .zona-carga-pdf { display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--radio-s); background: var(--color-superficie-sutil); color: var(--color-texto-2); }
  .zona-carga-vista[hidden], .zona-carga-pdf[hidden] { display: none; }
  .zona-carga-nombre { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
  .zona-carga-nombre small { color: var(--color-texto-3); font-size: var(--texto-s); }
}

/* ── Módulo 1 (Marjorie Dashboard): Tarjetas desacopladas y badges semánticos ──
   · `.tarjeta-pastel`   Tarjetas Clean Corporate / Modern Pastel con sombra suave y bordes redondeados.
   · `.badge-pasarela`   Etiquetas semánticas por pasarela (BNC, Cashea, Zelle, USDT, Efectivo, Mixto).
   · `.badge-estado`     Etiquetas de estado financiero (Cobrado/Pagado, Por cobrar/Por pagar, En duda/Pendiente).
   · `.bloque-dato`      Bloques de datos etiquetados con indicador de estado. */
@layer componentes {
  .tarjeta-pastel {
    display: flex;
    flex-direction: column;
    gap: var(--esp-3);
    min-width: 0;
    padding: var(--esp-4) var(--esp-5);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-l);
    background: var(--color-superficie);
    box-shadow: var(--sombra-tarjeta-suave);
    transition: box-shadow var(--dur-rapida) var(--curva), border-color var(--dur-rapida) var(--curva), transform var(--dur-rapida) var(--curva);
  }
  .tarjeta-pastel:hover {
    box-shadow: var(--sombra-tarjeta-hover);
  }
  .tarjeta-pastel.pastel-menta { background: var(--pastel-menta-bg); border-color: var(--pasarela-bnc-borde); }
  .tarjeta-pastel.pastel-ambar { background: var(--pastel-ambar-bg); border-color: var(--pasarela-cashea-borde); }
  .tarjeta-pastel.pastel-coral { background: var(--pastel-coral-bg); border-color: var(--estado-por-cobrar-borde); }
  .tarjeta-pastel.pastel-lavanda { background: var(--pastel-lavanda-bg); border-color: var(--pasarela-zelle-borde); }
  .tarjeta-pastel.pastel-cian { background: var(--pastel-cian-bg); border-color: var(--pasarela-usdt-borde); }

  /* Badges semánticos de pasarela */
  .badge-pasarela {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 0 10px 0 8px;
    border: 1px solid var(--pasarela-efectivo-borde);
    border-radius: var(--radio-pleno);
    background: var(--pasarela-efectivo-bg);
    color: var(--pasarela-efectivo-fg);
    font-size: var(--texto-xs);
    line-height: var(--lh-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .badge-pasarela::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: var(--radio-pleno);
    background: currentColor;
  }
  .badge-pasarela.badge-bnc, .badge-bnc {
    background: var(--pasarela-bnc-bg);
    color: var(--pasarela-bnc-fg);
    border-color: var(--pasarela-bnc-borde);
  }
  .badge-pasarela.badge-cashea, .badge-cashea {
    background: var(--pasarela-cashea-bg);
    color: var(--pasarela-cashea-fg);
    border-color: var(--pasarela-cashea-borde);
  }
  .badge-pasarela.badge-zelle, .badge-zelle {
    background: var(--pasarela-zelle-bg);
    color: var(--pasarela-zelle-fg);
    border-color: var(--pasarela-zelle-borde);
  }
  .badge-pasarela.badge-usdt, .badge-usdt {
    background: var(--pasarela-usdt-bg);
    color: var(--pasarela-usdt-fg);
    border-color: var(--pasarela-usdt-borde);
  }
  .badge-pasarela.badge-efectivo, .badge-efectivo {
    background: var(--pasarela-efectivo-bg);
    color: var(--pasarela-efectivo-fg);
    border-color: var(--pasarela-efectivo-borde);
  }
  .badge-pasarela.badge-mixto, .badge-mixto {
    background: var(--pasarela-mixto-bg);
    color: var(--pasarela-mixto-fg);
    border-color: var(--pasarela-mixto-borde);
  }

  /* Badges de estado financiero */
  .badge-estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 0 10px 0 8px;
    border: 1px solid var(--estado-en-duda-borde);
    border-radius: var(--radio-pleno);
    background: var(--estado-en-duda-bg);
    color: var(--estado-en-duda-fg);
    font-size: var(--texto-xs);
    line-height: var(--lh-xs);
    font-weight: 600;
    white-space: nowrap;
  }
  .badge-estado::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: var(--radio-pleno);
    background: currentColor;
  }
  .badge-estado:is(.badge-cobrado, .badge-pagado), .badge-cobrado, .badge-pagado {
    background: var(--estado-cobrado-bg);
    color: var(--estado-cobrado-fg);
    border-color: var(--estado-cobrado-borde);
  }
  .badge-estado:is(.badge-por-cobrar, .badge-por-pagar), .badge-por-cobrar, .badge-por-pagar {
    background: var(--estado-por-cobrar-bg);
    color: var(--estado-por-cobrar-fg);
    border-color: var(--estado-por-cobrar-borde);
  }
  .badge-estado:is(.badge-en-duda, .badge-pendiente), .badge-en-duda, .badge-pendiente {
    background: var(--estado-en-duda-bg);
    color: var(--estado-en-duda-fg);
    border-color: var(--estado-en-duda-borde);
  }

  /* Badge identificador de reserva AY_XXXXXX */
  .badge-reserva-id {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding: 0 8px;
    border: 1px solid var(--color-primario-borde);
    border-radius: var(--radio-s);
    background: var(--color-primario-sutil);
    color: var(--color-primario);
    font-family: var(--fuente-mono);
    font-size: var(--texto-xs);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
  }
  a.badge-reserva-id:hover {
    background: var(--color-superficie);
    border-color: var(--color-primario);
    text-decoration: none;
  }

  /* Bloques de datos desacoplados con etiquetas claras */
  .rejilla-bloques-datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--esp-3);
  }
  .bloque-dato {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: var(--esp-3) var(--esp-4);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-m);
    background: var(--color-superficie);
    box-shadow: var(--sombra-tarjeta-suave);
  }
  .bloque-dato-etq {
    margin: 0;
    font-size: var(--texto-xs);
    font-weight: 500;
    color: var(--color-texto-2);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  .bloque-dato-valor {
    margin: 0;
    font-size: var(--texto-l);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-texto);
  }
  .bloque-dato-sub {
    margin: 0;
    font-size: var(--texto-xs);
    color: var(--color-texto-3);
  }
}