/*
 * Registro360.BlazorUI — componentes.
 *
 * Todo lo visible sale de tokens `--r3-*`. Ni un color, ni una tipografía, ni una sombra
 * escrita a mano: esa es la regla que hace que un tema se pueda cambiar sin tocar acá, y
 * que la librería sirva para el próximo front sin arrastrar la identidad de este.
 *
 * Hay un test que lo verifica (BlazorUiTests), porque una regla que solo vive en un
 * comentario se rompe la primera vez que alguien tiene apuro.
 *
 * Requiere que se haya cargado antes un tema. Ver r3-tokens.css.
 */

/* ─────────────────────────── Base ─────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: var(--r3-font-size-base, 16px);
}

body {
  margin: 0;
  font-family: var(--r3-font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: hsl(var(--r3-foreground));
  background-color: hsl(var(--r3-background));
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--r3-font-display);
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}

h1 { font-size: 1.75rem; font-weight: 700; }
h2 { font-size: 1.375rem; font-weight: 600; }
h3 { font-size: 1.125rem; font-weight: 600; }

a { color: hsl(var(--r3-primary)); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ───────────────────────── Primitivas ───────────────────────── */

.r3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--r3-radius);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  cursor: pointer;
  transition: background-color var(--r3-transition), border-color var(--r3-transition);
}

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

.r3-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.r3-btn--primary {
  background-color: hsl(var(--r3-primary));
  color: hsl(var(--r3-primary-foreground));
}
.r3-btn--primary:hover:not(:disabled) {
  background-color: hsl(var(--r3-primary-hover));
}

.r3-btn--secondary {
  background-color: hsl(var(--r3-secondary));
  color: hsl(var(--r3-secondary-foreground));
  border-color: hsl(var(--r3-border));
}
.r3-btn--secondary:hover:not(:disabled) {
  background-color: hsl(var(--r3-muted));
}

.r3-btn--ghost {
  background-color: transparent;
  color: hsl(var(--r3-foreground));
}
.r3-btn--ghost:hover:not(:disabled) {
  background-color: hsl(var(--r3-muted));
}

.r3-btn--block { width: 100%; }

.r3-field { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 1rem; }

.r3-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(var(--r3-foreground));
}

.r3-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: inherit;
  font-size: 0.875rem;
  color: hsl(var(--r3-foreground));
  background-color: hsl(var(--r3-card));
  border: 1px solid hsl(var(--r3-input));
  border-radius: var(--r3-radius);
  transition: border-color var(--r3-transition), box-shadow var(--r3-transition);
}

.r3-input:focus {
  outline: none;
  border-color: hsl(var(--r3-ring));
  box-shadow: var(--r3-shadow-focus);
}

.r3-input[aria-invalid='true'] {
  border-color: hsl(var(--r3-destructive));
}

.r3-hint { font-size: 0.75rem; color: hsl(var(--r3-muted-foreground)); }
.r3-error { font-size: 0.75rem; color: hsl(var(--r3-destructive)); }

.r3-card {
  background-color: hsl(var(--r3-card));
  color: hsl(var(--r3-card-foreground));
  border: 1px solid hsl(var(--r3-border));
  border-radius: calc(var(--r3-radius) * 1.5);
  box-shadow: var(--r3-shadow-sm);
}

.r3-card__header {
  padding: 1.25rem 1.5rem 0.75rem;
  border-bottom: 1px solid hsl(var(--r3-border));
}
.r3-card__body { padding: 1.5rem; }

.r3-alert {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--r3-radius);
  font-size: 0.875rem;
}
.r3-alert--error {
  background-color: hsl(var(--r3-destructive-soft));
  border-color: hsl(var(--r3-destructive) / 0.25);
  color: hsl(var(--r3-destructive));
}
.r3-alert--success {
  background-color: hsl(var(--r3-success-soft));
  border-color: hsl(var(--r3-success) / 0.25);
  color: hsl(var(--r3-success));
}
.r3-alert--info {
  background-color: hsl(var(--r3-accent-soft));
  border-color: hsl(var(--r3-accent) / 0.25);
  color: hsl(var(--r3-primary));
}

