/* ==========================================================================
   RC Facturación — portal del cliente y páginas de enlace compartido
   RC Soluciones Digitales · https://rcsolucionesdigitales.com

   Se carga DESPUÉS de app.css, que aporta los tokens, la base y los
   componentes compartidos (botones, formularios, avisos, insignias, hoja del
   documento, totales, diálogo, banda «Demostración»). Aquí solo está lo
   propio del portal: su estructura sin barra lateral y los bloques para ver
   un presupuesto, aceptarlo o rechazarlo y pagar.

   Pensado primero para 360 px de ancho; lo ancho son añadidos.

   Contrato de uso: docs/ui/GUIA-UI.md · Muestra: docs/ui/guia-portal.html

   Índice
     01. Estructura
     02. Encabezado de página
     03. Barra de decisión (aceptar, rechazar, pagar)
     04. Lista de documentos
     05. Saldo
     06. Pago e instrucciones de transferencia
     07. Consentimiento
     08. Resultado
     09. Impresión
   ========================================================================== */


/* ==========================================================================
   01. Estructura
   La clase va en <body>. La marca (logotipo, acento, nombre) es la del
   emisor: el portal no menciona ninguna otra.
   ========================================================================== */

.rc-portal {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--papel);
  font-size: var(--texto-base);
}

.rc-portal--demo {
  --alto-demo: 2rem;
}

.rc-portal__cabecera {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2) var(--esp-4);
  padding: var(--esp-3) var(--esp-4);
  border-bottom: 1px solid var(--linea);
}

/* Filete del acento bajo el sello, igual que en el panel. */
.rc-portal__cabecera::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 1rem;
  width: 2.5rem;
  border-bottom: 2px solid var(--acento);
}

/* Navegación del cliente con sesión. Las páginas de enlace compartido no la
   llevan. En pantallas estrechas ocupa su propia fila y se desplaza. */
.rc-portal__nav {
  flex: 1 1 100%;
  min-width: 0;
}

.rc-portal__lista {
  position: relative;
  display: flex;
  gap: var(--esp-1);
  overflow-x: auto;
  scrollbar-width: thin;
}

.rc-portal__enlace {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--radio-2);
  color: var(--tinta-2);
  font-weight: var(--peso-medio);
  text-decoration: none;
  white-space: nowrap;
}

.rc-portal__enlace:hover {
  background: var(--papel-2);
  color: var(--tinta);
}

.rc-portal__enlace[aria-current="page"] {
  background: var(--acento-suave);
  color: var(--tinta);
}

.rc-portal__enlace:focus-visible {
  outline-offset: -2px;
  box-shadow: inset 0 0 0 5px var(--foco-halo);
}

/* «Salir» cierra la sesión por POST: es un botón con el aspecto de los demás enlaces. */
button.rc-portal__enlace {
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

/* Con sesión, la navegación va al principio del contenido (el marco no la lleva en su cabecera). */
.rc-portal__contenido > .rc-portal__nav {
  flex: 0 0 auto;
  margin: -0.5rem 0 0;
  padding-bottom: var(--esp-2);
  border-bottom: 1px solid var(--linea);
}

.rc-portal__contenido {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
  max-width: 46rem;
  min-width: 0;
  margin: 0 auto;
  padding: 1.25rem var(--esp-4) 2.5rem;
}

.rc-portal__contenido:focus {
  outline: none;
  box-shadow: none;
}

/* Acceso, invitación y recuperación: una sola columna corta. */
.rc-portal__contenido--estrecho {
  max-width: 26rem;
}

.rc-portal__contenido--ancho {
  max-width: 64rem;
}

.rc-portal__pie {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  padding: 1.25rem var(--esp-4) var(--esp-5);
  border-top: 1px solid var(--linea);
  color: var(--tinta-2);
  font-size: var(--texto-s);
}

.rc-portal__pie a {
  color: var(--tinta-2);
}

@media (min-width: 48em) {
  .rc-portal__cabecera {
    padding: 0.875rem var(--esp-5);
  }

  .rc-portal__cabecera::after {
    left: 1.5rem;
  }

  .rc-portal__nav {
    flex: 0 1 auto;
  }

  .rc-portal__contenido {
    padding: var(--esp-6) var(--esp-5) var(--esp-7);
  }

  .rc-portal__pie {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--esp-1) var(--esp-5);
    padding-right: var(--esp-5);
    padding-left: var(--esp-5);
  }
}


/* ==========================================================================
   02. Encabezado de página
   ========================================================================== */

