/* ==========================================================================
   Capa de producto — lo que panel y portal comparten.

   Orden de carga: tokens -> app -> panel|(portal) -> producto -> la capa
   propia de cada superficie. Aqui solo va lo que sirve a las DOS superficies;
   lo que solo usa una vive en `panel-negocio.css` o en `portal-producto.css`.

   Regla del sistema: esta hoja consume tokens, no los inventa. Si aparece un
   valor de color literal aqui, es un defecto.
   ========================================================================== */

/* --- Salto al contenido ---------------------------------------------------
   Primer tabulador de la pagina. Fuera de pantalla hasta que recibe foco: a
   quien navega con teclado le ahorra los veinte enlaces de la lateral.     */
.saltar-contenido {
  position: fixed;
  inset: var(--s-3) auto auto var(--s-3);
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  background: var(--c-acento-solido);
  color: var(--c-acento-solido-texto);
  font-size: var(--t-sm);
  font-weight: var(--p-semibold);
  border-radius: var(--r-md);
  text-decoration: none;
  box-shadow: var(--sombra-elevada);
  transform: translateY(-250%);
  transition: transform var(--transicion);
}

.saltar-contenido:focus-visible { transform: translateY(0); }

/* --- Sobretitulo ----------------------------------------------------------
   El renglon de contexto que va ENCIMA del titulo: "Finanzas / Cobros",
   "Vista general - 17 septiembre". Dice donde esta parado el usuario sin
   competir con el titulo por la atencion.                                  */
.sobretitulo,
.eyebrow {
  margin: 0;
  color: var(--c-texto-terciario);
  font-size: var(--t-xs);
  font-weight: var(--p-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Interruptor de tema --------------------------------------------------
   El sistema operativo sigue mandando por defecto (`tokens.css` respeta
   `prefers-color-scheme`). Esto es la excepcion explicita: la administradora
   pasa la jornada aqui y a veces el monitor no coincide con el sistema.   */
.selector-tema {
  display: inline-grid;
  place-items: center;
  width: var(--alto-control);
  height: var(--alto-control);
  padding: 0;
  border: 1px solid var(--c-borde);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--c-texto-secundario);
  cursor: pointer;
  transition: background var(--transicion), color var(--transicion),
              border-color var(--transicion);
}

.selector-tema svg { width: 1.125rem; height: 1.125rem; }
.selector-tema:hover { background: var(--c-fondo-sutil); color: var(--c-texto); }
.selector-tema:active { background: var(--c-borde); }

/* --- Avatar ---------------------------------------------------------------
   Iniciales, no foto: no hay foto de perfil en el producto y un hueco gris
   con una silueta generica no aporta nada.                                */
.avatar-usuario {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-full);
  background: var(--c-acento-suave);
  color: var(--c-acento);
  font-size: var(--t-xs);
  font-weight: var(--p-semibold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* `.boton` sin variante.

   La clase base define la caja —alto, relleno, radio, tipografia— pero no el
   relleno ni el borde, asi que un `<a class="boton">` suelto se veia como
   texto plano. Son ocho en el panel, y todas son la accion primaria de su
   pantalla: "Descargar CSV", "Editar registro", "Registrar pago".

   En vez de corregir las ocho plantillas, la base se vuelve visible por si
   sola con la forma del secundario. Lo otro deja el mismo agujero abierto
   para la novena.                                                          */
.boton:not([class*="boton--"]) {
  border-color: var(--c-borde-fuerte);
  background: var(--c-fondo-elevado);
  color: var(--c-texto);
}

.boton:not([class*="boton--"]):hover {
  border-color: var(--c-acento);
  background: var(--c-acento-suave);
  color: var(--c-acento);
}

/* --- Estados de los controles --------------------------------------------
   `:active` es el estado que confirma que el clic se registro. Sin el, en
   una red lenta el usuario vuelve a apretar y duplica la operacion.       */
.boton:active:not(:disabled) { transform: translateY(1px); }

/* Accesibilidad y formularios compartidos. */
[hidden] { display: none !important; }
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--c-acento);
  outline-offset: 3px;
}
summary { cursor: pointer; }
.campo__opcional { margin-left: var(--s-2); font-size: var(--t-xs); font-weight: var(--p-normal); color: var(--c-texto-terciario); }
.campo:has(textarea) { grid-column: 1 / -1; }
.campo textarea { min-height: 6rem; resize: vertical; }
.campo input[type=checkbox], .campo input[type=radio] { accent-color: var(--c-acento-solido); }
.campo [aria-invalid=true] { border-color: var(--c-critico); }
.resumen-errores { grid-column: 1 / -1; margin-bottom: var(--s-5); }
.resumen-errores ul { margin: var(--s-2) 0 0; padding-left: var(--s-5); }
.resumen-errores a { color: inherit; text-decoration: underline; }
.documento-lista { display: grid; gap: var(--s-4); }
.documento-fila { display: flex; gap: var(--s-5); justify-content: space-between; align-items: center; }
.documento-fila > div:first-child { min-width: 0; }
.documento-fila h2 { margin: 0 0 var(--s-2); font-size: var(--t-lg); overflow-wrap: anywhere; }
.documento-fila p { margin: var(--s-1) 0; color: var(--c-texto-secundario); font-size: var(--t-sm); }
.documento-fila .acciones { flex: none; margin: 0; }
.opciones-secundarias { margin: var(--s-4) 0 var(--s-5); border: 1px solid var(--c-borde); border-radius: var(--r-md); background: var(--c-fondo-elevado); }
.opciones-secundarias > summary { padding: var(--s-3) var(--s-4); font-size: var(--t-sm); font-weight: var(--p-medio); }
.opciones-secundarias > summary .ayuda { font-weight: var(--p-normal); margin-left: var(--s-2); }
.opciones-secundarias > :not(summary) { margin: var(--s-3) var(--s-4) var(--s-4); }
.opciones-secundarias[open] > summary { border-bottom: 1px solid var(--c-borde); }
@media (max-width: 47.99rem) {
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: var(--t-base); }
  .documento-fila { flex-direction: column; align-items: stretch; }
  .opciones-secundarias > summary { min-height: var(--alto-toque); }
  .opciones-secundarias > summary .ayuda { display: block; margin: var(--s-1) 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}
