/*
 * rf-base.css — armazón común a los tres layouts (documento 03 §1.3, §2.4–§2.6, §4.5, §6).
 *
 * Se escribe a mano (a diferencia de rf-tokens.css) y SOLO usa las variables que genera ese
 * fichero: ningún color, tamaño de marca, radio ni sombra literal aquí (regla de §2.1; lo vigila
 * convenciones/PatronVisualTest desde P7.10). Va DESPUÉS de Bootstrap en cada `head` fragment porque
 * este armazón tiene que ganarle a sus valores por defecto (misma razón que en FamHera, ver
 * `../Famhera/.../famhera.css`).
 *
 * Revisión 4.5 (P7.10, patrón visual, documento 03 §15): papel y tinta, Bricolage Grotesque en títulos,
 * precios y cifras (con su eje óptico) y Source Sans 3 en el texto; titulares en 600, nunca 800; sin
 * mayúsculas espaciadas; filetes de 1 px en vez de cajas con sombra.
 *
 * Qué NO hay aquí: los componentes del capítulo 4 (tarjeta de oferta, calendario, botones con
 * todos sus estados…) viven en rf-componentes.css. Esto es lo que necesitan los TRES layouts para
 * existir: tipografía aplicada, colores semánticos, y el armazón de página, panel y admin de §6.
 */

/* ============================================================================================
   Fuentes autoalojadas (documento 03 §2.4, D-1712; static/fonts/README.md). `font-display: swap`
   evita el texto invisible mientras carga; sin `src: local(...)` a propósito, para no heredar
   métricas de una copia del sistema que no coincida exactamente con la variable que se está
   sirviendo. Bricolage Grotesque trae en el mismo fichero el eje de peso y el óptico (`opsz`), que
   cada estilo fija con `font-variation-settings`; no tiene cursiva (la sintetiza el navegador).
   ============================================================================================ */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque/BricolageGrotesque-latin-c47ac31e5437a2a864c0aec1b2d611c0.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/bricolage-grotesque/BricolageGrotesque-latin-ext-b21945eb5067341816e893cf6dc41235.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/source-sans-3/SourceSans3-latin-fb6579a30024913f55d1f11d5f6485e4.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/source-sans-3/SourceSans3-latin-ext-60938528c1835fdaf55d033809b0e656.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/source-sans-3/SourceSans3-latin-italic-9a0656f3ce2ae98024b31b3eeb814edb.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/source-sans-3/SourceSans3-latin-ext-italic-df7018ecd5ea0c68adba68f4ec26aa52.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================================================
   Bootstrap queda por debajo (documento 03 §2.1): sus variables se redefinen a partir de los
   tokens, para que lo que aún pinta Bootstrap (modales, hojas, el botón de cierre) hable el mismo
   idioma que el resto. Solo las que no necesitan el color en tripletes numéricos.
   ============================================================================================ */
:root {
  --bs-body-font-family: var(--rf-fuente-texto-pila);
  --bs-body-color: var(--rf-texto);
  --bs-body-bg: var(--rf-fondo);
  --bs-border-color: var(--rf-filete);
  --bs-border-radius: var(--rf-radio-md);
  --bs-border-radius-sm: var(--rf-radio-sm);
  --bs-border-radius-lg: var(--rf-radio-lg);
  --bs-border-radius-xl: var(--rf-radio-xl);
  --bs-box-shadow: var(--rf-sombra-2);
  --bs-box-shadow-lg: var(--rf-sombra-3);
}

/* ============================================================================================
   Reset mínimo y ritmo tipográfico (§1.3.5 «móvil primero»: valores base = móvil, la media
   query de abajo los sustituye en escritorio, punto de corte `lg` de Bootstrap ya vendido).
   ============================================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* P14.4 (WCAG 1.4.3): el <code> de Bootstrap (#d63384) se quedaba en 4,24:1 sobre el fondo de la página, y en
   el backoffice hay códigos en casi todas las tablas (acciones de auditoría, parámetros, claves). Color de
   enlace (primario-700, 6,65:1 sobre neutro-50 con la paleta violeta, D-1840), que es de los pares permitidos de 2.3. */
code { color: var(--rf-color-primario-700); }

/* Ninguna imagen es más ancha que su contenedor (P14.4, WCAG 1.4.10): una foto de 664 px con su width escrito sacaba
   la página de la pantalla a 360 px. Un alto fijado por clase sigue mandando (más específico que la etiqueta). */
img, picture { max-width: 100%; }
img { height: auto; }