.r3-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: hsl(var(--r3-muted));
  color: hsl(var(--r3-muted-foreground));
}

.r3-badge--info { background-color: hsl(var(--r3-primary-soft)); color: hsl(var(--r3-primary)); }
.r3-badge--success { background-color: hsl(var(--r3-success-soft)); color: hsl(var(--r3-success)); }
.r3-badge--warning { background-color: hsl(var(--r3-warning-soft)); color: hsl(var(--r3-warning)); }
.r3-badge--error { background-color: hsl(var(--r3-destructive-soft)); color: hsl(var(--r3-destructive)); }

/* ───────────────────────── Diálogo ───────────────────────── */

.r3-dialog {
  padding: 0;
  border: none;
  border-radius: calc(var(--r3-radius) * 1.5);
  background-color: hsl(var(--r3-card));
  color: hsl(var(--r3-card-foreground));
  box-shadow: var(--r3-shadow-lg);
  max-width: min(32rem, calc(100vw - 2rem));
  width: 100%;
}

.r3-dialog::backdrop {
  background-color: hsl(var(--r3-foreground) / 0.45);
  backdrop-filter: blur(2px);
}

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

.r3-dialog__header h2 { margin: 0; font-size: 1.125rem; }

.r3-dialog__cerrar {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: hsl(var(--r3-muted-foreground));
  padding: 0 0.25rem;
  border-radius: var(--r3-radius);
}
.r3-dialog__cerrar:hover { color: hsl(var(--r3-foreground)); }
.r3-dialog__cerrar:focus-visible { outline: none; box-shadow: var(--r3-shadow-focus); }

.r3-dialog__body { padding: 1.5rem; }

.r3-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem 1.25rem;
  border-top: 1px solid hsl(var(--r3-border));
}

/* ───────────────────────── Tabla ───────────────────────── */

.r3-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.25rem 0;
  flex-wrap: wrap;
}

/* ───────────────────────── Tooltip ───────────────────────── */

.r3-tooltip { position: relative; display: inline-flex; }

.r3-tooltip__texto {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  min-width: max-content;
  max-width: 18rem;
  padding: 0.375rem 0.625rem;
  border-radius: var(--r3-radius);
  background-color: hsl(var(--r3-foreground));
  color: hsl(var(--r3-background));
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--r3-transition), visibility var(--r3-transition);
  pointer-events: none;
}

/* Se muestra al pasar el mouse y también al llegar por teclado. */
.r3-tooltip:hover .r3-tooltip__texto,
.r3-tooltip:focus-within .r3-tooltip__texto {
  opacity: 1;
  visibility: visible;
}

/* ───────────────────────── Avisos ───────────────────────── */

.r3-toasts {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(24rem, calc(100vw - 2.5rem));
}

.r3-toast {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--r3-radius);
  border: 1px solid transparent;
  box-shadow: var(--r3-shadow-md);
  font-size: 0.875rem;
  animation: r3-toast-entra 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.r3-toast--info {
  background-color: hsl(var(--r3-card));
  border-color: hsl(var(--r3-border));
  color: hsl(var(--r3-foreground));
}
.r3-toast--success {
  background-color: hsl(var(--r3-success-soft));
  border-color: hsl(var(--r3-success) / 0.3);
  color: hsl(var(--r3-success));
}
.r3-toast--warning {
  background-color: hsl(var(--r3-warning-soft));
  border-color: hsl(var(--r3-warning) / 0.3);
  color: hsl(var(--r3-warning));
}
.r3-toast--error {
  background-color: hsl(var(--r3-destructive-soft));
  border-color: hsl(var(--r3-destructive) / 0.3);
  color: hsl(var(--r3-destructive));
}

