/*
 * Escala de lectura compartida por Epugmatic.
 *
 * La aplicacion conserva la familia tipografica y los acentos de cada tema.
 * Esta capa solo normaliza tamanos, interlineado, contraste y tactilidad. Las
 * excepciones compactas (badges, cifras de graficos e iconos) siguen usando su
 * metrica propia porque no contienen instrucciones ni explicaciones.
 */
:root {
  --app-text-size: .875rem;
  --app-meta-size: .75rem;
  --app-control-size: .875rem;
  --app-readable-leading: 1.5;
  --app-control-height: 44px;
}

/* Texto operativo de las vistas. Las utilidades mayores conservan su tamano;
   solo elevamos los literales que antes quedaban entre 8 y 12 px. */
#app-view main .view {
  font-size: var(--app-text-size);
  line-height: var(--app-readable-leading);
}

#app-view main .view :is(p, li, dd)[class~="text-xs"],
#app-view main .view :is(p, li, dd)[class~="text-[8px]"],
#app-view main .view :is(p, li, dd)[class~="text-[9px]"],
#app-view main .view :is(p, li, dd)[class~="text-[10px]"],
#app-view main .view :is(p, li, dd)[class~="text-[11px]"] {
  font-size: var(--app-text-size);
  line-height: var(--app-readable-leading);
}

#app-view main .view :is(span, th, dt, label, button)[class~="text-[8px]"],
#app-view main .view :is(span, th, dt, label, button)[class~="text-[9px]"],
#app-view main .view :is(span, th, dt, label, button)[class~="text-[10px]"],
#app-view main .view :is(span, th, dt, label, button)[class~="text-[11px]"] {
  font-size: var(--app-meta-size);
  line-height: 1.4;
}

#app-view main .view :is(h2, h3, h4) {
  line-height: 1.3;
  text-wrap: balance;
}

/* Navegacion, acceso y mensajes de sistema tambien usan los mismos minimos. */
#app-view :is(.nav-dropdown-menu, #mobile-drawer) [class~="text-[8px]"],
#app-view :is(.nav-dropdown-menu, #mobile-drawer) [class~="text-[9px]"],
#app-view :is(.nav-dropdown-menu, #mobile-drawer) [class~="text-[10px]"],
#app-view :is(.nav-dropdown-menu, #mobile-drawer) [class~="text-[11px]"] {
  font-size: var(--app-meta-size);
  line-height: 1.4;
}

#auth-view :is(p, li)[class~="text-xs"],
#auth-view :is(p, li)[class~="text-[10px]"],
#auth-view :is(p, li)[class~="text-[11px]"] {
  font-size: var(--app-text-size);
  line-height: var(--app-readable-leading);
}

:is(.toast, #pwa-install-banner) :is(p, li) {
  line-height: var(--app-readable-leading);
}

