/* ============================================================================
   SIRCERE / SIGME — Hoja de estilos autónoma del registro
   ----------------------------------------------------------------------------
   Reemplaza la dependencia de material-dashboard.css y luaz-styles.css en el
   formulario de registro. Incluye:
     1.  Tokens de color oficiales SIGME (:root)
     2.  Utilidades de color (.blue, .bg-blue, ...)
     3.  Reset mínimo + shell del registro (#app, .container, card)
     4.  Grid responsivo (.row, .col-*) y utilidades de layout
     5.  Form-controls, checkboxes y file inputs
     6.  Botones
     7.  Bloque propio del registro (convocatoria, pasos, progressbar, etc.)
   Mantener los nombres de variable idénticos para que el código sea portable
   entre proyectos.
   ============================================================================ */

/* ============================================================================
   1. TOKENS DE COLOR OFICIALES SIGME
   ============================================================================ */
:root {
  /* --- AZULES (marca / acciones primarias) --- */
  --blue: #4080e9;                         /* principal de marca */
  --dark-blue: #3675d9;                    /* hover / activo */
  --light-blue: #679aec;
  --background-blue: #4080e9;
  --tainted-blue: #3276e2;                 /* texto sobre claro */
  --tainted-dark-blue: #2b67c8;
  --comfortable-blue: rgb(242, 247, 255);
  --very-light-blue: rgb(209, 221, 250);
  --hover-blue: #f1f3ff;
  --hover-light-blue: #eaeeff;
  --light-blue-for-table: rgb(245, 245, 245);

  /* --- TURQUESA --- */
  --turk-btn-blue: #1bb9d5;
  --tainted-turk-btn-blue: #249aae;

  /* --- ROJOS (error / cancelado / eliminar) --- */
  --red: #ff4b5c;                          /* principal */
  --dark-red: #bb0d0d;
  --shadow-red: #ffebeb;
  --shadow-fort-red: #ffd7d7;
  --shadow-forty-red: #f7b7b7;
  --shadow-forter-red: #e77d7d;

  /* --- VERDES (éxito / vigente / aprobado) --- */
  --green: #269a1c;                        /* principal */
  --tainted-green: #186c10;                /* texto */
  --cake-green: #279a1ca4;                 /* con transparencia */
  --shadow-green: #96e39c;
  --light-shadow-green: #ebffed;

  /* --- NARANJAS (advertencia / pendiente) --- */
  --orange: #e0700e;                       /* principal */
  --tainted-orange: #ad5202;               /* texto */
  --light-orange: #eec7a5;

  /* --- NEGROS / GRISES (texto y superficies) --- */
  --text-gray: rgb(247, 247, 247);         /* texto sobre oscuro */
  --light-black: #575757;
  --opacity-black: #383838;
  --very-light-black: #747474;
  --shadow-gray: #afafaf;
  --hover-gray: #dcdcdc;
  --light-gray: rgb(210, 210, 210);
  --very-light-gray: #efefef;
  --background-gray: #e9e9e9;
  --real-shadow: #98989872;                /* sombra translúcida */

  /* --- CAMPOS DE FORMULARIO --- */
  --input-valid: #f6f6f6ce;
  --input-field: #fafafa;

  /* --- COLORES SEMÁNTICOS DE ESTADO --- */
  --state-ok: #16a34a;                     /* vigente / válido */
  --state-ok-dark: #15803d;
  --state-warn: #f59e0b;                   /* pendiente */
  --state-warn-dark: #d97706;
  --state-danger: #dc2626;                 /* cancelado / inválido */
  --state-danger-dark: #b91c1c;
  --state-info: #2e5c9e;                   /* informativo */
  --state-info-dark: #1a3c6e;
  --state-muted: #94a3b8;                  /* inactivo */

  /* --- TOKENS DERIVADOS DE UI (internos del registro) --- */
  --sc-radius: 0.85rem;
  --sc-radius-sm: 0.55rem;
  --sc-field-h: 3rem;
  --sc-shadow: 0 1px 3px 0 rgba(16, 24, 40, 0.08);
  --sc-shadow-md: 0 10px 30px rgba(16, 24, 40, 0.10);
  --sc-border: #dce1ea;          /* borde de campos */
  --sc-surface: #f7f9fc;         /* superficie suave de paneles */
  --sc-text: #2e2e2e;
  --sc-label: #3a4253;           /* etiquetas */
  --sc-muted-text: #6b7280;
  --sc-gutter: 0.75rem;
}

/* ============================================================================
   2. UTILIDADES DE COLOR (texto + fondo) generadas por token
   ============================================================================ */
.text-gray            { color: var(--text-gray) !important; }
.bg-text-gray         { background-color: var(--text-gray) !important; }
.blue                 { color: var(--blue) !important; }
.bg-blue              { background-color: var(--blue) !important; }
.dark-blue            { color: var(--dark-blue) !important; }
.bg-dark-blue         { background-color: var(--dark-blue) !important; }
.light-blue           { color: var(--light-blue) !important; }
.bg-light-blue        { background-color: var(--light-blue) !important; }
.tainted-blue         { color: var(--tainted-blue) !important; }
.comfortable-blue     { color: var(--comfortable-blue) !important; }
.bg-comfortable-blue  { background-color: var(--comfortable-blue) !important; }
.red                  { color: var(--red) !important; }
.bg-red               { background-color: var(--red) !important; }
.dark-red             { color: var(--dark-red) !important; }
.bg-dark-red          { background-color: var(--dark-red) !important; }
.green                { color: var(--green) !important; }
.bg-green             { background-color: var(--green) !important; }
.tainted-green        { color: var(--tainted-green) !important; }
.orange               { color: var(--orange) !important; }
.bg-orange            { background-color: var(--orange) !important; }
.tainted-orange       { color: var(--tainted-orange) !important; }
.light-gray           { color: var(--light-gray) !important; }
.bg-light-gray        { background-color: var(--light-gray) !important; }
.shadow-gray          { color: var(--shadow-gray) !important; }
.light-black          { color: var(--light-black) !important; }
.textg                { color: var(--text-gray) !important; }

/* ============================================================================
   3. RESET MÍNIMO + SHELL DEL REGISTRO
   ============================================================================ */
#app {
  max-width: 100vw;
  min-height: 100vh;
  display: flex;
  background-color: var(--background-gray);
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--sc-text);
}

main.contents,
.contents { display: contents; }

.container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  padding: 1.5rem 0.5rem;
  overflow-x: hidden;
  box-sizing: border-box;
}

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

/* --- CARD PRINCIPAL --- */
.card {
  position: relative;
  background: #fff;
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-shadow-md);
}

.card-initial {
  height: auto;
  width: 75%;
  max-width: 1080px;
  margin: 0 auto 2rem;
  transition: width 0.3s ease;
}

.card {
  overflow: hidden;
}

.card-header {
  padding: 1.25rem 1.5rem;
}

/* Marca de agua (logo del Consejo) detrás del formulario */
.sc-watermark {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(80%, 640px);
  opacity: 0.1;
  pointer-events: none;
  z-index: 0;
}

/* Contenedor del contenido sobre la marca de agua */
.sc-registro-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

.card-header-primary {
  background: linear-gradient(120deg, var(--blue), var(--dark-blue));
  color: #fff;
  margin: 0;
  padding: 1.6rem 1.5rem;
  text-align: center;
}

.card-title {
  margin: 0;
  color: inherit;
  font-weight: 600;
}

.card-initial-title { font-size: 1.8rem !important; }

.card-body {
  padding: 1rem;
}

.card-initial-body {
  position: relative;
  overflow: hidden;
  display: flex !important;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 60vh;
  padding: 1.75rem 1.5rem 1.25rem !important;
  border-radius: 0 0 var(--sc-radius) var(--sc-radius);
}

/* ============================================================================
   4. GRID RESPONSIVO (12 columnas, flexbox) + LAYOUT
   ----------------------------------------------------------------------------
   Breakpoints: sm ≥576px · md ≥768px · lg ≥992px · xl ≥1200px
   ============================================================================ */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: calc(var(--sc-gutter) * -1);
  margin-left: calc(var(--sc-gutter) * -1);
}

[class*="col-"] {
  position: relative;
  width: 100%;
  padding-right: var(--sc-gutter);
  padding-left: var(--sc-gutter);
}

.col-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
.col-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-3  { flex: 0 0 25%;      max-width: 25%; }
.col-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
.col-6  { flex: 0 0 50%;      max-width: 50%; }
.col-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
.col-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-9  { flex: 0 0 75%;      max-width: 75%; }
.col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.col-12 { flex: 0 0 100%;     max-width: 100%; }

@media (min-width: 576px) {
  .col-sm-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
  .col-sm-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-sm-3  { flex: 0 0 25%;      max-width: 25%; }
  .col-sm-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-sm-6  { flex: 0 0 50%;      max-width: 50%; }
  .col-sm-12 { flex: 0 0 100%;     max-width: 100%; }
}

@media (min-width: 768px) {
  .col-md-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
  .col-md-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-md-3  { flex: 0 0 25%;      max-width: 25%; }
  .col-md-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-md-6  { flex: 0 0 50%;      max-width: 50%; }
  .col-md-12 { flex: 0 0 100%;     max-width: 100%; }
}

@media (min-width: 1200px) {
  .col-xl-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
  .col-xl-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
  .col-xl-3  { flex: 0 0 25%;      max-width: 25%; }
  .col-xl-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-xl-6  { flex: 0 0 50%;      max-width: 50%; }
  .col-xl-12 { flex: 0 0 100%;     max-width: 100%; }
}

/* --- Utilidades de layout --- */
.w-100            { width: 100% !important; }
.margin-0         { margin: 0 !important; }
.margin-l-2rem    { margin-left: 2rem !important; }
.text-center      { text-align: center !important; }
.text-justify     { text-align: justify !important; }
.text-primary     { color: var(--blue) !important; }
.justify-content-center { justify-content: center !important; }
.content-center   { display: flex; align-items: center; justify-content: center; }
.flexed-centered  { align-items: center !important; justify-content: flex-start !important; }
.flexed-centered > .material-symbols-outlined { font-size: 10rem; color: var(--blue) !important; }

