/* ==========================================================================
   Retopa — páginas de la Bolsa (portada, vacantes, cuenta, perfil, empresas).
   Aplica el manual de marca v1 (noviembre de 2026): paleta 04, tipografía 05,
   íconos 07, componentes 08 y sitio 09. Va después de app.css (que comparten
   el panel y los portales): aquí se redefinen sus variables solo para estas
   páginas, que son las únicas que cargan este archivo.
   Reglas que no se negocian: 80·15·5 (hueso y blanco, verde hondo y tinta,
   energía); el pico (verde encendido, amarillo) solo en un logro, nunca en un
   error, un rechazo o un formulario; sin degradés, sin cursivas, sin sombras
   de adorno; Outfit solo en títulos, Inter en el texto; nada bajo 14 px en el
   celular; objetivos táctiles de 48 px. Fuentes propias (CSP 'self').
   Mobile first: la base es el celular de 360 px.
   ========================================================================== */

/* ---------- Tipografías (OFL, servidas desde el sitio) ---------- */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/outfit-latin-500-normal.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: "Outfit"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/outfit-latin-ext-500-normal.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: "Outfit"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/outfit-latin-600-normal.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: "Outfit"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/outfit-latin-ext-600-normal.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: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/inter-latin-400-normal.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: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/inter-latin-ext-400-normal.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: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/inter-latin-500-normal.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: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/inter-latin-ext-500-normal.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: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/inter-latin-600-normal.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: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/inter-latin-ext-600-normal.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; }

/* ---------- Paleta y escala ---------- */
:root {
  /* Piso: el 95 % del tiempo */
  --r-green: #0d5c4a;          /* verde hondo: marca, botones, logo · 7,5:1 sobre hueso */
  --r-green-hover: #0a4d3e;
  --r-green-active: #083f33;
  --r-ink: #17211c;            /* tinta: texto principal y fondos oscuros · 15,7:1 */
  --r-bone: #fbf7f0;           /* hueso: fondo de todo; las tarjetas van en blanco */
  --r-white: #ffffff;
  --r-ink-2: #4e574f;          /* texto secundario · 7,1:1 */
  --r-idle: #a8bbae;           /* inactivo: nunca texto */
  --r-line: #e4ded2;           /* bordes y separadores */
  --r-line-strong: #d3ccbe;
  --r-field: #9a9488;          /* borde de los campos: 3:1 sobre blanco */
  --r-bone-2: #f4efe5;         /* hueso hundido: chips, filas, zonas de apoyo */
  --r-green-tint: #e8f1ec;     /* verde hondo al 10 %: lo elegido, lo confirmado */
  --r-green-line: #b7d1c6;
  --r-on-dark-2: #bcc6be;      /* texto secundario sobre tinta o verde · 9:1 */
  /* Pico: solo cuando hay algo que festejar */
  --r-bright: #2fd39b;         /* con texto #06332A: 7,2:1 */
  --r-bright-ink: #06332a;
  --r-sun: #ffc94a;
  --r-coral: #ff7a52;          /* acento gráfico; nunca con letra blanca */
  --r-alert: #c4452a;          /* solo errores de formulario · 4,7:1 */
  --r-alert-ink: #a63a22;
  --r-alert-tint: #fbece6;
  --r-alert-line: #eec2b4;

  --r-display: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Verdana, sans-serif;
  --r-text: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Verdana, sans-serif;
  --r-wrap: 1232px;            /* 1200 de contenido + 2 × 16 de margen */
  --r-radius: 12px;
  --r-radius-card: 16px;
  --r-shadow: 0 1px 2px rgba(23, 33, 28, .05), 0 6px 20px -12px rgba(23, 33, 28, .18);
  --r-ease: cubic-bezier(.16, 1, .3, 1);

  /* Las variables de app.css, en los colores del manual */
  --t-canvas: var(--r-bone);
  --t-surface: var(--r-white);
  --t-sunken: var(--r-bone-2);
  --t-hover: #efe9dd;
  --t-line: var(--r-line);
  --t-line-strong: var(--r-line-strong);
  --t-ink: var(--r-ink);
  --t-ink-2: var(--r-ink-2);
  --t-muted: var(--r-ink-2);
  --t-subtle: var(--r-ink-2);
  --t-accent: var(--r-green);
  --t-accent-hover: var(--r-green-hover);
  --t-accent-active: var(--r-green-active);
  --t-accent-soft: var(--r-green-tint);
  --t-accent-line: var(--r-green-line);
  --t-accent-ink: var(--r-green);
  --t-ok: var(--r-green); --t-ok-soft: var(--r-green-tint); --t-ok-line: var(--r-green-line); --t-ok-ink: var(--r-green);
  --t-warn: var(--r-ink-2); --t-warn-soft: var(--r-bone-2); --t-warn-line: var(--r-line-strong); --t-warn-ink: var(--r-ink);
  --t-bad: var(--r-alert); --t-bad-soft: var(--r-alert-tint); --t-bad-line: var(--r-alert-line); --t-bad-ink: var(--r-alert-ink);
  --t-info: var(--r-ink-2); --t-info-soft: var(--r-white); --t-info-line: var(--r-line-strong); --t-info-ink: var(--r-ink);
  --t-radius: var(--r-radius);
  --t-radius-lg: var(--r-radius-card);
  --t-shadow-1: none;
  --t-shadow-2: var(--r-shadow);
  --t-focus: 0 0 0 2.5px var(--r-white), 0 0 0 5px var(--r-green);
  --t-font: var(--r-text);

  /* Bootstrap */
  --bs-body-font-family: var(--r-text);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.6;
  --bs-body-color: var(--r-ink);
  --bs-body-color-rgb: 23, 33, 28;
  --bs-body-bg: var(--r-bone);
  --bs-emphasis-color: var(--r-ink);
  --bs-secondary-color: var(--r-ink-2);
  --bs-tertiary-color: var(--r-ink-2);
  --bs-heading-color: var(--r-ink);
  --bs-border-color: var(--r-line);
  --bs-border-radius: var(--r-radius);
  --bs-border-radius-lg: var(--r-radius-card);
  --bs-primary: var(--r-green);
  --bs-primary-rgb: 13, 92, 74;
  --bs-link-color: var(--r-green);
  --bs-link-color-rgb: 13, 92, 74;
  --bs-link-hover-color: var(--r-green-active);
  --bs-link-hover-color-rgb: 8, 63, 51;
  --bs-focus-ring-color: rgba(13, 92, 74, .35);
  --bs-danger: var(--r-alert); --bs-danger-rgb: 196, 69, 42;
  --bs-success: var(--r-green); --bs-success-rgb: 13, 92, 74;
}

