/* La altura de la barra y la del logo las fija una sola hoja,
   components/navbar/navbar.css. Aquí había una medida propia que solo
   no se notaba porque esa hoja se carga después y la pisaba. Si el
   orden cambiaba —o el navegador servía una versión cacheada— esta
   pantalla volvía a su medida y la barra quedaba más alta o más baja
   que en el resto. Se quita para que no dependa de quién gane. */
/* ═══════════════════════════════════════════════════════════
   RUTH · REGISTRO DE ABOGADO
   Paleta heredada + Navbar estilo Home-Marketplace
   Acento: Magenta (#C42A8E)
   INCLUYE ESTILOS PARA SELECTORES
═══════════════════════════════════════════════════════════ */

:root {
  --bg: #FFFFFF;
  --bg-rgb: 255,255,255;
  --bg-2: #F7F5EF;
  --bg-3: #EFEBE1;
  --footer-bg: #EFEAE0;
  --gold: #FFEDA8;
  --gold-bright: #FFF6D9;
  --gold-ink: #8A6B1F;
  --gold-border: #B8860B;
  --text-1: #14171A;
  --text-1-rgb: 20,23,26;
  --text-2: rgba(20,23,26,.80);
  --text-3: rgba(20,23,26,.58);
  --border: rgba(20,23,26,.10);
  --border-strong: rgba(20,23,26,.18);
  --cat-persona: #C42A8E;
  --cat-persona-rgb: 196,42,142;
  --accent: var(--cat-persona);
  --accent-rgb: var(--cat-persona-rgb);
  --error: #FF5C5C;

  /* Abril Fatface, como en las otras 16 pantallas. Estaba en Roboto y
     era la única del sistema con otra tipografía de titulares: se veía
     al pasar de la portada a crear cuenta. */
  --f-display: 'Abril Fatface', serif;
  --f-body: 'Brother 1816', sans-serif;
  --f-mono: 'IBM Plex Mono', monospace;
  --f-strong: 'Inter', sans-serif;
}

:root[data-theme="dark"] {
  --bg: #0C0E0F;
  --bg-rgb: 12,14,15;
  --bg-2: #17191C;
  --bg-3: #22262A;
  --footer-bg: #07080A;
  --gold-ink: #FFF6D9;
  --gold-border: transparent;
  --text-1: #FFFFFF;
  --text-1-rgb: 255,255,255;
  --text-2: rgba(255,255,255,.80);
  --text-3: rgba(255,255,255,.56);
  --border: rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.16);
  --cat-persona: #FF80C0;
  --cat-persona-rgb: 255,128,192;
  --accent: var(--cat-persona);
  --accent-rgb: var(--cat-persona-rgb);
}

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

strong { font-family: var(--f-strong); }

body {
  font-family: var(--f-body);
  background: var(--bg);
  color: var(--text-1);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

#network-canvas {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  opacity: .4; pointer-events: none;
}

.navbar-ruth {
  position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: center;
  justify-content: space-between; padding: 0 clamp(20px, 4vw, 60px); background: rgba(var(--bg-rgb), .86);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); z-index: 1000;
}
.nav-left { display: flex; align-items: center; }
.nav-logo { display: block; width: auto; }
.nav-logo img { height: 100%; width: auto; display: block; }
.logo-dark { display: block; } .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark { display: block; } :root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="light"] .logo-dark { display: none; } :root[data-theme="light"] .logo-light { display: block; }
.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-link { font-size: 14px; font-weight: 600; color: var(--text-2); text-decoration: none; transition: color .2s; display: flex; align-items: center; gap: 6px; }
.nav-link:hover { color: var(--text-1); }
.nav-right { display: flex; align-items: center; gap: 16px; }

.theme-toggle {
  position: relative; width: 52px; height: 28px; border-radius: 100px; border: 1px solid var(--border-strong); background: var(--bg-3);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: space-between; padding: 0 6px; flex-shrink: 0; transition: .2s;
}
.theme-toggle:hover { border-color: var(--gold-ink); }
.theme-toggle svg { width: 13px; height: 13px; position: relative; z-index: 1; transition: .2s; }
.theme-toggle .tt-sun { stroke: var(--text-3); }
.theme-toggle .tt-moon { stroke: var(--gold-ink); }
.theme-toggle .tt-thumb {
  position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-bright)); transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.theme-toggle.is-light .tt-thumb { transform: translateX(24px); }
.theme-toggle.is-light .tt-sun { stroke: var(--gold-ink); }
.theme-toggle.is-light .tt-moon { stroke: var(--text-3); }