/* ============================================================================
   5. FORMULARIOS (controles, checkboxes, file inputs)
   ============================================================================ */
.form-group {
  margin-bottom: 1rem;
}

label {
  color: var(--sc-label);
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
  display: inline-block;
}

/* Etiquetas obligatorias: antes iban en azul-negrita (look viejo); las dejamos
   en el color de etiqueta y solo el asterisco .req queda en rojo. */
label b.blue,
label .blue {
  color: var(--sc-label) !important;
  font-weight: 600;
}

.form-control {
  display: block;
  width: 100%;
  height: var(--sc-field-h);
  padding: 0 0.9rem;
  font-size: 1rem;
  color: var(--sc-text);
  background-color: #fff;
  border: 1.5px solid var(--sc-border);
  border-radius: var(--sc-radius-sm);
  box-shadow: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.form-control:hover:not(:disabled):not([readonly]) {
  border-color: var(--light-blue);
}

.form-control:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--hover-light-blue);
}

.form-control::placeholder { color: #9aa3b2; }

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--sc-surface);
  color: var(--very-light-black);
  cursor: not-allowed;
}

/* Selects: quitamos el caret nativo y ponemos uno propio en azul */
select.form-control {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234080e9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1rem;
}

/* --- Checkbox de confirmación --- */
.form-check { position: relative; }
.form-check-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-weight: 400;
}
.form-check-input { width: auto; margin-right: 0.5rem; }
.form-check-sign .check { display: inline-block; }

/* --- File input personalizado --- */
.custom-file-input,
.steptwo-invisible {
  height: 0 !important;
  width: 0;
  opacity: 0;
  position: absolute;
  display: none;
}

.custom-file-label,
.steptwo-csf-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 5.5rem;
  padding: 1rem;
  text-align: center;
  color: var(--tainted-blue) !important;
  background: var(--comfortable-blue);
  border: 1.5px dashed var(--light-blue);
  border-radius: var(--sc-radius-sm) !important;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.custom-file-label:hover,
.steptwo-csf-label:hover { background: var(--hover-light-blue); border-color: var(--blue); }
.custom-file-label .material-symbols-outlined,
.steptwo-csf-label .material-symbols-outlined { font-size: 2rem !important; color: var(--blue); }
.sc-upload-title { font-weight: 600; font-size: 0.98rem; }
.sc-upload-hint { font-size: 0.82rem; color: var(--very-light-black); }

/* ============================================================================
   6. BOTONES
   ============================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1.4rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  border: none;
  border-radius: var(--sc-radius-sm);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 3px 10px rgba(64, 128, 233, 0.35);
}
.btn-primary:hover { background: var(--dark-blue); }

.btn-danger {
  background: var(--red);
  color: #fff;
  box-shadow: 0 3px 10px rgba(255, 75, 92, 0.3);
}
.btn-danger:hover { background: var(--dark-red); }

.btn-link {
  background: transparent;
  box-shadow: none;
  padding: 0.3rem 0.5rem;
}
.btn-link:hover { transform: none; }

.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.9rem; }

/* ============================================================================
   7. ICONOS
   ============================================================================ */
.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  vertical-align: middle;
  line-height: 1;
  user-select: none;
}

/* ============================================================================
   8. BLOQUE PROPIO DEL REGISTRO
   ============================================================================ */

/* --- Convocatoria --- */
.convocatoria-element {
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  transition: 0.6s;
}
.convocatoria-element h4 { font-size: 1.5rem !important; font-weight: 400; margin: 1.5rem 0; }
.convocatoria-element ul { display: contents; list-style: none; }
.convocatoria-element ul li { width: 100%; margin: 0.3rem 0; user-select: none; }
.convocatoria-element ul li input { margin-right: 0.5rem; }
.convocatoria-element ul li label {
  width: 100%;
  margin: 0 !important;
  padding: 1rem;
  border-radius: var(--sc-radius-sm);
  box-shadow: var(--sc-shadow);
  transition: 0.25s ease;
}
.convocatoria-element ul li label:hover {
  background-color: var(--hover-blue);
  transform: scale(1.02);
}
.convocatoria-element ul li label .conv-opt-text { color: var(--opacity-black); }

.convocatoria-requeriments {
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  padding: 0.5rem 0;
}
.convocatoria-requeriments h3 { font-size: 1.5rem; font-weight: 400; }
.convocatoria-requeriments ul li { font-size: 1.15rem; font-weight: 400; margin: 0.7rem 0; }

/* --- Requisitos: tarjetas por categoría (RequirementsComponent) --- */
.req-intro {
  width: 100%;
  margin: 0 0 1rem;
  color: var(--light-black);
  font-size: 1.02rem;
}
.req-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  background: rgba(44, 108, 176, 0.07);
  border-left: 3px solid var(--sc-primary, #2c6cb0);
  border-radius: 6px;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--light-black);
}
.req-note .material-symbols-outlined {
  font-size: 1.25rem !important;
  color: var(--sc-primary, #2c6cb0);
  flex-shrink: 0;
}
.req-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1rem;
  width: 100%;
  margin-bottom: 1.25rem;
}
.req-card {
  padding: 1.1rem 1.25rem;
  background: rgba(247, 249, 252, 0.38);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid #e9ecf2;
  border-radius: var(--sc-radius);
}
.req-card__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid #e6e9f0;
  color: var(--tainted-dark-blue);
  font-weight: 700;
  font-size: 1.05rem;
}
.req-card__head .material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-size: 1.2rem !important;
  color: var(--blue);
  background: var(--comfortable-blue);
  border-radius: 0.5rem;
}
.req-card ul { list-style: none; margin: 0; padding: 0; }
.req-card li {
  position: relative;
  margin: 0.5rem 0;
  padding-left: 1.5rem;
  color: var(--opacity-black);
  font-size: 0.97rem;
  line-height: 1.45;
}
.req-card li::before {
  content: "\2713";          /* ✓ */
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--green);
}
.req-card li.req-item--required::before {
  content: "\0021";          /* ! */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  top: 0.1rem;
  font-size: 0.8rem;
  color: #fff;
  background: var(--red);
  border-radius: 50%;
}
.req-card li a { color: var(--tainted-blue); font-weight: 600; }
.req-badge {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--dark-red);
  background: var(--shadow-red);
  border-radius: 999px;
  vertical-align: middle;
}
.req-opt { color: var(--very-light-black); font-style: italic; }
.req-manual { width: 100%; margin: 0 0 1.25rem; }
.req-manual a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: var(--comfortable-blue);
  border: 1px solid var(--very-light-blue);
  border-radius: var(--sc-radius-sm);
  color: var(--tainted-blue);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease;
}
.req-manual a:hover { background: var(--hover-light-blue); }
.req-manual .material-symbols-outlined { font-size: 1.3rem !important; }
.req-cta {
  width: 100%;
  max-width: 26rem;
  height: 3.3rem;
  margin: 0.5rem auto 0;
  font-size: 1.05rem;
  font-weight: 600;
}

/* Aviso IMPORTANTE destacado + casilla de confirmación */
.req-important {
  width: 100%;
  margin: 0.5rem 0 1rem;
  background: #fff;
  border: 1.5px solid var(--red);
  border-radius: var(--sc-radius);
  overflow: hidden;
  animation: reqGlow 2.4s ease-in-out infinite;
}
@keyframes reqGlow {
  0%, 100% { box-shadow: 0 4px 14px rgba(255, 75, 92, 0.18); }
  50%      { box-shadow: 0 4px 22px rgba(255, 75, 92, 0.40); }
}
.req-important__head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.25rem;
  background: var(--red);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.req-important__head .material-symbols-outlined { font-size: 1.5rem !important; }
.req-important__body { padding: 1rem 1.25rem; }
.req-important__body p { margin: 0 0 0.65rem; color: var(--opacity-black); font-size: 1.02rem; line-height: 1.55; }
.req-important__body p:last-child { margin-bottom: 0; }
.req-important__body b { color: var(--dark-red); }

.req-ack {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  width: 100%;
  margin: 0 0 1.25rem;
  padding: 0.9rem 1.1rem;
  background: var(--shadow-red);
  border: 1px solid var(--shadow-forter-red);
  border-radius: var(--sc-radius-sm);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--opacity-black);
}
.req-ack input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1rem;
  accent-color: var(--red);
  cursor: pointer;
}
.req-ack b { color: var(--dark-red); }

.validate-mail {
  background-color: var(--blue);
  color: #fff;
  padding: 0.4rem 1rem;
  border-radius: var(--sc-radius-sm);
}

