/* ==========================================================================
   ESTRUCTURA DE LA APLICACIÓN
   --------------------------------------------------------------------------
   La barra de arriba es oscura y el contenido claro: separa el "mueble" de
   la información, para que lo que se lee todos los días resalte.

   Era un menú al costado, y se llevaba 236 px que en el estado de resultados
   valían una columna y media: por eso había que poder plegarlo. Arriba no le
   quita ancho a nada, y el botón de plegar se fue con él.
   ========================================================================== */

.aplicacion {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ==========================================================================
   BARRA SUPERIOR
   ========================================================================== */
.barra {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  height: var(--alto-barra-superior);
  padding: 0 var(--esp-5);
  background: var(--nav-fondo);
  border-bottom: 1px solid var(--nav-borde);
  color: var(--nav-texto);
}

.barra__marca {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  flex: none;
  color: var(--nav-texto-fuerte);
  text-decoration: none;
}
.barra__marca:hover { text-decoration: none; }

/* El ícono redondeado del kit de marca: la «A» blanca sobre el cuadrado
   azul, con las esquinas ya dibujadas. Va solo, sin el nombre al lado, a
   pedido del titular: el lugar es de las áreas. */
.barra__logo {
  display: block;
  width: 30px;
  height: 30px;
  flex: none;
}

.barra__menu { flex: 1 1 auto; min-width: 0; }
.barra__areas {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.barra__area { position: relative; }

.barra__boton {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  padding: 0.45rem 0.7rem;
  border-radius: var(--radio-sm);
  color: var(--nav-texto);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
  transition: background var(--transicion), color var(--transicion);
}
/* Safari dibuja su propio triangulito; acá la flecha es la del sistema */
.barra__boton::-webkit-details-marker { display: none; }
.barra__boton:hover,
.barra__desplegable[open] > .barra__boton {
  background: var(--nav-fondo-2);
  color: var(--nav-texto-fuerte);
  text-decoration: none;
}
/* El área de la pantalla en la que estás: es lo que dice de un vistazo en
   qué parte del sistema está uno, con todas las áreas cerradas. */
.barra__boton--activo {
  color: var(--nav-activo-texto);
  box-shadow: inset 0 -2px 0 var(--nav-activo-marca);
}

.barra__flecha {
  width: 0.8em;
  height: 0.8em;
  opacity: 0.7;
  transform: rotate(90deg);
  transition: transform var(--transicion);
}
.barra__desplegable[open] .barra__flecha { transform: rotate(-90deg); }

.barra__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  display: flex;
  gap: var(--esp-5);
  padding: var(--esp-3);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra-lg);
  color: var(--color-texto);
}
/* Las dos últimas áreas abren hacia la izquierda: hacia la derecha se
   saldrían de la pantalla. */
.barra__area:nth-last-child(-n+2) .barra__panel { left: auto; right: 0; }

.barra__columna {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 14rem;
}
.barra__titulo-columna {
  padding: var(--esp-1) var(--esp-2) var(--esp-2);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-texto-tenue);
}

.barra__enlace {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: 0.45rem var(--esp-2);
  border-radius: var(--radio-sm);
  color: var(--color-texto);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--transicion);
}
.barra__enlace .icono { color: var(--color-texto-tenue); }
.barra__enlace:hover {
  background: var(--color-superficie-2);
  text-decoration: none;
}
.barra__enlace--activo {
  background: var(--color-primario-suave);
  color: var(--color-primario-texto);
  font-weight: var(--peso-semi);
}
.barra__enlace--activo .icono { color: var(--color-primario); }

.barra__acciones {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin-left: auto;
  flex: none;
}
/* Los botones del sistema están pensados para fondo claro */
.barra__icono {
  background: transparent;
  border-color: transparent;
  color: var(--nav-texto);
}
.barra__icono:hover {
  background: var(--nav-fondo-2);
  border-color: var(--nav-borde);
  color: var(--nav-texto-fuerte);
}
.barra__usuario { cursor: default; }

/* El contribuyente en foco. El nombre se corta: lo que importa es
   reconocerlo, y el entero está en el globo y en la ficha. */