/* ---------- Base ---------- */
.retopa { min-height: 100vh; display: flex; flex-direction: column; font-family: var(--r-text); font-size: 1rem; line-height: 1.6; color: var(--r-ink); background: var(--r-bone); font-feature-settings: "cv11", "ss01"; }
.retopa-main { flex: 1 0 auto; }
.retopa ::selection { background: var(--r-green); color: var(--r-bone); }
.retopa { caret-color: var(--r-green); accent-color: var(--r-green); }
.retopa :focus-visible { outline: 2.5px solid var(--r-green); outline-offset: 2px; }
.retopa em, .retopa i, .retopa cite, .retopa blockquote, .retopa address { font-style: normal; }
.retopa em, .retopa i { font-weight: 600; }
.retopa small, .retopa .small { font-size: .875rem; }
.retopa p { max-width: 70ch; }
.retopa a:not(.btn) { color: var(--r-green); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.retopa a:not(.btn):hover { text-decoration-thickness: 2px; color: var(--r-green-active); }
.retopa hr { border-color: var(--r-line); opacity: 1; margin-block: 2rem; }
.retopa dt { font-weight: 600; color: var(--r-ink); }
.retopa .text-muted, .retopa .text-body-secondary { color: var(--r-ink-2) !important; }
.retopa .lead { font-size: 1.125rem; color: var(--r-ink-2); line-height: 1.6; }
.r-icon { flex: none; display: inline-block; vertical-align: -.2em; }

/* Títulos: Outfit, interlineado 1,1, espaciado −0,02em. Escala del manual (celular / escritorio). */
.retopa h1, .retopa h2, .retopa h3, .retopa h4, .retopa h5, .retopa h6,
.retopa .h1, .retopa .h2, .retopa .h3, .retopa .h4, .retopa .h5, .retopa .h6 {
  font-family: var(--r-display); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; color: var(--r-ink); text-wrap: balance;
}
.retopa h1, .retopa .retopa-h1 { font-size: 1.6875rem; margin: 0 0 .75rem; }          /* Título 1: 27 / 36 */
.retopa h2, .retopa .retopa-h2, .retopa .h5 { font-size: 1.375rem; margin: 0 0 .75rem; } /* Título 2: 22 / 27 */
.retopa h3, .retopa h4, .retopa .h6 { font-size: 1.125rem; font-weight: 500; margin: 0 0 .5rem; } /* Título 3: 18 / 21 */
.retopa .retopa-display { font-size: 2.125rem; letter-spacing: -.025em; }               /* Display: 34 / 48 */
@media (min-width: 768px) {
  .retopa h1, .retopa .retopa-h1 { font-size: 2.25rem; }
  .retopa h2, .retopa .retopa-h2, .retopa .h5 { font-size: 1.6875rem; }
  .retopa h3, .retopa h4, .retopa .h6 { font-size: 1.3125rem; }
  .retopa .retopa-display { font-size: 3rem; }
}
/* Etiqueta: 12 px Inter 600 +0,12em en el escritorio; 14 px en el celular, que no baja de ahí. */
.retopa-label { display: block; margin: 0 0 .5rem; font-family: var(--r-text); font-size: .875rem; font-weight: 600; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--r-ink-2); }
@media (min-width: 768px) { .retopa-label { font-size: .75rem; letter-spacing: .12em; } }

.retopa-wrap { width: 100%; max-width: var(--r-wrap); margin-inline: auto; padding-inline: 16px; }

/* ---------- Botones (lámina 08): 48 px, radio 12, Inter 600 ---------- */
.retopa .btn {
  --bs-btn-font-family: var(--r-text);
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 600;
  --bs-btn-line-height: 1.25;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-padding-y: .625rem;
  --bs-btn-border-radius: var(--r-radius);
  --bs-btn-border-width: 2px;
  --bs-btn-focus-box-shadow: var(--t-focus);
  --bs-btn-disabled-opacity: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; letter-spacing: 0; text-align: center; box-shadow: none;
  transition: background-color .2s var(--r-ease), border-color .2s var(--r-ease), color .2s var(--r-ease);
}
.retopa .btn:focus-visible { outline: 2.5px solid var(--r-green); outline-offset: 2px; box-shadow: none; }
.retopa .btn-sm, .retopa .btn-lg { --bs-btn-font-size: 1rem; --bs-btn-padding-x: 1.25rem; --bs-btn-padding-y: .625rem; --bs-btn-border-radius: var(--r-radius); min-height: 48px; }
.retopa .btn-primary {
  --bs-btn-bg: var(--r-green); --bs-btn-border-color: var(--r-green); --bs-btn-color: var(--r-white);
  --bs-btn-hover-bg: var(--r-green-hover); --bs-btn-hover-border-color: var(--r-green-hover); --bs-btn-hover-color: var(--r-white);
  --bs-btn-active-bg: var(--r-green-active); --bs-btn-active-border-color: var(--r-green-active); --bs-btn-active-color: var(--r-white);
  --bs-btn-disabled-bg: var(--r-line); --bs-btn-disabled-border-color: var(--r-line); --bs-btn-disabled-color: #7c827c;
}
/* Secundario: contorno verde */
.retopa .btn-outline-primary {
  --bs-btn-bg: transparent; --bs-btn-color: var(--r-green); --bs-btn-border-color: var(--r-green);
  --bs-btn-hover-bg: var(--r-green-tint); --bs-btn-hover-color: var(--r-green); --bs-btn-hover-border-color: var(--r-green);
  --bs-btn-active-bg: #d6e7df; --bs-btn-active-color: var(--r-green-active); --bs-btn-active-border-color: var(--r-green-active);
  --bs-btn-disabled-bg: transparent; --bs-btn-disabled-color: #7c827c; --bs-btn-disabled-border-color: var(--r-line);
}
/* Neutro: volver, rechazar, cancelar. En tinta, sin verde: no compite con la acción. */
.retopa .btn-outline-secondary {
  --bs-btn-bg: var(--r-white); --bs-btn-color: var(--r-ink); --bs-btn-border-color: var(--r-line-strong);
  --bs-btn-hover-bg: var(--r-bone-2); --bs-btn-hover-color: var(--r-ink); --bs-btn-hover-border-color: var(--r-field);
  --bs-btn-active-bg: var(--t-hover); --bs-btn-active-color: var(--r-ink); --bs-btn-active-border-color: var(--r-field);
}
.retopa .btn-danger {
  --bs-btn-bg: var(--r-alert); --bs-btn-border-color: var(--r-alert); --bs-btn-color: var(--r-white);
  --bs-btn-hover-bg: var(--r-alert-ink); --bs-btn-hover-border-color: var(--r-alert-ink); --bs-btn-hover-color: var(--r-white);
  --bs-btn-active-bg: #8c311d; --bs-btn-active-border-color: #8c311d; --bs-btn-active-color: var(--r-white);
}
.retopa .btn-outline-danger {
  --bs-btn-bg: var(--r-white); --bs-btn-color: var(--r-alert-ink); --bs-btn-border-color: var(--r-alert-line);
  --bs-btn-hover-bg: var(--r-alert-tint); --bs-btn-hover-color: var(--r-alert-ink); --bs-btn-hover-border-color: var(--r-alert);
  --bs-btn-active-bg: #f6dcd2; --bs-btn-active-color: var(--r-alert-ink); --bs-btn-active-border-color: var(--r-alert);
  box-shadow: none;
}
/* Botón de texto: subrayado, para que no dependa del color */
.retopa .btn-link { --bs-btn-color: var(--r-green); --bs-btn-hover-color: var(--r-green-active); --bs-btn-padding-x: .25rem; text-decoration: underline; text-underline-offset: .2em; }
/* Sobre verde o tinta: hueso con texto verde */
.retopa .btn-bone {
  --bs-btn-bg: var(--r-bone); --bs-btn-color: var(--r-green); --bs-btn-border-color: var(--r-bone);
  --bs-btn-hover-bg: var(--r-white); --bs-btn-hover-color: var(--r-green-active); --bs-btn-hover-border-color: var(--r-white);
  --bs-btn-active-bg: var(--r-green-tint); --bs-btn-active-color: var(--r-green-active); --bs-btn-active-border-color: var(--r-green-tint);
}
.retopa .btn-bone:focus-visible, .retopa-on-dark .btn:focus-visible, .retopa-on-dark a:focus-visible { outline-color: var(--r-bone); }