/* --- Hero de validación de correo (MultiConsejosComponent) --- */
.mail-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 30rem;
  margin: 1.5rem auto;
  padding: 2.25rem 1.75rem;
  background: rgba(247, 249, 252, 0.38);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid #e9ecf2;
  border-radius: var(--sc-radius);
}
.mail-hero__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  margin-bottom: 1.1rem;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--dark-blue));
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(64, 128, 233, 0.35);
}
.mail-hero__icon .material-symbols-outlined { font-size: 2.5rem !important; }
.mail-hero__title {
  margin: 0 0 0.45rem;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--tainted-dark-blue);
}
.mail-hero__subtitle {
  margin: 0 0 1.5rem;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--light-black);
}
.mail-hero__field {
  width: 100%;
  margin-bottom: 1.25rem;
  text-align: left;
}
.mail-hero__field label { display: block; }
.mail-hero__note {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  line-height: 1.35;
  color: #6b7280;
}
.mail-hero__note .material-symbols-outlined {
  font-size: 1.1rem !important;
  color: var(--sc-primary, #2c6cb0);
  flex-shrink: 0;
}
.mail-hero__btn {
  width: 100%;
  height: 3.3rem;
  font-size: 1.05rem;
  font-weight: 600;
}

/* --- Consejos asociados / cuenta ya registrada (MultiConsejosComponent) --- */
.assoc {
  width: 100%;
  max-width: 40rem;
  margin: 1.25rem auto 0;
  background: rgba(247, 249, 252, 0.38);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid #e9ecf2;
  border-radius: var(--sc-radius);
  overflow: hidden;
}
.assoc__banner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.25rem;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
}
.assoc__banner .material-symbols-outlined { font-size: 1.5rem !important; flex-shrink: 0; }
.assoc__banner--info    { background: linear-gradient(120deg, var(--blue), var(--dark-blue)); }
.assoc__banner--warning { background: linear-gradient(120deg, var(--red), var(--dark-red)); }
.assoc__consejos { list-style: none; margin: 0; padding: 1rem 1.25rem 0.5rem; }
.assoc__consejos li {
  position: relative;
  margin-bottom: 0.5rem;
  padding: 0.55rem 0.85rem 0.55rem 2rem;
  background: var(--comfortable-blue);
  border: 1px solid var(--very-light-blue);
  border-radius: var(--sc-radius-sm);
  color: var(--tainted-dark-blue);
  font-weight: 600;
}
.assoc__consejos li::before {
  content: "\2713";
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--blue);
  font-weight: 700;
}
.assoc__message { margin: 0; padding: 0.75rem 1.25rem 1rem; color: var(--light-black); line-height: 1.5; }
.assoc__message b { color: var(--dark-red); }
.assoc__contacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem;
  padding: 0 1.25rem 1.25rem;
}
.assoc__card {
  padding: 0.9rem 1rem;
  background: #fff;
  border: 1px solid #eef1f6;
  border-radius: var(--sc-radius-sm);
}
.assoc__card-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--tainted-dark-blue);
}
.assoc__card-head .material-symbols-outlined { font-size: 1.2rem !important; color: var(--blue); }
.assoc__card ul { list-style: none; margin: 0; padding: 0; }
.assoc__card li { margin: 0.3rem 0; font-size: 0.95rem; color: var(--opacity-black); line-height: 1.4; }
.assoc__footer { display: flex; justify-content: center; padding: 0 1.25rem 1.25rem; }
.assoc__btn { width: 100%; max-width: 24rem; height: 3.2rem; font-size: 1.05rem; font-weight: 600; }

/* --- Contenedores de paso (1-5 comparten estilo) --- */
.stepone-form,
.steptwo-form,
.stepthree-form,
.stepfour-form,
.stepfive-form,
.verificacion-form {
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}
.steptwo-form,
.stepthree-form,
.stepfour-form,
.stepfive-form { min-height: 40rem; }

.stepone-urgent { width: 100% !important; }
.stepone-complete { width: 100% !important; min-width: 100%; max-width: 100%; }

/* Botonera de cada paso */
.stepone-form-btn button,
.steptwo-form-btn button,
.stepthree-form-btn button,
.stepfour-form-btn button,
.stepfive-form-btn button {
  margin: 1rem 0 1.5rem;
  height: 3.5rem;
  font-size: 1.1rem;
  font-weight: 500;
}
.stepone-form-btn button { width: 100% !important; }

.steptwo-form-btn,
.stepthree-form-btn,
.stepfour-form-btn,
.stepfive-form-btn {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between !important;
  width: 100%;
  padding-top: 2rem !important;
}
.steptwo-form-btn button,
.stepthree-form-btn button,
.stepfour-form-btn button,
.stepfive-form-btn button { width: 49% !important; }

/* Checkbox final de confirmación */
.final-form-checker {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-start;
  width: 100% !important;
  margin: 0 !important;
  padding: 2rem;
  font-size: 1rem;
  color: #000;
}
.final-form-checker-section { top: 0; left: 0; line-height: 0 !important; }

/* Tarjeta de archivo cargado (comprobante / constancia) */
.steptwo-csf {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  width: 100% !important;
  max-width: 100% !important;
}
.td-actions,
.steptwo-td-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100% !important;
  min-height: 5.5rem;
  margin-bottom: 0.5rem;
  padding: 0.85rem 1rem;
  color: var(--tainted-green);
  background-color: var(--light-shadow-green);
  border: 1.5px solid var(--shadow-green);
  border-radius: var(--sc-radius-sm) !important;
}
.steptwo-td-actions .sc-file-ico { flex-shrink: 0; font-size: 1.8rem !important; color: var(--green); }
.steptwo-td-actions .sc-file-name { flex: 1; min-width: 0; font-weight: 600; word-break: break-all; line-height: 1.3; }
.steptwo-td-actions strong { font-size: 1rem !important; }
.steptwo-td-actions .sc-file-del { flex-shrink: 0; margin-left: auto; }
.steptwo-td-actions .sc-file-del .material-symbols-outlined { color: var(--dark-red); }

.steptwo-grandsection {
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
}

.sc-special { margin: 2rem 0 !important; }
.sc-special-title { width: 100% !important; margin-bottom: 1rem; text-align: center; }

/* Tarjeta de dirección de la institución (StepThree) */
.sc-addr {
  width: 100%;
  background: #fff;
  border: 1px solid var(--very-light-blue);
  border-radius: var(--sc-radius);
  overflow: hidden;
}
.sc-addr__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  background: var(--comfortable-blue);
  border-bottom: 1px solid var(--very-light-blue);
}
.sc-addr__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  color: #fff;
  background: var(--blue);
  border-radius: 50%;
}
.sc-addr__icon .material-symbols-outlined { font-size: 1.4rem !important; }
.sc-addr__title { font-weight: 700; color: var(--tainted-dark-blue); line-height: 1.2; }
.sc-addr__sub {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tainted-green);
}
.sc-addr__sub .material-symbols-outlined { font-size: 1rem !important; }
.sc-addr__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.6rem 1.25rem;
  padding: 1rem 1.1rem;
}
.sc-addr__row { display: flex; flex-direction: column; }
.sc-addr__label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--very-light-black);
}
.sc-addr__value { font-weight: 600; color: var(--opacity-black); }

/* --- Errores de validación --- */
.text-danger { color: var(--red); }
.text-danger strong {
  display: block;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  text-align: center;
}

/* --- Título de progreso (móvil) --- */
.title-progress {
  display: none;
  width: 85%;
  color: var(--blue);
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  text-align: start;
}

/* --- Nota colapsable (catálogos no disponibles) --- */
.collapsible-note {
  flex: 0 0 100%;
  width: 100%;
  margin: 1rem 0;
  border: 1px solid var(--shadow-forty-red);
  border-left: 4px solid var(--shadow-forter-red);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  box-shadow: var(--sc-shadow);
  box-sizing: border-box;
}
.collapsible-note > summary {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
  list-style: none;
  font-size: 1rem;
  font-weight: 600;
  color: var(--dark-red);
  background: var(--shadow-red);
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}
.collapsible-note > summary b,
.collapsible-note > summary .blue {
  color: var(--blue) !important;
  text-decoration: underline;
}
.collapsible-note > summary::-webkit-details-marker { display: none; }
.collapsible-note > summary::before {
  content: "\26A0";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.7rem;
  height: 1.7rem;
  font-size: 1rem;
  font-weight: bold;
  color: #fff;
  background: var(--shadow-forter-red);
  border-radius: 50%;
}
.collapsible-note > summary::after {
  content: "\25BC";
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.85rem;
  color: var(--shadow-forter-red);
  transition: transform 0.25s ease;
}
.collapsible-note[open] > summary::after { transform: rotate(180deg); }
.collapsible-note > summary:hover { background: var(--shadow-fort-red); }
.collapsible-note > .box,
.collapsible-note > div {
  margin: 0;
  padding: 1rem 1.25rem;
  border: none;
  border-top: 1px dashed var(--shadow-forty-red);
  background: #fff;
}

/* ============================================================================
   8.a  NOTAS, HINTS Y SECCIONES DE FORMULARIO (reutilizable en todos los pasos)
   ============================================================================ */

/* Título de sección dentro de un formulario */
.sc-section-title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  margin: 1.75rem 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid #e6e9f0;
  color: var(--tainted-dark-blue);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.sc-section-title:first-child { margin-top: 0.25rem; }
/* Complemento aclaratorio dentro del título de sección: se ve como texto de apoyo,
   no como parte del encabezado (más ligero, más pequeño y en tono atenuado). */
.sc-section-title__hint {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--red);
  letter-spacing: 0;
}
.sc-section-title .material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.1rem;
  height: 2.1rem;
  font-size: 1.25rem !important;
  color: var(--blue);
  background: var(--comfortable-blue);
  border-radius: 0.6rem;
}

/* Panel que agrupa una sección del formulario */
.sc-panel {
  width: 100%;
  margin-bottom: 1.25rem;
  padding: 1.25rem 1.25rem 0.35rem;
  background: var(--sc-surface);
  border: 1px solid #e9ecf2;
  border-radius: var(--sc-radius);
}
.sc-panel > .sc-section-title {
  margin-top: 0;
}
.sc-panel:last-of-type { margin-bottom: 0.5rem; }

/* Pasos PERSONAL, DIRECCIÓN, FORMACIÓN y CERTIFICADO: paneles translúcidos (se ve
   el logo) + secciones numeradas. La numeración es automática (CSS counter) según
   los paneles realmente renderizados, así no hay huecos si una sección condicional no aparece. */
.stepone-form,
.steptwo-form,
.stepthree-form,
.stepfive-form { counter-reset: scsec; }
.stepone-form .sc-panel,
.steptwo-form .sc-panel,
.stepthree-form .sc-panel,
.stepfive-form .sc-panel {
  background: rgba(247, 249, 252, 0.38);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.stepone-form .sc-section-title,
.steptwo-form .sc-section-title,
.stepthree-form .sc-section-title,
.stepfive-form .sc-section-title { counter-increment: scsec; }
.stepone-form .sc-section-title .material-symbols-outlined,
.steptwo-form .sc-section-title .material-symbols-outlined,
.stepthree-form .sc-section-title .material-symbols-outlined,
.stepfive-form .sc-section-title .material-symbols-outlined { display: none; }
.stepone-form .sc-section-title::before,
.steptwo-form .sc-section-title::before,
.stepthree-form .sc-section-title::before,
.stepfive-form .sc-section-title::before {
  content: counter(scsec);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.1rem;
  height: 2.1rem;
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  background: var(--blue);
  border-radius: 0.6rem;
}

/* Nota / aviso embebido en el formulario */
.sc-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: 100%;
  margin: 0.4rem 0 0.9rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--sc-radius-sm);
  font-size: 1.02rem;
  line-height: 1.5;
  text-align: justify;
}
.sc-note .material-symbols-outlined { flex-shrink: 0; margin-top: 0.1rem; font-size: 1.45rem !important; }
.sc-note b { font-weight: 700; }
.sc-note a { color: inherit; font-weight: 600; text-decoration: underline; }

