/* ==========================================================================
   Alquila Ya · CSS heredado de los módulos (capa «legado»)
   Es lo que queda del app.css anterior, sin el marco, sin los componentes que
   ahora dibuja el sistema «Libro claro», sin reglas forzadas y sin Consolas.
   Está en la capa más baja: cualquier regla nueva le gana. Se va achicando con
   el rediseño de cada módulo y desaparece al final del proyecto.
   ========================================================================== */

@layer legado {
  /* Puente: los nombres de siempre apuntan a los tokens nuevos (y siguen el tema) */
  :root {
    --e1: var(--esp-1); --e2: var(--esp-2); --e3: var(--esp-3); --e4: var(--esp-4); --e5: var(--esp-6);
    --e6: var(--esp-8); --r2: var(--radio-s); --r3: var(--radio-m); --radio: var(--radio-m); --t1: var(--texto-s);
    --t2: var(--texto-s); --t3: var(--texto-m); --t4: var(--texto-l); --t5: 1.125rem; --t6: var(--titulo-2);
    --ancho-sidebar: var(--lateral-ancho); --marca-800: var(--marca-marino); --marca-700: var(--color-primario);
    --marca-500: var(--color-primario); --marca-300: var(--color-primario-borde);
    --marca-100: var(--color-primario-sutil); --marca-50: var(--color-primario-sutil);
    --acento-500: var(--color-foco); --acento-300: var(--color-aviso); --acento-100: var(--color-aviso-sutil);
    --ok-500: var(--color-positivo); --ok-100: var(--color-positivo-sutil); --alerta-500: var(--color-aviso-borde);
    --alerta-100: var(--color-aviso-sutil); --peligro-700: var(--color-negativo);
    --peligro-500: var(--color-negativo); --peligro-100: var(--color-negativo-sutil); --fondo: var(--color-lienzo);
    --fondo-alt: var(--color-superficie); --superficie: var(--color-superficie);
    --superficie-2: var(--color-superficie-sutil); --borde: var(--color-borde);
    --borde-control: var(--color-borde-control); --borde-fuerte: var(--color-borde-control);
    --texto: var(--color-texto); --texto-suave: var(--color-texto-2); --texto-tenue: var(--color-texto-3);
    --foco: var(--color-foco); --sombra-1: none; --sombra-2: var(--sombra-flotante); --ingreso: var(--color-positivo);
    --egreso: var(--color-negativo); --traspaso: var(--color-primario); --apertura: var(--color-aviso);
  }
  .app { display: grid; grid-template-columns: var(--ancho-sidebar) 1fr; min-height: 100vh; }
  .app.app-publica { grid-template-columns: 1fr; }
  .app.app-publica .principal { max-width: 1120px; margin: 0 auto; }
  .marca { display: flex; align-items: center; gap: var(--e3); text-decoration: none; color: #FFFFFF; padding: var(--e2) var(--e2) var(--e3); border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .marca-logo { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 40px; background: rgba(255, 255, 255, .08); border: 1px solid color-mix(in srgb, var(--marca-lima) 45%, transparent); display: grid; place-items: center; font-weight: 800; font-size: var(--t5); color: #FFFFFF; letter-spacing: -0.02em; }
  .marca-triangulo { width: 18px; height: 16px; background: var(--marca-lima); clip-path: polygon(50% 0%, 100% 100%, 0% 100%); display: inline-block; }
  .contenido { min-width: 0; display: flex; flex-direction: column; }
  .barra { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--superficie) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borde); padding: var(--e3) var(--e5); display: flex; align-items: center; gap: var(--e4); flex-wrap: wrap; }
  .barra h1 { margin: 0; font-size: var(--t5); }
  .barra .migas { font-size: var(--t2); color: var(--texto-tenue); }
  .barra-acciones { margin-left: auto; display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; }
  .tarjeta-titulo .der { margin-left: auto; display: flex; gap: var(--e2); align-items: center; }
  .vivo { position: sticky; bottom: 0; z-index: 20; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r3); padding: var(--e3) var(--e4); box-shadow: var(--sombra-2); display: flex; gap: var(--e4); align-items: center; flex-wrap: wrap; }
  .vivo .estado { margin-left: auto; display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; }
  .vivo .acciones { display: flex; gap: var(--e2); }
  .bloque-texto { position: relative; }
  .bloque-texto pre { margin: 0; padding: var(--e4); background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--r2); font-size: var(--t2); white-space: pre-wrap; word-break: break-word; max-height: 62vh; overflow: auto; line-height: 1.6; }
  .ayuda-campo-cuerpo .si-falla { color: var(--texto-suave); }
  #lista-problemas li { margin-bottom: var(--e2); padding-left: var(--e1); border-left: 3px solid transparent; }
  #lista-problemas li.error { border-left-color: var(--peligro-500); padding-left: var(--e3); }
  #lista-problemas li.aviso { border-left-color: var(--acento-500); padding-left: var(--e3); }
  #lista-problemas .p-mensaje { display: block; font-weight: 650; }
  #lista-problemas .p-campo { display: block; font-size: var(--t1); color: var(--texto-suave); }
  #lista-problemas .p-como { display: block; font-size: var(--t2); color: var(--texto-suave); }
  #lista-problemas .p-como b { color: var(--traspaso); }
  .combo-lista .combo-pie { font-size: var(--t1); color: var(--texto-tenue); padding: var(--e2) var(--e3); border-top: 1px solid var(--borde); cursor: default; display: block; }
  .combo-sin-resultado { border-color: var(--peligro-500); box-shadow: 0 0 0 3px var(--peligro-100); }
  .pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
  .paso { display: flex; gap: var(--e3); padding: var(--e4); border: 1px solid var(--borde); border-radius: var(--r2); background: var(--superficie-2); }
  .paso-num { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: var(--marca-700); color: #fff; font-weight: 700; font-size: var(--t5); display: flex; align-items: center; justify-content: center; }
  .paso-cuerpo { min-width: 0; }
  .paso-cuerpo h3 { font-size: var(--t4); margin-bottom: var(--e2); display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
  .plantilla { display: flex; flex-direction: column; }
  .plantilla .acciones { margin-top: auto; display: flex; gap: var(--e2); flex-wrap: wrap; }
  #dlg-cifra { max-width: 640px; }
  #dlg-ayuda { max-width: 900px; }

  @media (max-width: 900px) {
    .app { grid-template-columns: 1fr; }
    .barra { padding: var(--e3) var(--e4); }
    .vivo { border-radius: var(--r3) var(--r3) 0 0; bottom: 64px; }
    .vivo .estado { margin-left: 0; width: 100%; }
    .vivo .acciones { width: 100%; }
    .vivo .acciones .btn { flex: 1; }
  }
  .atraso { color: var(--peligro-700); font-weight: 650; }
  .tendencia { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--e3); align-items: end; min-height: 190px; padding: var(--e3) var(--e2) 0; border-bottom: 2px solid var(--borde-fuerte); overflow-x: auto; }
  .leyenda .muestra { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
  .leyenda .muestra.ingreso { background: var(--ingreso); }
  .leyenda .muestra.egreso { background: var(--egreso); }
  .documento { background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: var(--r3); padding: var(--e5); max-width: 820px; }
  .documento h2, .documento h3 { margin-top: 0; }
  .documento dl { display: grid; grid-template-columns: 12ch 1fr; gap: var(--e1) var(--e3); margin: 0; }
  .documento dt { color: var(--texto-tenue); font-size: var(--t2); }
  .documento dd { margin: 0; font-size: var(--t3); }
  .documento .firma { margin-top: var(--e6); border-top: 1px solid var(--borde-fuerte); padding-top: var(--e2); font-size: var(--t2); color: var(--texto-tenue); }
  .permiso { display: flex; align-items: flex-start; gap: var(--e2); border: 1px solid var(--borde); border-radius: var(--r2); padding: var(--e2); background: var(--superficie-2); min-width: 0; }
  .permiso input { min-width: 20px; min-height: 20px; margin-top: 2px; }
  .permiso .txt { min-width: 0; }
  .permiso .txt b { display: block; font-size: var(--t2); }
  .permiso .txt small { color: var(--texto-tenue); font-size: var(--t1); }
  .tarjeta-titulo .der { flex-wrap: wrap; min-width: 0; }
  .tarjeta-titulo .der > * { min-width: 0; }
  .documento { overflow-x: auto; }
  .documento .tabla-envoltura { border: 0; }
  .franja-offline { display: block; padding: var(--e2) var(--e3); margin-bottom: var(--e4); border-radius: var(--r2); font-size: var(--t2); overflow-wrap: anywhere; background: var(--ok-100); color: var(--texto); border: 1px solid var(--ok-500); }
  .franja-offline.sin-red { background: var(--alerta-100); border-color: var(--alerta-500); }
  @media print {
    .barra, .vivo { display: none; }
    .app { grid-template-columns: 1fr; }
  }
  .permiso { min-height: 48px; padding: 10px 12px; cursor: pointer; align-items: center; border: 1.5px solid var(--borde-fuerte); transition: border-color .14s ease, background-color .14s ease; }
  .permiso:hover { border-color: var(--marca-700); background: var(--marca-50); }
  .permiso:focus-within { outline: 3px solid var(--acento-500); outline-offset: 2px; }
  .fila-form-2, .fila-form-3, .fila-form-auto{ display: grid; gap: var(--e3); align-items: end; }
  .fila-form-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fila-form-3 { grid-template-columns: 1fr 1fr auto; }
  .fila-form-auto { grid-template-columns: 1fr auto; }
  @media (max-width: 680px) {
    .fila-form-2, .fila-form-3, .fila-form-auto{ grid-template-columns: 1fr; }
  }

  .copiloto-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(410px, 100vw); z-index: 88; background: var(--superficie); color: var(--texto); border-left: 1px solid var(--borde-fuerte); box-shadow: var(--sombra-2); display: flex; flex-direction: column; overflow-y: auto; }
  .copiloto-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e2); padding: var(--e3) var(--e4); background: var(--marca-800); color: #FFFFFF; border-bottom: 1px solid rgba(255, 255, 255, .14); position: sticky; top: 0; z-index: 2; }
  .copiloto-cab-tit { display: flex; align-items: center; gap: var(--e2); }
  .copiloto-cab-tit strong { display: block; font-size: var(--t4); color: #FFFFFF; }
  .copiloto-sub { display: block; font-size: var(--t1); color: #DCEAF3; }
  .copiloto-cab #btn-copiloto-cerrar { color: #FFFFFF; border-color: rgba(255, 255, 255, .35); }
  .copiloto-cab #btn-copiloto-cerrar:hover { background: rgba(255, 255, 255, .14); color: #FFFFFF; }
  @media print {
    .copiloto-panel, #btn-copiloto { display: none; }
  }
  html[data-densidad="compacta"] .principal { padding: var(--e3) var(--e4); }
  html[data-densidad="compacta"] .tarjeta { padding: var(--e3); }
  html[data-densidad="compacta"] .rejilla { gap: var(--e2); }
  html[data-densidad="compacta"] .kpi .valor { font-size: var(--t6); }
  html[data-densidad="compacta"] table.tabla { font-size: 0.75rem; }
  html[data-densidad="compacta"] table.tabla caption { padding: var(--e2) var(--e3); font-size: 0.75rem; }
  html[data-densidad="compacta"] table.tabla th, html[data-densidad="compacta"] table.tabla td { padding: 2px 8px; line-height: 1.15; height: 25px; max-height: 27px; white-space: nowrap; font-variant-numeric: tabular-nums; }
  html[data-densidad="compacta"] table.tabla td small { display: inline; margin-left: 5px; font-size: 0.8125rem; }
  html[data-densidad="compacta"] table.tabla .chip { padding: 0 5px; font-size: 0.8125rem; line-height: 1.2; }
  html[data-densidad="compacta"] table.tabla .btn, html[data-densidad="compacta"] table.tabla .btn-chico { min-height: 24px; min-width: 24px; padding: 0 6px; font-size: 0.8125rem; line-height: 1.1; }
  html[data-densidad="compacta"] .pasos { gap: var(--e2); }
  html[data-densidad="compacta"] .paso { padding: var(--e2) var(--e3); }
  html[data-presentacion="1"] .app { grid-template-columns: 1fr; }
  html[data-presentacion="1"] .barra, html[data-presentacion="1"] .copiloto-panel, html[data-presentacion="1"] #form-filtros { display: none; }
  html[data-presentacion="1"] .principal { max-width: 1720px; padding: var(--e5) var(--e6); margin: 0 auto; }
  html[data-presentacion="1"] body { font-size: 1.0625rem; }
  html[data-presentacion="1"] h2 { font-size: var(--t6); letter-spacing: -0.02em; }
  html[data-presentacion="1"] .kpi .rotulo { font-size: var(--t2); letter-spacing: .09em; }
  html[data-presentacion="1"] .kpi .valor { font-size: 2.35rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  html[data-presentacion="1"] .kpi .base { font-size: var(--t2); }
  html[data-presentacion="1"] table.tabla { font-size: var(--t3); }
  html[data-presentacion="1"] table.tabla th, html[data-presentacion="1"] table.tabla td { padding: 12px 16px; font-variant-numeric: tabular-nums; }
  @media (max-width: 680px) {
    html[data-presentacion="1"] .principal { padding: var(--e3); }
    html[data-presentacion="1"] .kpi .valor { font-size: 1.85rem; }
  }

  @media (max-width: 640px) {
    html[data-presentacion="1"] .principal { padding: var(--e3); }
    html[data-presentacion="1"] .tabla td, html[data-presentacion="1"] .tabla th { font-size: var(--t1); padding: 6px 8px; }
    html[data-presentacion="1"] .kpi .valor { font-size: 1.55rem; }
  }
  html[data-presentacion="1"] .tarjeta:has(#form-filtros) { display: none; }
  
  .panel-filtros-movil { width: 100%; max-width: 100%; box-sizing: border-box; margin-bottom: 12px; }
  .barra-estado-filtros { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding: 10px 14px; margin-bottom: 12px; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 10px; width: 100%; max-width: 100%; box-sizing: border-box; }
  .estado-filtros-izq, .estado-filtros-der { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; max-width: 100%; }
  .contador-filtro { font-size: 13.5px; color: var(--texto); }
  .chips-filtros-activos { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; max-width: 100%; }
  .migas, .contador-filtro { font-size: max(var(--t1), .8125rem); }
  html[data-densidad="compacta"] .tabla th, html[data-densidad="compacta"] .tabla td { padding: 5px 8px; }
  .app, .contenido { min-width: 0; max-width: 100%; }
  #tabla-diario th, #tabla-diario td, #tabla-reservas th, #tabla-reservas td { padding: 8px 8px; }

  @media (max-width: 680px) {
    .barra { padding: 8px 10px; gap: 6px; }
    .barra h1 { font-size: 1.05rem; }
    .barra-acciones { gap: 4px; flex-wrap: nowrap; }
    .barra-acciones > :not(.campana-contenedor):not(#btn-campana):not(#btn-tema):not(#btn-paleta):not(.buscador-global) { display: none; }
    #btn-campana { display: inline-flex; min-height: 38px; padding: 4px 8px; }
    .panel-filtros-movil { border: 1px solid var(--borde); border-radius: var(--radio); padding: 8px 10px; background: var(--superficie); }
    .filtros-acciones-fijas { position: sticky; bottom: 0; background: var(--superficie); padding: 8px 0 4px; border-top: 1px solid var(--borde); z-index: 5; display: flex; gap: 8px; width: 100%; }
    .filtros-acciones-fijas .btn { flex: 1; }
  }
  .barra { padding: 8px 18px; gap: 10px; flex-wrap: nowrap; min-height: 54px; }
  .barra > div:first-of-type { min-width: 0; flex: 1 1 auto; }
  .barra h1 { font-size: clamp(1.05rem, 1.35vw, 1.3rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .barra-acciones { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; flex-shrink: 0; }
  .barra-acciones .btn { min-height: 36px; padding: 5px 10px; font-size: .8125rem; white-space: nowrap; }
  #toast-notif-item { padding: 8px 14px; }
  #toast-notif-item .toast-notif-cab { margin-bottom: 4px; }
  #toast-notif-item .toast-notif-motivo { margin: 2px 0 6px; }
  
  @media (max-width: 680px) {
    .barra { padding: 6px 10px; gap: 6px; }
    .barra h1 { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    #btn-paleta { display: none; }
  }

  @media (max-width: 680px) {
    .barra h1 { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; }
  }
  .centro-alerta-item-acciones [data-marcar-leida] { border: 1px solid var(--borde-fuerte); background: var(--superficie-2); color: var(--texto); }
  .centro-alerta-item-acciones [data-marcar-leida]:hover { background: var(--marca-50); border-color: var(--marca-700); }
  .barra h1 { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.22; }
  @media (max-width: 680px) {
    .barra { padding: 6px 10px; gap: 6px; align-items: center; flex-wrap: nowrap; }
    .barra > div:first-of-type { min-width: 0; flex: 1 1 0%; overflow: visible; }
    .barra h1 { font-size: 0.9375rem; line-height: 1.22; white-space: normal; overflow: visible; text-overflow: clip; max-width: 100%; overflow-wrap: break-word; word-break: normal; text-wrap: balance; margin: 0; }
    .barra-acciones { flex-shrink: 0; margin-left: auto; gap: 4px; flex-wrap: nowrap; }
  }
  @media (min-width: 681px) {
    .barra { gap: 8px; }
    .barra h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .barra-acciones { gap: 5px; }
    .barra-acciones > .btn-fantasma:not(.btn-campana):not(.btn-copiloto) { padding: 4px 6px; min-width: 34px; }
  }
  @media (min-width: 769px) {
    #tabla-diario th, #tabla-diario td { padding: 6px 6px; }
    #tabla-diario td[data-label="Cuenta"], #tabla-diario td[data-label="Categoría"], #tabla-diario td[data-label="Descripción"], #tabla-diario td[data-label="Activo"] { max-width: 175px; overflow-wrap: break-word; }
  }
}