.boton--primario:active:not(:disabled) { background: var(--c-acento-solido-hover); }
.boton--secundario:active:not(:disabled) { background: var(--c-borde); }

/* Disabled y loading tienen que verse DISTINTO: los dos bloquean el clic,
   pero solo uno significa "espere". Si se ven igual, el usuario reintenta.
   La opacidad del deshabilitado ya la pone `app.css`; lo que falta es que el
   que esta cargando NO se atenue y cambie el cursor.                      */
.boton--cargando { opacity: 1; cursor: progress; }

@media (prefers-reduced-motion: reduce) {
  .boton:active:not(:disabled) { transform: none; }
}

/* --- Tablero de cifras ----------------------------------------------------
   Etiqueta arriba y cifra abajo: se lee "que es" antes que "cuanto", que es
   el orden en que la pregunta ocurre. La cifra usa la fuente de la interfaz
   con cifras tabulares, no la monoespaciada: el cero barrado de una mono
   dentro de una tarjeta de resumen se lee como un glifo roto.

   Se llama `tablero` y no `indicador` porque `.indicador` ya existe en
   `app.css` y es OTRA cosa: el girador de carga de HTMX, que vive oculto y
   solo aparece mientras hay una peticion en vuelo. Con el mismo nombre, dar
   forma a las cifras del resumen dejaba el girador visible todo el tiempo. */
.tablero {
  display: grid;
  /* 16rem deja cuatro columnas en un monitor normal. Con doce el tablero se
     parte en cinco y la ultima fila queda con tres huerfanas.              */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}

.tablero__dato {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
  padding: var(--s-5);
}