.nav-burger {
  display: none; position: relative; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: var(--bg-3); cursor: pointer; flex-shrink: 0; align-items: center; justify-content: center; padding: 0; margin-left: 8px;
}
.nav-burger span {
  position: absolute; left: 10px; width: 20px; height: 2px; background: var(--text-1); border-radius: 2px; transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.nav-burger span:nth-child(1) { top: 13px; } .nav-burger span:nth-child(2) { top: 19px; } .nav-burger span:nth-child(3) { top: 25px; }
.nav-burger.is-open span:nth-child(1) { top: 19px; transform: rotate(45deg); } .nav-burger.is-open span:nth-child(2) { opacity: 0; } .nav-burger.is-open span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

.mobile-menu {
  display: none; position: fixed; top: 76px; left: 0; right: 0; background: rgba(var(--bg-rgb), .96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  flex-direction: column; gap: 4px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .3s ease, opacity .25s ease; border-bottom: 1px solid var(--border); z-index: 999;
}
.mobile-menu.is-open { max-height: 400px; opacity: 1; padding: 18px clamp(20px, 4vw, 60px) 24px; }
.mobile-menu a { padding: 12px 4px; font-size: 15px; font-weight: 600; color: var(--text-2); border-bottom: 1px solid var(--border); text-decoration: none; }
.mobile-menu a:last-child { border-bottom: none; }

.workspace {
  position: relative; z-index: 1; width: 100%; max-width: 1100px; margin: 0 auto;
  padding: 120px 24px 40px; display: flex; flex-direction: column; gap: 30px;
}

.page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.page-header h1 { font-size: 1.5rem; font-weight: 600; font-family: var(--f-display); color: var(--text-1); margin: 0; }
.page-header h1 i { margin-right: 10px; color: var(--accent); }
.page-subtitle { color: var(--text-2); font-size: 0.85rem; margin: 0; }
.badge-step { background: var(--gold); color: var(--dark-text, #0C0E0F); font-weight: 700; padding: 6px 16px; border-radius: 30px; font-size: 0.8rem; letter-spacing: 0.04em; border: 1px solid var(--gold-border); }

.breadcrumb-progress { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 16px 0 8px; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 30px; background: var(--bg-3); border: 1px solid var(--border); color: var(--text-3); transition: all .3s; cursor: default; }
.step.active { background: var(--gold); border-color: var(--gold-border); color: var(--dark-text, #0C0E0F); }
.step.done { background: var(--success); border-color: var(--success); color: var(--dark-text, #0C0E0F); }
.step-icon { font-size: 1.1rem; display: flex; align-items: center; }
.step-label { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.step-connector { width: 24px; height: 2px; background: var(--border); transition: background .3s; }
.step-connector.done { background: var(--success); }

.steps-container { background: var(--bg-2); border: 1px solid var(--border); border-radius: 24px; padding: 32px 36px; animation: slideUp .5s cubic-bezier(.22,1,.36,1); }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.step-panel { display: none; animation: fadeIn .3s ease; }
.step-panel.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.step-panel h3 { font-size: 1.2rem; font-weight: 600; font-family: var(--f-display); color: var(--text-1); margin-bottom: 6px; }
.step-panel h3 i { color: var(--accent); }
.step-panel > p { color: var(--text-2); font-size: 0.9rem; margin-bottom: 20px; }

.benefits-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 24px; }
.benefit-item { background: var(--bg-3); border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; color: var(--text-1); }
.benefit-item i { font-size: 1.3rem; color: var(--accent); }
.benefit-item span { font-size: 0.9rem; color: var(--text-2); }
.benefit-item strong { color: var(--text-1); font-weight: 600; }
.benefit-content { display: flex; flex-direction: column; gap: 2px; }

.field-group { display: flex; flex-direction: column; gap: 20px; }
.fields-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { position: relative; }

.field input, .field select {
  width: 100%;
  padding: 12px 40px 12px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text-1);
  font-size: 0.95rem;
  font-family: var(--f-body);
  outline: none;
  transition: border-color .3s;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

.field select {
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A6B1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
}

:root[data-theme="dark"] .field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF80C0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.field select:focus { border-bottom-color: var(--accent); }
.field select option { background: var(--bg-2); color: var(--text-1); }
.field select:disabled { opacity: 0.5; cursor: not-allowed; }

.field label {
  position: absolute;
  top: 12px;
  left: 0;
  color: var(--text-2);
  font-size: 0.85rem;
  pointer-events: none;
  transition: all .25s;
  letter-spacing: .04em;
}

.field input:focus ~ label,
.field input:not(:placeholder-shown) ~ label,
.field select:focus ~ label,
.field select:not([value=""]) ~ label {
  top: -14px;
  font-size: 0.65rem;
  color: var(--accent);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.field-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width .3s;
}
.field input:focus ~ .field-line,
.field select:focus ~ .field-line { width: 100%; }

.file-storage/uploads-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 24px;
}
.file-upload-wrapper { background: var(--bg-3); border: 1px solid var(--border); border-radius: 12px; padding: 4px; transition: border-color .3s; }
.file-upload-wrapper:hover { border-color: var(--accent); }
.file-upload-label { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 8px; cursor: pointer; transition: background .3s; }
.file-upload-label:hover { background: rgba(var(--accent-rgb), .08); }
.file-upload-icon { font-size: 1.6rem; color: var(--accent); flex-shrink: 0; width: 36px; text-align: center; }
.file-upload-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.file-upload-title { font-weight: 600; color: var(--text-1); font-size: 0.9rem; }
.file-upload-sub { font-size: 0.7rem; color: var(--text-2); }
.file-upload-badge { background: var(--gold); color: var(--dark-text, #0C0E0F); border-radius: 30px; padding: 4px 14px; font-size: 0.75rem; font-weight: 700; border: 1px solid var(--gold-border); transition: background .3s; display: flex; align-items: center; gap: 6px; }
.file-upload-label:hover .file-upload-badge { background: var(--gold-bright); }
.file-upload-input { display: none; }
.file-upload-filename { padding: 8px 18px 10px; font-size: 0.75rem; color: var(--text-3); border-top: 1px solid var(--border); margin-top: 4px; display: flex; align-items: center; gap: 8px; }
.file-upload-filename i { color: var(--accent); }
.file-upload-filename.has-file { color: var(--text-1); }

.data-protection-notice { display: flex; gap: 14px; align-items: flex-start; background: var(--bg-3); border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; margin: 24px 0 8px; }
.data-protection-notice i { font-size: 1.6rem; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.data-protection-notice strong { color: var(--text-1); display: block; margin-bottom: 4px; font-weight: 600; }
.data-protection-notice p { font-size: 0.85rem; color: var(--text-2); margin: 0; line-height: 1.6; }

.step-actions { display: flex; justify-content: flex-end; gap: 14px; margin-top: 28px; border-top: 1px solid var(--border); padding-top: 24px; }
.btn-step { padding: 12px 32px; border: none; border-radius: 10px; font-family: var(--f-body); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: all .3s; }
.btn-step:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; }
.btn-primary { background: var(--gold); color: var(--dark-text, #0C0E0F); border: 1px solid var(--gold-border); }
.btn-primary:hover:not(:disabled) { background: var(--gold-bright); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255, 237, 168, .3); }
.btn-secondary { background: transparent; border: 1px solid var(--border); color: var(--text-2); }
.btn-secondary:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn-success { background: var(--success); color: var(--dark-text, #0C0E0F); }
.btn-success:hover:not(:disabled) { background: #8ee0b0; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(169, 245, 200, .4); }

.final-message { text-align: center; padding: 30px 20px; }
.final-message .icon-big { font-size: 3.5rem; color: var(--accent); margin-bottom: 16px; display: block; }
.final-message h3 { font-size: 1.4rem; font-weight: 600; font-family: var(--f-display); color: var(--text-1); }
.final-message p { color: var(--text-2); font-size: 1rem; max-width: 480px; margin: 8px auto 20px; line-height: 1.6; }
.final-message .btn-step { margin: 0 auto; }

@media (max-width: 980px) {
  .nav-links { display: none; }
}
@media (max-width: 768px) {
  .navbar-ruth { padding: 0 20px; }
  .nav-burger { display: flex; } 
  .mobile-menu { display: flex; }
  .workspace { padding: 90px 16px 30px; }
  .steps-container { padding: 24px 18px; }
  .fields-row { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .field input, .field select { padding: 10px 0; font-size: 0.85rem; }
  .field label { font-size: 0.75rem; }
  .benefits-list { grid-template-columns: 1fr; }
  .step { padding: 6px 12px; }
  .step-label { font-size: 0.6rem; }
  .step-connector { width: 12px; }
  .step-actions { flex-direction: column-reverse; }
  .btn-step { width: 100%; justify-content: center; }
  .data-protection-notice { flex-direction: column; align-items: center; text-align: center; }
}
@media (max-width: 480px) {
  .breadcrumb-progress { gap: 0; }
  .step { padding: 6px 8px; }
  .step-label { display: none; }
}

::selection { background: var(--gold); color: var(--dark-text, #0C0E0F); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
button, .btn-step { transition: transform .18s cubic-bezier(.22,1,.36,1), background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; }
button:active, .btn-step:active { transform: translateY(1px) scale(.99); }

/* ---------- Colores propios de las especialidades ----------
   No se reutilizan --gold / --gold-bright / --gold-ink directamente para
   el estado marcado. En tema oscuro esos tres valen colores CLAROS
   (--gold-ink pasa a #FFF6D9 y --text-1 a blanco), así que una opción
   marcada quedaba con texto blanco sobre un fondo casi blanco: el texto
   desaparecía justo en las opciones que la persona acababa de elegir.

   En claro, la opción marcada es dorado con tinta oscura. En oscuro, un
   velo dorado translúcido sobre el fondo oscuro, con el texto claro: el
   mismo significado en los dos temas, sin invertir la legibilidad. */
:root {
  --esp-borde:        #B8860B;
  --esp-marca-bg:     #FFEDA8;
  --esp-marca-palo:   #6B520F;
  --esp-sel-bg:       #FFF6D9;
  --esp-sel-borde:    #8A6B1F;
  --esp-sel-tinta:    #14171A;
  --esp-sel-tinta-2:  rgba(20,23,26,.74);
}

:root[data-theme="dark"] {
  --esp-borde:        rgba(255,255,255,.34);
  --esp-marca-bg:     #FFEDA8;
  --esp-marca-palo:   #4A3708;
  --esp-sel-bg:       rgba(255,237,168,.13);
  --esp-sel-borde:    #FFEDA8;
  --esp-sel-tinta:    #FFFFFF;
  --esp-sel-tinta-2:  rgba(255,255,255,.80);
}

/* =====================================================================
   ESPECIALIDADES
   ---------------------------------------------------------------------
   Sustituyen al campo libre «Referencias». Son casillas y no un
   desplegable de selección múltiple porque un abogado suele ejercer en
   varias ramas, y ese control en un móvil se maneja fatal: hay que
   mantener pulsado, no se ve bien qué está marcado, y un toque en falso
   lo desmarca todo.

   La casilla nativa se esconde pero NO se quita: sigue recibiendo el
   foco y respondiendo al teclado, y el recuadro dorado de foco se dibuja
   con :focus-visible sobre la marca. Quitarla dejaría la lista entera
   fuera del alcance de quien navega con el tabulador.
   ===================================================================== */

.campo-especialidades {
  margin: 22px 0 6px;
  padding: 16px;
  background: var(--bg-2);
  border: 1px solid var(--line, rgba(20,23,26,.12));
  border-radius: 14px;
}

.campo-especialidades.con-error {
  border-color: var(--error);
  background: rgba(255, 92, 92, .05);
}

.esp-titulo {
  margin: 0 0 4px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-1);
}

.esp-ayuda {
  margin: 0 0 14px;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--text-2);
}

/* Dos columnas donde hay sitio, una en un teléfono. auto-fit con un
   mínimo evita tener que escribir puntos de ruptura a mano. */
.esp-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 8px;
}

.esp-cargando {
  margin: 0;
  font-size: .82rem;
  color: var(--text-3, var(--text-2));
  grid-column: 1 / -1;
}

.esp-opcion {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line, rgba(20,23,26,.12));
  border-radius: 11px;
  cursor: pointer;
  /* 44 px es el mínimo para que un dedo acierte sin ampliar. */
  min-height: 44px;
  transition: border-color .15s, background .15s;
}

.esp-opcion:hover { border-color: var(--esp-borde); }

/* Fuera de la vista, pero sigue existiendo para el teclado y para los
   lectores de pantalla. */
.esp-opcion input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.esp-marca {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin-top: 2px;
  border: 2px solid var(--esp-borde);
  border-radius: 6px;
  background: var(--bg);
  position: relative;
  transition: background .15s, border-color .15s;
}

/* El palito de la marca: dos lados de un cuadrado, girados. */
.esp-marca::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--esp-marca-palo);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .12s ease-out;
}

.esp-opcion input:checked ~ .esp-marca {
  background: var(--esp-marca-bg);
  border-color: var(--esp-marca-bg);
}
.esp-opcion input:checked ~ .esp-marca::after { transform: rotate(45deg) scale(1); }

.esp-opcion input:focus-visible ~ .esp-marca {
  outline: 2px solid var(--esp-sel-borde);
  outline-offset: 3px;
}

/* La opción marcada se distingue también por el fondo y el borde, no
   solo por el color de la marca: quien no distinga bien los colores
   sigue viendo cuáles eligió. */
.esp-opcion:has(input:checked) {
  background: var(--esp-sel-bg);
  border-color: var(--esp-sel-borde);
}
/* La tinta se declara al marcar: heredar dejaba el blanco del tema
   oscuro sobre el dorado claro, y el nombre de la rama desaparecía. */
.esp-opcion:has(input:checked) .esp-texto strong { color: var(--esp-sel-tinta); }
.esp-opcion:has(input:checked) .esp-texto small  { color: var(--esp-sel-tinta-2); }

.esp-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.esp-texto strong {
  font-size: .86rem;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.3;
}
.esp-texto small {
  font-size: .75rem;
  line-height: 1.35;
  color: var(--text-2);
}

.esp-error {
  margin: 12px 0 0;
  font-size: .82rem;
  font-weight: 600;
  color: var(--error);
}