.rc-portal__encabezado {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.rc-portal__titulo {
  font-family: var(--fuente-rotulo);
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.rc-portal__entradilla {
  color: var(--tinta-2);
}


/* ==========================================================================
   03. Barra de decisión
   Último hijo de .rc-portal__contenido. En el móvil queda pegada al borde
   inferior mientras se lee el documento, con el importe y las dos acciones
   a 44 px o más. Desde 40em es una caja pegada con margen.
   ========================================================================== */

.rc-decision {
  position: sticky;
  bottom: var(--rc-teclado, 0px);
  z-index: var(--z-pegado);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  margin: 0 -1rem;
  padding: 0.625rem var(--esp-4) calc(0.625rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--tinta);
  background: var(--papel);
  box-shadow: var(--sombra-barra);
}

.rc-decision__resumen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--esp-4);
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

.rc-decision__rotulo {
  color: var(--tinta-2);
  font-size: var(--texto-s);
}

.rc-decision__importe {
  font-family: var(--fuente-rotulo);
  font-size: var(--texto-xl);
  font-weight: var(--peso-medio);
  line-height: 1.2;
  white-space: nowrap;
}

.rc-decision__acciones {
  display: flex;
  gap: var(--esp-2);
}

.rc-decision__acciones > .rc-boton {
  flex: 1 1 0;
  min-width: 0;
  min-height: 3rem;
  padding-right: var(--esp-2);
  padding-left: var(--esp-2);
}

/* La acción principal se lleva más ancho para que su texto quepa en una línea. */
.rc-decision__acciones > .rc-boton--primario {
  flex-grow: 1.7;
}

/* Lo que recibe el foco no queda debajo de la barra. */
@supports selector(:has(*)) {
  html:has(.rc-decision) {
    scroll-padding-bottom: 9rem;
  }
}

@media (min-width: 40em) {
  .rc-decision {
    bottom: 0.75rem;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-2) var(--esp-5);
    margin: 0;
    padding: var(--esp-3) var(--esp-4);
    border: 1px solid var(--linea-fuerte);
    border-radius: var(--radio-3);
    box-shadow: var(--sombra-2);
  }

  .rc-decision__resumen {
    flex-direction: column;
    align-items: flex-start;
  }

  .rc-decision__acciones > .rc-boton,
  .rc-decision__acciones > .rc-boton--primario {
    flex: none;
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }
}


/* ==========================================================================
   04. Lista de documentos
   ========================================================================== */

.rc-documentos {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}

.rc-documentos__elemento {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  min-width: 0;
  padding: 0.875rem var(--esp-4);
  border: 1px solid var(--linea);
  border-radius: var(--radio-3);
  background: var(--papel);
}

.rc-documentos__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.125rem var(--esp-4);
}

.rc-documentos__titulo {
  min-width: 0;
  font-family: var(--fuente-texto);
  font-size: var(--texto-l);
  overflow-wrap: anywhere;
}

.rc-documentos__titulo > a {
  color: var(--tinta);
  text-decoration-color: var(--linea-fuerte);
}

.rc-documentos__importe {
  font-variant-numeric: tabular-nums;
  font-weight: var(--peso-fuerte);
  white-space: nowrap;
}

.rc-documentos__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1) var(--esp-3);
  color: var(--tinta-2);
  font-size: var(--texto-m);
}

.rc-documentos__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-top: 0.125rem;
}


/* ==========================================================================
   05. Saldo
   ========================================================================== */

.rc-saldo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-2);
  min-width: 0;
  padding: var(--esp-4);
  border: 1px solid var(--linea);
  border-radius: var(--radio-3);
}

/* La cifra lleva la doble raya del total. */
.rc-saldo__cifra {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.375rem;
  max-width: 100%;
  padding-bottom: var(--esp-2);
  border-bottom: 6px double var(--acento);
  font-family: var(--fuente-rotulo);
  font-size: var(--texto-3xl);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: var(--peso-medio);
  line-height: 1.1;
}

.rc-saldo__moneda {
  color: var(--tinta-2);
  font-family: var(--fuente-texto);
  font-size: var(--texto-s);
  font-weight: var(--peso-medio);
  letter-spacing: 0.04em;
}

.rc-saldo__detalle {
  color: var(--tinta-2);
}

.rc-saldo__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-top: var(--esp-1);
}


/* ==========================================================================
   06. Pago e instrucciones de transferencia
   ========================================================================== */

.rc-pago {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}

.rc-pago__metodo {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-width: 0;
  padding: var(--esp-4);
  border: 1px solid var(--linea);
  border-radius: var(--radio-3);
}

.rc-pago__titulo {
  font-family: var(--fuente-texto);
  font-size: var(--texto-l);
}

