/* ═══════════════════════════════════════════════════════════════════════════
   Estilos propios del portal ciudadano
   ───────────────────────────────────────────────────────────────────────────
   Lo genérico vive en Registro360.BlazorUI (r3-tokens + tema + r3-components).
   Acá va solo lo que es de esta aplicación y de nadie más.

   Misma regla que en la biblioteca: ni un color escrito a mano. Todo sale de
   tokens, para que cambiar de tema revista también estas pantallas. Ver ADR-0023.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Infraestructura de Blazor ────────────────────────────────────────────
   Estas clases las emite el framework, no las escribimos nosotros. Se
   tokenizan igual: un panel de error con los colores de la plantilla por
   defecto delata que la app no terminó de vestirse. */

#blazor-error-ui {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  text-align: center;
  font-size: 0.875rem;
  color: hsl(var(--r3-destructive-foreground));
  background-color: hsl(var(--r3-destructive));
  box-shadow: var(--r3-shadow-md);
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 1rem;
  top: 0.75rem;
}

.blazor-error-boundary {
  padding: 1rem 1rem 1rem 3.5rem;
  color: hsl(var(--r3-destructive-foreground));
  background-color: hsl(var(--r3-destructive));
  border-radius: var(--r3-radius);
}

.loading-progress {
  position: relative;
  display: block;
  width: 8rem;
  height: 8rem;
  margin: 20vh auto 1rem;
}

.loading-progress circle {
  fill: none;
  stroke: hsl(var(--r3-muted));
  stroke-width: 0.6rem;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}

.loading-progress circle:last-child {
  stroke: hsl(var(--r3-primary));
  stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
  transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
  position: absolute;
  text-align: center;
  font-weight: 600;
  inset: calc(20vh + 3.25rem) 0 auto 0;
  color: hsl(var(--r3-muted-foreground));
}

.loading-progress-text::after {
  content: var(--blazor-load-percentage-text, "Cargando");
}

/* Validación de EditForm. */
.invalid { border-color: hsl(var(--r3-destructive)) !important; }

.validation-message {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: hsl(var(--r3-destructive));
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: hsl(var(--r3-primary));
}

/* ═══════════════════════════════════════════════════════════════════════════
   El asistente del trámite
   ───────────────────────────────────────────────────────────────────────────
   Ni un color escrito a mano: todo sale de tokens. Ver ADR-0023.
   ═════════════════════════════════════════════════════════════════════════ */

.r3-tramite {
  max-width: 56rem;
  margin: 0 auto;
  padding: 1.5rem;
}

.r3-tramite__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.r3-tramite__cabecera h1 {
  font-family: var(--r3-font-display);
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0;
  color: hsl(var(--r3-foreground));
}

/* ── Opciones grandes: tipo de servicio, origen ───────────────────────── */