.sc-note--info    { background: var(--comfortable-blue);   border-left: 4px solid var(--blue);  color: var(--tainted-dark-blue); }
.sc-note--info    .material-symbols-outlined { color: var(--blue); }
.sc-note--warning { background: var(--shadow-red);         border-left: 4px solid var(--red);   color: var(--dark-red); }
.sc-note--warning .material-symbols-outlined { color: var(--red); }
.sc-note--success { background: var(--light-shadow-green);  border-left: 4px solid var(--green); color: var(--tainted-green); }
.sc-note--success .material-symbols-outlined { color: var(--green); }
.sc-note--neutral { background: var(--very-light-gray);     border-left: 4px solid var(--shadow-gray); color: var(--light-black); }

/* Texto auxiliar bajo una etiqueta */
.sc-field-hint {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--very-light-black);
}

/* Asterisco de campo obligatorio */
.req { color: var(--red); font-weight: 700; }

/* ============================================================================
   8.b  AVISO / NOTIFICACIÓN GLOBAL (toast)
   ----------------------------------------------------------------------------
   Componente global/AlertComponent.vue. Antes tomaba su estilo de luaz/material;
   al desconectarlos del registro se quedaba sin estilo, por eso vive aquí.
   ============================================================================ */
.alert {
  position: fixed;
  top: 5%;
  right: 2%;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 22rem;
  max-width: min(92vw, 30rem);
  padding: 1rem 1.1rem;
  background-color: #fff;
  border: 1px solid var(--shadow-gray);
  border-left: 5px solid var(--shadow-gray);
  border-radius: var(--sc-radius-sm);
  box-shadow: var(--sc-shadow-md);
}

.alert .alert-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1.7rem !important;
  color: #fff;
  background-color: var(--shadow-gray);
  border-radius: 50%;
}

.alert-message {
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}
.alert-message h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--opacity-black);
}
.alert-message p {
  margin: 0.1rem 0 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--light-black);
  word-break: break-word;
}

.alert .close {
  flex-shrink: 0;
  align-self: flex-start;
  cursor: pointer;
  user-select: none;
  font-size: 1.5rem !important;
  color: var(--very-light-black);
  transition: transform 0.2s ease, color 0.2s ease;
}
.alert .close:hover { transform: scale(1.2); color: var(--opacity-black); }

/* Variantes */
.alert-danger  { border-color: var(--shadow-forter-red); border-left-color: var(--red); background-color: var(--shadow-red); }
.alert-danger  .alert-icon { background-color: var(--red); }
.alert-success { border-color: var(--shadow-green);      border-left-color: var(--green); background-color: var(--light-shadow-green); }
.alert-success .alert-icon { background-color: var(--green); }
.alert-info    { border-color: var(--light-blue);        border-left-color: var(--blue); background-color: var(--hover-light-blue); }
.alert-info    .alert-icon { background-color: var(--blue); }

@media (max-width: 600px) {
  .alert {
    top: auto;
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
    min-width: 0;
    max-width: none;
  }
}

/* ============================================================================
   8.c  COMPONENTES DEL REGISTRO (migrado desde <style scoped>)
   ============================================================================ */

/* --- Dos columnas (compuerta de verificación) --- */
.sc-cols-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  width: 100%;
}
.sc-cols-2 > .sc-panel {
  margin-bottom: 0;
  background: rgba(247, 249, 252, 0.38);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
@media (max-width: 768px) {
  .sc-cols-2 { grid-template-columns: 1fr; }
}

/* --- Compuerta de verificación: barra de acciones --- */
.sc-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 2rem;
}
.sc-gate-actions .btn { min-width: 12rem; height: 3.2rem; font-size: 1.05rem; font-weight: 500; }
.sc-gate-recheck { min-width: auto !important; }
@media (max-width: 600px) {
  .sc-gate-actions { flex-direction: column; }
  .sc-gate-actions .btn { width: 100%; }
}

/* --- Detalle de convocatoria seleccionada (ficha) --- */
.conv-detail {
  width: 100%;
  margin-top: 1.5rem;
  background: #fff;
  border: 1px solid #e9ecf2;
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-shadow-md);
  overflow: hidden;
}
.conv-detail__head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1.1rem 1.35rem;
  background: linear-gradient(120deg, var(--blue), var(--dark-blue));
  color: #fff;
}
.conv-detail__head .material-symbols-outlined { font-size: 1.6rem !important; flex-shrink: 0; }
.conv-detail__title { margin: 0; flex: 1; font-size: 1.3rem !important; font-weight: 700; color: #fff; }
.conv-detail__badge {
  flex-shrink: 0;
  padding: 0.25rem 0.7rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.conv-detail__badge--open    { background: var(--light-shadow-green); color: var(--tainted-green); }
.conv-detail__badge--pending { background: var(--light-orange);       color: var(--tainted-orange); }
.conv-detail__badge--closed  { background: var(--very-light-gray);    color: var(--very-light-black); }
.conv-detail__body { padding: 1.35rem; }
.conv-detail__desc { margin: 0 0 1.1rem; color: var(--light-black); font-size: 1.02rem; line-height: 1.55; text-align: justify; }
.conv-detail__rows { display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 1.1rem; }
.conv-detail__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  background: var(--sc-surface);
  border: 1px solid #eef1f6;
  border-radius: var(--sc-radius-sm);
}
.conv-detail__row .material-symbols-outlined { flex-shrink: 0; font-size: 1.35rem !important; color: var(--blue); }
.conv-detail__label { flex-shrink: 0; width: 9.5rem; font-weight: 600; color: var(--tainted-dark-blue); }
.conv-detail__value { color: var(--opacity-black); font-weight: 500; }
.conv-detail__manual {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: var(--comfortable-blue);
  border: 1px solid var(--very-light-blue);
  border-radius: var(--sc-radius-sm);
  color: var(--tainted-blue);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease;
}
.conv-detail__manual:hover { background: var(--hover-light-blue); }
.conv-detail__manual .material-symbols-outlined { font-size: 1.3rem !important; }
.conv-detail__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.35rem;
  border-top: 1px solid #eef1f6;
  background: var(--sc-surface);
}
.conv-detail__check { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1rem; color: var(--light-black); cursor: pointer; }
.conv-detail__cta { width: 100%; max-width: 28rem; height: 3.4rem; font-size: 1.05rem; font-weight: 600; }
.conv-detail .sc-note { margin: 0 1.35rem; width: auto; }
@media (max-width: 600px) {
  .conv-detail__row { flex-wrap: wrap; }
  .conv-detail__label { width: auto; }
}

/* --- Tarjetas de convocatoria (recertificación por currículum) --- */
.conv-cv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
  gap: 1rem;
  margin: 1rem 0 0.5rem;
  width: 100%;
}
@media (max-width: 540px) { .conv-cv-grid { grid-template-columns: 1fr; } }
.conv-cv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.25rem;
  border: 2px solid var(--very-light-gray);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
  margin: 0;
}
.conv-cv-card:hover { border-color: var(--light-blue); box-shadow: 0 4px 12px rgba(64, 128, 233, 0.12); transform: translateY(-1px); }
.conv-cv-card--selected { border-color: var(--blue); background: var(--comfortable-blue); box-shadow: 0 4px 14px rgba(64, 128, 233, 0.18); }
.conv-cv-card__radio { position: absolute; opacity: 0; pointer-events: none; }
.conv-cv-card__header { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; margin-bottom: .6rem; }
.conv-cv-card__title { font-size: 1.05rem; font-weight: 600; color: var(--blue); line-height: 1.3; }
.conv-cv-card__badge {
  flex-shrink: 0;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: .25rem .6rem;
  border-radius: 999px;
  letter-spacing: .3px;
}
.conv-cv-card__badge--open    { background: var(--light-shadow-green); color: var(--tainted-green); }
.conv-cv-card__badge--pending { background: var(--light-orange);       color: var(--tainted-orange); }
.conv-cv-card__badge--closed  { background: var(--very-light-gray);    color: var(--very-light-black); }
.conv-cv-card__body { display: flex; flex-direction: column; gap: .4rem; font-size: .95rem; color: var(--light-black); }
.conv-cv-card__row { display: flex; align-items: center; gap: .5rem; }
.conv-cv-card__row .material-symbols-outlined { font-size: 1.1rem; color: var(--light-blue); }
.conv-cv-card__row--danger,
.conv-cv-card__row--danger .material-symbols-outlined { color: var(--dark-red); }
.conv-cv-card__indicaciones { margin-top: .35rem; padding-top: .6rem; border-top: 1px dashed var(--very-light-gray); }
.conv-cv-card__indicaciones-title { display: block; margin-bottom: .25rem; font-size: .9rem; }
.conv-cv-card__indicaciones p { margin: 0; font-size: .92rem; color: var(--light-black); text-align: justify; line-height: 1.4; }