/* ---------- Campos (lámina 08): etiqueta arriba, foco de 2,5 px en verde, error en una línea ---------- */
.retopa .form-label, .retopa legend.form-label { margin-bottom: .375rem; font-size: .9375rem; font-weight: 600; color: var(--r-ink); }
.retopa legend.form-label { float: none; width: auto; padding: 0; }
.retopa .form-control, .retopa .form-select {
  min-height: 48px; padding: .6875rem .875rem; font-size: 1rem; line-height: 1.4; color: var(--r-ink);
  background-color: var(--r-white); border: 1.5px solid var(--r-field); border-radius: var(--r-radius);
  transition: border-color .15s var(--r-ease), box-shadow .15s var(--r-ease);
}
.retopa .form-select { padding-right: 2.5rem; background-position: right .875rem center; }
.retopa textarea.form-control { min-height: 6rem; }
.retopa .form-control-sm { min-height: 48px; font-size: 1rem; }
.retopa .form-control::placeholder { color: #6f766f; opacity: 1; }
.retopa .form-control:hover:not(:focus):not(:disabled):not([readonly]), .retopa .form-select:hover:not(:focus):not(:disabled) { border-color: var(--r-ink-2); }
.retopa .form-control:focus, .retopa .form-select:focus { border-color: var(--r-green); box-shadow: inset 0 0 0 1px var(--r-green); outline: none; }
.retopa .form-control[readonly], .retopa .form-control:disabled, .retopa .form-select:disabled { background-color: var(--r-bone-2); border-color: var(--r-line-strong); color: var(--r-ink-2); }
.retopa .form-control.is-invalid, .retopa .form-select.is-invalid { border-color: var(--r-alert) !important; background-image: none; padding-right: .875rem; }
.retopa .form-control.is-invalid:focus, .retopa .form-select.is-invalid:focus { box-shadow: inset 0 0 0 1px var(--r-alert); }
.retopa .form-text { margin-top: .375rem; font-size: .875rem; line-height: 1.45; color: var(--r-ink-2); }
.retopa .invalid-feedback { margin-top: .375rem; font-size: .875rem; font-weight: 500; color: var(--r-alert-ink); }
.retopa .text-danger { color: var(--r-alert-ink) !important; }
.retopa .form-check { display: flex; align-items: flex-start; gap: .75rem; min-height: 48px; padding: .75rem 0 0; margin: 0; }
.retopa .form-check .form-check-input { float: none; flex: none; margin: 0; }
.retopa .form-check-label { line-height: 1.45; padding-top: .0625rem; }
.retopa .form-check-input { width: 1.375rem; height: 1.375rem; margin-top: 0; border: 1.5px solid var(--r-field); background-color: var(--r-white); cursor: pointer; }
.retopa .form-check-input[type="checkbox"] { border-radius: 6px; }
.retopa .form-check-input:checked { background-color: var(--r-green); border-color: var(--r-green); }
.retopa .form-check-input:focus { border-color: var(--r-green); box-shadow: none; }
.retopa .form-check-input:focus-visible { outline: 2.5px solid var(--r-green); outline-offset: 2px; }
.retopa fieldset { min-width: 0; }
.retopa fieldset.border { border-color: var(--r-line) !important; border-radius: var(--r-radius) !important; background: var(--r-bone); padding: 1rem !important; }
.retopa fieldset.border > legend { float: none; width: auto; padding: 0 .375rem; margin: 0 0 .25rem -.375rem; font-family: var(--r-display); font-size: 1.0625rem; font-weight: 500 !important; letter-spacing: -.01em; }

/* ---------- Avisos: calmos. El error en alerta; lo demás sin color de pico ---------- */
.retopa .alert { --bs-alert-padding-x: 1rem; --bs-alert-padding-y: .875rem; --bs-alert-border-radius: var(--r-radius); font-size: .9375rem; line-height: 1.5; border-width: 1px; }
.retopa .alert-success { --bs-alert-bg: var(--r-green-tint); --bs-alert-color: var(--r-green); --bs-alert-border-color: var(--r-green-line); font-weight: 500; }
.retopa .alert-danger { --bs-alert-bg: var(--r-alert-tint); --bs-alert-color: var(--r-alert-ink); --bs-alert-border-color: var(--r-alert-line); font-weight: 500; }
.retopa .alert-warning, .retopa .alert-info { --bs-alert-bg: var(--r-white); --bs-alert-color: var(--r-ink); --bs-alert-border-color: var(--r-line-strong); }
.retopa .alert a { color: inherit; font-weight: 600; }
.retopa .badge { font-family: var(--r-text); font-size: .875rem; font-weight: 600; line-height: 1.2; padding: .25rem .625rem; border-radius: 999px; }
.retopa .text-bg-warning { background: var(--r-bone-2) !important; color: var(--r-ink) !important; border: 1px solid var(--r-line-strong); }
.retopa .text-bg-success { background: var(--r-green-tint) !important; color: var(--r-green) !important; }

/* ---------- Saltar al contenido ---------- */
.retopa-skip { position: absolute; left: 16px; top: -4rem; z-index: 30; display: inline-flex; align-items: center; min-height: 48px; padding: 0 1rem; background: var(--r-ink); color: var(--r-bone) !important; border-radius: var(--r-radius); text-decoration: none !important; font-weight: 600; }
.retopa-skip:focus { top: .25rem; }

/* ---------- Barra superior: 56 px celular, 64 px escritorio ---------- */
.retopa-top { position: relative; z-index: 10; background: var(--r-white); border-bottom: 1px solid var(--r-line); }
.retopa-top-inner { display: flex; align-items: center; gap: 1.5rem; height: 56px; }
.retopa-brand { display: inline-flex; align-items: center; min-height: 48px; color: var(--r-green) !important; text-decoration: none !important; }
.retopa-brand:hover { color: var(--r-green-active) !important; }
.retopa-brand-icon { display: none; }
@media (max-width: 359.98px) { .retopa-brand-word { display: none; } .retopa-brand-icon { display: block; } }
.retopa-nav { display: none; }
.retopa-top-end { display: flex; align-items: center; gap: .25rem; margin-left: auto; margin-right: -12px; }
.retopa-top-cta { display: none !important; }
.retopa-top-login, .retopa-top-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: 0 .75rem; border-radius: var(--r-radius); color: var(--r-green) !important; font-weight: 600; text-decoration: none !important; }
.retopa-top-icon { padding: 0; color: var(--r-ink) !important; }
.retopa-top-login:hover, .retopa-top-icon:hover { background: var(--r-bone-2); }
.retopa-menu > summary { list-style: none; cursor: pointer; }
.retopa-menu > summary::-webkit-details-marker { display: none; }
.retopa-menu-close, .retopa-menu[open] .retopa-menu-open { display: none; }
.retopa-menu[open] .retopa-menu-close { display: inline-block; }
.retopa-menu-panel { position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; padding: .5rem 16px 1rem; background: var(--r-white); border-bottom: 1px solid var(--r-line); box-shadow: 0 16px 24px -16px rgba(23, 33, 28, .25); }
.retopa-menu-panel a { display: flex; align-items: center; min-height: 52px; padding: 0 .25rem; border-bottom: 1px solid var(--r-line); color: var(--r-ink) !important; font-size: 1.0625rem; font-weight: 500; text-decoration: none !important; }
.retopa-menu-panel a:last-child { border-bottom: 0; }
.retopa-menu-panel a.retopa-menu-cta { order: 9; justify-content: center; margin-top: .75rem; min-height: 48px; border: 0; border-radius: var(--r-radius); background: var(--r-green); color: var(--r-white) !important; font-size: 1rem; font-weight: 600; }
.retopa-menu-panel a.retopa-menu-cta:hover { background: var(--r-green-hover); }
@media (min-width: 992px) {
  .retopa-top-inner { height: 64px; gap: 2rem; }
  .retopa-brand-word { height: 31px; width: auto; }
  .retopa-nav { display: flex; align-items: center; gap: .25rem; }
  .retopa-nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 .75rem; border-radius: var(--r-radius); color: var(--r-ink) !important; font-size: .9375rem; font-weight: 500; text-decoration: none !important; }
  .retopa-nav a:hover { background: var(--r-bone-2); }
  .retopa-top-end { gap: .5rem; margin-right: 0; }
  .retopa-top-cta { display: inline-flex !important; }
  .retopa-menu { display: none; }
}