.r3-opciones {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
  .r3-opciones { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}

.r3-opcion {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  width: 100%;
  padding: 1rem;
  text-align: left;
  font-family: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
  background-color: hsl(var(--r3-card));
  border: 1px solid hsl(var(--r3-border));
  border-radius: var(--r3-radius);
  box-shadow: var(--r3-shadow-xs);
  transition: border-color var(--r3-transition), box-shadow var(--r3-transition);
}

.r3-opcion:hover {
  border-color: hsl(var(--r3-primary) / 0.5);
  box-shadow: var(--r3-shadow-sm);
}

.r3-opcion:focus-visible { outline: none; box-shadow: var(--r3-shadow-focus); }

.r3-opcion--elegida {
  border-color: hsl(var(--r3-primary));
  background-color: hsl(var(--r3-primary-soft));
  box-shadow: var(--r3-shadow-sm);
}

.r3-opcion__icono {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  height: 2.5rem;
  width: 2.5rem;
  border-radius: var(--r3-radius);
  background-color: hsl(var(--r3-primary-soft));
  color: hsl(var(--r3-primary));
}

.r3-opcion--elegida .r3-opcion__icono {
  background-color: hsl(var(--r3-primary));
  color: hsl(var(--r3-primary-foreground));
}

.r3-opcion__texto { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.r3-opcion__texto strong { color: hsl(var(--r3-foreground)); font-weight: 600; }
.r3-opcion__texto span { color: hsl(var(--r3-muted-foreground)); font-size: 0.8125rem; line-height: 1.45; }

/* ── Catálogo de actos ────────────────────────────────────────────────── */

.r3-buscador { margin-bottom: 1.25rem; }

.r3-grupo {
  font-family: var(--r3-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--r3-muted-foreground));
  margin: 1.5rem 0 0.75rem;
}

.r3-grupo:first-child { margin-top: 0; }

.r3-actos { display: grid; gap: 0.5rem; }

.r3-acto {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  padding: 0.875rem 1rem;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  background-color: hsl(var(--r3-card));
  border: 1px solid hsl(var(--r3-border));
  border-radius: var(--r3-radius);
  transition: border-color var(--r3-transition), background-color var(--r3-transition);
}

.r3-acto:hover:not(:disabled) {
  border-color: hsl(var(--r3-primary) / 0.5);
  background-color: hsl(var(--r3-primary-soft) / 0.4);
}

.r3-acto:focus-visible { outline: none; box-shadow: var(--r3-shadow-focus); }
.r3-acto:disabled { opacity: 0.6; cursor: progress; }

.r3-acto--elegido {
  border-color: hsl(var(--r3-primary));
  background-color: hsl(var(--r3-primary-soft));
}

.r3-acto__marca {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  height: 1.5rem;
  width: 1.5rem;
  margin-top: 0.125rem;
  border-radius: 9999px;
  border: 1px solid hsl(var(--r3-border-strong));
  color: hsl(var(--r3-primary));
}

.r3-acto--elegido .r3-acto__marca {
  border-color: hsl(var(--r3-primary));
  background-color: hsl(var(--r3-card));
}

.r3-acto__cuerpo { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.r3-acto__cuerpo strong { color: hsl(var(--r3-foreground)); font-size: 0.9375rem; font-weight: 600; }
.r3-acto__cuerpo > span { color: hsl(var(--r3-muted-foreground)); font-size: 0.8125rem; line-height: 1.45; }

.r3-acto__pie { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.25rem; }

.r3-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  background-color: hsl(var(--r3-muted));
  color: hsl(var(--r3-muted-foreground));
}

.r3-chip--ok {
  background-color: hsl(var(--r3-success-soft));
  color: hsl(var(--r3-success));
}

/* ── Formularios de paso ──────────────────────────────────────────────── */

.r3-form { display: grid; gap: 1rem; }

@media (min-width: 640px) {
  .r3-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r3-form > *:only-child { grid-column: 1 / -1; }
}

.r3-check {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 0;
  cursor: pointer;
  font-size: 0.875rem;
  color: hsl(var(--r3-foreground));
}

.r3-check input { margin-top: 0.2rem; accent-color: hsl(var(--r3-primary)); }
.r3-check span { display: flex; flex-direction: column; gap: 0.25rem; }

.r3-check--destacado {
  padding: 1rem;
  border: 1px solid hsl(var(--r3-border));
  border-radius: var(--r3-radius);
  background-color: hsl(var(--r3-surface));
  margin-top: 1.25rem;
}

/* ── Requisitos y cálculo, agrupados por acto ─────────────────────────── */

.r3-req-acto,
.r3-calculo-acto {
  padding: 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid hsl(var(--r3-border));
  border-radius: var(--r3-radius);
  background-color: hsl(var(--r3-card));
}

.r3-req-acto__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid hsl(var(--r3-border));
}

.r3-req-acto__cabecera strong {
  font-family: var(--r3-font-display);
  color: hsl(var(--r3-foreground));
}

.r3-calculo-accion { display: flex; justify-content: flex-end; margin: 1.25rem 0; }

.r3-calculo-tabla { margin-top: 1rem; }
.r3-num { text-align: right; white-space: nowrap; }

.r3-fila--alerta { background-color: hsl(var(--r3-warning-soft)); }
.r3-hint--alerta { color: hsl(var(--r3-warning)); }

/* ── Resumen ──────────────────────────────────────────────────────────── */

.r3-resumen { font-size: 0.9375rem; }

.r3-datos {
  display: grid;
  grid-template-columns: minmax(8rem, auto) 1fr;
  gap: 0.5rem 1rem;
  margin: 0 0 1rem;
}

.r3-datos dt { color: hsl(var(--r3-muted-foreground)); font-size: 0.8125rem; }
.r3-datos dd { margin: 0; color: hsl(var(--r3-foreground)); font-weight: 500; }

.r3-resumen-acto {
  padding: 1rem;
  margin-bottom: 0.75rem;
  border: 1px solid hsl(var(--r3-border));
  border-radius: var(--r3-radius);
  background-color: hsl(var(--r3-surface));
}

.r3-resumen-acto strong { display: block; margin-bottom: 0.75rem; color: hsl(var(--r3-foreground)); }

.r3-resumen-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  margin-top: 1.25rem;
  border: 1px solid hsl(var(--r3-primary) / 0.3);
  border-radius: var(--r3-radius);
  background-color: hsl(var(--r3-primary-soft));
}

.r3-resumen-total span { color: hsl(var(--r3-muted-foreground)); font-size: 0.875rem; }
.r3-resumen-total strong {
  font-family: var(--r3-font-display);
  font-size: 1.5rem;
  color: hsl(var(--r3-primary));
}