.r3-toast__cerrar {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
  padding: 0 0.125rem;
}
.r3-toast__cerrar:hover { opacity: 1; }
.r3-toast__cerrar:focus-visible { outline: none; box-shadow: var(--r3-shadow-focus); }

@keyframes r3-toast-entra {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* Respeta a quien pidió menos movimiento en su sistema. */
@media (prefers-reduced-motion: reduce) {
  .r3-toast,
  .r3-wizard__panel { animation: none; }
  .r3-spinner { animation-duration: 2s; }
  * { transition-duration: 0.01ms !important; }
}

/* ───────────────────────── Línea de tiempo ───────────────────────── */

.r3-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.25rem;
  border-left: 2px solid hsl(var(--r3-border));
}

.r3-timeline__item {
  position: relative;
  padding-bottom: 1.25rem;
}

.r3-timeline__item:last-child { padding-bottom: 0; }

/* El punto sobre la línea. */
.r3-timeline__item::before {
  content: "";
  position: absolute;
  left: calc(-1.25rem - 5px);
  top: 0.35rem;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background-color: hsl(var(--r3-primary));
}

.r3-timeline__fecha {
  font-size: 0.75rem;
  color: hsl(var(--r3-muted-foreground));
  margin-bottom: 0.125rem;
}

/* ───────────────────────── Asistente por pasos ───────────────────────── */

/* Visible para lectores de pantalla, no para la vista. */
.r3-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.r3-wizard { display: flex; flex-direction: column; gap: 1.25rem; }

.r3-steps ol {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
}

.r3-step { flex: 1 1 0; min-width: 6rem; }

.r3-step__btn {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 0.375rem;
  background: none;
  border: none;
  border-top: 3px solid hsl(var(--r3-border));
  font-family: inherit;
  font-size: 0.75rem;
  color: hsl(var(--r3-muted-foreground));
  cursor: pointer;
  transition: color var(--r3-transition), border-color var(--r3-transition);
}

.r3-step__btn:disabled { cursor: default; }
.r3-step__btn:focus-visible { outline: none; box-shadow: var(--r3-shadow-focus); }

.r3-step__num {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background-color: hsl(var(--r3-muted));
  color: hsl(var(--r3-muted-foreground));
  font-weight: 600;
  font-size: 0.75rem;
}

.r3-step__txt { text-align: center; line-height: 1.25; }

/* Ya completado: se puede volver. */
.r3-step--hecho .r3-step__btn {
  border-top-color: hsl(var(--r3-success));
  color: hsl(var(--r3-foreground));
}
.r3-step--hecho .r3-step__num {
  background-color: hsl(var(--r3-success));
  color: hsl(var(--r3-success-foreground));
}
.r3-step--hecho .r3-step__btn:hover { color: hsl(var(--r3-primary)); }

/* El paso en curso. */
.r3-step--actual .r3-step__btn {
  border-top-color: hsl(var(--r3-primary));
  color: hsl(var(--r3-foreground));
  font-weight: 600;
}
.r3-step--actual .r3-step__num {
  background-color: hsl(var(--r3-primary));
  color: hsl(var(--r3-primary-foreground));
}

/* Todavía no alcanzado: no se puede saltar hacia adelante. */
.r3-step--pendiente .r3-step__btn { opacity: 0.6; }