/* ---------- Páginas comunes (cuenta, privacidad, formularios) ---------- */
.retopa-main:not(.retopa-main-flush) { padding-top: 1.5rem; padding-bottom: 4rem; }
@media (min-width: 768px) { .retopa-main:not(.retopa-main-flush) { padding-top: 3rem; padding-bottom: 5rem; } }
.retopa .panel-card { max-width: 30rem; margin-inline: auto; padding: 1.5rem 1.25rem; background: var(--r-white); border: 1px solid var(--r-line); border-radius: var(--r-radius-card); box-shadow: none; }
.retopa .panel-card h1, .retopa .panel-card h1.h3 { font-size: 1.6875rem; margin-bottom: .75rem; }
.retopa .panel-card .btn-primary { width: 100%; }
.retopa .panel-card .d-flex .btn-primary, .retopa .panel-card .row .btn-primary { width: auto; }
.retopa .panel-card p { color: var(--r-ink-2); }
.retopa .panel-card p.lead { color: var(--r-ink); font-size: 1.0625rem; }
.retopa .panel-card ul { padding-left: 1.25rem; margin-bottom: 1rem; }
.retopa .panel-card li + li { margin-top: .375rem; }
.retopa .panel-card form .btn { margin-top: .5rem; }
.retopa article.panel-card { max-width: 46rem; }
.retopa article.panel-card p { color: var(--r-ink); line-height: 1.65; }
@media (min-width: 576px) { .retopa .panel-card { padding: 2rem; } }
.retopa .panel-card .hp-field { position: absolute; left: -9999px; }

/* Encabezado de una página interior */
.retopa-page { max-width: 46rem; }
.retopa-page-wide { max-width: none; }
.retopa-page-head { margin-bottom: 1.5rem; }
.retopa-page-head p { margin: 0; color: var(--r-ink-2); font-size: 1.0625rem; }
.retopa-empty { max-width: 32rem; margin-inline: auto; padding-block: 1rem; }
.retopa-empty h1 { font-size: 1.6875rem; }
.retopa-empty p { color: var(--r-ink-2); }
.retopa-empty-box { padding: 2rem 1.25rem; text-align: center; background: var(--r-white); border: 1px dashed var(--r-line-strong); border-radius: var(--r-radius-card); }
.retopa-empty-box p { margin: 0 auto 1rem; color: var(--r-ink-2); }
.retopa-empty-box p:last-child { margin-bottom: 0; }