/* --- Shell del registro: progressbar (FatherComponent) --- */
.progressbar {
  position: relative;
  display: flex;
  justify-content: space-between;
  counter-reset: step;
  margin: 2rem auto 4rem;
  width: 100%;
  max-width: 760px;
}
.progressbar::before,
.progress {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 6px;
  width: 100%;
  background-color: var(--hover-gray);
  border-radius: 999px;
  z-index: 1;
}
.progress { background: linear-gradient(60deg, var(--light-blue), var(--blue)); width: 0%; transition: 0.4s; }
.progress-step {
  width: 3rem;
  height: 3rem;
  background-color: var(--hover-gray);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: var(--sc-shadow);
  z-index: 2;
  transition: background-color 0.3s ease;
}
.progress-step::before {
  counter-increment: step;
  content: counter(step);
  font-size: 1rem;
  color: white;
  font-weight: 500;
  text-align: center;
}
.progress-step::after {
  content: attr(data-title);
  position: absolute;
  top: calc(100% + 0.5rem);
  font-size: 0.95rem;
  color: var(--light-black);
  text-align: center;
  font-weight: 500;
  white-space: nowrap;
}
.progress-step-active { background: var(--blue); color: #f3f3f3; }
@media (max-width: 768px) {
  .progressbar { margin: 1.5rem auto 2rem; }
  .progress-step { width: 2.4rem; height: 2.4rem; }
  .progress-step::after { display: none; }
}

/* --- Modal de bienvenida (FatherComponent) --- */
.modal-overlay {
  position: fixed !important;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000 !important;
  animation: successFadeIn .3s ease-out both;
}
.modal-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow: hidden;
  background-color: #fff;
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-shadow-md);
  animation: zoomFadeIn .4s ease-out both;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.5rem 1.25rem;
  text-align: center;
  color: #fff;
  background: linear-gradient(60deg, var(--blue), var(--dark-blue));
}
.modal-header .material-symbols-outlined { font-size: 2rem !important; }
.modal-header h3 { margin: 0; width: auto; font-size: 1.8rem; font-weight: 700; color: #fff !important; }
.modal-body {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 1.5rem;
  overflow-y: auto;
}
.modal-body h3 { margin: 0 0 1rem; font-size: 1.5rem; color: var(--opacity-black); }
.modal-body p { width: 100%; margin: 0; font-size: 1.1rem; line-height: 1.55; text-align: justify !important; color: var(--light-black); }
.modal-manual-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.25rem;
  padding: .6rem 1rem;
  background: var(--comfortable-blue);
  border: 1px solid var(--very-light-blue);
  border-radius: var(--sc-radius-sm);
  color: var(--tainted-blue);
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease;
}
.modal-manual-link:hover { background: var(--hover-light-blue); }
.modal-manual-link .material-symbols-outlined { font-size: 1.3rem !important; }
.modal-content .stepone-form-btn { padding: 0 1.5rem 1.5rem; }

@keyframes zoomFadeIn {
  0%   { opacity: 0; transform: translateY(2rem) scale(.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Pantalla de cuenta creada (FatherComponent) --- */
.success-screen { display: flex; justify-content: center; padding: 0; animation: successFadeIn .5s ease-out both; }
@keyframes successFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.success-screen__card { width: 100%; max-width: none; background: transparent; border-radius: 0; box-shadow: none; overflow: visible; }
.success-screen__heading { text-align: center; padding: 2rem 1.5rem 1.25rem; border-bottom: 1px solid var(--very-light-gray); }
.success-screen__title { margin: 0; font-size: 2.25rem; font-weight: 700; color: var(--blue); }
.success-screen__subtitle { margin: .5rem 0 0; font-size: 1.35rem; color: var(--light-black); }
.success-screen__alert {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin: 1.5rem 0 0;
  padding: 1.5rem 1.75rem;
  background: linear-gradient(135deg, rgba(224, 112, 14, 0.06) 0%, rgba(224, 112, 14, 0.12) 100%);
  border: 1px solid var(--light-orange);
  border-left: 6px solid var(--orange);
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(224, 112, 14, 0.15);
}
.success-screen__alert-icon {
  flex-shrink: 0;
  width: 4rem; height: 4rem;
  background: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  animation: alertPulse 2.4s ease-in-out infinite;
}
@keyframes alertPulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 0 0 0 rgba(224, 112, 14, 0.45); }
  50%      { box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 0 0 12px rgba(224, 112, 14, 0); }
}
.success-screen__alert-icon .material-symbols-outlined { font-size: 2.25rem !important; color: var(--red); }
.success-screen__alert-body { flex: 1; }
.success-screen__alert-title { margin: 0 0 .5rem; font-size: 1.5rem; color: var(--tainted-orange); font-weight: 700; }
.success-screen__alert-body p { margin: .5rem 0; line-height: 1.55; font-size: 1.1rem; color: var(--opacity-black); }
.success-screen__countdown {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: 1rem 0;
  padding: 1rem 1.1rem;
  background: var(--red);
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(255, 75, 92, 0.3);
}
.success-screen__countdown .material-symbols-outlined { font-size: 2.2rem !important; flex-shrink: 0; }
.success-screen__countdown div { display: flex; flex-direction: column; line-height: 1.3; }
.success-screen__countdown b { font-size: 1.2rem; }
.success-screen__countdown small { opacity: 0.92; font-size: 1rem; }
.success-screen__alert-extra { font-size: 1.05rem; color: var(--opacity-black); }
.success-screen__horario {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .65rem;
  padding: .5rem 1rem;
  background: #fff;
  border: 1px solid var(--orange);
  border-radius: 6px;
  color: var(--tainted-orange);
  font-size: 1.05rem;
}
.success-screen__horario .material-symbols-outlined { font-size: 1.3rem !important; color: var(--orange); }
.success-screen__timeline { padding: 1.75rem 0 .5rem; }
.success-screen__timeline-title { margin: 0 0 1.25rem; color: var(--blue); font-weight: 700; font-size: 1.45rem; }
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 1.4rem;
  top: 1rem;
  bottom: 1rem;
  width: 2px;
  background: linear-gradient(180deg, var(--blue) 0%, var(--very-light-blue) 100%);
}
.timeline__item { display: flex; align-items: flex-start; gap: 1.15rem; padding: .85rem 0; position: relative; }
.timeline__marker {
  flex-shrink: 0;
  width: 2.8rem; height: 2.8rem;
  background: #fff;
  border: 2px solid var(--very-light-blue);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--light-blue);
  z-index: 1;
  transition: all .25s ease;
}
.timeline__item--active .timeline__marker { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 0 0 5px rgba(64, 128, 233, 0.18); }
.timeline__content { padding: .25rem 0; }
.timeline__content h4 { margin: 0 0 .25rem; font-size: 1.2rem; color: var(--opacity-black); font-weight: 700; }
.timeline__content p { margin: 0; color: var(--very-light-black); font-size: 1.05rem; line-height: 1.5; }
.success-screen__temporal {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  margin: 1.25rem 0 0;
  padding: 1.25rem 1.4rem;
  background: var(--shadow-red);
  border-left: 4px solid var(--red);
  border-radius: 8px;
}
.success-screen__temporal .material-symbols-outlined { color: var(--red); flex-shrink: 0; font-size: 1.6rem !important; }
.success-screen__temporal p { margin: 0; color: var(--dark-red); line-height: 1.5; font-size: 1.05rem; }
.success-screen__footer { text-align: center; padding: 1.75rem 0 1.5rem; margin-top: 1.25rem; border-top: 1px solid var(--very-light-gray); }
.success-screen__footer h4 { margin: 0; color: var(--blue); font-weight: 700; font-size: 1.4rem; }
.success-screen__footer small { display: block; margin-top: .5rem; color: var(--very-light-black); font-size: 1.05rem; }
@media (max-width: 600px) {
  .success-screen__alert,
  .success-screen__temporal { flex-direction: column; align-items: flex-start; }
  .success-screen__title { font-size: 1.35rem; }
}

/* --- Ayuda del certificado: ícono + modal con template del reverso (StepFive) --- */
.cert-quiz {
  cursor: pointer;
  margin-left: 0.25rem;
  font-size: 1.25rem !important;
  color: var(--blue);
  vertical-align: middle;
  transition: color 0.2s ease, transform 0.2s ease;
}
.cert-quiz:hover { color: var(--dark-blue); transform: scale(1.15); }

.cert-help {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.cert-help__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.cert-help__modal {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 30rem;
  max-height: 90vh;
  overflow: hidden;
  background: #fff;
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-shadow-md);
  animation: zoomFadeIn 0.3s ease-out both;
}
.cert-help__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  color: #fff;
  background: linear-gradient(120deg, var(--blue), var(--dark-blue));
}
.cert-help__header h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1.15rem; font-weight: 700; color: #fff; }
.cert-help__header .material-symbols-outlined { font-size: 1.4rem !important; }
.cert-help__close { display: inline-flex; background: transparent; border: none; color: #fff; cursor: pointer; }
.cert-help__close .material-symbols-outlined { font-size: 1.5rem !important; }
.cert-help__body { padding: 1.25rem; overflow-y: auto; }
.cert-help__hint { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; font-size: 0.95rem; color: var(--light-black); }
.cert-help__hint .material-symbols-outlined { font-size: 1.2rem !important; color: var(--blue); }

.cert-doc {
  overflow: hidden;
  background: #fcfdff;
  border: 2px solid var(--very-light-blue);
  border-radius: var(--sc-radius-sm);
}
.cert-doc__bar {
  padding: 0.5rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tainted-dark-blue);
  background: var(--comfortable-blue);
  border-bottom: 1px solid var(--very-light-blue);
}
.cert-doc__content { display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem; }
.cert-doc__line { display: flex; gap: 0.6rem; }
.cert-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0.55rem 0.7rem;
  background: #fff;
  border: 1.5px dashed #cfd8e6;
  border-radius: var(--sc-radius-sm);
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.cert-field__label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--very-light-black); }
.cert-field__value { font-family: monospace; letter-spacing: 0.1em; color: var(--shadow-gray); }
.cert-field--active {
  border-style: solid;
  border-color: var(--blue);
  background: var(--hover-blue);
  animation: certPulse 1.6s ease-in-out infinite;
}
@keyframes certPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(64, 128, 233, 0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(64, 128, 233, 0.30); }
}
.cert-field--active .cert-field__label { color: var(--blue); }
.cert-doc__foot {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px dashed #cfd8e6;
  font-size: 0.78rem;
  color: var(--shadow-gray);
}
.cert-help__caption {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: var(--comfortable-blue);
  border-left: 4px solid var(--blue);
  border-radius: var(--sc-radius-sm);
}
.cert-help__caption .material-symbols-outlined { flex-shrink: 0; font-size: 1.4rem !important; color: var(--blue); }
.cert-help__caption b { color: var(--tainted-dark-blue); }
.cert-help__caption p { margin: 0.15rem 0 0; font-size: 0.92rem; line-height: 1.4; color: var(--light-black); }
.cert-help__footer { display: flex; justify-content: flex-end; padding: 0.85rem 1.25rem; border-top: 1px solid var(--very-light-gray); }
.cert-help__footer .btn { min-width: 8rem; }