:is(.toast, #pwa-install-banner) :is(p, li)[class~="text-[10px]"],
:is(.toast, #pwa-install-banner) :is(p, li)[class~="text-[11px]"],
:is(.toast, #pwa-install-banner) :is(p, li)[class~="text-xs"] {
  font-size: var(--app-text-size);
}

/* Explicaciones necesarias para interpretar datos: el color secundario del
   tema ya aporta jerarquia y no necesita una segunda perdida de opacidad.

   La lista de elementos creció a span/div/dt/th a proposito: la regla nacio
   cubriendo solo p/li/dd, asi que un `<span class="text-txt2/60">` quedaba con
   la opacidad cruda de Tailwind y medía 3.2:1 sobre la tarjeta oscura (peor que
   el boton mas apagado de la app). El mismo dato con la misma clase se veia
   bien en un `<p>` y mal en un `<span>`: eso no es diseno, es una fuga. */
#app-view main .view :is(p, li, dd, span, div, dt, th)[class*="text-txt2/"],
.modal-backdrop :is(p, li, dd, span, div, dt, th)[class*="text-txt2/"] {
  color: var(--text-secondary) !important;
  opacity: 1;
}

/* Nivel TERCIARIO — los atenuados /40, /50 y /60. Aqui hay TRES niveles de
   lectura y no dos: secundario (6.6:1, --text-secondary) y atenuado (5.1:1,
   --text-muted, un token SOLIDO: con alfa el mismo valor se componia dos veces
   al anidarse y daba 5.1:1 en un sitio y 3.2:1 en otro). El atenuado sigue
   siendo el mas apagado de los tres, pero ya no sale de AA.
   Va DESPUES de la regla de --text-secondary, con la MISMA especificidad
   (id + :is(...) + [class*="..."]), para poder ganarle por orden. */
#app-view main .view :is(p, li, dd, span, div, dt, th)[class*="text-txt2/4"],
#app-view main .view :is(p, li, dd, span, div, dt, th)[class*="text-txt2/5"],
#app-view main .view :is(p, li, dd, span, div, dt, th)[class*="text-txt2/6"],
.modal-backdrop :is(p, li, dd, span, div, dt, th)[class*="text-txt2/4"],
.modal-backdrop :is(p, li, dd, span, div, dt, th)[class*="text-txt2/5"],
.modal-backdrop :is(p, li, dd, span, div, dt, th)[class*="text-txt2/6"] {
  color: var(--text-muted) !important;
  opacity: 1;
}

/* Formularios y acciones reutilizables. En escritorio siguen compactos; en
   pantallas tactiles ganan el alto y tamano que evita zoom accidental en iOS. */
#app-view main .view :is(input, select, textarea, .ss-trigger),
.modal-backdrop :is(input, select, textarea, .ss-trigger) {
  font-size: var(--app-control-size);
  line-height: 1.4;
}

/* `:not(.hidden)` no es decorativo: esta regla lleva `id` + `:is()`, así que su
   especificidad (1,2,2 / 0,2,1) le ganaba al `.hidden` de Tailwind y a
   cualquier `.X.hidden`. Un chip marcado como oculto seguía a la vista (el chip
   "Hacer principal" en la cuenta que YA era principal, y "Volver a utilizar" /
   "Eliminar lista" en Listas). Lo oculto no necesita legibilidad: al excluirlo,
   el `.hidden` vuelve a mandar. */
#app-view main .view :is(.neon-cta, .link-chip, button[type="submit"]):not(.hidden),
.modal-backdrop :is(.neon-cta, .link-chip, button[type="submit"]):not(.hidden) {
  min-height: var(--app-control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--app-text-size);
  line-height: 1.3;
}

/* Modal base: una sola caja de scroll, sin cambios de ancho cuando aparece el
   riel y sin encadenar el gesto al documento que queda detras.
   NOTA: sin max-width propio — el ancho lo gobierna Tailwind (w-full +
   md:max-w-sm/md/lg por modal). Un max-width:100vw aquí ganaría por orden
   a esos tokens y estiraría todos los modales a todo lo ancho en desktop. */
.app-modal-panel {
  box-sizing: border-box;
  min-width: 0;
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-x: clip;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

/* Los controles nativos de fecha tienen un ancho intrínseco mayor que el
   contenido disponible a 320px. Permitirles encoger evita recorte dentro del
   panel sin cambiar la composición de los formularios. */
.app-modal-panel :is(form, fieldset, .grid, .flex),
.app-modal-panel :is(input, select, textarea, .ss-trigger) {
  min-width: 0;
  max-width: 100%;
}

.modal-backdrop .app-modal-panel :is(p, li)[class~="text-xs"],
.modal-backdrop .app-modal-panel :is(p, li)[class~="text-[8px]"],
.modal-backdrop .app-modal-panel :is(p, li)[class~="text-[9px]"],
.modal-backdrop .app-modal-panel :is(p, li)[class~="text-[10px]"],
.modal-backdrop .app-modal-panel :is(p, li)[class~="text-[11px]"] {
  font-size: var(--app-text-size);
  line-height: var(--app-readable-leading);
}

.modal-backdrop .app-modal-panel :is(label, span, th, dt)[class~="text-[8px]"],
.modal-backdrop .app-modal-panel :is(label, span, th, dt)[class~="text-[9px]"],
.modal-backdrop .app-modal-panel :is(label, span, th, dt)[class~="text-[10px]"],
.modal-backdrop .app-modal-panel :is(label, span, th, dt)[class~="text-[11px]"] {
  font-size: var(--app-meta-size);
  line-height: 1.4;
}

.modal-backdrop .app-modal-panel :is(h2, h3) {
  font-size: 1rem;
  line-height: 1.3;
  text-wrap: balance;
}

.modal-backdrop .app-modal-panel label {
  line-height: 1.4;
}

/* El menu se revela ya medido. Una opacidad corta evita que parezca que la
   ventana se encoge; nunca se anima transform/scale. */
@keyframes ssMenuFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ss-pop {
  animation: ssMenuFade .12s ease-out !important;
  transform: none;
}

.ss-option-label {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.ss-empty {
  font-size: var(--app-meta-size) !important;
  line-height: 1.4;
}

@media (any-pointer: coarse), (max-width: 639px) {
  #app-view main .view :is(input, select, textarea, .ss-trigger),
  .modal-backdrop :is(input, select, textarea, .ss-trigger),
  #auth-view :is(input, select, textarea) {
    min-height: var(--app-control-height);
    font-size: 1rem !important;
  }

  #app-view main .view :is(.neon-cta, .link-chip, button[type="submit"]),
  .modal-backdrop :is(.neon-cta, .link-chip, button[type="submit"]) {
    min-height: var(--app-control-height);
  }
}

@media (max-width: 479px) {
  .modal-backdrop .app-modal-panel {
    width: 100%;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px));
  }

  /* Filas de acciones genericas: pueden saltar sin comprimir el texto. */
  .modal-backdrop .app-modal-panel form > .flex:last-child {
    flex-wrap: wrap;
  }
}

/* Los formularios, ediciones y confirmaciones usan una ventana centrada en
   móvil. Las hojas con gesto y Premium no reciben esta clase: conservan su
   alineación y su interacción especial. El padding pertenece al backdrop para
   que el panel nunca invada el notch ni los bordes táctiles. */
@media (max-width: 767px) {
  .modal-backdrop.app-modal-conventional {
    --app-modal-inset-top: max(1rem, env(safe-area-inset-top, 0px));
    --app-modal-inset-right: max(1rem, env(safe-area-inset-right, 0px));
    --app-modal-inset-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    --app-modal-inset-left: max(1rem, env(safe-area-inset-left, 0px));
    align-items: center !important;
    padding:
      var(--app-modal-inset-top)
      var(--app-modal-inset-right)
      var(--app-modal-inset-bottom)
      var(--app-modal-inset-left) !important;
  }

  .modal-backdrop.app-modal-conventional > .app-modal-panel {
    width: 100%;
    max-height: calc(100dvh - var(--app-modal-inset-top) - var(--app-modal-inset-bottom));
    border-radius: var(--radius-overlay, .85rem) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-pop { animation: none; }
}