/* Superficie: la tarjeta blanca sobre hueso */
.retopa-surface { background: var(--r-white); border: 1px solid var(--r-line); border-radius: var(--r-radius-card); padding: 1.25rem; }
.retopa-surface + .retopa-surface { margin-top: 1rem; }
@media (min-width: 768px) { .retopa-surface { padding: 1.5rem 1.75rem; } }
.retopa-surface > h2 { font-size: 1.375rem; }
.retopa-help { margin: 0 0 1rem; color: var(--r-ink-2); }
.retopa-meta { margin: 0; color: var(--r-ink-2); font-size: .9375rem; }
.retopa-actions { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.25rem; }
.retopa-actions form { display: contents; }
@media (min-width: 480px) { .retopa-actions { flex-direction: row; flex-wrap: wrap; align-items: center; } }
.retopa-list { margin: 0 0 1rem; padding-left: 1.25rem; }
.retopa-list li + li { margin-top: .5rem; }

/* Lista de datos que se entregan (postular, aceptar) */
.retopa-give { list-style: none; margin: 0 0 1rem; padding: 0; border-top: 1px solid var(--r-line); }
.retopa-give li { display: flex; gap: .75rem; padding: .875rem 0; border-bottom: 1px solid var(--r-line); color: var(--r-ink); }
.retopa-give .r-icon { margin-top: .125rem; color: var(--r-green); }

/* ---------- Portada ---------- */
.retopa-hero { padding: 2rem 0 2.5rem; }
.retopa-hero-grid { display: grid; gap: 2rem; align-items: center; }
.retopa-title { max-width: 14ch; margin: 0 0 1rem; }
.retopa-lead { max-width: 34rem; margin: 0 0 1.5rem; font-size: 1.125rem; line-height: 1.6; color: var(--r-ink-2); text-wrap: pretty; }
.retopa-hero .retopa-actions { margin-top: 0; }
.retopa-note { margin: 1rem 0 0; font-size: .9375rem; color: var(--r-ink-2); }
@media (max-width: 479.98px) { .retopa-hero .btn, .retopa-closing .btn { width: 100%; } }
@media (min-width: 900px) {
  .retopa-hero { padding: 4.5rem 0 5rem; }
  .retopa-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 4rem; }
  .retopa-lead { font-size: 1.25rem; }
}

/* Contadores */
.retopa-stats { border-block: 1px solid var(--r-line); background: var(--r-white); }
.retopa-stat-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); margin: 0; }
.retopa-stat { display: flex; flex-direction: column-reverse; gap: .125rem; padding: 1.25rem 0; }
.retopa-stat + .retopa-stat { border-top: 1px solid var(--r-line); }
.retopa-stat dt { font-size: .9375rem; font-weight: 500; color: var(--r-ink-2); }
.retopa-stat-num { margin: 0; font-family: var(--r-display); font-size: 2.25rem; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; color: var(--r-ink); font-variant-numeric: tabular-nums; }
@media (min-width: 560px) {
  .retopa-stat { padding: 1.75rem 1.5rem 1.75rem 0; }
  .retopa-stat + .retopa-stat { border-top: 0; border-left: 1px solid var(--r-line); padding-left: 1.5rem; }
}

/* Secciones */
.retopa-section { padding: 3rem 0; }
.retopa-section-alt { background: var(--r-white); border-block: 1px solid var(--r-line); }
.retopa-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; margin-bottom: 1.5rem; }
.retopa-section-head h2 { margin: 0; }
.retopa-section-head a { display: inline-flex; align-items: center; gap: .375rem; min-height: 48px; font-weight: 600; }
.retopa-link { display: inline-flex; align-items: center; gap: .375rem; min-height: 48px; font-weight: 600; }
@media (min-width: 768px) { .retopa-section { padding: 5rem 0; } }

/* Pasos: la secuencia importa, por eso van numerados */
.retopa-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; }
.retopa-step { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 1rem; padding: 1.25rem 0; border-top: 1px solid var(--r-line-strong); }
.retopa-step:last-child { border-bottom: 1px solid var(--r-line-strong); }
.retopa-step-num { grid-row: span 2; font-family: var(--r-display); font-size: 2rem; font-weight: 600; line-height: 1; color: var(--r-green); font-variant-numeric: tabular-nums; }
.retopa-step h3 { margin: .25rem 0 .375rem; }
.retopa-step p { margin: 0; color: var(--r-ink-2); }
@media (min-width: 768px) {
  .retopa-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
  .retopa-step, .retopa-step:last-child { display: block; padding: 1.5rem 0 0; border-bottom: 0; border-top: 2px solid var(--r-ink); }
  .retopa-step-num { display: block; margin-bottom: 1.25rem; font-size: 2.5rem; }
}

/* Privacidad: la franja en verde hondo, con la promesa */
.retopa-on-dark { background: var(--r-green); color: var(--r-bone); }
.retopa-on-dark h2 { color: var(--r-bone); }
.retopa-on-dark p { color: var(--r-on-dark-2); }
.retopa-on-dark a:not(.btn) { color: var(--r-bone); }
.retopa-on-dark a:not(.btn):hover { color: var(--r-white); }
.retopa-privacy-grid { display: grid; gap: 2rem; }
.retopa-privacy-lock { display: inline-grid; place-items: center; width: 3.5rem; height: 3.5rem; margin-bottom: 1.25rem; border-radius: 1rem; border: 2px solid var(--r-on-dark-2); color: var(--r-bone); }
.retopa-points { list-style: none; margin: 0; padding: 0; }
.retopa-points li { display: flex; gap: .875rem; padding: 1rem 0; border-top: 1px solid rgba(251, 247, 240, .22); font-size: 1.0625rem; line-height: 1.5; color: var(--r-bone); }
.retopa-points li:last-child { border-bottom: 1px solid rgba(251, 247, 240, .22); }
.retopa-points .r-icon { margin-top: .125rem; color: var(--r-on-dark-2); }
@media (min-width: 900px) { .retopa-privacy-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; align-items: center; } }

/* Para empresas, en la portada: tranquilo, sin competir con el candidato */
.retopa-companies { display: grid; gap: 1.25rem; padding: 1.75rem 1.25rem; background: var(--r-white); border: 1px solid var(--r-line); border-radius: var(--r-radius-card); }
.retopa-companies h2 { margin: 0; max-width: 22ch; }
.retopa-companies p { margin: 0; color: var(--r-ink-2); }
@media (min-width: 900px) { .retopa-companies { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 3rem; padding: 2.5rem; } .retopa-companies-text { display: grid; gap: .75rem; } }
@media (max-width: 899.98px) { .retopa-companies-text { display: grid; gap: .75rem; } }