/* ===== Maqueta realista del certificado (CertHelpComponent) ===================
   Namespace .cmk-* propio para no alterar la maqueta esquemática del manual,
   que sigue usando .cert-field / .cert-doc__content en su estilo de bloque.    */
.cmk {
  position: relative;
  padding: 1.1rem 1rem;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--light-black);
}

/* --- Campo rellenable en línea: subrayado punteado + monospace --- */
.cmk-field {
  display: inline-block;
  min-width: 2.2rem;
  padding: 0 0.25rem;
  font-family: monospace;
  letter-spacing: 0.04em;
  color: var(--shadow-gray);
  text-align: center;
  border-bottom: 1px dashed #cfd8e6;
  border-radius: 3px 3px 0 0;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}
.cmk-field--wide { min-width: 8rem; }
.cmk-field--active {
  color: var(--blue);
  border-bottom-color: var(--blue);
  background: var(--hover-blue);
  animation: certPulse 1.6s ease-in-out infinite;
}

/* ============================= FRENTE ============================= */
.cmk-front { text-align: center; }
.cmk-front__consejo {
  max-width: 22rem;
  margin: 0 auto 0.35rem;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  line-height: 1.2;
  overflow-wrap: break-word;
  word-wrap: break-word;
  color: var(--tainted-dark-blue);
}
.cmk-tiny {
  font-size: 0.72rem;
  color: var(--very-light-black);
  font-style: italic;
}
.cmk-front__cert {
  margin: 0.2rem 0;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.35em;
  color: var(--shadow-gray);
}
.cmk-front__esp {
  max-width: 22rem;
  margin: 0.15rem auto;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  overflow-wrap: break-word;
  word-wrap: break-word;
  color: var(--light-black);
}
.cmk-front__name {
  margin: 0.2rem 0 0.4rem;
  font-style: italic;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--tainted-dark-blue);
}
.cmk-front__comp {
  max-width: 24rem;
  margin: 0 auto 0.6rem;
  font-size: 0.72rem;
  color: var(--very-light-black);
}
.cmk-front__vig {
  margin: 0.4rem 0 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #a57701;
}
.cmk-front__vig .cmk-field { color: #a57701; }
.cmk-front__vig .cmk-field--active { color: var(--blue); }

/* --- Bloques de firma: al resaltar se enmarca todo el bloque --- */
.cmk-front__signs {
  display: flex;
  gap: 1rem;
  margin-top: 0.4rem;
}
.cmk-sig {
  flex: 1;
  padding: 0.45rem 0.5rem 0.55rem;
  border: 1.5px solid transparent;
  border-radius: var(--sc-radius-sm);
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.cmk-sig__line {
  width: 80%;
  margin: 0 auto 0.3rem;
  border-top: 1px solid var(--shadow-gray);
}
.cmk-sig__name {
  font-style: italic;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--light-black);
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.cmk-sig__role {
  font-size: 0.68rem;
  font-style: italic;
  color: var(--very-light-black);
}
.cmk-sig--active {
  border-color: var(--blue);
  background: var(--hover-blue);
  animation: certPulse 1.6s ease-in-out infinite;
}
.cmk-sig--active .cmk-sig__name,
.cmk-sig--active .cmk-sig__role { color: var(--blue); }

.cmk-front__norm {
  max-width: 18rem;
  margin: 1rem auto 0;
}

/* ============================= REVERSO ============================= */
.cmk-back { text-align: left; }
.cmk-back__line {
  margin: 0 0 0.55rem;
  font-size: 0.82rem;
  color: var(--light-black);
}
.cmk-back__sign {
  margin-top: 1.2rem;
  text-align: center;
}
.cmk-back__sign-role {
  margin-top: 0.3rem;
  font-size: 0.7rem;
  font-style: italic;
  color: var(--very-light-black);
}

@media (max-width: 480px) {
  .cmk-front__signs { flex-direction: column; gap: 0.6rem; }
}

/* --- Pantalla PROCESANDO: validando (spinner) / error (FatherComponent) --- */
.proc {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 2.5rem 0;
}
.proc__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 28rem;
}
.proc__spinner {
  width: 4rem;
  height: 4rem;
  margin-bottom: 1.5rem;
  border: 5px solid var(--very-light-blue);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: procSpin 0.8s linear infinite;
}
@keyframes procSpin { to { transform: rotate(360deg); } }
.proc__title { margin: 0 0 0.5rem; font-size: 1.6rem; font-weight: 700; color: var(--blue); }
.proc__text { margin: 0; font-size: 1.05rem; line-height: 1.5; color: var(--light-black); }

.proc__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 34rem;
  padding: 2rem 1.75rem;
  background: #fff;
  border: 1px solid var(--shadow-forter-red);
  border-top: 5px solid var(--red);
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-shadow-md);
}
.proc__error-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1rem;
  color: #fff;
  background: var(--red);
  border-radius: 50%;
}
.proc__error-icon .material-symbols-outlined { font-size: 2.2rem !important; }
.proc__error-title { margin: 0 0 0.75rem; font-size: 1.5rem; font-weight: 700; color: var(--dark-red); }
.proc__error p { margin: 0 0 0.65rem; font-size: 1.02rem; line-height: 1.55; color: var(--light-black); }
.proc__error-code {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin: 0.35rem 0 0.25rem;
  padding: 0.7rem 1rem;
  text-align: left;
  font-size: 0.92rem;
  color: var(--dark-red);
  background: var(--shadow-red);
  border: 1px solid var(--shadow-forter-red);
  border-radius: var(--sc-radius-sm);
  word-break: break-word;
}
.proc__error-code .material-symbols-outlined { flex-shrink: 0; font-size: 1.2rem !important; color: var(--red); }
.proc__btn { margin-top: 0.75rem; min-width: 14rem; height: 3.2rem; font-size: 1.05rem; font-weight: 600; }

/* ============================================================================
   9. SCROLLBAR
   ============================================================================ */
*::-webkit-scrollbar { width: 10px; }
*::-webkit-scrollbar-track { background: var(--very-light-gray); }
*::-webkit-scrollbar-thumb { background: var(--shadow-gray); border-radius: 5px; }
*::-webkit-scrollbar-thumb:hover { background: var(--very-light-black); }

/* ============================================================================
   10. RESPONSIVE
   ============================================================================ */
@media (max-width: 1500px) { .card-initial { width: 85%; } }
@media (max-width: 1200px) { .card-initial { width: 92%; } }

@media (max-width: 950px) {
  .container { padding: 1rem 0.25rem; }
  .card-initial { width: 96%; }
  .card-initial-title { font-size: 1.4rem !important; }
  .card-initial-body { padding: 1.25rem 1rem 1rem !important; }
  .card-header-primary { margin: -1.25rem 0.75rem 0; }
  .convocatoria-element ul li label { padding: 0.85rem !important; }
}

/* A partir de tablet/móvil: una sola columna y controles a lo ancho */
@media (max-width: 768px) {
  .title-progress { display: flex !important; }
  .progressbar { margin: 1.5rem 0 2.5rem; }

  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-6,
  .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .steptwo-form-btn, .stepthree-form-btn, .stepfour-form-btn, .stepfive-form-btn {
    flex-flow: column-reverse nowrap;
    gap: 0.5rem;
  }
  .steptwo-form-btn button, .stepthree-form-btn button,
  .stepfour-form-btn button, .stepfive-form-btn button { width: 100% !important; }

  .sc-watermark { background-size: 90%; opacity: 0.09; }
}

@media (max-width: 600px) {
  .card-initial { width: 100%; }
  .card-initial-body { padding: 1rem 0.85rem !important; }
  .card-header-primary { margin: -1rem 0.5rem 0; padding: 1.1rem 1rem; }
  .card-initial-title { font-size: 1.2rem !important; }
  .form-control { font-size: 1rem; }
  .sc-section-title { font-size: 1.05rem; }
  .convocatoria-requeriments h3 { font-size: 1.1rem !important; }
}

/* ============================================================================
   11. MANUAL DE REGISTRO (página auth.manual)
   ============================================================================ */
body.manual {
  margin: 0;
  background: var(--background-gray);
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--sc-text);
}
.manual__topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  background: #fff;
  border-bottom: 1px solid #e9ecf2;
  box-shadow: var(--sc-shadow);
}
.manual__wrap {
  max-width: 920px;
  margin: 1.5rem auto 3rem;
  padding: 2.5rem;
  background: #fff;
  border: 1px solid #e9ecf2;
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-shadow-md);
}
.manual__hero {
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--very-light-blue);
}
.manual__eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue);
}
.manual__title { margin: 0 0 0.5rem; font-size: 1.9rem; font-weight: 700; color: var(--tainted-dark-blue); line-height: 1.2; }
.manual__lead { margin: 0; font-size: 1.05rem; line-height: 1.55; color: var(--light-black); }

.manual-section { margin: 2rem 0; }
.manual-section__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid #e6e9f0;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--blue);
}
.manual-section__title .material-symbols-outlined {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.3rem; height: 2.3rem;
  font-size: 1.35rem !important;
  color: var(--blue);
  background: var(--comfortable-blue);
  border-radius: 0.6rem;
}
.manual-section__intro { margin: 0 0 1rem; color: var(--light-black); line-height: 1.55; }