.r3-wizard__panel {
  background-color: hsl(var(--r3-card));
  border: 1px solid hsl(var(--r3-border));
  border-radius: calc(var(--r3-radius) * 1.5);
  box-shadow: var(--r3-shadow-sm);
  animation: r3-paso-entra 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.r3-wizard__encabezado {
  padding: 1.25rem 1.5rem 0.75rem;
  border-bottom: 1px solid hsl(var(--r3-border));
}
.r3-wizard__encabezado h2 { margin-bottom: 0.25rem; }

.r3-wizard__cuerpo { padding: 1.5rem; }

.r3-wizard__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

@keyframes r3-paso-entra {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  .r3-step__txt { display: none; }
  .r3-step { min-width: 3rem; }
}

/* ─────────────────── Barra de error de Blazor ───────────────────
   Blazor deja este div en el HTML y lo muestra solo ante una excepción no
   manejada; quien lo oculta es el CSS. La plantilla lo traía en app.css, así
   que vive acá para que cualquier app que use este sistema de diseño no
   necesite mantener esa hoja aparte — sin esto, la barra aparece siempre. */

#blazor-error-ui {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0.75rem 2rem 0.75rem 1.25rem;
  background-color: hsl(var(--r3-warning-soft));
  border-top: 1px solid hsl(var(--r3-warning) / 0.35);
  color: hsl(var(--r3-foreground));
  font-size: 0.875rem;
  box-shadow: 0 -2px 8px hsl(var(--r3-foreground) / 0.12);
}

#blazor-error-ui .dismiss {
  position: absolute;
  top: 0.5rem;
  right: 0.9rem;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}

.r3-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.r3-table th {
  text-align: left;
  padding: 0.625rem 0.75rem;
  font-weight: 600;
  color: hsl(var(--r3-muted-foreground));
  border-bottom: 1px solid hsl(var(--r3-border));
}
.r3-table td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid hsl(var(--r3-border));
}
.r3-table tbody tr:hover { background-color: hsl(var(--r3-muted) / 0.5); }

.r3-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: hsl(var(--r3-muted-foreground));
}

.r3-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: r3-spin 0.6s linear infinite;
}

@keyframes r3-spin { to { transform: rotate(360deg); } }

/* ─────────────────────────── Layout ─────────────────────────── */

.r3-shell { display: flex; min-height: 100vh; }

.r3-sidebar {
  width: var(--r3-sidebar-width);
  flex-shrink: 0;
  background-color: hsl(var(--r3-card));
  border-right: 1px solid hsl(var(--r3-border));
  display: flex;
  flex-direction: column;
}

.r3-sidebar__brand {
  height: var(--r3-navbar-height);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0 1.25rem;
  border-bottom: 1px solid hsl(var(--r3-border));
  font-family: var(--r3-font-display);
  font-weight: 700;
}

.r3-nav { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.125rem; }

.r3-nav__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r3-radius);
  color: hsl(var(--r3-foreground));
  font-size: 0.875rem;
  text-decoration: none;
}
.r3-nav__item:hover { background-color: hsl(var(--r3-muted)); text-decoration: none; }
.r3-nav__item.active {
  background-color: hsl(var(--r3-primary));
  color: hsl(var(--r3-primary-foreground));
}

.r3-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.r3-navbar {
  height: var(--r3-navbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.5rem;
  background-color: hsl(var(--r3-card));
  border-bottom: 1px solid hsl(var(--r3-border));
}

.r3-content { flex: 1; padding: 1.5rem; }

.r3-center {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--r3-gradient-hero);
}

@media (max-width: 768px) {
  .r3-sidebar { display: none; }
  .r3-content { padding: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Portada del portal ciudadano
   ───────────────────────────────────────────────────────────────────────────
   Traducción a CSS plano de la portada del prototipo de referencia
   (registro-facil-ecuador, componente Welcome). Allá el layout sale de
   utilidades de Tailwind; acá se nombra cada pieza porque no hay build de CSS.
   Los valores —gradientes, radiales, tamaños— son los mismos.
   ═════════════════════════════════════════════════════════════════════════ */

.r3-portada {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: hsl(var(--r3-background));
}

/* ── Cabecera ─────────────────────────────────────────────────────────── */

.r3-portada__header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid hsl(var(--r3-border));
  background-color: hsl(var(--r3-background) / 0.8);
  backdrop-filter: blur(12px);
}

.r3-portada__header-inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* ── Marca ────────────────────────────────────────────────────────────── */

.r3-marca { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }

.r3-marca__sello {
  position: relative;
  flex-shrink: 0;
  height: 2.5rem;
  width: 2.5rem;
  border-radius: var(--r3-radius);
  background: var(--r3-gradient-primary);
  display: grid;
  place-items: center;
  color: hsl(var(--r3-primary-foreground));
  box-shadow: var(--r3-shadow-sm);
}
.r3-marca__sello::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--r3-radius);
  box-shadow: inset 0 0 0 1px hsl(var(--r3-primary) / 0.2);
  pointer-events: none;
}