/* Cierre */
.retopa-closing { padding: 0 0 4rem; }
.retopa-closing p { color: var(--r-ink-2); margin-bottom: 1.25rem; }
@media (min-width: 768px) { .retopa-closing { padding-bottom: 6rem; } }

/* ---------- Tarjeta de perfil anónimo (también la usa el panel; ahí la estiliza app.css) ---------- */
.retopa-card-demo { margin: 0; }
.retopa-card-demo figcaption { margin-top: .875rem; font-size: .9375rem; color: var(--r-ink-2); }
.retopa-card-demo .retopa-card { box-shadow: var(--r-shadow); }

/* ---------- Tarjeta de oferta laboral (lámina 08) ---------- */
.retopa-jobs { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.retopa-job { position: relative; display: grid; gap: .25rem; padding: 1.125rem 1.125rem 1rem; background: var(--r-white); border: 1px solid var(--r-line); border-radius: var(--r-radius-card); transition: border-color .2s var(--r-ease); }
.retopa-job:hover { border-color: var(--r-field); }
.retopa-job:focus-within { border-color: var(--r-green); }
.retopa-job-co { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; min-width: 0; }
.retopa-job-mark { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 10px; background: var(--r-bone-2); color: var(--r-ink-2); }
.retopa-job-co-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.retopa-job-co-name { font-weight: 600; color: var(--r-ink); overflow-wrap: anywhere; }
.retopa-job-co-place { font-size: .9375rem; color: var(--r-ink-2); }
.retopa .retopa-job-title { margin: 0; font-size: 1.25rem; font-weight: 600; }
.retopa-job-title a { color: var(--r-ink) !important; text-decoration: none !important; }
.retopa-job-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.retopa-job-title a:hover { text-decoration: underline !important; text-decoration-thickness: 2px !important; }
.retopa-job-title a:focus-visible { outline: none; }
.retopa-job-title a:focus-visible::after { outline: 2.5px solid var(--r-green); outline-offset: 2px; }
.retopa-job-meta { margin: 0; color: var(--r-ink-2); }
.retopa-job-meta strong { font-weight: 600; color: var(--r-ink); }
.retopa-job-summary { margin: .375rem 0 0; color: var(--r-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.retopa-job-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--r-line); font-size: .875rem; color: var(--r-ink-2); }
.retopa-job-see { display: inline-flex; align-items: center; gap: .375rem; font-weight: 600; color: var(--r-green); font-size: .9375rem; }
@media (min-width: 768px) { .retopa-job { padding: 1.375rem 1.5rem 1.125rem; } .retopa .retopa-job-title { font-size: 1.3125rem; } }
.retopa-jobs-grid { display: grid; gap: .75rem; }
@media (min-width: 900px) { .retopa-jobs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }

/* Listado de vacantes con filtros */
.retopa-jobs-layout { display: grid; gap: 1.5rem; }
.retopa-filter { padding: 1rem; background: var(--r-white); border: 1px solid var(--r-line); border-radius: var(--r-radius-card); }
.retopa-filter-row { display: flex; gap: .5rem; align-items: flex-end; }
.retopa-filter-row > div { flex: 1; min-width: 0; }
.retopa-filter details { margin-top: .75rem; }
.retopa-filter summary { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; color: var(--r-green); cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.retopa-filter-more { display: grid; gap: 1rem; padding-top: .5rem; }
.retopa-filter-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.retopa-count { margin: 0 0 .75rem; font-size: .9375rem; color: var(--r-ink-2); }
.retopa-pager { display: flex; gap: .5rem; margin-top: 1.5rem; }
@media (min-width: 992px) {
  .retopa-jobs-layout { grid-template-columns: 18rem minmax(0, 1fr); gap: 2.5rem; align-items: start; }
  .retopa-filter { position: sticky; top: 1rem; padding: 1.25rem; }
  .retopa-filter-row { flex-direction: column; align-items: stretch; }
  .retopa-filter details { margin-top: 1rem; }
}
/* En el escritorio los filtros quedan a la vista (donde el navegador permite abrir el <details> con CSS). */
@supports selector(::details-content) {
  @media (min-width: 992px) {
    .retopa-filter details > summary { display: none; }
    .retopa-filter details::details-content { content-visibility: visible; display: block; }
  }
}
@media (min-width: 992px) {
  .retopa-filter-more { padding-top: 0; }
}

/* Detalle de una vacante */
.retopa-job-detail { display: grid; gap: 1.5rem; }
.retopa-job-detail-head .retopa-job-co { margin-bottom: 1rem; }
.retopa-job-detail-head h1 { margin-bottom: .75rem; }
.retopa-facts { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; border-top: 1px solid var(--r-line); }
.retopa-facts > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--r-line); }
.retopa-facts dt { font-weight: 500; color: var(--r-ink-2); }
.retopa-facts dd { margin: 0; font-weight: 500; color: var(--r-ink); }
.retopa-reqs ul { margin: 0; padding: 0; list-style: none; }
.retopa-reqs li { display: flex; gap: .625rem; padding: .375rem 0; }
.retopa-reqs .r-icon { margin-top: .125rem; color: var(--r-green); }
@media (min-width: 992px) {
  .retopa-job-detail { grid-template-columns: minmax(0, 1fr) 22rem; gap: 3rem; align-items: start; }
  .retopa-job-aside { position: sticky; top: 1rem; }
}
.retopa-job-aside .btn { width: 100%; }

/* ---------- Bandeja de invitaciones y procesos ---------- */
.retopa-invite { overflow: hidden; padding: 0; background: var(--r-white); border: 1px solid var(--r-line); border-radius: var(--r-radius-card); }
.retopa-invite + .retopa-invite { margin-top: 1rem; }
.retopa-invite-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: 1rem 1.25rem; background: var(--r-green); color: var(--r-bone); }
.retopa .retopa-invite-head h2 { margin: 0; font-size: 1.25rem; color: var(--r-bone); }
/* El pico: una invitación es algo bueno de verdad */
.retopa-peak-tag { display: inline-flex; align-items: center; min-height: 2rem; padding: 0 .75rem; border-radius: 999px; background: var(--r-bright); color: var(--r-bright-ink); font-size: .875rem; font-weight: 600; }
.retopa-invite-body { padding: 1rem 1.25rem 1.25rem; }
.retopa-invite-body p { margin: 0 0 .5rem; }
.retopa-quote { margin: .75rem 0; padding: .875rem 1rem; background: var(--r-bone); border: 1px solid var(--r-line); border-radius: var(--r-radius); color: var(--r-ink); white-space: pre-line; }
.retopa-past { display: grid; gap: .75rem; }
.retopa-past .retopa-surface { margin: 0; }
.retopa-past h3 { margin-bottom: .25rem; }
.retopa-status-line { display: inline-flex; align-items: center; gap: .5rem; margin: .5rem 0 0; font-weight: 600; color: var(--r-ink); }