body {
  margin: 0;
  /* Una palabra más larga que la pantalla (una clave de parámetro, un correo, un código) se parte en vez de sacar la
     página por la derecha a 320 px (P14.4, WCAG 1.4.10). */
  overflow-wrap: break-word;
  background: var(--rf-fondo);
  color: var(--rf-texto);
  font-family: var(--rf-fuente-texto-pila);
  font-size: var(--rf-tipo-cuerpo-movil-tamano);
  line-height: var(--rf-tipo-cuerpo-movil-interlinea);
  /* Source Sans 3 trae cifras tabulares: los importes y las horas se alinean en columna (§2.4). */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* Títulos (§2.4): Bricolage Grotesque en 600 —nunca 800: la presencia la dan el tamaño y el aire—, equilibrados
   en líneas parecidas y con el eje óptico de su tamaño (sobria en pequeño, con guiño en grande). */
h1, h2, h3, .rf-display {
  font-family: var(--rf-fuente-titulos-pila);
  color: var(--rf-texto);
  margin: 0 0 var(--rf-espacio-3);
  text-wrap: balance;
}

.rf-display {
  font-size: var(--rf-tipo-display-movil-tamano);
  line-height: var(--rf-tipo-display-movil-interlinea);
  font-weight: var(--rf-tipo-display-peso);
  letter-spacing: -.02em;
  font-variation-settings: "opsz" 96;
}
h1 {
  font-size: var(--rf-tipo-h1-movil-tamano);
  line-height: var(--rf-tipo-h1-movil-interlinea);
  font-weight: var(--rf-tipo-h1-peso);
  letter-spacing: -.01em;
  font-variation-settings: "opsz" 48;
}
h2 {
  font-size: var(--rf-tipo-h2-movil-tamano);
  line-height: var(--rf-tipo-h2-movil-interlinea);
  font-weight: var(--rf-tipo-h2-peso);
  font-variation-settings: "opsz" 24;
}
h3 {
  font-size: var(--rf-tipo-h3-movil-tamano);
  line-height: var(--rf-tipo-h3-movil-interlinea);
  font-weight: var(--rf-tipo-h3-peso);
  font-variation-settings: "opsz" 24;
}
/* El único adorno tipográfico permitido (§2.4): una palabra del titular en cursiva 500 y en violeta. */
.rf-display em, h1 em, .rf-cursiva-marca { font-style: italic; font-weight: 500; color: var(--rf-color-primario-700); }

.rf-cuerpo-lg { font-size: var(--rf-tipo-cuerpo-lg-movil-tamano); line-height: var(--rf-tipo-cuerpo-lg-movil-interlinea); }
.rf-pequeno { font-size: var(--rf-tipo-pequeno-movil-tamano); line-height: var(--rf-tipo-pequeno-movil-interlinea); color: var(--rf-texto-secundario); }
.rf-secundario { color: var(--rf-texto-secundario); }
/* Etiqueta (§2.4): 13/16 en 600, SIN mayúsculas ni espaciado (la revisión 4.5 retira el +2 % de D-80). */
.rf-etiqueta {
  font-size: var(--rf-tipo-etiqueta-movil-tamano);
  line-height: var(--rf-tipo-etiqueta-movil-interlinea);
  font-weight: var(--rf-tipo-etiqueta-peso);
}
/* Precio (§2.4): en la familia de títulos, 700, cifras tabulares. */
.rf-precio {
  font-family: var(--rf-fuente-titulos-pila);
  font-size: var(--rf-tipo-precio-movil-tamano);
  line-height: var(--rf-tipo-precio-movil-interlinea);
  font-weight: var(--rf-tipo-precio-peso);
  font-variant-numeric: tabular-nums;
  font-variation-settings: "opsz" 24;
}
/* Antetítulo (§2.4, nuevo en la revisión 4.5): la frase corta en violeta antes de un h2 de portada o de un titular. */
.rf-antetitulo {
  font-family: var(--rf-fuente-titulos-pila);
  font-size: var(--rf-tipo-antetitulo-movil-tamano);
  line-height: var(--rf-tipo-antetitulo-movil-interlinea);
  font-weight: var(--rf-tipo-antetitulo-peso);
  color: var(--rf-color-primario-700);
  margin: 0 0 var(--rf-espacio-2);
  font-variation-settings: "opsz" 12;
}
/* Filete (§2.5): la línea de 1 px que separa bloques, elementos de una lista y secciones. */
.rf-filete { border: 0; border-top: 1px solid var(--rf-filete); margin: 0; opacity: 1; }

@media (min-width: 992px) {
  .rf-display { font-size: var(--rf-tipo-display-escritorio-tamano); line-height: var(--rf-tipo-display-escritorio-interlinea); }
  h1 { font-size: var(--rf-tipo-h1-escritorio-tamano); line-height: var(--rf-tipo-h1-escritorio-interlinea); }
  h2 { font-size: var(--rf-tipo-h2-escritorio-tamano); line-height: var(--rf-tipo-h2-escritorio-interlinea); }
  h3 { font-size: var(--rf-tipo-h3-escritorio-tamano); line-height: var(--rf-tipo-h3-escritorio-interlinea); }
  .rf-cuerpo-lg { font-size: var(--rf-tipo-cuerpo-lg-escritorio-tamano); line-height: var(--rf-tipo-cuerpo-lg-escritorio-interlinea); }
  .rf-precio { font-size: var(--rf-tipo-precio-escritorio-tamano); line-height: var(--rf-tipo-precio-escritorio-interlinea); }
}

/* Enlaces (§4.1 «botón de texto»): violeta, subrayado fino a 3 px de la base; al pasar, el subrayado engorda. */
a {
  color: var(--rf-primario);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--rf-color-primario-800); text-decoration-thickness: 2px; }