.barra__foco { position: relative; }
.barra__foco .barra__boton { border: 1px solid var(--nav-borde); }
.barra__foco-nombre {
  max-width: 13rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barra__foco .barra__panel { left: auto; right: 0; }

/* El buscador: parece un campo para que se lo reconozca, pero abre el cuadro
   de búsqueda, que es donde se escribe. */
.barra__buscar {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  min-width: 12rem;
  padding: 0.35rem 0.5rem 0.35rem 0.65rem;
  border: 1px solid var(--nav-borde);
  border-radius: var(--radio-sm);
  background: var(--nav-fondo-2);
  color: var(--nav-tenue);
  font-size: var(--texto-sm);
  text-decoration: none;
  transition: border-color var(--transicion), color var(--transicion);
}
.barra__buscar:hover { color: var(--nav-texto-fuerte); border-color: var(--nav-tenue); text-decoration: none; }
.barra__buscar-texto { flex: 1; }
.barra__tecla {
  padding: 0.05rem 0.35rem;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-family: var(--fuente-mono);
  font-size: var(--texto-xs);
  opacity: 0.8;
}
.barra__rapidas { position: relative; }
.barra__rapidas .barra__panel { left: auto; right: 0; }

/* ==========================================================================
   EL CUADRO DEL BUSCADOR
   ========================================================================== */
.buscador-global {
  width: min(40rem, calc(100vw - 2rem));
  max-height: min(34rem, calc(100dvh - 6rem));
  margin: 4.5rem auto auto;
  padding: 0;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  background: var(--color-superficie);
  box-shadow: var(--sombra-lg);
  color: var(--color-texto);
  overflow: hidden;
}
.buscador-global[open] { display: flex; flex-direction: column; }
.buscador-global::backdrop { background: rgba(16, 19, 24, 0.45); }
.buscador-global__formulario {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: var(--esp-3);
  border-bottom: 1px solid var(--color-borde);
}
.buscador-global__formulario .buscador { flex: 1; }
.buscador-global__formulario .barra__tecla { color: var(--color-texto-tenue); }
.buscador-global__resultados { overflow-y: auto; padding: var(--esp-2) var(--esp-3) var(--esp-3); }

.resultados-busqueda { display: flex; flex-direction: column; gap: var(--esp-3); }
.resultados-busqueda__grupo { display: flex; flex-direction: column; gap: 1px; }
.resultados-busqueda__titulo {
  margin: 0;
  padding: var(--esp-2) var(--esp-2) var(--esp-1);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-texto-tenue);
}
.resultados-busqueda__item {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: 0.45rem var(--esp-2);
  border-radius: var(--radio-sm);
  color: var(--color-texto);
  text-decoration: none;
}
.resultados-busqueda__item .icono { flex: none; color: var(--color-texto-tenue); }
.resultados-busqueda__item:hover,
.resultados-busqueda__item:focus-visible {
  background: var(--color-primario-suave);
  outline: none;
  text-decoration: none;
}
.resultados-busqueda__texto { display: flex; flex-direction: column; min-width: 0; }
.resultados-busqueda__nombre { font-size: var(--texto-sm); font-weight: var(--peso-medio); }
.resultados-busqueda__detalle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--texto-xs);
  color: var(--color-texto-tenue);
}
.resultados-busqueda__vacio {
  margin: 0;
  padding: var(--esp-4) var(--esp-2);
  font-size: var(--texto-sm);
  color: var(--color-texto-tenue);
}

/* Los contadores: sólo lo urgente, y sólo cuando hay algo. El punto marca un
   área cerrada que tiene algo adentro. */
.contador {
  min-width: 1.25rem;
  margin-left: auto;
  padding: 0 0.35rem;
  border-radius: var(--radio-full);
  background: var(--color-alerta-suave);
  color: var(--color-alerta);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
  line-height: 1.25rem;
  text-align: center;
}
.contador--aviso { margin-left: var(--esp-1); }
.contador--punto {
  width: 7px;
  min-width: 0;
  height: 7px;
  margin-left: 2px;
  padding: 0;
  background: var(--color-alerta);
}
.barra__abrir { position: relative; }
.barra__abrir .contador--punto { position: absolute; top: 5px; right: 5px; margin: 0; }