.tablero__nombre {
  margin: 0;
  color: var(--c-texto-secundario);
  font-size: var(--t-sm);
  font-weight: var(--p-medio);
  letter-spacing: normal;
  text-transform: none;
}

.tablero__valor {
  /* Pegada al pie de la tarjeta: con nombres de uno y de dos renglones, las
     cifras de una misma fila tienen que alinearse entre si para compararse. */
  margin: auto 0 0;
  font-family: var(--f-familia);
  font-size: var(--t-2xl);
  font-weight: var(--p-semibold);
  line-height: var(--l-ajustado);
  letter-spacing: var(--e-cifra);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.tablero__moneda {
  margin-right: var(--s-1);
  color: var(--c-texto-terciario);
  font-size: var(--t-base);
  font-weight: var(--p-medio);
  letter-spacing: normal;
}

/* Un indicador que ademas es atajo a su propia consulta. */
.tablero__dato--enlace {
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transicion), background var(--transicion);
}

.tablero__dato--enlace:hover {
  border-color: var(--c-acento);
  background: var(--c-acento-suave);
  text-decoration: none;
}

/* Titulo dentro de una tarjeta: es el titulo de un bloque, no de la pantalla,
   y a la escala de pantalla compite con el h1.                            */
.tarjeta > h2:first-child,
.tarjeta > .encabezado-tarjeta > h2 { font-size: var(--t-lg); }

/* --- Encabezado de pantalla ----------------------------------------------
   Sobretitulo, titulo, apoyo. Una sola pieza para las dos superficies, para
   que la altura del encabezado no cambie al pasar de una pantalla a otra.  */
.resumen-encabezado {
  display: grid;
  gap: var(--s-2);
  max-width: none;
  margin-bottom: var(--s-6);
}

.resumen-encabezado > * { margin: 0; }
.resumen-encabezado .titulo { text-wrap: balance; }

/* --- Ajustes de los componentes base -------------------------------------
   `app.css` define el componente; aqui se afina para las pantallas densas
   sin duplicar la definicion.                                             */
.tarjeta { box-shadow: var(--sombra-sutil); }

.seccion-titulo {
  color: var(--c-texto-secundario);
  font-size: var(--t-sm);
  letter-spacing: normal;
  text-transform: none;
}

/* --- Pie ------------------------------------------------------------------
   Cierra la pagina y no hace nada mas: quien firma la instancia y quien la
   hace posible. Va en el tamano mas chico de la escala porque es lo ultimo
   que alguien viene a leer.                                               */
.pie__derechos,
.pie__creditos {
  margin: 0;
  color: var(--c-texto-terciario);
  font-size: var(--t-xs);
}

.pie__creditos strong,
.pie__creditos .pie__enlace { color: var(--c-texto-secundario); font-weight: var(--p-medio); }

@media print {
  .saltar-contenido,
  .selector-tema { display: none !important; }
  .tarjeta { box-shadow: none; }
}

/* --- Galeria de fotos de evidencia ----------------------------------------
   Miniaturas cuadradas en rejilla; la foto completa se abre en otra pestana. */
.galeria-evidencias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.galeria-evidencias__item { display: grid; gap: var(--s-1); align-content: start; }
.galeria-evidencias__item p { margin: 0; font-size: var(--t-sm); }

.galeria-evidencias__item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--c-borde);
  border-radius: var(--r-md);
  background: var(--c-fondo-sutil);
}

/* --- Rondas: etiquetas QR imprimibles -------------------------------------
   Una etiqueta por punto; al imprimir solo quedan las etiquetas.           */
.rondas-qr {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--s-4);
}

.rondas-qr__etiqueta { text-align: center; break-inside: avoid; }
.rondas-qr__etiqueta img { display: block; margin: var(--s-2) auto; }

@media print {
  body:has(.rondas-qr) .encabezado-modulo,
  body:has(.rondas-qr) .subnavegacion,
  body:has(.rondas-qr) .eyebrow,
  body:has(.rondas-qr) .introduccion,
  body:has(.rondas-qr) nav { display: none !important; }
}