/* Foco siempre visible (documento 03 §11, anillo de 3 px con el color de §2.3). Sustituye el
   contorno de Bootstrap, no lo suma: dos anillos distintos en el mismo elemento es peor que uno. */
:focus-visible {
  outline: 3px solid var(--rf-color-primario-500);
  outline-offset: 2px;
}

/* Enlace "saltar al contenido" (documento 03 §11, teclado): invisible hasta que recibe el foco. Es lo único que flota
   en reposo sobre la página cuando aparece, por eso lleva la sombra 2. */
.rf-saltar-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--rf-capa-aviso-emergente);
  background: var(--rf-superficie);
  color: var(--rf-primario);
  padding: var(--rf-espacio-3) var(--rf-espacio-4);
  border-radius: var(--rf-radio-md);
  box-shadow: var(--rf-sombra-2);
}
.rf-saltar-contenido:focus {
  left: var(--rf-espacio-4);
  top: var(--rf-espacio-4);
}

/* Movimiento reducido (documento 03 §2.5, §11): se anula cualquier transición o animación. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================================
   Contenedor público (§2.5: contenedor máximo de 1200 px; 16 px de margen en el móvil y 24 desde
   la tableta, como el prototipo de design/patron-visual/).
   ============================================================================================ */
.rf-contenedor {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--rf-espacio-4);
}
@media (min-width: 768px) {
  .rf-contenedor { padding-inline: var(--rf-espacio-6); }
}

/* ============================================================================================
   Utilidades mínimas de espaciado (para no escribir un tamaño a mano en una plantilla, §2.1;
   las usan sobre todo las páginas de muestra de este paso, que apilan varias secciones sueltas).
   ============================================================================================ */
.rf-seccion { margin-block: var(--rf-espacio-8); }
.rf-ancho-estrecho { max-width: 420px; }
.rf-ancho-tarjeta { max-width: 320px; }
.rf-ancho-completo { width: 100%; }

/* ============================================================================================
   layout/publico.html: cabecera + contenido + pie (documento 03 §4.5 y §6, columna "Portal y cuenta
   de cliente"; aire generoso, 64–80 px entre secciones en escritorio). Revisión 4.5: la cabecera va
   sobre el mismo papel de la página, con un filete inferior y sin sombra.
   ============================================================================================ */
.rf-publico-cabecera {
  position: sticky;
  top: 0;
  z-index: var(--rf-capa-barra-fija);
  background: var(--rf-fondo);
  border-bottom: 1px solid var(--rf-filete);
}
.rf-publico-cabecera-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rf-espacio-4);
  min-height: 64px;
  padding-block: var(--rf-espacio-2);
}
/* La marca (§4.5): el monograma y el nombre en la familia de títulos, 22/700. */
.rf-publico-marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--rf-fuente-titulos-pila);
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--rf-texto);
  text-decoration: none;
}
.rf-publico-marca { flex-shrink: 0; }
.rf-publico-marca:hover { color: var(--rf-texto); }
.rf-publico-marca img { height: 32px; width: auto; border-radius: var(--rf-radio-md); }
/* A 320–399 px (el zum al 400 %, WCAG 1.4.10) la marca de 22 px, el idioma, «buscar» y el menú no caben en una línea:
   la marca baja a 18 px y se aprietan los huecos; los botones conservan sus 44 px (§2.5, objetivo táctil). */