.retopa-process + .retopa-process { margin-top: 1rem; }
.retopa-process > h2 { margin-bottom: .25rem; }
.retopa-process-item { padding: 1rem 0 0; margin-top: 1rem; border-top: 1px solid var(--r-line); }
.retopa-process-item .retopa-title-sm { margin: 0 0 .125rem; font-weight: 600; }
.retopa-state-pill { display: inline-flex; align-items: center; min-height: 2rem; margin: .5rem 0 .25rem; padding: 0 .75rem; border-radius: 999px; background: var(--r-bone-2); border: 1px solid var(--r-line); font-size: .9375rem; font-weight: 600; color: var(--r-ink); }
.retopa-process-item form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .75rem; }

/* ---------- Visibilidad ---------- */
.retopa-sectors { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .5rem; margin-bottom: 1.25rem; }
.retopa-rowlist { list-style: none; margin: 0 0 1rem; padding: 0; }
.retopa-rowlist li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .5rem 0; border-bottom: 1px solid var(--r-line); }
.retopa-rowlist li:first-child { border-top: 1px solid var(--r-line); }
.retopa-rowlist li > span { font-weight: 500; }
.retopa-search { display: flex; gap: .5rem; }
.retopa-search .form-control { flex: 1; min-width: 0; }

/* ---------- Para empresas (/empresas) ---------- */
.retopa-offer { display: inline-flex; align-items: center; gap: .625rem; max-width: 37rem; margin: 0 0 1.5rem; padding: .75rem 1rem; border-radius: var(--r-radius); background: var(--r-white); border: 1px solid var(--r-line-strong); color: var(--r-ink); font-weight: 600; line-height: 1.45; }
.retopa-offer .r-icon { color: var(--r-green); }
.retopa-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.retopa-feature { padding: 1.25rem 0; border-top: 1px solid var(--r-line); }
.retopa-feature:last-child { border-bottom: 1px solid var(--r-line); }
.retopa-feature h3 { margin: .125rem 0 .375rem; }
.retopa-feature p { margin: 0; color: var(--r-ink-2); }
@media (min-width: 768px) {
  .retopa-features { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
  .retopa-feature:nth-last-child(2) { border-bottom: 1px solid var(--r-line); }
}
@media (min-width: 1100px) {
  .retopa-features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .retopa-feature:nth-last-child(3) { border-bottom: 1px solid var(--r-line); }
}
.retopa-co-hero-side { display: grid; gap: .75rem; }
.retopa-co-fact { display: flex; gap: .875rem; padding: 1rem 1.125rem; background: var(--r-white); border: 1px solid var(--r-line); border-radius: var(--r-radius-card); }
.retopa-co-fact .r-icon { margin-top: .125rem; color: var(--r-green); }
.retopa-co-fact strong { display: block; font-weight: 600; }
.retopa-co-fact span { color: var(--r-ink-2); font-size: .9375rem; }

.retopa-welcome { max-width: 46rem; margin: 0 0 2rem; padding: 1.25rem; background: var(--r-white); border: 1px solid var(--r-line-strong); border-radius: var(--r-radius-card); }
.retopa-welcome h3 { margin: 0 0 .375rem; }
.retopa-welcome p { margin: 0; color: var(--r-ink-2); }

.plans { display: grid; gap: 1rem; }
.plan { display: flex; flex-direction: column; min-width: 0; background: var(--r-white); border: 1px solid var(--r-line); border-radius: var(--r-radius-card); padding: 1.25rem 1.25rem .75rem; }
.plan-free { background: var(--r-bone); }
.retopa .plan-name { font-size: 1.3125rem; font-weight: 600; margin: 0 0 .5rem; }
.plan-price { display: flex; flex-direction: column; margin: 0 0 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--r-line); }
.plan-price strong { font-family: var(--r-display); font-size: 1.75rem; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; color: var(--r-ink); font-variant-numeric: tabular-nums; }
.plan-price span { font-size: .875rem; color: var(--r-ink-2); }
.plan-limits { margin: 0; }
.plan-row { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .5rem 0; }
.plan-row + .plan-row { border-top: 1px solid var(--r-line); }
.plan-row dt { font-size: .875rem; font-weight: 500; color: var(--r-ink-2); }
.plan-row dd { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--r-ink); text-align: right; }
.plan-row dd.plan-yes { color: var(--r-green); }
.plan-row dd.plan-no { font-weight: 500; color: var(--r-ink-2); }
.retopa-plans-note { margin: 1rem 0 0; font-size: .875rem; color: var(--r-ink-2); max-width: 46rem; }
@media (min-width: 576px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .plans { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; }
  .plan-row { flex-direction: column; align-items: stretch; gap: .125rem; }
  .plan-row dd { text-align: left; }
}
.retopa-form-narrow { max-width: 34rem; }

/* ---------- Mi perfil (editor) ---------- */
.retopa-profile-head { margin-bottom: 1.5rem; }
.retopa-lead-sm { color: var(--r-ink-2); max-width: 40rem; margin: 0 0 1rem; font-size: 1.0625rem; }
.retopa-status { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.5rem; margin: 0; padding: .375rem .875rem; border-radius: 999px; background: var(--r-white); border: 1px solid var(--r-line-strong); color: var(--r-ink); font-size: .9375rem; font-weight: 500; }
.retopa-status-ok { background: var(--r-green-tint); border-color: var(--r-green-line); color: var(--r-green); font-weight: 600; }
.retopa-profile-grid { display: grid; gap: 1.5rem; }
.retopa-profile-side { display: grid; gap: 1rem; align-content: start; }
.retopa-side-card, .retopa-preview { background: var(--r-white); border: 1px solid var(--r-line); border-radius: var(--r-radius-card); padding: 1.25rem; }
.retopa-preview { background: var(--r-bone-2); border-color: var(--r-line); }
.retopa .retopa-side-title { font-size: 1.125rem; font-weight: 500; margin: 0 0 .5rem; }
.retopa-side-text { font-size: .9375rem; color: var(--r-ink-2); margin: 0 0 .875rem; }
.retopa-side-links { list-style: none; margin: 0; padding: 0; background: var(--r-white); border: 1px solid var(--r-line); border-radius: var(--r-radius-card); }
.retopa-side-links li + li { border-top: 1px solid var(--r-line); }
.retopa-side-links a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 52px; padding: 0 1.25rem; font-weight: 500; color: var(--r-ink) !important; text-decoration: none !important; }
.retopa-side-links a:hover { background: var(--r-bone); }
.retopa-side-links .r-icon { color: var(--r-ink-2); }
.retopa-side-links a.retopa-danger-link { color: var(--r-alert-ink) !important; }
.retopa-state { display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; font-size: .9375rem; color: var(--r-ink-2); }
.retopa-state-on { color: var(--r-green); font-weight: 600; }
.retopa-cv-line { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .5rem; font-weight: 600; }
.retopa-cv-card { max-width: 46rem; }
.retopa-preview .retopa-card { max-width: none; }
.retopa-side-card .btn, .retopa-side-card form .btn { width: 100%; }
.retopa-side-card h3.retopa-side-title { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--r-line); }