/* El botón de menú sólo existe en pantallas angostas */
.barra__abrir { display: none; }

/* ==========================================================================
   ÁREA PRINCIPAL
   ========================================================================== */
.principal { display: flex; flex-direction: column; flex: 1; min-width: 0; }

/* ==========================================================================
   CONTENIDO
   ========================================================================== */
.contenido {
  flex: 1;
  width: 100%;
  max-width: var(--ancho-contenido-max);
  margin: 0 auto;
  padding: var(--esp-5);
  display: flex;
  flex-direction: column;
  gap: var(--esp-5);
}
/* El tope de 1400 px está para que un texto no se lea de punta a punta de una
   pantalla ancha, y una tabla de trece columnas es justo lo contrario: el
   estado de resultados usa el ancho que haya. Antes eso lo daba plegar el
   menú; ahora lo dice la propia tabla. */
.contenido:has(.tabla-contenedor--desplazable) { max-width: none; }

.encabezado-pagina {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-4);
  flex-wrap: wrap;
}
.encabezado-pagina__texto {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.encabezado-pagina__subtitulo { font-size: var(--texto-sm); color: var(--color-texto-tenue); }
/* La caja que se refresca al filtrar no cuenta para el acomodo del encabezado. */
.encabezado-pagina__refresco { display: contents; }
.encabezado-pagina__acciones {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  flex-wrap: wrap;
}


/* ==========================================================================
   MIGAS
   Van arriba del encabezado, chicas. En pantallas angostas el camino entero
   no entra: se recorta el último tramo, que es el que ya dice el título.
   ========================================================================== */
.migas {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  min-width: 0;
  font-size: var(--texto-sm);
  color: var(--color-texto-tenue);
}
.migas > * { flex: 0 0 auto; }
.migas a { color: var(--color-texto-tenue); }
.migas a:hover { color: var(--color-primario-texto); }
.migas .icono { width: 0.85em; height: 0.85em; opacity: 0.7; }
/* El área no es una pantalla, así que no se dibuja como enlace: uno que no
   lleva a ningún lado se aprieta una vez y no se vuelve a creer. */
.migas__area { white-space: nowrap; }
.migas .migas__actual {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-texto);
}
/* Pegadas al título: el hueco entero del contenido las separaría de lo que
   nombran. */
.cabecera > .migas { margin-bottom: calc(var(--esp-4) * -1); }

/* ==========================================================================
   CABECERA
   Las migas, el contribuyente en foco y el encabezado. Por omisión no es una
   caja: sus partes se acomodan en el contenido como siempre.
   ========================================================================== */
.cabecera { display: contents; }

/* En franja: el azul de la marca de punta a punta de la pantalla, pegado a
   la barra de arriba. El fondo se estira con una sombra recortada y no con
   márgenes negativos, para que el texto quede alineado con el contenido. */
/* Como en la maqueta: el contribuyente en una línea chica, el título con lo
   que se mira a la derecha y, abajo, las secciones con las pantallas de la
   sección al final del mismo renglón. La barra del contribuyente se deshace
   (`display: contents`) para que sus partes ocupen ese orden; las migas no
   van, porque las solapas ya dicen dónde se está. */
.cabecera--franja {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "foco foco"
    "encabezado encabezado"
    "secciones paginas"
    "resto resto";
  column-gap: var(--esp-5);
  row-gap: var(--esp-2);
  margin-top: calc(var(--esp-5) * -1);
  padding: var(--esp-4) 0 var(--esp-5);
  background: var(--franja-fondo);
  box-shadow: 0 0 0 100vmax var(--franja-fondo);
  clip-path: inset(0 -100vmax);
  color: var(--franja-texto);
}
.cabecera--franja > .migas { display: none; }
.cabecera--franja .contribuyente { display: contents; }
.cabecera--franja .contribuyente__foco { grid-area: foco; padding: 0; gap: var(--esp-2); }
.cabecera--franja .encabezado-pagina { grid-area: encabezado; margin: 0; }
.cabecera--franja .contribuyente__secciones { grid-area: secciones; }
.cabecera--franja > .secciones { grid-area: secciones; }
.cabecera--franja .contribuyente__paginas { grid-area: paginas; align-self: end; }
.cabecera--franja .contribuyente__futuro,
.cabecera--franja .contribuyente__tarjetas { grid-column: 1 / -1; }
body:has(.cabecera--franja) .barra { background: var(--franja-fondo); }
.cabecera--franja .migas,
.cabecera--franja .migas a { color: var(--franja-suave); }
.cabecera--franja .migas .migas__actual { color: var(--franja-texto); }
.cabecera--franja .titulo-pagina { color: var(--franja-texto); }
.cabecera--franja .encabezado-pagina { align-items: flex-end; }
.cabecera--franja .encabezado-pagina__subtitulo { color: var(--franja-suave); }