@media (max-width: 399.98px) {
  .rf-publico-cabecera-interior { gap: var(--rf-espacio-2); }
  .rf-publico-marca { font-size: 18px; gap: var(--rf-espacio-2); }
  .rf-publico-marca img { height: 28px; }
}

.rf-publico-main {
  padding-block: var(--rf-espacio-8);
}
@media (min-width: 992px) {
  .rf-publico-main { padding-block: var(--rf-espacio-12); }
}

/* El pie (§4.5): filete superior; la marca con una frase de qué es Reserfun a la izquierda y tres columnas que se
   apilan en el móvil; una línea final con el copyright. Sin fondo propio: el mismo papel. */
.rf-publico-pie {
  border-top: 1px solid var(--rf-filete);
  padding-block: var(--rf-espacio-10);
  margin-top: var(--rf-espacio-16);
  font-size: var(--rf-tipo-pequeno-movil-tamano);
}
.rf-publico-pie-columnas {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rf-espacio-6);
}
@media (min-width: 768px) {
  .rf-publico-pie-columnas { grid-template-columns: 2fr repeat(3, minmax(0, 1fr)); gap: var(--rf-espacio-8); }
}
.rf-publico-pie-marca .rf-publico-marca,
.rf-publico-pie-marca .rf-publico-marca:hover { font-size: 20px; color: var(--rf-texto); text-decoration: none; }
.rf-publico-pie-frase { margin: var(--rf-espacio-3) 0 0; max-width: 34ch; color: var(--rf-texto-secundario); }
.rf-publico-pie h2 {
  font-family: var(--rf-fuente-texto-pila);
  font-size: var(--rf-tipo-pequeno-movil-tamano);
  line-height: var(--rf-tipo-pequeno-movil-interlinea);
  font-weight: 600;
  font-variation-settings: normal;
  color: var(--rf-texto);
  margin-bottom: var(--rf-espacio-3);
}
.rf-publico-pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--rf-espacio-2); }
.rf-publico-pie a { color: var(--rf-texto-secundario); text-decoration: none; }
/* Los enlaces de las columnas, de 24 px de alto como poco (WCAG 2.2, 2.5.8): con la línea de 21 px solo cumplían por el
   espaciado, y junto a otra cosa pulsable dejaban de cumplir (revisión en navegador del 2026-09-30). */
.rf-publico-pie li > a, .rf-publico-pie li > .rf-pie-cookies { display: inline-block; padding-block: 2px; }
.rf-publico-pie a:hover { color: var(--rf-primario); text-decoration: underline; }
.rf-publico-pie-firma {
  margin-top: var(--rf-espacio-8);
  padding-top: var(--rf-espacio-4);
  border-top: 1px solid var(--rf-filete);
  color: var(--rf-texto-secundario);
}
.rf-publico-pie-copyright { margin: 0; color: var(--rf-texto-secundario); }

/* El armazón de layout/panel.html vive en rf-panel.css y el de layout/admin.html en
   rf-admin.css (documento 03 §6: son las dos densidades "de trabajo", cada una con su propio
   fichero por instrucción del paso P2.5 del guion). Las densidades compartidas
   (`rf-densidad-aireada/-media/-compacta`) también viven repartidas en esos dos ficheros, junto
   a las clases a las que afectan, para no obligar a leer tres ficheros para entender una regla. */

/* ============================================================================================
   Pantallas de acceso y alta, y páginas de error (P2.6). Van aquí —y no en rf-componentes.css—
   porque son ARMAZÓN de página, no componentes del catálogo del documento 03: lo de dentro
   (campos, botones, avisos, bloque de error) ya está allí y esto solo lo coloca.
   ============================================================================================ */
.rf-acceso { margin-inline: auto; margin-block: var(--rf-espacio-8); }
.rf-acceso form { display: grid; gap: var(--rf-espacio-4); }
.rf-acceso-pie { margin-top: var(--rf-espacio-5); text-align: center; }
/* Revisión 4.5 (P7.11, documento 03 §15.2 regla 4, M-13): acceso, alta, recuperación y segundo factor son una columna de
   28 rem sobre el mismo papel, con la marca arriba; nada flota (sin tarjeta, sin sombra). Los campos son blancos: lo que
   se rellena es lo único que va sobre superficie. */