.r3-marca__texto { line-height: 1.15; }
.r3-marca__nombre {
  font-family: var(--r3-font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: hsl(var(--r3-foreground));
  white-space: nowrap;
}
.r3-marca__pais {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--r3-muted-foreground));
  white-space: nowrap;
}

@media (max-width: 640px) { .r3-marca__texto { display: none; } }

/* ── Cuerpo con gradiente y patrón ────────────────────────────────────── */

.r3-portada__main {
  flex: 1;
  position: relative;
  background: var(--r3-gradient-hero);
}
.r3-portada__main::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 0%, hsl(var(--r3-primary) / 0.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 100%, hsl(var(--r3-accent) / 0.04) 0%, transparent 50%);
  pointer-events: none;
}

/* Cuadrícula tenue, difuminada hacia los bordes. */
.r3-portada__patron {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  pointer-events: none;
  background-image:
    linear-gradient(hsl(var(--r3-border) / 0.4) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--r3-border) / 0.4) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
}

.r3-portada__grid {
  position: relative;
  max-width: 72rem;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  display: grid;
  gap: 3rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .r3-portada__grid {
    grid-template-columns: 1.1fr 1fr;
    gap: 4rem;
    padding: 5rem 1.5rem;
  }
}

/* ── Columna del mensaje ──────────────────────────────────────────────── */

.r3-portada__mensaje { display: flex; flex-direction: column; gap: 1.75rem; }

.r3-portada__pildora {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid hsl(var(--r3-primary) / 0.2);
  background-color: hsl(var(--r3-primary-soft));
  color: hsl(var(--r3-primary));
  font-size: 0.75rem;
  font-weight: 500;
}

.r3-portada__titulo {
  font-family: var(--r3-font-display);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: hsl(var(--r3-foreground));
  text-wrap: balance;
  margin: 0;
}
.r3-portada__titulo em { font-style: normal; color: hsl(var(--r3-primary)); }

.r3-portada__bajada {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: hsl(var(--r3-muted-foreground));
  max-width: 36rem;
  text-wrap: pretty;
  margin: 0.75rem 0 0;
}

/* ── Promesas del servicio ────────────────────────────────────────────── */

.r3-promesas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  max-width: 28rem;
}
@media (max-width: 480px) { .r3-promesas { grid-template-columns: 1fr; } }

.r3-promesa {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--r3-foreground) / 0.8);
}
.r3-promesa__icono {
  flex-shrink: 0;
  height: 1.75rem;
  width: 1.75rem;
  border-radius: 0.375rem;
  background-color: hsl(var(--r3-primary-soft));
  color: hsl(var(--r3-primary));
  display: grid;
  place-items: center;
}

/* ── Sellos de confianza ──────────────────────────────────────────────── */

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

.r3-sello {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.375rem;
  background-color: hsl(var(--r3-muted) / 0.6);
  border: 1px solid hsl(var(--r3-border) / 0.6);
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(var(--r3-muted-foreground));
}
.r3-sello svg { color: hsl(var(--r3-primary)); }

/* ── Tarjeta de acceso ────────────────────────────────────────────────── */

.r3-acceso { position: relative; }

@media (min-width: 1024px) {
  .r3-acceso { position: sticky; top: 6rem; }
}