/* El contribuyente, en la franja: el mismo recuadro que el período, con su
   etiqueta, y más ancho, porque es lo primero que se elige (a pedido del
   titular, 02/11/2026: como una línea de texto no se leía como elegible).
   Con JavaScript cambia solo al elegir, así que «Ver» se esconde; sin
   JavaScript sigue a la vista. */
.cabecera--franja .campo__etiqueta { color: var(--franja-suave); }
.cabecera--franja .contribuyente__cliente { flex: 0 1 28rem; max-width: 28rem; }
.cabecera--franja .contribuyente .campo__control {
  background-color: var(--franja-control);
  border-color: var(--franja-borde);
  color: var(--franja-texto);
}
.cabecera--franja .contribuyente__cliente .campo__control { font-weight: var(--peso-semi); }
/* El mismo alto que el mes, que como campo de fecha viene un poco más alto. */
.cabecera--franja .contribuyente .campo__control { min-height: 40px; }
.cabecera--franja .contribuyente .campo__control:hover { border-color: var(--franja-suave); }
@media (scripting: enabled) {
  .cabecera--franja .contribuyente__foco > .boton { display: none; }
}
.cabecera--franja .contribuyente .campo__control option { color: var(--color-texto); }
.cabecera--franja .boton--secundario {
  background: transparent;
  border-color: var(--franja-borde);
  color: var(--franja-texto);
}
.cabecera--franja .boton--secundario:hover { background: var(--franja-control); }
.cabecera--franja .boton--secundario .icono { color: var(--franja-suave); }

/* Las secciones y las pantallas, como solapas sobre la franja: el subrayado
   dice dónde se está. No se pegan arriba al bajar: son parte del encabezado. */
.cabecera--franja .secciones {
  position: static;
  gap: var(--esp-4);
  padding: 0;
  background: transparent;
  border-bottom: 0;
  margin: var(--esp-2) 0 0;
}
.cabecera--franja .secciones__item {
  padding: var(--esp-2) 2px;
  border-radius: 0;
  color: var(--franja-suave);
  border-bottom: 2px solid transparent;
}
.cabecera--franja .secciones__item .icono { display: none; }
.cabecera--franja .secciones__item:hover { background: transparent; color: var(--franja-texto); }
.cabecera--franja .secciones__item--activa {
  background: transparent;
  color: var(--franja-texto);
  font-weight: var(--peso-semi);
  border-bottom-color: var(--franja-marca);
}
.cabecera--franja .contribuyente__paginas { gap: var(--esp-4); padding-top: 0; border-bottom: 0; }
.cabecera--franja .contribuyente__pagina { color: var(--franja-suave); }
.cabecera--franja .contribuyente__pagina:hover { color: var(--franja-texto); }
.cabecera--franja .contribuyente__pagina--activa {
  color: var(--franja-texto);
  border-bottom-color: var(--franja-marca);
}

/* La ficha del contribuyente en la franja: debajo del nombre, el CUIT, el
   tipo y la localidad, y en chips lo que lo ubica en el estudio. */