.rf-columna-acceso { width: 100%; max-width: 28rem; margin-inline: auto; }
.rf-columna-acceso .rf-ilustracion { display: block; width: 72px; height: 72px; margin-bottom: var(--rf-espacio-4); }
.rf-columna-acceso-marca { display: block; width: 48px; height: 48px; margin-bottom: var(--rf-espacio-5); border-radius: var(--rf-radio-md); }
.rf-columna-acceso h1 { margin-bottom: var(--rf-espacio-4); }
.rf-columna-acceso .rf-antetitulo { margin-bottom: var(--rf-espacio-1); }
.rf-columna-acceso .rf-acceso-pie + .rf-acceso-pie { margin-top: var(--rf-espacio-2); }
.rf-columna-acceso form .rf-boton-principal { margin-top: var(--rf-espacio-2); }
.rf-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rf-espacio-3);
  justify-content: center;
}

/* ============================================================================================
   Segundo factor (P2.7): el QR del alta, el secreto para teclearlo a mano y los códigos de
   recuperación. Armazón, como lo de arriba: el QR lo pinta rf-qr.js dentro de `.rf-qr`.
   ============================================================================================ */
.rf-segundo-factor form { display: grid; gap: var(--rf-espacio-3); max-width: 420px; }
.rf-segundo-factor .rf-tarjeta { padding: var(--rf-espacio-5); margin-block-end: var(--rf-espacio-5); }
/* El QR se lee sobre blanco puro (los lectores fallan con fondos de color): la superficie, no el papel. */
.rf-qr {
  display: inline-block;
  padding: var(--rf-espacio-3);
  background: var(--rf-color-neutro-0);
  border-radius: var(--rf-radio-sm);
  line-height: 0;
}
/* Los códigos van en la letra monoespaciada del sistema (no es una familia de marca y no se descarga nada). */
.rf-secreto,
.rf-codigos-recuperacion code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .05em;
  word-break: break-all;
}
.rf-codigos-recuperacion {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--rf-espacio-2);
  padding: 0;
  list-style: none;
}
.rf-campo-codigo { font-size: 1.25rem; letter-spacing: .2em; text-align: center; }

/* ============================================================================================
   Seguridad y privacidad de la cuenta (P2.10): las mismas tarjetas que el segundo factor, la
   lista de sesiones (una `.rf-tabla`, que en el móvil se apila) con su botón de cierre en la
   fila, y la zona de borrado de la cuenta, separada del resto por un borde de aviso.
   ============================================================================================ */
.rf-cuenta form { display: grid; gap: var(--rf-espacio-3); max-width: 420px; }
.rf-cuenta .rf-tarjeta { padding: var(--rf-espacio-5); margin-block-end: var(--rf-espacio-5); }
.rf-cuenta .rf-tabla form { display: inline; max-width: none; }
.rf-cuenta-lista { padding-inline-start: var(--rf-espacio-5); }
/* Contratación (/reservar/**) y celebración (/celebracion/**): las mismas tarjetas con aire que la cuenta, y una columna
   de lectura cómoda. Sin esto, las secciones pegaban el texto al borde blanco de la tarjeta (pruebas funcionales del
   2026-09-27). */
.rf-contratacion-pagina, .rf-celebracion { max-width: 960px; }
.rf-contratacion-pagina .rf-tarjeta,
.rf-celebracion .rf-tarjeta { padding: var(--rf-espacio-5); margin-block-end: var(--rf-espacio-5); }
.rf-contratacion-pagina form.rf-tarjeta { display: grid; gap: var(--rf-espacio-3); }
.rf-contratacion-pagina .rf-tarjeta h2, .rf-celebracion .rf-tarjeta h2 { margin-block-start: 0; }
/* La bandeja de avisos (P11.1): un aviso por fila; los no leídos, con el filete de 2 px del primario a la izquierda (el
   mismo que marca lo activo en un menú lateral, §2.5). */
.rf-avisos-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--rf-espacio-3); }
.rf-aviso-item { padding: var(--rf-espacio-3); border-radius: var(--rf-radio-md); border: 1px solid var(--rf-filete); background: var(--rf-superficie); }
.rf-aviso-item p { margin: 0 0 var(--rf-espacio-2); }
.rf-aviso-item form { display: inline-block; margin-inline-end: var(--rf-espacio-2); }
.rf-aviso-nuevo { border-inline-start: 2px solid var(--rf-color-primario-700); }
.rf-cuenta-peligro { border: 1px solid var(--rf-color-semantico-error-texto); }
/* El hilo de un tique abierto sin cuenta (/contacto/tique/**, P11.7): secciones separadas por filetes, sin cajas, como la
   cuenta (P7.11; la versión con cuenta la coloca rf-cuenta.css). */
.rf-tique .rf-tarjeta { background: transparent; border: 0; border-top: 1px solid var(--rf-filete); border-radius: 0; padding: var(--rf-espacio-6) 0; margin: 0; }