/* Halo detrás de la tarjeta. Decorativo: no recibe eventos. */
.r3-acceso::before {
  content: "";
  position: absolute;
  inset: -1rem;
  border-radius: 1rem;
  background: linear-gradient(to top right,
    hsl(var(--r3-primary) / 0.1),
    hsl(var(--r3-accent) / 0.05),
    transparent);
  filter: blur(2rem);
  pointer-events: none;
}

.r3-acceso__tarjeta {
  position: relative;
  background-color: hsl(var(--r3-card));
  border: 1px solid hsl(var(--r3-border));
  border-radius: 0.75rem;
  box-shadow: var(--r3-shadow-lg);
  overflow: hidden;
}

.r3-acceso__cabecera {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid hsl(var(--r3-border));
  background: var(--r3-gradient-subtle);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--r3-primary));
}
.r3-acceso__cabecera::before {
  content: "";
  height: 0.25rem;
  width: 1.5rem;
  border-radius: 9999px;
  background-color: hsl(var(--r3-primary));
}

.r3-acceso__cuerpo { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width: 768px) { .r3-acceso__cuerpo { padding: 1.75rem; } }

.r3-acceso__titulo {
  font-family: var(--r3-font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: hsl(var(--r3-foreground));
  margin: 0;
}
.r3-acceso__ayuda {
  font-size: 0.875rem;
  color: hsl(var(--r3-muted-foreground));
  margin: 0.375rem 0 0;
}

.r3-acceso__emblema {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 0.375rem;
  background-color: hsl(var(--r3-primary-soft));
  color: hsl(var(--r3-primary));
  display: grid;
  place-items: center;
  margin-bottom: 0.75rem;
}

/* Botón grande de acción principal. */
.r3-acceso__principal {
  width: 100%;
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem;
  border: none;
  border-radius: var(--r3-radius);
  cursor: pointer;
  text-align: left;
  color: hsl(var(--r3-primary-foreground));
  background: var(--r3-gradient-primary);
  box-shadow: 0 8px 16px -6px hsl(var(--r3-primary) / 0.35);
  transition: box-shadow 200ms ease, transform 200ms ease;
  font-family: inherit;
}
.r3-acceso__principal:hover:not(:disabled) {
  box-shadow: 0 12px 22px -6px hsl(var(--r3-primary) / 0.45);
  transform: translateY(-1px);
}
.r3-acceso__principal:disabled { opacity: 0.6; cursor: not-allowed; }
.r3-acceso__principal:focus-visible { outline: none; box-shadow: var(--r3-shadow-focus); }

.r3-acceso__principal-icono {
  flex-shrink: 0;
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 0.375rem;
  background-color: hsl(var(--r3-primary-foreground) / 0.15);
  display: grid;
  place-items: center;
}
.r3-acceso__principal-texto { display: flex; flex-direction: column; line-height: 1.2; }
.r3-acceso__principal-texto strong { font-size: 0.9375rem; font-weight: 600; }
.r3-acceso__principal-texto span {
  font-size: 0.6875rem;
  font-weight: 400;
  color: hsl(var(--r3-primary-foreground) / 0.75);
}
.r3-acceso__principal-flecha { margin-left: auto; flex-shrink: 0; }

/* Accesos secundarios: borradores, solicitudes. */
.r3-acceso__opcion {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid hsl(var(--r3-border));
  border-radius: var(--r3-radius);
  background-color: hsl(var(--r3-card));
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.r3-acceso__opcion:hover {
  border-color: hsl(var(--r3-primary) / 0.5);
  background-color: hsl(var(--r3-primary-soft) / 0.4);
}
.r3-acceso__opcion:focus-visible { outline: none; box-shadow: var(--r3-shadow-focus); }
.r3-acceso__opcion-icono {
  flex-shrink: 0;
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 0.375rem;
  background-color: hsl(var(--r3-muted));
  color: hsl(var(--r3-muted-foreground));
  display: grid;
  place-items: center;
}
.r3-acceso__opcion:hover .r3-acceso__opcion-icono {
  background-color: hsl(var(--r3-primary-soft));
  color: hsl(var(--r3-primary));
}
.r3-acceso__opcion-texto { flex: 1; min-width: 0; }
.r3-acceso__opcion-texto strong {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--r3-foreground));
}
.r3-acceso__opcion-texto span {
  display: block;
  font-size: 0.75rem;
  color: hsl(var(--r3-muted-foreground));
}