.manual-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.manual-chip {
  padding: 0.4rem 0.9rem;
  font-weight: 600;
  color: var(--tainted-dark-blue);
  background: var(--comfortable-blue);
  border: 1px solid var(--very-light-blue);
  border-radius: 999px;
}

.manual-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.manual-cards .manual-card:only-child { grid-column: 1 / -1; }
@media (max-width: 600px) { .manual-cards { grid-template-columns: 1fr; } }
.manual-card {
  padding: 1.1rem 1.25rem;
  background: var(--sc-surface);
  border: 1px solid #e9ecf2;
  border-left: 4px solid var(--blue);
  border-radius: var(--sc-radius-sm);
}
.manual-card h3 { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.35rem; font-size: 1.1rem; color: var(--tainted-dark-blue); }
.manual-card h3 .material-symbols-outlined { font-size: 1.25rem !important; color: var(--blue); }
.manual-card p { margin: 0; font-size: 0.97rem; line-height: 1.5; color: var(--light-black); }
.manual-card .manual-list { margin-top: 0.5rem; }
.manual-mail-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.85rem;
  padding: 0.5rem 1rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff !important;
  background: var(--blue);
  border-radius: var(--sc-radius-sm);
  text-decoration: none;
  transition: background 0.2s ease;
}
.manual-mail-btn:hover { background: var(--dark-blue); color: #fff !important; text-decoration: none; }
.manual-mail-btn .material-symbols-outlined { font-size: 1.15rem !important; }

.manual-list { margin: 0; padding-left: 1.25rem; }
.manual-list li { margin: 0.5rem 0; line-height: 1.55; color: var(--opacity-black); }
.manual-list a, .manual-section a, .manual-step a { color: var(--tainted-blue); font-weight: 600; }

.manual-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.1rem;
  padding: 0.95rem 1.1rem;
  background: var(--shadow-red);
  border-left: 4px solid var(--red);
  border-radius: var(--sc-radius-sm);
  color: var(--dark-red);
  line-height: 1.55;
}
.manual-note .material-symbols-outlined { flex-shrink: 0; font-size: 1.4rem !important; color: var(--red); }
.manual-note--info {
  background: var(--comfortable-blue);
  border-left-color: var(--blue);
  color: var(--light-black);
}
.manual-note--info .material-symbols-outlined { color: var(--blue); }
.manual-note--warn {
  background: #fff8e1;
  border-left-color: #f5b301;
  color: #6b5200;
}
.manual-note--warn .material-symbols-outlined { color: #e0a800; }
.manual-note > div { flex: 1; }
.manual-note p { margin: 0 0 0.6rem; }
.manual-note p:last-child { margin-bottom: 0; }
.manual-note ul { margin: 0.4rem 0 0.6rem; padding-left: 1.1rem; }
.manual-note li { margin: 0.3rem 0; line-height: 1.5; }
.manual-msg {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.4rem 0 1rem;
  padding: 0.85rem 1.1rem;
  font-style: italic;
  color: #6b5200;
  background: #fff;
  border: 1px dashed #f0c36d;
  border-radius: var(--sc-radius-sm);
}
.manual-msg .material-symbols-outlined { flex-shrink: 0; font-size: 1.3rem !important; color: #e0a800; }

.manual-steps { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.manual-step { display: flex; align-items: flex-start; gap: 1rem; padding: 0.85rem 0; }
.manual-step + .manual-step { border-top: 1px dashed #e6e9f0; }
.manual-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 2.4rem; height: 2.4rem;
  font-size: 1.15rem; font-weight: 800;
  color: #fff; background: var(--blue);
  border-radius: 0.6rem;
}
.manual-step__body h3 { margin: 0 0 0.3rem; font-size: 1.15rem; color: var(--opacity-black); }
.manual-step__body p { margin: 0; line-height: 1.55; color: var(--light-black); }
.manual-step__shot { margin-top: 0.85rem; }
.manual-step__shot img {
  display: block;
  max-width: 100%;
  border: 1px solid #e0e4ec;
  border-radius: var(--sc-radius-sm);
  box-shadow: var(--sc-shadow);
}
.manual-shot-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.5rem;
  font-size: 0.88rem;
  color: var(--very-light-black);
  background: var(--sc-surface);
  border: 1.5px dashed #cfd8e6;
  border-radius: var(--sc-radius-sm);
}
.manual-shot-empty code { padding: 0.1rem 0.4rem; background: #eef1f6; border-radius: 4px; font-size: 0.82rem; }
.manual-step__tag {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  vertical-align: middle;
  color: var(--tainted-orange);
  background: var(--light-orange);
  border-radius: 999px;
}
.manual-steps--compact .manual-step__num { background: var(--green); }

.manual-contact { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 600px) { .manual-contact { grid-template-columns: 1fr; } }
.manual-contact__card {
  padding: 1rem 1.15rem;
  background: var(--sc-surface);
  border: 1px solid #e9ecf2;
  border-radius: var(--sc-radius-sm);
}
.manual-contact__head {
  display: flex; align-items: center; gap: 0.45rem;
  margin-bottom: 0.5rem;
  font-weight: 700; color: var(--tainted-dark-blue);
}
.manual-contact__head .material-symbols-outlined { font-size: 1.2rem !important; color: var(--blue); }
.manual-contact__card ul { list-style: none; margin: 0; padding: 0; }
.manual-contact__card li { margin: 0.3rem 0; color: var(--opacity-black); overflow-wrap: anywhere; word-break: break-word; }

.manual__footer { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid #e6e9f0; text-align: center; color: var(--very-light-black); }
.manual__footer p { margin: 0; }

@media (max-width: 700px) {
  .manual__wrap { margin: 1rem 0.5rem 2rem; padding: 1.5rem 1.1rem; }
  .manual__title { font-size: 1.5rem; }
}

@media print {
  body.manual *,
  body.manual {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  .manual__topbar { display: none !important; }
  body.manual { background: #fff; }
  .manual__wrap { max-width: none; margin: 0; padding: 0; border: none; box-shadow: none; }

  /* Una sola columna al imprimir: las rejillas no se fragmentan bien y dejan huecos. */
  .manual-cards, .manual-two-col, .manual-contact, .mock-grid, .mock-grid--3, .mock-cv-grid, .conv-cv-grid { display: block !important; }
  .manual-cards > * + *, .manual-two-col > * + *, .manual-contact > * + *,
  .mock-grid > * + *, .mock-grid--3 > * + *, .mock-cv-grid > * + * { margin-top: 0.6rem; }

  /* Deja fluir los bloques grandes (evita huecos); solo mantén juntas piezas pequeñas. */
  .manual-section, .manual-step, .manual-card, .manual-contact__card, .mock, .cert-doc, .manual-cert-demo { break-inside: auto; }
  .manual-note, .manual-faq__item, .manual-msg, .mock-cv-card { break-inside: avoid; }
}

/* --- Mockups ilustrativos de cada paso (manual) --- */
.mock {
  overflow: hidden;
  background: #fff;
  border: 1px solid #d8deea;
  border-radius: 10px;
  box-shadow: var(--sc-shadow);
}
.mock__bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.8rem;
  background: #eef1f7;
  border-bottom: 1px solid #e1e6f0;
}
.mock__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #c4ccdb; }
.mock__title { margin-left: 0.4rem; font-size: 0.72rem; font-weight: 600; color: var(--very-light-black); }
.mock__body {
  display: flex;
  flex-direction: column;
  padding: 0.9rem;
  background: linear-gradient(180deg, #f7f9fc, #eef2f8);
}
.mock-mt { margin-top: 0.6rem; }

.mock-panel {
  padding: 0.75rem 0.85rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #e5e9f1;
  border-radius: 8px;
}
.mock-panel__title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--tainted-dark-blue);
}
.mock-panel__title .material-symbols-outlined { font-size: 0.95rem !important; color: var(--blue); }

.mock-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.mock-grid--3 { grid-template-columns: repeat(3, 1fr); }
.mock-grid--gap { gap: 0.7rem; }

.mock-field { display: flex; flex-direction: column; gap: 0.2rem; }
.mock-field__label { font-size: 0.66rem; font-weight: 600; color: var(--very-light-black); }
.mock-field__input {
  position: relative;
  height: 1.45rem;
  background: #fbfcfe;
  border: 1px solid #d6dce8;
  border-radius: 5px;
}
.mock-field__input--select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.5rem;
  width: 0;
  height: 0;
  margin-top: -2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #9aa6bd;
}

.mock-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.7rem; }
.mock-actions--end { justify-content: flex-end; }
.mock-check { flex-shrink: 0; width: 1rem; height: 1rem; background: #fff; border: 1.5px solid var(--blue); border-radius: 3px; }
.mock-btn {
  margin-left: auto;
  padding: 0.4rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  background: var(--blue);
  border-radius: 6px;
  white-space: nowrap;
}
.mock-actions--end .mock-btn { margin-left: 0; }

.mock-line { display: block; height: 0.5rem; background: #d3dae6; border-radius: 4px; }
.mock-line--50 { width: 50%; }
.mock-line--60 { width: 60%; }
.mock-line--70 { width: 70%; }
.mock-strong { height: 0.7rem; background: #b9c3d6; }

.mock-hero { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.6rem 0; text-align: center; }
.mock-hero__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.4rem !important;
  color: #fff;
  background: var(--blue);
  border-radius: 50%;
}
.mock-w-80 { width: 80%; }

.mock-curp { display: flex; gap: 0.4rem; }
.mock-curp span { flex: 1; height: 1.6rem; background: #fbfcfe; border: 1px solid #d6dce8; border-radius: 5px; }

.mock-addr,
.mock-upload { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.55rem; padding: 0.55rem 0.7rem; border-radius: 6px; }
.mock-addr { background: var(--comfortable-blue); border: 1px solid var(--very-light-blue); }
.mock-addr .material-symbols-outlined { font-size: 1rem !important; color: var(--blue); }
.mock-upload { justify-content: center; background: #fbfcfe; border: 1.5px dashed #c3ccde; }
.mock-upload .material-symbols-outlined { font-size: 1.1rem !important; color: var(--blue); }

/* --- Mock: elementos adicionales (convocatoria, radios, nota) --- */
.mock-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  background: var(--comfortable-blue);
  border: 1px solid var(--very-light-blue);
  border-radius: 6px;
}
.mock-note .material-symbols-outlined { font-size: 1rem !important; color: var(--blue); }

.mock-radio { display: flex; align-items: center; gap: 0.5rem; padding: 0.28rem 0; }
.mock-radio__dot { flex-shrink: 0; width: 0.85rem; height: 0.85rem; border: 1.5px solid #b9c3d6; border-radius: 50%; }
.mock-radio--on .mock-radio__dot { border-color: var(--blue); box-shadow: inset 0 0 0 3px var(--blue); }
.mock-radio__text { font-size: 0.72rem; color: var(--opacity-black); }

.mock-conv {
  padding: 0.75rem 0.85rem;
  background: #fff;
  border: 1px solid #e5e9f1;
  border-left: 3px solid var(--blue);
  border-radius: 8px;
}
.mock-conv__head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; }
.mock-conv__head .material-symbols-outlined { font-size: 1rem !important; color: var(--blue); }
.mock-conv__foot { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; padding-top: 0.55rem; border-top: 1px solid #eef1f6; }

.mock-badge { margin-left: auto; padding: 0.1rem 0.5rem; font-size: 0.62rem; font-weight: 700; color: #fff; background: var(--green); border-radius: 999px; }

.mock-kv { display: flex; align-items: center; gap: 0.5rem; padding: 0.18rem 0; }
.mock-kv__k { min-width: 5.5rem; font-size: 0.68rem; font-weight: 600; color: var(--very-light-black); }
.mock-kv__v { flex: 1; height: 0.5rem; background: #d3dae6; border-radius: 4px; }

/* --- Mock paso 2: pantallas de cuenta ya asociada / bloqueada --- */
.manual-step__body p.manual-shot-caption { margin: 1.75rem 0 1rem; font-size: 0.95rem; font-weight: 600; color: var(--light-black); }
.manual-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.manual-step__body .manual-two-col p.manual-shot-caption { margin-top: 0; min-height: 2.6rem; }
@media (max-width: 700px) { .manual-two-col { grid-template-columns: 1fr; } .manual-step__body .manual-two-col p.manual-shot-caption { min-height: 0; } }
.mock-mail { margin-bottom: 0.5rem; font-size: 0.78rem; font-weight: 700; text-align: center; color: var(--tainted-dark-blue); }
.mock-assoc-banner {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.74rem;
  font-weight: 600;
  border-radius: 6px;
}
.mock-assoc-banner .material-symbols-outlined { font-size: 1rem !important; }
.mock-assoc-banner--info { color: var(--tainted-dark-blue); background: var(--comfortable-blue); border: 1px solid var(--very-light-blue); }
.mock-assoc-banner--info .material-symbols-outlined { color: var(--blue); }
.mock-assoc-banner--warn { color: #6b5200; background: #fff8e1; border: 1px solid #f0c36d; }
.mock-assoc-banner--warn .material-symbols-outlined { color: #e0a800; }
.mock-assoc-list { margin: 0.5rem 0; padding-left: 1.1rem; }
.mock-assoc-list li { margin: 0.2rem 0; font-size: 0.72rem; color: var(--opacity-black); }
.mock-assoc-msg { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.5rem 0; }
.mock-assoc-msg b { font-size: 0.7rem; color: var(--dark-red); }
.mock-assoc-contacts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin: 0.5rem 0; }
.mock-assoc-card { padding: 0.55rem 0.65rem; background: #fff; border: 1px solid #e5e9f1; border-radius: 6px; }
.mock-assoc-card__head { display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.4rem; font-size: 0.7rem; font-weight: 700; color: var(--tainted-dark-blue); }
.mock-assoc-card__head .material-symbols-outlined { font-size: 0.9rem !important; color: var(--blue); }

/* --- Manual paso 7: diagrama/escaneo del certificado demo --- */
.manual-cert-demo { max-width: 32rem; margin-top: 0.25rem; }
.manual-cert-demo img { display: block; max-width: 100%; border: 1px solid #e0e4ec; border-radius: var(--sc-radius-sm); box-shadow: var(--sc-shadow); }

/* --- Mock PROCESANDO / ÉXITO (manual) --- */
.mock-proc { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 1.5rem 0; text-align: center; }
.mock-spinner { width: 2.5rem; height: 2.5rem; border: 4px solid var(--very-light-blue); border-top-color: var(--blue); border-radius: 50%; animation: procSpin 0.8s linear infinite; }
.mock-proc__title { font-size: 0.95rem; font-weight: 700; color: var(--blue); }

.mock-success { display: flex; flex-direction: column; gap: 0.6rem; }
.mock-success__title { font-size: 1.05rem; font-weight: 800; text-align: center; color: var(--green); }
.mock-success__sub { margin-top: -0.3rem; font-size: 0.74rem; text-align: center; color: var(--light-black); }
.mock-success__alert { display: flex; gap: 0.5rem; padding: 0.6rem 0.7rem; background: var(--comfortable-blue); border: 1px solid var(--very-light-blue); border-radius: 6px; }
.mock-success__alert > .material-symbols-outlined { flex-shrink: 0; font-size: 1.2rem !important; color: var(--blue); }
.mock-success__alert b { font-size: 0.74rem; color: var(--tainted-dark-blue); }
.mock-success__timer { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.35rem; font-size: 0.68rem; color: #6b5200; }
.mock-success__timer .material-symbols-outlined { font-size: 0.9rem !important; color: #e0a800; }
.mock-tl { display: flex; flex-direction: column; gap: 0.4rem; }
.mock-tl__title { font-size: 0.78rem; font-weight: 700; color: var(--tainted-dark-blue); }
.mock-tl-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; color: var(--opacity-black); }
.mock-tl-num { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.3rem; height: 1.3rem; font-size: 0.7rem; font-weight: 700; color: #fff; background: var(--blue); border-radius: 50%; }

/* --- Preguntas frecuentes (manual) --- */
.manual-faq { display: flex; flex-direction: column; gap: 0.85rem; }
.manual-faq__item {
  padding: 0.95rem 1.1rem;
  background: var(--sc-surface);
  border: 1px solid #e9ecf2;
  border-left: 4px solid var(--blue);
  border-radius: var(--sc-radius-sm);
}
.manual-faq__q {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0 0 0.4rem;
  font-weight: 700;
  color: var(--tainted-dark-blue);
}
.manual-faq__q .material-symbols-outlined { flex-shrink: 0; font-size: 1.25rem !important; color: var(--blue); }
.manual-faq__a { margin: 0 0 0 1.7rem; line-height: 1.55; color: var(--light-black); }

/* --- Manual: layout con sidebar de navegación --- */
html { scroll-behavior: smooth; }
.manual-layout {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: 1180px;
  margin: 1.5rem auto 3rem;
  padding: 0 1rem;
}
.manual-layout .manual__wrap { flex: 1; min-width: 0; max-width: none; margin: 0; }
.manual-sidebar { position: sticky; top: 1.5rem; flex: 0 0 230px; }
.manual-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid #e9ecf2;
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-shadow);
}
.manual-nav__title {
  margin: 0 0 0.5rem;
  padding: 0 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--very-light-black);
}
.manual-nav a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--light-black);
  text-decoration: none;
  border-radius: 0.5rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.manual-nav a:hover { background: var(--comfortable-blue); color: var(--blue); }
.manual-nav a .material-symbols-outlined { flex-shrink: 0; font-size: 1.15rem !important; color: var(--blue); }
.manual-nav__sub { display: flex; flex-direction: column; margin: 0.1rem 0 0.35rem 1.45rem; border-left: 1px solid #e6e9f0; }
.manual-nav__sub a { padding: 0.32rem 0.7rem; font-size: 0.82rem; color: var(--very-light-black); }
.manual-nav a.is-active {
  font-weight: 700;
  color: var(--blue);
  background: var(--comfortable-blue);
  box-shadow: inset 3px 0 0 var(--blue);
}
.manual-section { scroll-margin-top: 1.5rem; }
.manual-step { scroll-margin-top: 1.5rem; }

/* Botón flotante de impresión */
.manual__print-fab {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.3rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--blue);
  border: none;
  border-radius: 999px;
  box-shadow: var(--sc-shadow-md);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.manual__print-fab:hover { background: var(--dark-blue); transform: translateY(-2px); }
.manual__print-fab .material-symbols-outlined { font-size: 1.3rem !important; }

@media (max-width: 900px) {
  .manual-layout { flex-direction: column; gap: 1rem; }
  .manual-sidebar { position: static; flex: none; width: 100%; }
}
@media (max-width: 480px) {
  .manual__print-fab { right: 1rem; bottom: 1rem; padding: 0.7rem; }
  .manual__print-fab-text { display: none; }
}
@media print {
  .manual-sidebar { display: none !important; }
  .manual__print-fab { display: none !important; }
  .manual-layout { display: block; max-width: none; margin: 0; padding: 0; }
}

/* --- Enlace de ayuda al manual (por paso, en el registro) --- */
.help-manual-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
  margin: 0 0 1rem auto;
  padding: 0.45rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--blue);
  background: var(--comfortable-blue);
  border: 1px solid var(--very-light-blue);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.help-manual-link:hover { color: #fff; background: var(--blue); text-decoration: none; }
.help-manual-link .material-symbols-outlined { font-size: 1.15rem !important; }

/* --- Mock convocatorias por currículum (manual paso 7) --- */
.mock-cv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.mock-cv-card { padding: 0.7rem 0.8rem; background: #fff; border: 1.5px solid #e5e9f1; border-radius: 8px; }
.mock-cv-card--on { border-color: var(--blue); box-shadow: 0 0 0 2px var(--hover-light-blue); }
.mock-cv-card__head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; }
.mock-badge--pend { background: var(--orange); }