/* ── Confirmación y acuse ─────────────────────────────────────────────── */

.r3-confirmacion,
.r3-final { text-align: center; max-width: 32rem; margin: 0 auto; }

.r3-confirmacion__icono,
.r3-final__icono {
  display: grid;
  place-items: center;
  height: 4rem;
  width: 4rem;
  margin: 0 auto 1.25rem;
  border-radius: 9999px;
  background-color: hsl(var(--r3-primary-soft));
  color: hsl(var(--r3-primary));
}

.r3-final__icono {
  background-color: hsl(var(--r3-success-soft));
  color: hsl(var(--r3-success));
}

.r3-confirmacion h3,
.r3-final h3 {
  font-family: var(--r3-font-display);
  font-size: 1.375rem;
  margin: 0 0 0.75rem;
  color: hsl(var(--r3-foreground));
}

.r3-confirmacion p,
.r3-final p { color: hsl(var(--r3-muted-foreground)); margin: 0 0 1.25rem; }

.r3-consecuencias {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: grid;
  gap: 0.625rem;
  text-align: left;
}

.r3-consecuencias li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: hsl(var(--r3-foreground));
}

.r3-consecuencias svg { color: hsl(var(--r3-muted-foreground)); flex-shrink: 0; }

.r3-errores {
  margin-top: 1.25rem;
  padding: 1rem;
  text-align: left;
  border: 1px solid hsl(var(--r3-destructive) / 0.3);
  border-radius: var(--r3-radius);
  background-color: hsl(var(--r3-destructive-soft));
}

.r3-errores strong { color: hsl(var(--r3-destructive)); font-size: 0.875rem; }
.r3-errores ul { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.r3-errores li { font-size: 0.875rem; color: hsl(var(--r3-foreground)); margin-bottom: 0.25rem; }

.r3-final__numero {
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid hsl(var(--r3-border));
  border-radius: var(--r3-radius);
  background-color: hsl(var(--r3-surface));
}

.r3-final__numero span {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--r3-muted-foreground));
  margin-bottom: 0.375rem;
}

.r3-final__numero strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.375rem;
  color: hsl(var(--r3-foreground));
}

.r3-final__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  justify-content: center;
  margin-bottom: 2rem;
}

.r3-que-sigue {
  list-style: none;
  counter-reset: paso;
  padding: 0;
  margin: 0;
  text-align: left;
  display: grid;
  gap: 0.875rem;
}

.r3-que-sigue li {
  counter-increment: paso;
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 0.75rem;
  align-items: start;
}

.r3-que-sigue li::before {
  content: counter(paso);
  display: grid;
  place-items: center;
  height: 1.75rem;
  width: 1.75rem;
  border-radius: 9999px;
  background-color: hsl(var(--r3-muted));
  color: hsl(var(--r3-muted-foreground));
  font-size: 0.75rem;
  font-weight: 700;
}

/* El título y su descripción van juntos en una sola celda.

   Antes eran dos hijos sueltos del <li>, que con el ::before del número daban tres celdas
   en una grilla de dos columnas: la descripción se iba a la segunda fila, debajo del
   número, y los tres pasos se leían como una lista rota. */
.r3-que-sigue li > div { display: flex; flex-direction: column; gap: 0.125rem; }
.r3-que-sigue strong { font-size: 0.875rem; color: hsl(var(--r3-foreground)); }
.r3-que-sigue span { font-size: 0.8125rem; color: hsl(var(--r3-muted-foreground)); }

/* ── Borradores ───────────────────────────────────────────────────────── */

.r3-borradores { display: grid; gap: 0.75rem; }

.r3-borrador {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid hsl(var(--r3-border));
  border-radius: var(--r3-radius);
  background-color: hsl(var(--r3-card));
}

.r3-borrador__cuerpo { flex: 1; min-width: 0; }
.r3-borrador__cuerpo strong { display: block; color: hsl(var(--r3-foreground)); }
.r3-borrador__cuerpo span { font-size: 0.8125rem; color: hsl(var(--r3-muted-foreground)); }
.r3-borrador__acciones { display: flex; gap: 0.5rem; flex-shrink: 0; }

/* ── El total, siempre a la vista ──────────────────────────────────────────
   Se pega al pie de la ventana en pantallas chicas y queda flotando arriba a
   la derecha en las grandes: en el celular, un bloque en el medio del
   formulario se pierde al primer scroll. */

.r3-total-flotante {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid hsl(var(--r3-primary) / 0.3);
  border-radius: var(--r3-radius);
  background-color: hsl(var(--r3-primary-soft));
  box-shadow: var(--r3-shadow-md);
}