.retopa-editor-form { display: grid; gap: 1.5rem; }
.retopa-block { background: var(--r-white); border: 1px solid var(--r-line); border-radius: var(--r-radius-card); padding: 1.25rem 1rem; }
.retopa-block-public { border-color: var(--r-green-line); }
.retopa .retopa-block-title { display: flex; align-items: center; gap: .75rem; margin: 0 0 .5rem; }
.retopa-block-badge { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 10px; background: var(--r-bone-2); color: var(--r-ink); }
.retopa-block-public .retopa-block-badge { background: var(--r-green-tint); color: var(--r-green); }
.retopa-block-text { color: var(--r-ink-2); margin: 0 0 1.5rem; }
.retopa .retopa-sub { margin: 2rem 0 .5rem; padding-top: 1.5rem; border-top: 1px solid var(--r-line); }
.retopa-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .5rem; }
.retopa-check { display: flex; align-items: center; gap: .75rem; min-height: 48px; padding: .5rem .875rem; border: 1.5px solid var(--r-line-strong); border-radius: var(--r-radius); background: var(--r-white); cursor: pointer; font-size: .9375rem; line-height: 1.35; transition: border-color .15s var(--r-ease), background-color .15s var(--r-ease); }
.retopa-check:hover { border-color: var(--r-field); }
.retopa-check:has(input:checked) { border-color: var(--r-green); }
.retopa-check input { margin: 0; flex: none; }
.retopa-editor-form > .btn-lg { justify-self: start; }
@media (max-width: 479.98px) { .retopa-editor-form > .btn-lg { justify-self: stretch; } }
@media (min-width: 768px) { .retopa-block { padding: 1.75rem; } }
@media (min-width: 992px) {
  .retopa-profile-grid { grid-template-columns: minmax(0, 1fr) 23rem; gap: 2rem; align-items: start; }
  .retopa-profile-side { grid-column: 2; grid-row: 1; }
  .retopa-profile-main { grid-column: 1; grid-row: 1; }
  .retopa-block { padding: 2rem; }
}

/* ---------- Pie: tinta con el logo en hueso ---------- */
.retopa-foot { background: var(--r-ink); color: var(--r-bone); }
.retopa-foot-inner { display: grid; gap: 1.5rem; padding-top: 2.5rem; padding-bottom: 2.5rem; }
.retopa-foot-brand { color: var(--r-bone); }
.retopa-foot-brand svg { display: block; }
.retopa-foot-slogan { margin: .75rem 0 0; font-family: var(--r-display); font-size: 1.125rem; font-weight: 500; letter-spacing: -.01em; color: var(--r-bone); }
.retopa-foot-links { display: flex; flex-direction: column; }
.retopa-foot-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--r-on-dark-2) !important; text-decoration: none !important; font-size: .9375rem; }
.retopa-foot-links a:hover { color: var(--r-bone) !important; text-decoration: underline !important; }
.retopa-foot a:focus-visible { outline-color: var(--r-bone); }
.retopa-foot-legal { grid-column: 1 / -1; margin: 0; padding-top: 1.25rem; border-top: 1px solid rgba(251, 247, 240, .14); font-size: .875rem; color: var(--r-on-dark-2); }
.retopa-foot-legal a { color: var(--r-bone) !important; font-weight: 600; text-decoration: none !important; }
.retopa-foot-legal a:hover { text-decoration: underline !important; }
@media (min-width: 768px) {
  .retopa-foot-inner { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding-top: 3rem; padding-bottom: 3rem; }
  .retopa-foot-links { flex-direction: row; flex-wrap: wrap; gap: 0 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .retopa *, .retopa *::before, .retopa *::after { transition: none !important; animation: none !important; }
}
@media (min-width: 480px) { .retopa .retopa-actions .btn { width: auto; } }
.retopa .form-check { flex-wrap: wrap; }
.retopa .form-check-label { flex: 1; min-width: 0; }
.retopa .form-check > .form-text { flex-basis: 100%; margin: .25rem 0 0 2.125rem; }
.retopa .form-check.d-flex .form-check-label { flex: 0 1 auto; }
.retopa .form-check .form-control-sm { margin-left: auto; }
@media (max-width: 479.98px) { .retopa .form-check .form-control-sm { margin-left: 2.125rem; } }
@media (min-width: 992px) { .retopa-top-end > .retopa-top-icon { display: none; } }

/* Fase 15: aviso contra estafas y «Reportar esta empresa». Sobrio: hueso hundido y tinta, nunca colores de pico. */
.retopa-scam { margin: 1rem 0 0; padding: .875rem 1rem; background: var(--r-bone-2); border: 1px solid var(--r-line); border-left: 3px solid var(--r-ink-2); border-radius: var(--r-radius); color: var(--r-ink); font-size: .9375rem; line-height: 1.5; }
.retopa-scam p { margin: 0; }
.retopa-company-id { margin: .25rem 0 0; color: var(--r-ink-2); font-size: .9375rem; overflow-wrap: anywhere; }
.retopa-report-link { display: inline-flex; align-items: center; min-height: 48px; color: var(--r-ink-2); font-size: .9375rem; text-decoration: underline; text-underline-offset: .2em; }
.retopa-report-link:hover, .retopa-report-link:focus-visible { color: var(--r-ink); }
.retopa-radio-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.retopa-radio-list li { display: flex; align-items: center; gap: .75rem; min-height: 48px; }
.retopa-radio-list .form-check-input { margin: 0; flex: none; width: 1.25rem; height: 1.25rem; }