.rc-pago__nota {
  color: var(--tinta-2);
  font-size: var(--texto-m);
}

/* Dato que el cliente tiene que copiar tal cual: IBAN, referencia, importe. */
.rc-copiable {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.125rem var(--esp-3);
  padding: var(--esp-2) 0;
  border-top: 1px solid var(--linea);
}

.rc-copiable:first-child {
  padding-top: 0;
  border-top: 0;
}

.rc-copiable__rotulo {
  flex: 1 1 100%;
  color: var(--tinta-2);
  font-size: var(--texto-s);
}

.rc-copiable__valor {
  flex: 1 1 10rem;
  min-width: 0;
  font-family: var(--fuente-codigo);
  font-weight: var(--peso-medio);
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}


/* ==========================================================================
   07. Consentimiento
   Lo que el cliente acepta, mostrado tal como queda guardado como evidencia.
   ========================================================================== */

.rc-consentimiento {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  min-width: 0;
  padding: var(--esp-4);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-3);
  background: var(--papel-2);
}

.rc-consentimiento__titulo {
  font-family: var(--fuente-texto);
  font-size: var(--texto-l);
}

.rc-consentimiento__texto {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

.rc-consentimiento .rc-opcion {
  padding: var(--esp-3);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-2);
  background: var(--papel);
  font-weight: var(--peso-medio);
}


/* ==========================================================================
   08. Resultado
   Pantalla de cierre: aceptado, rechazado, pago recibido, pago en
   comprobación, enlace caducado. El sello lleva un signo distinto por
   variante y el título lo dice con palabras.
   ========================================================================== */

.rc-resultado {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-3);
  min-width: 0;
  padding: clamp(1.25rem, 5vw, 2.5rem);
  border: 1px solid var(--linea);
  border-radius: var(--radio-3);
}

.rc-resultado__sello {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0.3125rem 0 var(--esp-1) 0.3125rem;
  border-radius: 50%;
  background: var(--tinta);
  box-shadow: 0 0 0 3px var(--papel), 0 0 0 5px var(--acento);
  color: var(--sobre-tinta);
}

.rc-resultado__sello::before,
.rc-resultado__sello::after {
  content: "";
  position: absolute;
}

/* Hecho: marca. */
.rc-resultado--exito .rc-resultado__sello::before {
  top: 50%;
  left: 50%;
  width: 0.75rem;
  height: 1.375rem;
  border: solid currentColor;
  border-width: 0 3px 3px 0;
  transform: translate(-50%, -60%) rotate(45deg);
}

/* En comprobación: tres puntos. */
.rc-resultado--pendiente .rc-resultado__sello::before {
  top: 50%;
  left: 50%;
  width: 1.75rem;
  border-top: 0.375rem dotted currentColor;
  transform: translate(-50%, -50%);
}

/* No disponible: aspa. */
.rc-resultado--error .rc-resultado__sello::before,
.rc-resultado--error .rc-resultado__sello::after {
  top: 50%;
  left: 50%;
  width: 1.5rem;
  border-top: 3px solid currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

.rc-resultado--error .rc-resultado__sello::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Atención: raya (decisión negativa registrada, enlace caducado). */
.rc-resultado--aviso .rc-resultado__sello::before {
  top: 50%;
  left: 50%;
  width: 1.375rem;
  border-top: 3px solid currentColor;
  transform: translate(-50%, -50%);
}

.rc-resultado__titulo {
  font-family: var(--fuente-rotulo);
  font-size: clamp(1.375rem, 1.15rem + 1.2vw, 1.75rem);
  line-height: 1.15;
}

.rc-resultado__texto {
  max-width: 36rem;
  color: var(--tinta-2);
}

.rc-resultado__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-4);
  margin-top: var(--esp-1);
}

.rc-resultado .rc-datos {
  width: 100%;
}


/* ==========================================================================
   09. Impresión
   ========================================================================== */

@media print {
  .rc-portal {
    min-height: 0;
  }

  .rc-portal__nav,
  .rc-decision,
  .rc-documentos__acciones,
  .rc-saldo__acciones,
  .rc-resultado__acciones {
    display: none !important;
  }

  .rc-portal__contenido {
    max-width: none;
    padding: 0.5cm 0 0;
  }

  .rc-portal__cabecera,
  .rc-portal__pie {
    padding-right: 0;
    padding-left: 0;
  }

  .rc-portal__cabecera::after {
    left: 0;
  }

  .rc-documentos__elemento,
  .rc-pago__metodo,
  .rc-consentimiento,
  .rc-resultado,
  .rc-saldo {
    border-color: #000000;
    background: none;
    break-inside: avoid;
  }
}