.r3-total-flotante span {
  font-size: 0.8125rem;
  color: hsl(var(--r3-muted-foreground));
}

.r3-total-flotante strong {
  font-family: var(--r3-font-display);
  font-size: 1.25rem;
  color: hsl(var(--r3-primary));
}

@media (min-width: 1024px) {
  .r3-total-flotante {
    position: sticky;
    top: 1rem;
    bottom: auto;
    margin-left: auto;
    max-width: 18rem;
  }
}

/* ── El detalle de la solicitud ────────────────────────────────────────────
   La copia de la carpeta entregada: tarjetas apiladas, una por sección. */

.r3-detalle { display: grid; gap: 1rem; }

.r3-detalle__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.r3-detalle__cabecera h1 { margin: 0; }

.r3-detalle__acto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.r3-detalle__estado {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* La liquidación tiene cinco columnas de números y no entra en un teléfono. Scrollea
   ella sola: sin esto, el que se estira es el cuerpo de la página y toda la pantalla
   se corre de lado. */
.r3-tabla-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── El expediente documental ──────────────────────────────────────────────
   Una fila por archivo: qué es, qué respalda, cuánto pesa y el botón de bajarlo. */

.r3-documentos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.r3-documento {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid hsl(var(--r3-border));
  border-radius: var(--r3-radius);
  background: hsl(var(--r3-surface));
}

.r3-documento__icono {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: var(--r3-radius);
  background: hsl(var(--r3-primary) / 0.1);
  color: hsl(var(--r3-primary));
}

/* min-width:0 para que un nombre de archivo largo se recorte dentro de la fila en vez
   de empujar al botón de descarga fuera de la tarjeta. */
.r3-documento__datos {
  flex: 1;
  min-width: 0;
}

.r3-documento__datos strong {
  display: block;
  overflow-wrap: anywhere;
}

@media (max-width: 30rem) {
  /* En pantalla angosta el botón baja: al lado del nombre le quedan cuatro caracteres.
     Y el ícono se alinea con la primera línea: centrado contra un bloque que ocupa tres
     queda flotando en la mitad, lejos del nombre que acompaña. */
  .r3-documento {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .r3-documento__datos {
    flex-basis: calc(100% - 3.25rem);
  }
}

/* ── Selector de tema del perfil ──────────────────────────────────────────── */

.r3-tema { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.r3-tema__opcion {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  font-family: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  color: hsl(var(--r3-foreground));
  background-color: hsl(var(--r3-card));
  border: 1px solid hsl(var(--r3-border));
  border-radius: var(--r3-radius);
  transition: border-color var(--r3-transition), background-color var(--r3-transition);
}

.r3-tema__opcion:hover { border-color: hsl(var(--r3-primary) / 0.5); }
.r3-tema__opcion:focus-visible { outline: none; box-shadow: var(--r3-shadow-focus); }

.r3-tema__opcion--elegida {
  border-color: hsl(var(--r3-primary));
  background-color: hsl(var(--r3-primary-soft));
  color: hsl(var(--r3-primary));
}

/* ── Archivo subido como respuesta a un requisito ─────────────────────────── */

.r3-archivo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid hsl(var(--r3-success) / 0.35);
  border-radius: var(--r3-radius);
  background-color: hsl(var(--r3-success-soft));
  color: hsl(var(--r3-success));
}

.r3-archivo__nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: hsl(var(--r3-foreground));
  font-size: 0.875rem;
}

/* Las tarjetas de una sección del perfil, apiladas. */
.r3-perfil__seccion {
  display: grid;
  gap: 1rem;
  max-width: 48rem;
}

/* ── Los trámites de una solicitud, uno por uno ────────────────────────────
   Aparece solo cuando hay más de un acto: cada uno avanza por su cuenta, y la
   lista existe para que se vea cuál va adelante y cuál quedó atrás. */

.r3-actos-estado {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.r3-acto-estado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid hsl(var(--r3-border));
  border-radius: var(--r3-radius);
  background: hsl(var(--r3-surface));
}

/* min-width:0 para que un nombre de acto largo se acomode dentro de la fila en
   vez de empujar la píldora de estado fuera de la tarjeta. */
.r3-acto-estado__datos {
  min-width: 0;
}

/* Encabezado de grupo dentro de una tarjeta: separa los adjuntos de un acto de
   los del siguiente sin abrir una tarjeta por cada uno. */
.r3-subgrupo {
  margin: 1rem 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: hsl(var(--r3-muted-foreground));
}

.r3-subgrupo:first-of-type {
  margin-top: 0;
}

@media (max-width: 30rem) {
  .r3-acto-estado {
    flex-wrap: wrap;
    align-items: flex-start;
  }
}