.ficha-franja__datos { color: var(--franja-suave); font-size: var(--texto-sm); }
.ficha-franja__chips { margin-top: var(--esp-2); }
.cabecera--franja .chip {
  background: var(--franja-control);
  border-color: var(--franja-borde);
  color: var(--franja-texto);
}
.cabecera--franja a.chip:hover { border-color: var(--franja-suave); text-decoration: none; }
.cabecera--franja .chip .icono { color: var(--franja-suave); }
.cabecera--franja .boton--primario {
  background: var(--franja-texto);
  border-color: var(--franja-texto);
  color: var(--franja-fondo);
}
.cabecera--franja .boton--primario .icono { color: var(--franja-fondo); }

/* Lo que va inmediatamente después de la franja se le monta encima: las
   tarjetas del estado de resultados. */
.contenido:has(> .sobre-la-franja) > .cabecera--franja { padding-bottom: var(--esp-7); }
.sobre-la-franja { margin-top: calc((var(--esp-5) + var(--esp-6)) * -1); position: relative; }

/* ==========================================================================
   PANTALLA DE INGRESO
   ========================================================================== */
.ingreso {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--esp-5);
  background: var(--nav-fondo);
}
.ingreso__caja {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: var(--esp-5);
  padding: var(--esp-6);
  background: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-lg);
}
.ingreso__marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-2);
  text-align: center;
}
.ingreso__titulo { margin: 0 0 var(--esp-1); line-height: 0; }
/* El logo horizontal del kit. El ancho mínimo que pide es 140 px; acá va
   bastante más, porque es la única pantalla donde la marca es lo principal.
   El blanco es para el tema oscuro: el azul no va sobre un fondo oscuro. */
.ingreso__logo {
  display: block;
  width: 260px;
  max-width: 100%;
  height: auto;
}
.ingreso__logo--oscuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .ingreso__logo--claro { display: none; }
  :root:not([data-tema="claro"]) .ingreso__logo--oscuro { display: block; }
}
:root[data-tema="oscuro"] .ingreso__logo--claro { display: none; }
:root[data-tema="oscuro"] .ingreso__logo--oscuro { display: block; }
.ingreso__pie {
  text-align: center;
  font-size: var(--texto-xs);
  color: var(--color-texto-tenue);
}

/* ==========================================================================
   PANTALLAS CHICAS
   Las seis áreas con sus nombres entran desde unos 1000 px. Debajo de eso el
   buscador queda como ícono y, en una tablet o un teléfono, las áreas se esconden detrás del botón de menú y se
   abren una debajo de la otra, cada una desplegándose en el lugar.
   ========================================================================== */
@media (max-width: 1280px) {
  .barra { gap: var(--esp-3); }
  /* El buscador queda como ícono: Ctrl+K lo sigue abriendo */
  .barra__buscar { min-width: 0; }
  .barra__buscar-texto,
  .barra__buscar .barra__tecla { display: none; }
}

@media (max-width: 1000px) {
  .barra { padding: 0 var(--esp-4); }
  .barra__abrir { display: inline-grid; order: -1; }
  .barra__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100dvh - var(--alto-barra-superior));
    overflow-y: auto;
    padding: var(--esp-3);
    background: var(--nav-fondo);
    border-bottom: 1px solid var(--nav-borde);
    box-shadow: var(--sombra-lg);
  }
  .barra[data-menu-abierto] .barra__menu { display: block; }
  .barra__areas { flex-direction: column; align-items: stretch; }
  .barra__boton { justify-content: space-between; padding: var(--esp-3); }
  .barra__boton--activo { box-shadow: inset 2px 0 0 var(--nav-activo-marca); }
  .barra__menu .barra__panel,
  .barra__menu .barra__area:nth-last-child(-n+2) .barra__panel {
    position: static;
    flex-direction: column;
    gap: var(--esp-3);
    margin: var(--esp-1) 0 var(--esp-2);
    box-shadow: none;
  }
  .barra__menu .barra__columna { min-width: 0; }
  .barra__menu .barra__enlace { white-space: normal; }
  .barra__foco-nombre { max-width: 7rem; }

  .contenido { padding: var(--esp-4); }
  .cabecera--franja {
    margin-top: calc(var(--esp-4) * -1);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "foco" "encabezado" "secciones" "paginas" "resto";
  }
  .avisos { right: var(--esp-3); left: var(--esp-3); max-width: none; }
}