/* Campo del código: dígitos separados y monoespaciados. */
.r3-codigo {
  width: 100%;
  height: 3.5rem;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
  border: 1px solid hsl(var(--r3-input));
  border-radius: var(--r3-radius);
  background-color: hsl(var(--r3-card));
  color: hsl(var(--r3-foreground));
}
.r3-codigo:focus-visible {
  outline: none;
  border-color: hsl(var(--r3-ring));
  box-shadow: var(--r3-shadow-focus);
}

.r3-acceso__volver {
  align-self: flex-start;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.75rem;
  color: hsl(var(--r3-muted-foreground));
}
.r3-acceso__volver:hover { color: hsl(var(--r3-foreground)); }

.r3-acceso__enlace {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--r3-primary));
  text-decoration: underline;
  text-underline-offset: 4px;
}
.r3-acceso__enlace:hover { color: hsl(var(--r3-primary-hover)); }

/* ── Pie ──────────────────────────────────────────────────────────────── */

.r3-portada__footer {
  border-top: 1px solid hsl(var(--r3-border));
  background-color: hsl(var(--r3-background));
  padding: 1.5rem;
}
.r3-portada__footer-inner {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: hsl(var(--r3-muted-foreground));
}
.r3-portada__footer-inner nav { display: flex; gap: 1.25rem; }
.r3-portada__footer-inner a { color: inherit; text-decoration: none; }
.r3-portada__footer-inner a:hover { color: hsl(var(--r3-primary)); }

/* ── Animación de entrada ─────────────────────────────────────────────── */

.r3-aparece { animation: r3-aparece 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.r3-aparece--tarde { animation-delay: 120ms; }

@keyframes r3-aparece {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .r3-aparece { animation: none; }
  .r3-acceso__principal:hover:not(:disabled) { transform: none; }
}

/* El motivo por el que el asistente no dejó avanzar.

   Va debajo del pie y no dentro: el pie es una fila de tres columnas, y meter un mensaje
   de largo variable ahí adentro movería los botones de lugar cada vez que aparece. */
.r3-wizard__bloqueo {
  margin-top: 0.75rem;
}

/* ── Pestañas ──────────────────────────────────────────────────────────────
   La activa se marca con color Y con una barra: distinguirlas solo por color
   deja afuera a quien no percibe esa diferencia. */

.r3-tabs__lista {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  border-bottom: 1px solid hsl(var(--r3-border));
}

.r3-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  color: hsl(var(--r3-muted-foreground));
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--r3-transition), border-color var(--r3-transition);
}

.r3-tab:hover { color: hsl(var(--r3-foreground)); }

/* Contorno adentro: con la sombra de foco por fuera, el borde inferior de la
   lista la recorta y el anillo aparece cortado al tabular. */
.r3-tab:focus-visible {
  outline: 2px solid hsl(var(--r3-ring));
  outline-offset: -2px;
  border-radius: var(--r3-radius) var(--r3-radius) 0 0;
}

.r3-tab--activa {
  color: hsl(var(--r3-primary));
  border-bottom-color: hsl(var(--r3-primary));
}

.r3-tabs__panel {
  padding-top: 1.5rem;
}

/* El panel recibe el foco al llegar desde las pestañas; no hace falta anunciarlo
   con un anillo, porque la pestaña activa ya dice dónde está parado. */
.r3-tabs__panel:focus { outline: none; }