/* ==========================================================================
   PAGE-STATIC.CSS
   Componentes exclusivos de las páginas estáticas de copy:
     · /como-funciona/   (directory/static_pages/como_funciona.html)
     · /para-abogados/   (directory/static_pages/para_abogados.html)

   Reglas:
   - Todo lo que existe en el design system (legaltica-ds.css) se reutiliza:
     .lt-container, .lt-section, .lt-hero, .lt-card, .lt-btn, .lt-grid--*,
     .lt-diamond, .lt-pill-hero, .lt-section-head--center…
   - Aquí SOLO vive lo que el DS no tiene. Prefijo `ps-` para no colisionar.
   - legaltica-ds.css y base.html NO se tocan.
   ========================================================================== */

:root {
  --ps-mist: #EEF1F6;   /* fondo de las bandas claras de estas dos páginas */
  --ps-dash: #E1C4C0;   /* línea de puntos / raíl del timeline */
  --ps-soft: #FBEDEA;   /* fondo de los cuadros de icono rojos */
  --ps-check-bg: #EAF3EE;
  --ps-check-ink: #2C6E63;
  --ps-cross-bg: #F3E2E1;
  --ps-cross-ink: #C0574F;
  --ps-green-dark: #1E3A31;
  --ps-green-on-dark: #6FBF9A;
}


/* ==========================================================================
   1. ANIMACIONES
   El DS ya define lg-rise, lg-float, lg-drift y lg-pulse (§17 de
   legaltica-ds.css) y se reutilizan tal cual. Aquí solo las que faltan.
   ========================================================================== */

@keyframes lg-dash     { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
@keyframes lg-growx    { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lg-grow     { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes lg-ring     { 0% { transform: scale(0.8); opacity: 0.6; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes lg-callpulse {
  0%   { box-shadow: 0 0 0 0 rgba(201, 79, 79, 0.5); }
  70%  { box-shadow: 0 0 0 16px rgba(201, 79, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 79, 79, 0); }
}
@keyframes lg-shake {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-12deg); }
  40% { transform: rotate(12deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(8deg); }
}

/* Reveal on scroll — el estado inicial lo pinta reveal.js (así, sin JS, todo
   queda visible). Aquí solo la transición. */
[data-reveal] {
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1),
              transform .7s cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .ps-shape,
  .ps-steps__line line,
  .ps-timeline__rail,
  .ps-callcard__ring,
  .ps-callcard__btn,
  .ps-callcard__btn svg,
  [data-reveal] {
    animation: none !important;
    transition: none !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}


/* ==========================================================================
   2. BANDAS DE SECCIÓN
   ========================================================================== */

.ps-band       { background: var(--ps-mist); }
.ps-band--dark { background: var(--lt-ink); }

/* Rombos decorativos flotantes (hero oscuro, franja CTA roja) */
.ps-shape {
  position: absolute;
  display: block;
  transform: rotate(45deg);
  pointer-events: none;
}
.ps-shape--1 { left: 8%;  top: 30%;    width: 60px; height: 60px; border-radius: 16px; background: rgba(201, 79, 79, 0.16); animation: lg-drift 16s ease-in-out infinite; }
.ps-shape--2 { right: 12%; top: 22%;   width: 20px; height: 20px; border-radius: 5px;  background: var(--lt-primary);       animation: lg-float 7s ease-in-out infinite, lg-pulse 6s ease-in-out infinite; }
.ps-shape--3 { right: 20%; bottom: 20%; width: 40px; height: 40px; border-radius: 12px; background: rgba(201, 79, 79, 0.12); animation: lg-drift 20s ease-in-out infinite reverse; }
.ps-shape--4 { left: 18%;  bottom: 26%; width: 14px; height: 14px; border-radius: 4px;  background: var(--lt-primary);       animation: lg-float 9s ease-in-out 1s infinite, lg-pulse 7s ease-in-out infinite; }

/* Sobre la franja roja los rombos son blancos translúcidos */
.ps-shape--light-1 { left: 7%;   top: 29%;    width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.10); animation: lg-drift 18s ease-in-out infinite; }
.ps-shape--light-2 { right: 11%; bottom: 26%; width: 22px; height: 22px; border-radius: 6px;  background: rgba(255, 255, 255, 0.16); animation: lg-float 8s ease-in-out infinite; }

/* Halo radial del hero oscuro */
.ps-glow {
  position: absolute;
  right: -60px;
  top: -60px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(201, 79, 79, 0.18), transparent 70%);
  pointer-events: none;
}

/* Cabecera de sección centrada, más compacta que .lt-section-head--center */
.ps-head {
  text-align: center;
  margin-bottom: 44px;
}
.ps-head__h {
  margin: 0 0 8px 0;
  font-family: var(--lt-font-head);
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.01em;
  color: var(--lt-ink);
}
.ps-head__h--lg { font-size: 34px; }
.ps-head__sub {
  margin: 0;
  font-size: 15px;
  color: var(--lt-text-muted);
}


/* ==========================================================================
   3. HERO OSCURO (Cómo funciona) — sobre .lt-hero del DS
   ========================================================================== */

.lt-hero--how .lt-hero__inner { max-width: 900px; padding: 84px var(--lt-gutter) 76px var(--lt-gutter); }
.lt-hero--how .lt-hero__h1    { font-size: 54px; line-height: 1.1; }

.ps-hero__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}


/* ==========================================================================
   4. HERO CLARO EN 2 COLUMNAS (Para abogados)
   ========================================================================== */

.ps-hero-split {
  background: var(--lt-canvas);
  position: relative;
  overflow: hidden;
}
.ps-hero-split__inner {
  max-width: var(--lt-container);
  margin: 0 auto;
  padding: 72px var(--lt-gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
}
.ps-hero-split__h1 {
  margin: 0 0 18px 0;
  font-family: var(--lt-font-head);
  font-weight: 600;
  font-size: 46px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--lt-ink);
  text-wrap: balance;
}
.ps-hero-split__lead {
  margin: 0 0 28px 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--lt-text-2);
  max-width: 480px;
}
.ps-hero-split__note {
  margin: 16px 0 0 0;
  font-size: 13px;
  color: var(--lt-text-muted);
}
/* Task 6 (2026-08-05): el hero de /para-abogados/ pasa de un unico CTA a dos
   (reclamar / registro) -- sin este wrapper, dos `.lt-btn` (inline-flex)
   sueltos solo separan por el espacio en blanco del propio HTML, un gap
   inconsistente con el resto del sistema. Mismo patron que .ps-cta__actions. */
.ps-hero-split__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
/* Rombo decorativo suelto del hero claro */
.ps-hero-split .ps-shape--tiny {
  left: 42%;
  top: 20%;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(201, 79, 79, 0.16);
  animation: lg-float 8s ease-in-out infinite;
}

/* Píldora clara (variante de .lt-pill-hero sobre fondo claro) */
.ps-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-pill);
  padding: 7px 16px;
  margin-bottom: 22px;
}
.ps-pill__text {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--lt-text-muted);
}

/* Media del hero */
.ps-hero-media { position: relative; }
.ps-hero-media__frame {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(22, 32, 46, 0.16);
  height: 380px;
  background: var(--lt-ph-pattern);   /* fallback si no hay imagen */
}
.ps-hero-media__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ps-hero-media__tag {
  position: absolute;
  bottom: -18px;
  left: -18px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--lt-ink);
  color: #FFFFFF;
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 16px 34px rgba(22, 32, 46, 0.22);
  font-family: var(--lt-font-head);
  font-size: 13.5px;
  font-weight: 600;
}


/* ==========================================================================
   5. LOS 3 PASOS (línea de puntos + cards numeradas)
   ========================================================================== */

.ps-steps { position: relative; }
.ps-steps__line {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  height: 4px;
  z-index: 0;
}
.ps-steps__line line {
  stroke: var(--ps-dash);
  stroke-width: 2;
  stroke-dasharray: 8 8;
  stroke-linecap: round;
  stroke-dashoffset: 600;
  animation: lg-dash 2s ease-out 0.3s forwards;
}
.ps-steps__grid { position: relative; z-index: 1; }

.ps-step-card {
  padding: 32px 26px;
  text-align: center;
  transition: transform .2s, box-shadow .2s;
}
.ps-step-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(22, 32, 46, 0.10);
}
.ps-step-card__num {
  width: 52px;
  height: 52px;
  background: var(--lt-primary);
  color: #FFFFFF;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--lt-font-head);
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 18px;
}
.ps-step-card__h {
  margin: 0 0 12px 0;
  font-family: var(--lt-font-head);
  font-size: 19px;
  font-weight: 600;
  color: var(--lt-ink);
}
.ps-step-card__p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--lt-text-muted);
}
.ps-step-card__p--intro { margin-bottom: 16px; }

/* Lista de 6 checks en 2 columnas dentro de la 3ª card */
.ps-checkgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  text-align: left;
}
.ps-checkgrid__item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 12.5px;
  color: var(--lt-text-2);
}
.ps-checkgrid__item svg { flex-shrink: 0; margin-top: 1px; }


/* ==========================================================================
   6. SPLIT DE CONTENIDO (texto + tarjeta)
   ========================================================================== */

.ps-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.ps-split__h {
  margin: 0 0 14px 0;
  font-family: var(--lt-font-head);
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -0.01em;
  color: var(--lt-ink);
}
.ps-split__p {
  margin: 0 0 28px 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--lt-text-2);
}

/* Lista de features con cuadro-icono */
.ps-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ps-feature { display: flex; gap: 14px; }
.ps-feature__icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  background: var(--ps-soft);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ps-feature__h {
  margin: 0 0 3px 0;
  font-family: var(--lt-font-head);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--lt-ink);
}
.ps-feature__p {
  margin: 0;
  font-size: 13.5px;
  color: var(--lt-on-dark-faint);
}


/* ==========================================================================
   7. TARJETA DE LLAMADA
   ========================================================================== */

.ps-callcard {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: 20px;
  padding: 26px;
  box-shadow: 0 24px 60px rgba(22, 32, 46, 0.10);
}
.ps-callcard__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.ps-callcard__avatar {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}
.ps-callcard__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--lt-primary);
  animation: lg-ring 2.4s ease-out infinite;
}
.ps-callcard__initials {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--lt-ink);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--lt-font-head);
  font-weight: 600;
  font-size: 18px;
}
.ps-callcard__name {
  margin: 0 0 2px 0;
  font-family: var(--lt-font-head);
  font-size: 17px;
  font-weight: 600;
  color: var(--lt-ink);
}
.ps-callcard__role { font-size: 13px; color: var(--lt-text-muted); }

.ps-callcard__summary {
  background: var(--lt-canvas);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.ps-callcard__label {
  font-family: var(--lt-font-head);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--lt-text-muted);
}
.ps-callcard__lines {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--lt-text-2);
}
.ps-callcard__lines strong { color: var(--lt-ink); }
.ps-callcard__lines .ps-callcard__row { display: flex; align-items: center; gap: 8px; }
.ps-tag-warn {
  background: #FBECC9;
  color: #A97516;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: var(--lt-r-pill);
}
.ps-callcard__btn {
  width: 100%;
  border: none;
  background: var(--lt-primary);
  color: #FFFFFF;
  font-family: var(--lt-font-body);
  font-weight: 700;
  font-size: 14.5px;
  padding: 14px;
  border-radius: 12px;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  animation: lg-callpulse 2s infinite;
}
.ps-callcard__btn svg { animation: lg-shake 1.2s ease-in-out infinite; }


/* ==========================================================================
   8. CARDS COMPARATIVAS
   ========================================================================== */

.ps-compare      { padding: 30px; }
.ps-compare__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  position: relative;
}
.ps-compare__badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ps-compare__badge--bad  { background: var(--ps-cross-bg); }
.ps-compare__badge--good { background: var(--ps-green-dark); }
.ps-compare__h {
  margin: 0;
  font-family: var(--lt-font-head);
  font-size: 18px;
  font-weight: 600;
}
.ps-compare__h--bad  { color: #8A6460; }
.ps-compare__h--good { color: #FFFFFF; }

.ps-compare__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.ps-compare__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--lt-text-muted);
}
.ps-compare__item svg { flex-shrink: 0; margin-top: 1px; }

.ps-compare--dark {
  background: var(--lt-ink);
  border: none;
  position: relative;
  overflow: hidden;
}
.ps-compare--dark .ps-compare__item { color: #C7CFDA; }
.ps-compare__glow {
  position: absolute;
  right: -30px;
  top: -30px;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(46, 158, 107, 0.20), transparent 70%);
  pointer-events: none;
}


/* ==========================================================================
   9. FRANJA CTA ROJA
   ========================================================================== */

.ps-cta {
  background: var(--lt-primary);
  position: relative;
  overflow: hidden;
}
.ps-cta__inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 68px var(--lt-gutter);
  text-align: center;
  position: relative;
}
.ps-cta__h {
  margin: 0 0 12px 0;
  font-family: var(--lt-font-head);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  text-wrap: balance;
}
.ps-cta__p {
  margin: 0 0 30px 0;
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.85);
}
.ps-cta__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Botón blanco sobre rojo */
a.ps-btn-light,
.ps-btn-light {
  background: #FFFFFF;
  color: var(--lt-ink);
}
a.ps-btn-light:hover,
.ps-btn-light:hover {
  background: var(--lt-ink);
  color: #FFFFFF;
}
/* Botón fantasma sobre rojo */
a.ps-btn-ghost,
.ps-btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF;
}
a.ps-btn-ghost:hover,
.ps-btn-ghost:hover {
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}


/* ==========================================================================
   10. DISCLAIMER ÁMBAR
   ========================================================================== */

.ps-disclaimer {
  background: #FBF3E9;
  border: 1px solid #F0E2CB;
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.ps-disclaimer svg { flex-shrink: 0; margin-top: 1px; }
.ps-disclaimer p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #8A6D3B;
}
.ps-disclaimer strong { color: #6E5628; }


/* ==========================================================================
   11. CARDS CON ICONO + LISTA (Para abogados)
   ========================================================================== */

.ps-icon-card {
  padding: 28px;
  transition: transform .2s, box-shadow .2s;
}
.ps-icon-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(22, 32, 46, 0.10);
}
.ps-icon-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.ps-icon-card__head--bare { gap: 11px; }
.ps-icon-card__icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  background: var(--ps-soft);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ps-icon-card__h {
  margin: 0;
  font-family: var(--lt-font-head);
  font-size: 17px;
  font-weight: 600;
  color: var(--lt-ink);
}
.ps-icon-card__list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.ps-icon-card__item {
  display: flex;
  gap: 9px;
  font-size: 13.5px;
  color: var(--lt-text-2);
}
.ps-icon-card__item svg { flex-shrink: 0; margin-top: 1px; }

.ps-icon-card__paras {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ps-icon-card__paras p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--lt-text-2);
}
.ps-icon-card__paras strong { color: var(--lt-ink); }


/* ==========================================================================
   12. TIMELINE HORIZONTAL DE 5 PASOS
   ========================================================================== */

.ps-timeline { position: relative; }
.ps-timeline__rail {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 23px;
  height: 2px;
  background: var(--ps-dash);
  transform-origin: left;
  animation: lg-growx 1.4s ease-out 0.2s both;
}
.ps-timeline__steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ps-tstep {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.ps-tstep__num {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  background: var(--lt-primary);
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--lt-font-head);
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 0 0 6px var(--ps-mist);   /* recorta el raíl bajo el círculo */
}
.ps-tstep__num--dark { background: var(--lt-ink); }
.ps-tstep__h {
  margin: 0;
  font-family: var(--lt-font-head);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--lt-ink);
}
.ps-tstep__p {
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--lt-text-muted);
}


/* ==========================================================================
   13. CARD DE REQUISITOS
   ========================================================================== */

.ps-req {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding: 32px;
}
.ps-req__label {
  display: block;
  font-family: var(--lt-font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--lt-ink);
}
.ps-req__checks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0 28px 0;
}
.ps-req__check {
  display: flex;
  gap: 10px;
  font-size: 14px;
  color: var(--lt-text-2);
}
.ps-req__check svg { flex-shrink: 0; margin-top: 1px; }
.ps-req__pairs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  margin-top: 16px;
}
.ps-req__pair {
  display: flex;
  gap: 9px;
  font-size: 13.5px;
  color: var(--lt-text-muted);
}
.ps-req__pair .lt-diamond { margin-top: 6px; }


/* ==========================================================================
   14. VALORES (5 iconos circulares)
   ========================================================================== */

.ps-section--center { text-align: center; }

.ps-values {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  max-width: 1000px;
  margin: 0 auto;
}
.ps-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.ps-value__icon {
  width: 58px;
  height: 58px;
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ps-value__label {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--lt-ink);
}
.ps-values-note {
  margin: 32px 0 0 0;
  font-size: 14.5px;
  color: var(--lt-text-muted);
}


/* ==========================================================================
   15. MÓVIL — max-width: 768px
   ========================================================================== */

@media (max-width: 768px) {

  /* --- Cabeceras --- */
  .ps-head            { margin-bottom: 28px; }
  .ps-head__h,
  .ps-head__h--lg     { font-size: 24px; }
  .ps-head__sub       { font-size: 14px; }

  /* --- Hero oscuro --- */
  .lt-hero--how .lt-hero__inner {
    padding: 48px var(--lt-gutter) 44px var(--lt-gutter);
    text-align: center;
    display: block;
  }
  .lt-hero--how .lt-hero__h1   { font-size: 32px; margin-bottom: 16px; }
  .lt-hero--how .lt-hero__lead { font-size: 15px; line-height: 1.55; margin: 0 auto 26px auto; }
  .ps-hero__actions            { flex-direction: column; }
  .ps-hero__actions .lt-btn    { width: 100%; }

  /* --- Hero claro --- */
  .ps-hero-split__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 44px var(--lt-gutter) 48px var(--lt-gutter);
  }
  .ps-hero-split__h1   { font-size: 30px; }
  .ps-hero-split__lead { font-size: 15px; max-width: none; }
  .ps-hero-split__actions { flex-direction: column; }
  .ps-hero-split .lt-btn { width: 100%; }
  .ps-hero-media__frame { height: 240px; }
  .ps-hero-media__tag   { left: 12px; bottom: -14px; padding: 11px 14px; font-size: 12.5px; }
  .ps-hero-split .ps-shape--tiny { display: none; }

  /* --- 3 pasos: 1 columna, sin línea de puntos --- */
  .ps-steps__line     { display: none; }
  .ps-step-card       { padding: 24px 20px; }
  .ps-step-card:hover { transform: none; box-shadow: none; }
  .ps-step-card__h    { font-size: 17px; }
  .ps-checkgrid       { grid-template-columns: 1fr; }

  /* --- Split de contenido --- */
  .ps-split    { grid-template-columns: 1fr; gap: 32px; }
  .ps-split__h { font-size: 24px; }
  .ps-split__p { font-size: 14px; margin-bottom: 22px; }
  .ps-callcard { padding: 20px; }

  /* --- Comparativa --- */
  .ps-compare      { padding: 22px; }
  .ps-compare__h   { font-size: 17px; }
  .ps-compare__item { font-size: 13.5px; }

  /* --- Cards con icono --- */
  .ps-icon-card       { padding: 22px; }
  .ps-icon-card:hover { transform: none; box-shadow: none; }

  /* --- Timeline: VERTICAL --- */
  .ps-timeline__rail {
    left: 23px;
    right: auto;
    top: 8px;
    bottom: 8px;
    width: 2px;
    height: auto;
    transform-origin: top;
    animation-name: lg-grow;
  }
  .ps-timeline__steps {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .ps-tstep {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 16px;
  }
  .ps-tstep__body { padding-top: 4px; }
  .ps-tstep__h    { margin-bottom: 4px; }

  /* --- Requisitos --- */
  .ps-req__pairs { grid-template-columns: 1fr; gap: 10px; }

  /* --- Valores: 2 columnas --- */
  .ps-values { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
  .ps-values-note { margin-top: 26px; font-size: 13.5px; }

  /* --- Franja CTA --- */
  .ps-cta__inner  { padding: 44px var(--lt-gutter); }
  .ps-cta__h      { font-size: 24px; }
  .ps-cta__p      { font-size: 14px; }
  .ps-cta__actions { flex-direction: column; }
  .ps-cta__actions .lt-btn { width: 100%; }
}


/* ==========================================================================
   17. RETIRADA DE FICHA (/retirar-ficha/)
   --------------------------------------------------------------------------
   Página de ejercicio del derecho de oposición (RGPD art. 21). Quien llega
   aquí suele estar molesto por aparecer sin haberlo pedido: el objetivo es que
   resuelva en un minuto, no que admire la página. De ahí el hero corto, el
   formulario nada más entrar y el acompañamiento a la derecha en vez de arriba.
   ========================================================================== */

/* Hero más bajo que el de las otras estáticas: aquí la acción está debajo y
   no puede quedar fuera de pantalla en un portátil de 768 px de alto. */
.lt-hero--removal .lt-hero__inner { max-width: 760px; padding: 56px var(--lt-gutter) 52px var(--lt-gutter); }
.lt-hero--removal .lt-hero__h1    { font-size: 40px; line-height: 1.12; }

/* lt-section--first mete 96 px de padding superior, que es lo correcto cuando
   debajo viene un encabezado de sección. Aquí debajo viene LA acción de la
   página: 96 px de vacío la empujaban fuera del primer golpe de vista. */
.ps-rm-section { padding-top: 44px; }

/* Layout: formulario (principal) + acompañamiento. Proporción propia en vez de
   lt-grid--2 al 50/50: el formulario es la tarea y debe pesar más. */
.ps-rm-layout {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 28px;
  align-items: start;
}

/* --- Formulario --- */
.ps-rm-form {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-xl);
  padding: 30px;
}
.ps-rm-form__h {
  margin: 0 0 6px;
  font-family: var(--lt-font-head);
  font-size: 20px;
  font-weight: 600;
  color: var(--lt-ink);
}
.ps-rm-form__sub {
  margin: 0 0 22px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--lt-text-muted);
}
.ps-rm-field { margin-bottom: 18px; }
.ps-rm-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ps-rm-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lt-ink);
}
.ps-rm-label__req { color: var(--lt-primary); margin-left: 2px; }
.ps-rm-label__opt {
  margin-left: 6px;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--lt-text-muted);
}

/* 16px y 46px de alto a propósito, pisando .lt-input:
   - por debajo de 16px iOS hace zoom automático al enfocar y descoloca la página
   - 44px es el mínimo táctil (Apple HIG) */
.ps-rm-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 46px;
  padding: 12px 14px;
  background: var(--lt-canvas);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-ctl);
  font-family: var(--lt-font-body);
  font-size: 16px;
  line-height: 1.45;
  color: var(--lt-ink);
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
  /* La cabecera es sticky (.lt-header, 72px/64px, var(--lt-header-h)) y sin
     esto el navegador la deja tapando el campo cuando enfoca uno invalido
     -- la burbuja nativa "Completa este campo" (submit con requerido vacio)
     o un salto a #ancla (accounts/services/completitud.py) mueven el foco
     con scrollIntoView(), que SI respeta scroll-margin-top del propio
     elemento enfocado. Medido en /panel/registro/: sin esto el campo de
     contraseña quedaba con el 100% de su alto por debajo del header. Mismo
     offset que ya usan los demas scroll-margin-top del sitio (page-landing.
     css/page-lawyer.css), sobre var(--lt-header-h) para no desincronizarse
     si la altura del header cambia. */
  scroll-margin-top: calc(var(--lt-header-h) + 16px);
}
.ps-rm-input::placeholder { color: #9AA1AC; }
.ps-rm-input:hover { border-color: #D6CFC4; }
.ps-rm-input:focus-visible,
.ps-rm-input:focus {
  border-color: var(--lt-primary);
  /* Anillo propio: el foco tiene que verse sin depender del outline del SO */
  box-shadow: 0 0 0 3px rgba(201, 79, 79, .16);
}
textarea.ps-rm-input {
  min-height: 132px;
  resize: vertical;
}
.ps-rm-help {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--lt-text-muted);
}

/* Errores concretos por campo (form.<campo>.errors de Django). Mismo tono
   que .ps-rm-msg--error, sin la caja: aquí van pegados al input, no en un
   aviso aparte. */
.ps-rm-field-error {
  display: block;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
  line-height: 1.5;
  color: #8E2F2F;
}
.ps-rm-field-error li + li { margin-top: 2px; }

/* Casilla de privacidad: el área táctil cubre toda la fila, no solo el cuadro
   de 18px (que por sí solo incumple el mínimo de 44 px). */
.ps-rm-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  /* 12px arriba/abajo para que la fila entera llegue a 44 px: el cuadro de 20 px
     por sí solo no alcanza el mínimo táctil. */
  padding: 12px 0;
  min-height: 44px;
  cursor: pointer;
}
.ps-rm-check input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  flex-shrink: 0;
  accent-color: var(--lt-primary);
  cursor: pointer;
}
.ps-rm-check__text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--lt-ink-soft);
}
.ps-rm-check__text a { color: var(--lt-primary); text-decoration: underline; }

.ps-rm-submit { width: 100%; min-height: 50px; margin-top: 4px; }
.ps-rm-legal {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--lt-text-muted);
  text-align: center;
}

/* --- Avisos (éxito / error). El sistema no tenía componente de alerta. --- */
.ps-rm-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px;
  border-radius: var(--lt-r-sm);
  font-size: 13.5px;
  line-height: 1.55;
  margin-bottom: 16px;
}
.ps-rm-msg svg { flex-shrink: 0; margin-top: 2px; }
.ps-rm-msg--ok {
  background: #ECF6F0;
  border: 1px solid #C9E4D5;
  color: #1F5C3D;
}
.ps-rm-msg--error {
  background: #FCEDED;
  border: 1px solid #F0D2D2;
  color: #8E2F2F;
}
/* Aviso neutro/de atencion (tramo 4: degradado del autocompletado de
   direcciones, oficina pendiente de revision de municipio...). Mismo
   ambar que .ps-disclaimer (seccion 10) -- no es un error ni un exito,
   es "esto sigue guardado, solo que hay que mirarlo". */
.ps-rm-msg--warning {
  background: #FBF3E9;
  border: 1px solid #F0E2CB;
  color: #6E5628;
}

/* --- Columna de acompañamiento --- */
.ps-rm-aside { display: flex; flex-direction: column; gap: 18px; }
.ps-rm-panel {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-lg);
  padding: 24px;
}
.ps-rm-panel__h {
  margin: 0 0 16px;
  font-family: var(--lt-font-head);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--lt-ink);
}
.ps-rm-panel__p {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--lt-ink-soft);
}
.ps-rm-panel__p:last-child { margin-bottom: 0; }
.ps-rm-panel__p a { color: var(--lt-primary); }

/* Pasos verticales del "qué pasa después" */
.ps-rm-steps { display: flex; flex-direction: column; gap: 16px; }
.ps-rm-step { display: flex; gap: 13px; align-items: flex-start; }
.ps-rm-step__num {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--lt-primary);
  color: #FFFFFF;
  font-family: var(--lt-font-head);
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ps-rm-step__h {
  margin: 0 0 3px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lt-ink);
}
.ps-rm-step__p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--lt-text-muted);
}

/* Franja de garantía bajo el hero */
.ps-rm-assurances {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin-top: 22px;
}
.ps-rm-assurance {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: rgba(255, 255, 255, .82);
}
.ps-rm-assurance svg { flex-shrink: 0; }

@media (max-width: 900px) {
  .ps-rm-layout { grid-template-columns: 1fr; gap: 22px; }
}

@media (max-width: 768px) {
  .ps-rm-section { padding-top: 30px; }
  .lt-hero--removal .lt-hero__inner { padding: 40px var(--lt-gutter) 36px var(--lt-gutter); }
  .lt-hero--removal .lt-hero__h1    { font-size: 28px; }

  .ps-rm-form  { padding: 22px 18px; }
  .ps-rm-panel { padding: 20px 18px; }
  /* Nombre y email a una columna: en 375 px dos campos no caben legibles */
  .ps-rm-row   { grid-template-columns: 1fr; gap: 0; }
  .ps-rm-assurances { gap: 8px 16px; }
  .ps-rm-assurance  { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .ps-rm-input { transition: none; }
}


/* ==========================================================================
   18. RECLAMO DE FICHA (/reclamar-ficha/)
   --------------------------------------------------------------------------
   Las 5 pantallas del flujo (buscar, iniciar, código, cuenta, listo) para el
   TITULAR de una ficha. Misma familia visual que RETIRADA DE FICHA (§17):
   hero corto + panel de acción inmediato debajo, sin "admirar la página".
   Reutiliza a propósito .ps-rm-form/.ps-rm-field/.ps-rm-label/.ps-rm-input/
   .ps-rm-msg/.ps-rm-legal/.ps-rm-assurances — son primitivas de formulario
   genéricas, no exclusivas de la retirada. Aquí solo lo que es nuevo:
   .lt-hero--claim, el panel de una sola columna y los componentes propios
   de esta pantalla (opciones de contacto, resultados de búsqueda, OTP,
   pantalla de éxito).
   ========================================================================== */

/* Hero corto, igual de bajo que --removal: la acción va debajo y en las 5
   pantallas es lo único que importa en el primer golpe de vista. */
.lt-hero--claim .lt-hero__inner { max-width: 720px; padding: 48px var(--lt-gutter) 44px var(--lt-gutter); }
.lt-hero--claim .lt-hero__h1    { font-size: 38px; line-height: 1.14; }

/* El lead lleva 40 px de margen inferior para separarse de lo que venga
   despues DENTRO del hero. En estas pantallas es el ultimo elemento, asi que
   ese margen se suma al padding del contenedor y deja casi cien pixeles de
   banda oscura vacia bajo el texto. El espaciado lo pone el padding. */
.lt-hero--claim .lt-hero__inner > :last-child { margin-bottom: 0; }

/* Panel de una sola columna (a diferencia de .ps-rm-layout, aquí no hay
   columna de acompañamiento: cada pantalla es un único paso). Se combina con
   .ps-rm-form para heredar la caja (fondo, borde, radio, padding). */
.ps-claim-panel {
  max-width: 600px;
  margin: 0 auto;
}

/* --- Búsqueda de la ficha (search.html) --- */
.ps-claim-search__row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.ps-claim-search__row .ps-rm-input { flex: 1; }
.ps-claim-search__row .lt-btn { flex-shrink: 0; }

.ps-claim-results {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ps-claim-result__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--lt-canvas);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-ctl);
  text-decoration: none;
  color: var(--lt-ink);
  transition: border-color .15s ease, background-color .15s ease;
}
.ps-claim-result__link:hover {
  border-color: var(--lt-primary);
  background: var(--lt-surface);
}
.ps-claim-result__name { flex: 1; font-weight: 600; font-size: 14.5px; }
.ps-claim-result__city { font-size: 13px; color: var(--lt-text-muted); }
.ps-claim-result__link svg { flex-shrink: 0; color: var(--lt-text-faint); }
.ps-claim-result__link:hover svg { color: var(--lt-primary); }

/* --- Texto de estado: sin búsqueda, sin resultados, sin opciones --- */
.ps-claim-hint {
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--lt-text-muted);
}
.ps-claim-hint a { color: var(--lt-primary); font-weight: 600; }
.ps-claim-hint--tight { margin-top: 6px; }

/* CTA a la vía documental tras el aviso de "sin contacto verificable"
   (initiate.html): mismo espaciado que ".ps-rm-msg + .ps-claim-cta", pero
   el elemento anterior aquí es un .ps-claim-hint, no un aviso de error. */
.ps-claim-hint + .ps-claim-cta { margin-top: 16px; }

/* --- Opciones de contacto (initiate.html). Botones reales (type=button),
   no enlaces: el destino se decide en JS tras resolver el token de
   reCAPTCHA, así que no hay ningún href al que degradar. --- */
.ps-claim-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}
button.ps-claim-option,
.ps-claim-option {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 14px 16px;
  background: var(--lt-canvas);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-ctl);
  font-family: var(--lt-font-body);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.ps-claim-option:hover:not(:disabled) {
  border-color: var(--lt-primary);
  background: var(--lt-surface);
}
.ps-claim-option:focus-visible {
  outline: none;
  border-color: var(--lt-primary);
  box-shadow: 0 0 0 3px rgba(201, 79, 79, .16);
}
.ps-claim-option:disabled { opacity: .55; cursor: default; }
.ps-claim-option__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ps-soft);
  color: var(--lt-primary);
}
.ps-claim-option__icon svg { flex-shrink: 0; }
.ps-claim-option__body { flex: 1; min-width: 0; }
.ps-claim-option__label {
  display: block;
  font-size: 12px;
  color: var(--lt-text-muted);
  margin-bottom: 1px;
}
.ps-claim-option__value {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--lt-ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.ps-claim-option__arrow {
  flex-shrink: 0;
  color: var(--lt-text-faint);
  transition: transform .15s ease, color .15s ease;
}
.ps-claim-option:hover:not(:disabled) .ps-claim-option__arrow {
  transform: translateX(3px);
  color: var(--lt-primary);
}

/* Ficha ya reclamada: mismo aviso que un error, tono neutro (no es un fallo
   del reclamante, es un estado de la ficha). */
.ps-claim-panel .ps-rm-msg { margin-bottom: 0; }
.ps-claim-panel .ps-rm-msg + .ps-claim-cta { margin-top: 16px; }

/* --- Confirmación de contacto antes de enviar el código (initiate.html,
   Task confirmacion-contacto): paso intermedio tras elegir una opción, antes
   de mandar nada. Reutiliza .ps-rm-field/.ps-rm-label/.ps-rm-input/.ps-rm-help
   del resto del formulario -- no es un componente nuevo, solo un bloque que
   aparece/desaparece con el atributo `hidden` del propio HTML. */
.ps-claim-confirm { margin-top: 4px; }
.ps-claim-confirm__actions {
  margin-top: 4px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ps-claim-confirm__actions .lt-btn { flex: 1; min-width: 160px; }

/* --- Código de verificación (verify.html) --- */
.ps-claim-otp {
  text-align: center;
}
.ps-claim-otp .ps-rm-label { text-align: center; }
.ps-claim-otp-input {
  max-width: 200px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--lt-font-head);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 9px;
  /* compensa visualmente el letter-spacing, que si no empuja el texto a la
     derecha del centro óptico del campo */
  padding-left: 24px;
}
.ps-claim-otp-input::placeholder { letter-spacing: 9px; }
.ps-claim-otp .ps-rm-help { text-align: center; }
.ps-claim-otp .ps-rm-submit { margin-top: 18px; }

/* --- Destino (verify.html / resumen de a dónde fue el código) --- */
.ps-claim-target {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 8px 14px;
  background: var(--lt-canvas);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-pill);
  font-size: 13.5px;
  color: var(--lt-ink-soft);
}
.ps-claim-target strong { color: var(--lt-ink); }

/* --- Pantalla final (success.html) --- */
/* Centrado + aire vertical. NO se toca `padding` en corto: esta clase se
   combina con .ps-rm-form, que es quien pone la caja (fondo, borde, radio y
   sus 30 px de padding en las 4 direcciones). Un `padding` abreviado aqui
   gana por orden y deja el texto pegado a los bordes -- el aire se ajusta
   con padding-top/padding-bottom sueltos, que sí se suman al de la caja. */
.ps-claim-success { text-align: center; }
/* Revision visual 2026-08-05 (veredicto del dueño del producto: icono,
   titulo, texto y botones "van pegados" y los botones "casi tocan el borde
   inferior"): mas separacion entre cada bloque y un padding-bottom propio
   para que la caja no termine justo donde termina el ultimo boton.
   .ps-rm-form__h/.ps-rm-form__sub traen margenes pensados para un
   formulario (titulo pegado a un subtitulo, encima de campos); aqui no hay
   campos debajo, asi que se sobreescriben SOLO dentro de esta pantalla. */
.ps-claim-success { padding-bottom: 42px; }
.ps-claim-success__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ps-check-bg);
  color: var(--ps-check-ink);
}
.ps-claim-success .ps-rm-form__h { margin: 0 0 14px; }
.ps-claim-success .ps-rm-form__sub {
  margin: 0 auto;
  max-width: 440px;
}
/* Task 6 (2026-08-05): la via automatica pasa de un boton a dos (panel +
   inicio); mismo motivo que .ps-hero-split__actions -- sin flex/gap, dos
   `.lt-btn` (inline-flex) sueltos solo separan por el espacio en blanco
   del HTML. */
.ps-claim-success__actions {
  margin-top: 34px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .ps-claim-panel { max-width: 100%; }
}

@media (max-width: 768px) {
  .lt-hero--claim .lt-hero__inner { padding: 40px var(--lt-gutter) 36px var(--lt-gutter); }
  .lt-hero--claim .lt-hero__h1    { font-size: 27px; }

  .ps-claim-search__row { flex-direction: column; }
  .ps-claim-search__row .lt-btn { width: 100%; }

  .ps-claim-success { padding-bottom: 30px; }
  .ps-claim-success__actions { flex-direction: column; margin-top: 28px; }
  .ps-claim-success__actions .lt-btn { width: 100%; }

  .ps-claim-option { padding: 13px 14px; }
  .ps-claim-option__icon { width: 34px; height: 34px; }

  .ps-claim-otp-input { font-size: 22px; letter-spacing: 7px; padding-left: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .ps-claim-option,
  .ps-claim-option__arrow,
  .ps-claim-result__link {
    transition: none;
  }
}

/* ==========================================================================
   19. PANEL DEL ABOGADO — ACCESO
   (/panel/acceder/, /panel/recuperar-contrasena/...)
   --------------------------------------------------------------------------
   Login, logout y recuperación de contraseña. Misma familia visual que
   RECLAMO DE FICHA (§18): hero corto + .ps-claim-panel de una columna sobre
   .ps-rm-form. Reutiliza esas primitivas al 100%; lo único nuevo aquí es la
   fila de enlaces secundarios bajo el formulario (recuperar / reclamar,
   volver al acceso).
   ========================================================================== */

.ps-panel-auth-links {
  margin: 18px 0 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--lt-text-muted);
}
.ps-panel-auth-links a {
  color: var(--lt-primary);
  font-weight: 600;
  text-decoration: none;
}
.ps-panel-auth-links a:hover { text-decoration: underline; }
/* var(--lt-text-faint) a proposito (revision de contraste 2026-08-09): es
   un separador entre dos enlaces, mismo patron que .lt-breadcrumbs y
   .ps-panel-idhead__sep. Hoy ninguna plantilla renderiza dos enlaces a la
   vez en .ps-panel-auth-links (no hay __sep en uso real) -- si se usa,
   marcar el span aria-hidden="true" como el resto de separadores. */
.ps-panel-auth-links__sep {
  margin: 0 8px;
  color: var(--lt-text-faint);
}

@media (max-width: 768px) {
  .ps-panel-auth-links { font-size: 13px; }
}


/* ==========================================================================
   20. PANEL DEL ABOGADO — INICIO (CONSULTAS)
   (/panel/)
   --------------------------------------------------------------------------
   Cabecera con la ficha + estado de verificación, el aviso honesto sobre el
   contacto (§4.4 del diseño: no hay teléfono del cliente que enseñar) y la
   lista de ContactRequest enviadas. Cada fila reutiliza .lt-card para la
   caja (fondo/borde/radio/padding); .ps-disclaimer para el aviso. Lo nuevo
   de esta sección es la cabecera, la lista y el estado vacío.
   ========================================================================== */

/* .ps-panel-wrap (max-width:760px) ya no se usa desde el tramo 2: las ocho
   pantallas cuelgan de .ps-panel-shell/.ps-panel-main (seccion 24), no de
   un wrapper centrado propio -- el ancho lo da el rail + main dentro del
   shell. Se retiro esta regla por quedar sin ningun selector que la
   aplique. */

/* Sin hero (revision visual 2026-08-05): estas dos pantallas ya no tienen la
   banda oscura de la que despegar, asi que `.ps-rm-section` (44px, pensado
   para justo debajo de un hero corto, ver §17/§18) se queda corto de
   sentido y le sobra pegado al header sticky del sitio (72px). Menos que
   `.lt-section--first` (96px, pensado para separarse de un hero LARGO) y
   mas que `.ps-rm-section`: un respiro de app, no de portada. */
.ps-panel-topsection { padding-top: 40px; }

@media (max-width: 768px) {
  .ps-panel-topsection { padding-top: 26px; }
}

/* .ps-panel-head__status* SIGUE viva (tramo 2): la reutiliza
   accounts/panel/_identity_header.html tal cual para el distintivo de
   estado. El resto de .ps-panel-head__* (layout, nombre, acciones, logout)
   se retira aqui: esa cabecera entera la sustituye .ps-panel-idhead (mas
   abajo, seccion 24), comun a las ocho pantallas -- antes vivia repetida a
   mano en inicio.html y editar.html. */
.ps-panel-head__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}
.ps-panel-head__status--ok      { color: var(--ps-check-ink); }
.ps-panel-head__status--pending { color: var(--lt-text-muted); }

.ps-panel-notice { margin-bottom: 30px; }

.ps-panel-list__head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 16px;
}
.ps-panel-list__h {
  margin: 0;
  font-family: var(--lt-font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--lt-ink);
}
.ps-panel-list__count {
  font-size: 13px;
  font-weight: 600;
  color: var(--lt-text-muted);
}

.ps-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ps-panel-consulta__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.ps-panel-consulta__date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lt-text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.ps-panel-consulta__source {
  font-size: 11px;
  font-weight: 700;
  color: var(--lt-primary);
  background: var(--ps-soft);
  padding: 3px 10px;
  border-radius: var(--lt-r-pill);
  white-space: nowrap;
}
.ps-panel-consulta__name {
  margin: 0 0 6px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--lt-ink);
}
.ps-panel-consulta__problem {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--lt-text-2);
}
.ps-panel-consulta__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.ps-panel-consulta__tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lt-text-muted);
  background: var(--ps-mist);
  padding: 4px 10px;
  border-radius: var(--lt-r-pill);
}
.ps-panel-consulta__tag svg { flex-shrink: 0; }

.ps-panel-empty {
  text-align: center;
  padding: 46px 24px;
}
.ps-panel-empty__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--ps-mist);
  color: var(--lt-text-faint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ps-panel-empty__h {
  margin: 0 0 8px;
  font-family: var(--lt-font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--lt-ink);
}
.ps-panel-empty__p {
  margin: 0 auto;
  max-width: 440px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--lt-text-muted);
}

@media (max-width: 768px) {
  .ps-panel-empty { padding: 36px 18px; }
}

/* Aviso reducido a una linea con enlace (S3.1: "no 54 palabras en caja
   ambar permanente" -- ver el .ps-disclaimer largo que sustituye). */
.ps-panel-oneliner {
  margin: 0 0 20px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--lt-text-muted);
}
.ps-panel-oneliner a { color: var(--lt-primary); font-weight: 600; text-decoration: none; }
.ps-panel-oneliner a:hover { text-decoration: underline; }

/* Estado vacio con DOS acciones reales (S3.1), no un callejon sin salida. */
.ps-panel-empty__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
@media (max-width: 480px) {
  .ps-panel-empty__actions { flex-direction: column; }
  .ps-panel-empty__actions .lt-btn { width: 100%; }
}


/* ==========================================================================
   21. PANEL DEL ABOGADO — PERFIL Y ESPECIALIDADES
   (/panel/ficha/perfil/, /panel/ficha/especialidades/)
   --------------------------------------------------------------------------
   Hasta el tramo 1 esto era /panel/editar/, una unica pantalla larga. El
   tramo 2 la reparte en dos (S3.2/S3.3): Perfil se queda con la mayoria de
   estas reglas (formulario agrupado en secciones .lt-card/.ps-panel-section
   sobre .ps-rm-field/.ps-rm-label/.ps-rm-input); Especialidades se lleva
   los grupos plegables de especialidad (<details> nativo, sin JS, para que
   ~210 opciones quepan en el movil -- ver la seccion 25 para lo que anade
   alli: chips, buscador, tope de 12). El horario (.ps-panel-hours* mas
   abajo) tambien se queda aqui pero ya NO lo usa Perfil -- lo usa Oficinas
   y horarios (S3.4, tramo 3, seccion 27), que las REUTILIZA tal cual en vez
   de reescribirlas (mismo criterio que Especialidades con su arbol).
   ========================================================================== */

.ps-panel-section {
  margin-bottom: 20px;
}
.ps-panel-section__h {
  margin: 0 0 6px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--lt-font-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--lt-ink);
}
/* Bloques numerados (S3.2, "patron de elAbogado"): 01 Descripcion...
   06 Lo que no se edita aqui. Puramente visual -- el orden real lo fija el
   orden del HTML, esto solo lo hace legible de un vistazo. */
.ps-panel-section__num {
  font-family: var(--lt-font-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--lt-text-muted);
}
.ps-panel-section__hint {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--lt-text-muted);
}

/* Bloque 06, "lo que no se edita aqui" (S3.2): al FINAL a proposito, tono
   discreto -- abrir la pantalla con una lista de prohibiciones es el
   arranque emocional opuesto al que pide el diseño. */
.ps-panel-section--footnote {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--lt-border);
}
.ps-panel-section__h--muted {
  font-size: 14px;
  color: var(--lt-text-muted);
}
.ps-panel-section--footnote .ps-panel-section__hint {
  margin-bottom: 0;
}
.ps-panel-section--footnote a { color: var(--lt-primary); font-weight: 600; text-decoration: none; }
.ps-panel-section--footnote a:hover { text-decoration: underline; }

/* Ejemplo plegable bajo la descripcion (S3.2: "contador de caracteres con
   rango recomendado y ejemplo plegable"). */
.ps-panel-example {
  margin-top: 10px;
  font-size: 13px;
  color: var(--lt-text-muted);
}
.ps-panel-example summary {
  cursor: pointer;
  color: var(--lt-primary);
  font-weight: 600;
}
.ps-panel-example p {
  margin: 8px 0 0;
  padding: 10px 12px;
  background: var(--ps-mist);
  border-radius: var(--lt-r-ctl);
  line-height: 1.55;
  font-style: italic;
}

/* --- Descripcion: editor de texto enriquecido ---------------------------
   Progresivo: el <textarea id="id_description"> es el campo real; el
   toolbar y el <div contenteditable> nacen `hidden` y solo se muestran si
   directory/static/js/panel-editar.js llega a correr (si no, el textarea
   sigue visible tal cual estaba). --------------------------------------- */
.ps-panel-richtext__toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}
.ps-panel-richtext__btn {
  min-width: 36px;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-ctl);
  background: var(--lt-surface);
  color: var(--lt-ink);
  font-size: 13.5px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.ps-panel-richtext__btn:hover,
.ps-panel-richtext__btn:focus-visible {
  border-color: var(--lt-primary);
  background: var(--ps-mist);
}
.ps-panel-richtext__sep {
  width: 1px;
  align-self: stretch;
  margin: 4px 2px;
  background: var(--lt-border);
}
.ps-panel-richtext__editor {
  min-height: 132px;
  padding: 12px 14px;
  background: var(--lt-canvas);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-ctl);
  font-family: var(--lt-font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--lt-ink);
  outline: none;
}
.ps-panel-richtext__editor:focus-visible,
.ps-panel-richtext__editor:focus {
  border-color: var(--lt-primary);
  box-shadow: 0 0 0 3px rgba(201, 79, 79, .16);
}
.ps-panel-richtext__editor p { margin: 0 0 0.8em; }
.ps-panel-richtext__editor p:last-child { margin-bottom: 0; }
.ps-panel-richtext__editor ul,
.ps-panel-richtext__editor ol { margin: 0 0 0.8em; padding-left: 1.3em; }
.ps-panel-richtext__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.ps-panel-richtext__foot .ps-rm-help { margin-top: 6px; }
.ps-panel-richtext__count {
  flex-shrink: 0;
  margin-top: 6px;
  font-size: 12px;
  color: var(--lt-text-muted);
  white-space: nowrap;
}
.ps-panel-richtext__count--over { color: var(--lt-primary); font-weight: 700; }

/* --- Especialidades: grupos plegables ---------------------------------- */
.ps-panel-specgroups {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ps-panel-specgroup {
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-ctl);
  padding: 0 14px;
  background: var(--lt-canvas);
}
.ps-panel-specgroup__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  list-style: none;
  cursor: pointer;
  padding: 12px 0;
}
.ps-panel-specgroup__summary::-webkit-details-marker { display: none; }
.ps-panel-specgroup__summary::after {
  content: '';
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-right: 2px solid var(--lt-text-faint);
  border-bottom: 2px solid var(--lt-text-faint);
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.ps-panel-specgroup[open] > .ps-panel-specgroup__summary::after { transform: rotate(-135deg); }
.ps-panel-specgroup__parent {
  padding: 0;
  min-height: 0;
  flex: 1;
}
.ps-panel-specgroup__parent .ps-rm-check__text { font-weight: 700; }
.ps-panel-specgroup__count {
  font-size: 12px;
  font-weight: 600;
  color: var(--lt-text-muted);
  flex-shrink: 0;
}
.ps-panel-specgroup__list {
  list-style: none;
  margin: 0;
  padding: 2px 0 12px 26px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* --- Idiomas: rejilla de checkboxes -------------------------------------- */
.ps-panel-checkgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px 14px;
}
@media (max-width: 640px) {
  .ps-panel-checkgrid { grid-template-columns: repeat(2, 1fr); }
}

.ps-panel-extraphones { margin-top: -6px; }

/* --- Horario: una fila por dia, con uno o mas tramos ---------------------
   Rediseñada en el tramo 3 (S3.4) para Oficinas y horarios: reemplaza la
   casilla unica "Cerrado" por un grupo de TRES radios (Horario / Cerrado /
   24 horas, accounts/forms_panel.py:OfficeHoursField) y corrige dos
   hallazgos literales del diseño --
     1. "El control de cerrado pasa a area tactil de 44px minimo (hoy mide
        16x16px)": los tres radios de abajo son ahora ETIQUETAS completas
        (`.ps-panel-hours__mode`, min-height 44px, toda el area clicable),
        no un <input> desnudo de 16px.
     2. "El bloque de horas se alinea junto al dia (hoy hay ~400px de vacio
        entre 'Cerrado' y los campos)": ese hueco salia de un
        `.ps-panel-hours__top` con `justify-content: space-between` en una
        fila ancha -- aqui el dia, los modos y los tramos van en columna,
        sin ningun `space-between` que pueda abrir un hueco segun el ancho
        de la pantalla. -------------------------------------------------- */
.ps-panel-hours {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ps-panel-hours__row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--lt-border);
}
.ps-panel-hours__row:last-child { border-bottom: none; padding-bottom: 0; }
.ps-panel-hours__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.ps-panel-hours__day {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lt-ink);
}
.ps-panel-hours__copyall {
  border: none;
  background: none;
  padding: 4px 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--lt-primary);
  cursor: pointer;
}
.ps-panel-hours__copyall:hover,
.ps-panel-hours__copyall:focus-visible { text-decoration: underline; }

/* Grupo de 3 radios (S3.4: "cerrado y 24 horas" como estados de dia que no
   son tramos). Etiqueta entera clicable, min 44px de alto -- el hallazgo
   literal del diseño sobre el control de cerrado de 16x16px. */
.ps-panel-hours__modes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.ps-panel-hours__mode {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  font-size: 13px;
  color: var(--lt-text-muted);
  cursor: pointer;
}
.ps-panel-hours__mode input {
  width: 18px;
  height: 18px;
  accent-color: var(--lt-primary);
  cursor: pointer;
}
.ps-panel-hours__tramos {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ps-panel-hours__tramo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ps-panel-hours__times {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
/* var(--lt-text-faint) a proposito (revision de contraste 2026-08-09): el
   span es el guion "—" entre la hora de apertura y la de cierre
   (_bloque_horario.html), marcado aria-hidden="true" -- las horas en si
   van en los <input type="time"> con aria-label propio. */
.ps-panel-hours__times span { color: var(--lt-text-faint); }
.ps-panel-hours__time {
  width: 110px;
  min-height: 40px;
  padding: 8px 10px;
}
.ps-panel-hours__remove {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-pill);
  background: var(--lt-surface);
  color: var(--lt-text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.ps-panel-hours__remove:hover,
.ps-panel-hours__remove:focus-visible {
  border-color: var(--lt-primary);
  color: var(--lt-primary);
}
.ps-panel-hours__add {
  align-self: flex-start;
  padding: 6px 4px;
  border: none;
  background: none;
  color: var(--lt-primary);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.ps-panel-hours__add:hover,
.ps-panel-hours__add:focus-visible { text-decoration: underline; }
@media (max-width: 640px) {
  .ps-panel-hours__time { width: auto; flex: 1; }
}

/* --- Servicios: interruptor Si/No SIN preseleccion (S3.2, tramo 2) -------
   Antes habia tres pildoras identicas (Si/No/No especificado) y "No
   especificado" salia premarcada -- un estado interno del modelo pintado
   como si fuera una respuesta que alguien hubiera elegido. Ahora son dos
   opciones reales (Si/No, ninguna premarcada) mas un enlace pequeño
   ".ps-panel-tristate__unset" aparte que devuelve a null -- visualmente
   discreto porque no es la respuesta que se le pide al abogado, es la
   salida para quien de verdad prefiere no decir nada. -------------------- */
/* La rejilla vive en el GRUPO, no en cada fila, y cada fila se disuelve con
   "display: contents" para que sus tres partes caigan en las columnas del
   grupo. Es lo que alinea Si/No y "Prefiero no indicarlo" en vertical entre
   filas: con la rejilla en cada fila, cada una calcularia sus columnas por
   separado y las pildoras bailarian segun lo larga que fuera su pregunta
   ("¿Eres accesible?" contra "¿Tienes aparcamiento?"). */
.ps-panel-tristate-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px 24px;
}
.ps-panel-tristate { display: contents; }
.ps-panel-tristate__opts {
  display: flex;
  gap: 6px;
}
.ps-panel-tristate__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Ancho fijo: "Si" y "No" no miden lo mismo y sin esto las dos pildoras
     de una fila no cuadran con las de la de arriba. */
  min-width: 92px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lt-text-2);
  background: var(--ps-mist);
  padding: 8px 14px;
  border-radius: var(--lt-r-pill);
  cursor: pointer;
  min-height: 36px;
}
.ps-panel-tristate__opt input {
  accent-color: var(--lt-primary);
  cursor: pointer;
}
.ps-panel-tristate__unset {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 5px;
  font-size: 12px;
  color: var(--lt-text-muted);
  cursor: pointer;
  white-space: nowrap;
}
.ps-panel-tristate__unset input { accent-color: var(--lt-text-faint); cursor: pointer; }
@media (max-width: 640px) {
  /* En movil no hay ancho para tres columnas: cada fila vuelve a ser su
     propia caja apilada. */
  .ps-panel-tristate-group { display: flex; flex-direction: column; gap: 18px; }
  .ps-panel-tristate {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .ps-panel-tristate__unset { justify-self: auto; }
}

.ps-panel-editform__actions {
  margin-top: 8px;
}
.ps-panel-editform__actions .ps-rm-submit { max-width: 320px; }
@media (max-width: 640px) {
  .ps-panel-editform__actions .ps-rm-submit { max-width: 100%; }
}


/* ==========================================================================
   22. PANEL DEL ABOGADO — COMPLETITUD COMPACTA DEL RAIL
   (accounts/templates/accounts/panel/_nav.html, cabecera de
   accounts/services/completitud.py)
   --------------------------------------------------------------------------
   Tramo 2 (2026-08-06-backoffice-abogado, S3.1/S9): la tarjeta grande de
   completitud (.ps-panel-todo*, la version del tramo 1) se retira del
   cuerpo del indice -- las consultas suben a ocupar ese sitio -- y pasa a
   este bloque COMPACTO dentro del rail (seccion 24), visible en las ocho
   pantallas en vez de solo en /panel/. Mismas variables de color de
   siempre, nada nuevo: nivel actual, "te faltan N", hasta 3 pendientes
   (solo el "que", sin el "porque" -- S4.1) y un boton.
   ========================================================================== */

.ps-panel-nav__completitud {
  padding: 16px;
  border-radius: var(--lt-r-md);
  background: var(--ps-soft);
  border: 1px solid #EFD9CE;
}
.ps-panel-nav__completitud-nivel {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--lt-ink);
}
.ps-panel-nav__completitud-nivel--ok {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ps-check-ink);
}
/* --lt-text-2, no --lt-text-muted: fallo preexistente encontrado de paso en
   la revision de contraste 2026-08-09 (no usaba --lt-text-faint, pero es el
   mismo problema -- --lt-text-muted da 4,30:1 sobre --ps-soft, no llega al
   minimo; --lt-text-2 da 5,24:1). Es "Te falta 1 para llegar a Completo". */
.ps-panel-nav__completitud-meta {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--lt-text-2);
}
.ps-panel-nav__completitud-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ps-panel-nav__completitud-list a {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--lt-text-2);
  text-decoration: none;
}
.ps-panel-nav__completitud-list a:hover,
.ps-panel-nav__completitud-list a:focus-visible {
  color: var(--lt-primary);
  text-decoration: underline;
}
a.ps-panel-nav__completitud-more {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--lt-primary);
  text-decoration: none;
}
a.ps-panel-nav__completitud-more:hover { text-decoration: underline; }
.ps-panel-nav__completitud-btn {
  width: 100%;
  justify-content: center;
}

/* ==========================================================================
   23. REGISTRO — ALTA DESDE CERO
   (/panel/registro/, accounts/templates/accounts/registro/alta.html)
   --------------------------------------------------------------------------
   Dos escenas (busqueda / alta), NUNCA visibles las dos a la vez con
   JavaScript: la busqueda reutiliza .ps-claim-panel/.ps-claim-* de §18 tal
   cual (misma familia que el reclamo) y el alta reutiliza .ps-rm-form/
   .ps-rm-field/.ps-rm-label/.ps-rm-input/.ps-rm-row y, para las
   especialidades, .lt-card/.ps-panel-section/.ps-panel-specgroups de §21
   (mismos ~210 checkboxes agrupados que /panel/editar/).

   Revision 2026-08-10 ("alta por pasos"): el alta, a su vez, se reparte en
   4 <fieldset data-step="1..4"> que directory/static/js/registro-pasos.js
   ensena de uno en uno -- lo nuevo de esta seccion es SOLO ese trocedado
   (.ps-registro-step*, .ps-registro-stepper*, .ps-registro-backlink); nada
   de lo de arriba cambia. Sin JavaScript no hay `hidden` que quitar (el HTML
   de partida no lo trae, lo añade el propio script) asi que estas reglas de
   ancho/orden siguen siendo el unico CSS que ve un visitante sin JS -- las
   de trocedado no hacen nada visible en ese caso, y esta bien que asi sea. */

.ps-registro-form {
  max-width: 760px;
  margin: 0 auto;
}

.ps-registro-notice { margin-bottom: 24px; }

/* "‹ Volver a la búsqueda": enlace de texto, no un botón con caja -- es una
   salida secundaria, no compite con "Siguiente"/"Crear mi ficha". Reset de
   <button> a como si fuera texto: sin esto hereda el chrome nativo del SO. */
.ps-registro-backlink {
  display: inline-block;
  margin-bottom: 16px;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--lt-font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lt-primary);
  cursor: pointer;
}
.ps-registro-backlink:hover { text-decoration: underline; }

/* Barra de progreso + "Paso X de 4 — Título". Anchos fijos por paso (25/50/
   75/100%) via [data-progress], NUNCA `element.style.width` desde JS: la CSP
   del panel bloquea estilo en línea tanto si lo escribe una plantilla como
   si lo escribe un script (ver directory/middleware/csp.py, style-src sin
   'unsafe-inline'). */
.ps-registro-stepper { margin-bottom: 22px; }
.ps-registro-stepper__track {
  height: 6px;
  border-radius: 999px;
  background: var(--lt-canvas);
  border: 1px solid var(--lt-border);
  overflow: hidden;
}
.ps-registro-stepper__bar {
  height: 100%;
  border-radius: 999px;
  background: var(--lt-primary);
  transition: width .25s ease;
  width: 25%;
}
.ps-registro-stepper__bar[data-progress="2"] { width: 50%; }
.ps-registro-stepper__bar[data-progress="3"] { width: 75%; }
.ps-registro-stepper__bar[data-progress="4"] { width: 100%; }
.ps-registro-stepper__status {
  margin: 8px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lt-text-muted);
}

/* Reset de <fieldset>: sin esto trae borde, padding y `min-width: auto`
   nativos del navegador que rompen el ancho del formulario. */
.ps-registro-step {
  margin: 0;
  padding: 0;
  border: none;
  min-width: 0;
}
.ps-registro-step__legend {
  padding: 0;
  margin: 0 0 4px;
  font-family: var(--lt-font-head);
  font-size: 17px;
  font-weight: 600;
  color: var(--lt-ink);
}
.ps-registro-step__hint {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--lt-text-muted);
}
.ps-registro-step__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
}


/* ==========================================================================
   24. PANEL DEL ABOGADO — RAIL DE NAVEGACION Y CABECERA DE IDENTIDAD
   (accounts/templates/accounts/panel/_shell.html, _nav.html,
   _identity_header.html)
   --------------------------------------------------------------------------
   2026-08-06-backoffice-abogado, tramo 2, S2/S3. Comun a las OCHO pantallas
   del panel: rail lateral fijo a partir de 992px (--lt-header-h + un hueco,
   mismo patron que .lt-sticky-sidebar de legaltica-ds.css); por debajo,
   tira de pestañas con scroll horizontal -- misma marcacion HTML, solo
   cambia el CSS entre los dos layouts, sin JS de por medio.

   .ps-panel-idhead es la cabecera de identidad, tambien comun a las ocho:
   foto (o hueco que invita a subir), nombre, municipio + especialidades,
   distintivo de estado (.ps-panel-head__status, seccion 20) y las dos
   acciones que quedan fuera del rail ("Ver mi ficha publica" primaria,
   "Cerrar sesion" como enlace de texto -- S2, tabla "lo que se deja fuera
   del menu").
   ========================================================================== */

.ps-panel-shell {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}

.ps-panel-nav {
  flex-shrink: 0;
  width: 240px;
}
.ps-panel-nav__scroll { /* en escritorio no hace nada; en movil es el carril de scroll (media query mas abajo) */ }

.ps-panel-nav__group { margin-bottom: 20px; }
.ps-panel-nav__group-label {
  margin: 0 0 6px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lt-text-muted);
}
/* a.ps-panel-nav__item (con el tag, no solo la clase): .lt a de
   legaltica-ds.css (color: var(--lt-text)) tiene especificidad (0,1,1) --
   mas que una clase sola (0,1,0) -- y le gana a CUALQUIER regla de color de
   aqui que solo lleve la clase. El propio comentario de legaltica-ds.css lo
   avisa: "empata el componente que se declara despues". Empatar con `a.`
   y venir despues en el cascade (page-static.css se carga tras
   legaltica-ds.css) es como gana este bloque. Sin el `a.` de delante, todos
   los enlaces del rail se pintaban con var(--lt-text) sin importar el
   `color` que se les pidiera aqui -- hallazgo real de la verificacion con
   Playwright del tramo 2, no un ajuste preventivo. */
a.ps-panel-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: var(--lt-r-ctl);
  font-size: 14px;
  font-weight: 600;
  color: var(--lt-text-2);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
a.ps-panel-nav__item:hover,
a.ps-panel-nav__item:focus-visible {
  background: var(--ps-mist);
  color: var(--lt-ink);
}
a.ps-panel-nav__item--active {
  background: var(--lt-ink);
  color: #FFFFFF;
}
a.ps-panel-nav__item--active:hover,
a.ps-panel-nav__item--active:focus-visible {
  background: var(--lt-ink);
  color: #FFFFFF;
}
.ps-panel-nav__label { flex: 1; min-width: 0; }
/* Punto de "incompleto" (S2): NUNCA un numero -- "3 junto a Oficinas no es
   informacion accionable". Un punto discreto, del color de acento. */
.ps-panel-nav__dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lt-primary);
}
.ps-panel-nav__item--active .ps-panel-nav__dot { background: #FFFFFF; }
/* Contador numerico: SOLO en Consultas y solo si es > 0 (S2). */
.ps-panel-nav__badge {
  flex-shrink: 0;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: var(--lt-r-pill);
  background: var(--lt-primary);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}
.ps-panel-nav__item--active .ps-panel-nav__badge { background: #FFFFFF; color: var(--lt-ink); }

.ps-panel-main {
  flex: 1;
  min-width: 0;
}

/* --- Cabecera de identidad, comun a las ocho pantallas ------------------ */
.ps-panel-idhead {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.ps-panel-idhead__photo {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
}
.ps-panel-idhead__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--lt-border);
}
/* Hueco que invita a subir foto (S3): no la imagen por defecto del sitio
   publico -- aqui hay que decir "sube la tuya", no fingir que ya hay una. */
/* --lt-text-muted da 4,33:1 sobre --ps-mist (revision de contraste
   2026-08-09) -- este circulo va DIRECTAMENTE sobre --ps-mist (no es una
   card blanca encima), y a 9px de letra no llega al 4,5:1 minimo. Con
   --lt-text-2 da 5,28:1. */
/* Un avatar limpio, no una etiqueta metida a la fuerza en un circulo. El
   texto "Sube tu foto" vivia AQUI dentro, a 9px -- por debajo del minimo
   legible -- y en dos lineas apretadas contra el borde de 56px: se leia
   como un avatar roto. Ahora el texto va en aria-label y lo que se ve es
   la silueta con un "+" en la esquina, que es como se dice "esto se toca"
   donde quiera que haya una foto de perfil. */
a.ps-panel-idhead__photo-empty {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid var(--lt-border);
  background: var(--ps-mist);
  color: var(--lt-text-2);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.ps-panel-idhead__photo-mas {
  position: absolute;
  right: -1px;
  bottom: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--lt-bg, #fff);
  background: var(--lt-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
a.ps-panel-idhead__photo-empty:hover,
a.ps-panel-idhead__photo-empty:focus-visible {
  border-color: var(--lt-primary);
  color: var(--lt-primary);
}
.ps-panel-idhead__body { flex: 1; min-width: 0; }
.ps-panel-idhead__name {
  margin: 0 0 4px;
  font-family: var(--lt-font-head);
  font-size: 21px;
  font-weight: 700;
  color: var(--lt-ink);
}
.ps-panel-idhead__meta {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--lt-text-muted);
}
/* var(--lt-text-faint) a proposito (revision de contraste 2026-08-09): el
   "." separador va aria-hidden="true" en _identity_header.html, entre
   municipio y especialidades -- ambos ya legibles por su cuenta. */
.ps-panel-idhead__sep { margin: 0 6px; color: var(--lt-text-faint); }
.ps-panel-idhead__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
}
/* a.ps-panel-idhead__public-link: mismo motivo que a.ps-panel-nav__item mas
   arriba (empatar la especificidad de .lt a, (0,1,1), con el tag delante). */
a.ps-panel-idhead__public-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lt-primary);
  text-decoration: none;
}
a.ps-panel-idhead__public-link:hover { text-decoration: underline; }
/* "Cerrar sesion" es la accion secundaria (S2): enlace de texto, no un
   .lt-btn--outline que le dispute peso visual a "Ver mi ficha publica". */
.ps-panel-idhead__logout { margin: 0; flex-shrink: 0; }
.ps-panel-idhead__logout-btn {
  border: none;
  background: none;
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lt-text-muted);
  text-decoration: underline;
  cursor: pointer;
}
.ps-panel-idhead__logout-btn:hover { color: var(--lt-ink); }

.ps-panel-screen-h {
  margin: 0 0 4px;
  font-family: var(--lt-font-head);
  font-size: 19px;
  font-weight: 700;
  color: var(--lt-ink);
}
.ps-panel-screen-hint {
  margin: 0 0 20px;
  font-size: 13.5px;
  color: var(--lt-text-muted);
}

/* --- Escritorio (>=992px): rail lateral fijo ----------------------------- */
@media (min-width: 992px) {
  .ps-panel-nav {
    position: sticky;
    top: calc(var(--lt-header-h) + 24px);
    max-height: calc(100vh - var(--lt-header-h) - 48px);
    overflow-y: auto;
  }
}

/* --- Debajo de 992px: tira de pestañas con scroll horizontal ------------- */
@media (max-width: 991px) {
  .ps-panel-shell {
    flex-direction: column;
    gap: 18px;
    padding: 0 16px;
  }
  .ps-panel-nav { width: 100%; }

  /* LA TIRA DE PESTAÑAS SE VA. Medida a 375px: 838px de ancho, o sea 2,2
     pantallas de scroll horizontal para una navegacion de ocho entradas,
     justo debajo de una cabecera que YA tiene su hamburguesa. Eran dos
     navegaciones distintas una encima de otra, y ninguna de las dos se
     leia entera.

     Las ocho entradas viven ahora dentro de esa hamburguesa (ver el bloque
     `offcanvas_panel` de accounts/templates/accounts/panel/_shell.html).
     Se esconde con `display:none` y no se borra el marcado: es la MISMA
     lista, y duplicarla en dos plantillas es como divergen las cosas. */
  .ps-panel-nav__scroll { display: none; }

  /* El bloque de completitud SE QUEDA a la vista. Es lo primero que hay que
     ver al entrar -- "te faltan 2 para llegar a Basico" con sus enlaces --
     y esconderlo detras de un boton seria esconder justo el trabajo que el
     panel viene a pedir. */
  .ps-panel-nav__completitud { margin-top: 0; }
}

@media (max-width: 480px) {
  .ps-panel-idhead { align-items: flex-start; }
  .ps-panel-idhead__photo { width: 44px; height: 44px; }
  .ps-panel-idhead__name { font-size: 18px; }
  .ps-panel-idhead__row { gap: 6px 10px; }
}


/* ==========================================================================
   25. PANEL DEL ABOGADO — ESPECIALIDADES: CHIPS Y BUSCADOR
   (/panel/ficha/especialidades/)
   --------------------------------------------------------------------------
   Tramo 2 (S3.3). El arbol de checkboxes (<details>/.ps-panel-specgroup*)
   es el de la seccion 21, reutilizado tal cual; esto es SOLO lo nuevo de
   esta pantalla: las fichas ("chips") de lo elegido arriba, el buscador y
   el aviso de tope de 12.
   ========================================================================== */

.ps-panel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
  min-height: 34px;
}
.ps-panel-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 12px;
  border-radius: var(--lt-r-pill);
  background: var(--ps-mist);
  border: 1px solid var(--lt-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--lt-text-2);
}
.ps-panel-chip--primary {
  background: var(--ps-soft);
  border-color: var(--lt-primary-border);
  color: var(--lt-ink);
}
/* var(--lt-text-faint) a proposito (revision de contraste 2026-08-09): es
   el icono de estrella para marcar la especialidad principal -- el
   nombre accesible lo da aria-label ("Marcar como principal" /
   "Especialidad principal"), no el glifo. Estado activo/hover pasa a
   --lt-primary, igual que el resto de botones de icono del panel
   (.ps-panel-hours__remove, .ps-dropzone__clear). */
.ps-panel-chip__primary-btn {
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 0 2px;
  font-size: 13px;
  line-height: 1;
  color: var(--lt-text-faint);
  cursor: pointer;
}
.ps-panel-chip--primary .ps-panel-chip__primary-btn,
.ps-panel-chip__primary-btn[aria-pressed="true"] { color: var(--lt-primary); }
.ps-panel-chip__primary-btn:hover { color: var(--lt-primary); }
.ps-panel-chip__remove {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, .06);
  color: var(--lt-text-muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.ps-panel-chip__remove:hover { background: var(--lt-primary); color: #FFFFFF; }
.ps-panel-chips__empty {
  margin: 4px 0;
  font-size: 13.5px;
  color: var(--lt-text-muted);
}

.ps-panel-specgroups__cap-hint {
  margin: 0 0 14px;
}
/* Las fichas de lo elegido, plegadas: sin tope pueden ser 44 y repetian el
   arbol entero. El resumen lleva lo unico que hace falta de un vistazo. */
.ps-panel-chipsbox {
  margin-bottom: 12px;
}
.ps-panel-chipsbox__summary {
  cursor: pointer;
  padding: 9px 12px;
  border-radius: var(--lt-r-ctl);
  background: var(--ps-mist);
  color: var(--lt-ink);
  font-size: 13px;
  font-weight: 600;
  list-style: none;
}
.ps-panel-chipsbox__summary::-webkit-details-marker { display: none; }
.ps-panel-chipsbox__summary::after {
  content: '▾';
  float: right;
  color: var(--lt-text-faint);
  font-weight: 400;
}
.ps-panel-chipsbox[open] > .ps-panel-chipsbox__summary::after { content: '▴'; }
.ps-panel-chipsbox[open] > .ps-panel-chipsbox__summary { margin-bottom: 10px; }

/* Contador pegado a la pista. NO hay tope: pasado SPECIALTIES_NUDGE cambia
   de color como consejo, sin impedir nada. */
.ps-panel-speccount {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 9px;
  border-radius: var(--lt-r-pill);
  background: var(--ps-mist);
  color: var(--lt-text-2);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ps-panel-speccount[data-lleno="aviso"] {
  background: #fdf0d5;
  color: #7a4b00;
}
.ps-panel-speccount[data-lleno="si"] {
  background: var(--lt-primary);
  color: #fff;
}

.ps-panel-specsearch {
  margin-bottom: 14px;
}

.ps-panel-specgroup__selectall {
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 4px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--lt-primary);
  cursor: pointer;
}
.ps-panel-specgroup__selectall:hover { text-decoration: underline; }

/* 7 grupos sin hijas (S3.3): casilla simple, sin chevron ni caja plegable. */
.ps-panel-specgroup--standalone {
  padding: 12px 14px;
}
.ps-panel-specgroup--standalone .ps-panel-specgroup__parent { padding: 0; min-height: 0; }


/* ==========================================================================
   26. PANEL DEL ABOGADO — PANTALLA "TODAVIA NO"
   (Oficinas y horarios, Equipo, Fotos, Opiniones, Mi cuenta -- tramos 3/4;
   accounts/templates/accounts/panel/proximamente.html)
   --------------------------------------------------------------------------
   Tramo 2 (S2): las ocho entradas del rail se ven siempre, tengan o no
   pantalla ya construida. Un aviso honesto, no un 404 ni una pagina en
   blanco.
   ========================================================================== */

.ps-panel-soon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 32px 26px;
}
/* var(--lt-text-faint) a proposito (revision de contraste 2026-08-09):
   contenedor de un svg aria-hidden, mismo patron que .ps-panel-empty__icon.
   Nota aparte: .ps-panel-soon ya no lo usa ninguna plantilla (Tramo 2/S2
   se completo y proximamente.html se borro) -- queda como CSS muerto, no
   se toca en esta tarea. */
.ps-panel-soon__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ps-mist);
  color: var(--lt-text-faint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ps-panel-soon__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--lt-text-muted);
  max-width: 520px;
}


/* ==========================================================================
   27. PANEL DEL ABOGADO — OFICINAS, OPINIONES Y MI CUENTA (tramo 3)
   (accounts/templates/accounts/panel/oficinas.html, oficina_form.html,
   opiniones.html, cuenta.html, baja_confirmada.html)
   ========================================================================== */

/* --- Oficinas: lista de tarjetas ----------------------------------------- */
.ps-panel-officelist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}
.ps-panel-officecard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.ps-panel-officecard__name {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--lt-font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--lt-ink);
}
.ps-panel-officecard__badge {
  padding: 2px 9px;
  border-radius: var(--lt-r-pill);
  background: var(--ps-mist);
  color: var(--lt-primary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}
/* --lt-text-2, no --lt-text-muted (revision de contraste 2026-08-09): el
   badge hereda background: var(--ps-mist) de .ps-panel-officecard__badge
   -- a 11px, --lt-text-muted da 4,33:1 sobre ese fondo (no llega al
   minimo); --lt-text-2 da 5,28:1. */
.ps-panel-officecard__badge--muted { color: var(--lt-text-2); }
.ps-panel-officecard__address {
  margin: 0 0 6px;
  font-size: 13.5px;
  color: var(--lt-text-muted);
}
.ps-panel-officecard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12.5px;
  color: var(--lt-text-muted);
}

/* --- Opiniones ------------------------------------------------------------ */
.ps-panel-reviewsummary {
  margin-bottom: 16px;
}
.ps-panel-reviewsummary__score {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.ps-panel-reviewsummary__number {
  font-family: var(--lt-font-head);
  font-size: 28px;
  font-weight: 800;
  color: var(--lt-ink);
}
.ps-panel-reviewsummary__stars {
  color: var(--lt-accent, #C99A3D);
  letter-spacing: 1px;
}
.ps-panel-reviewsummary__count {
  font-size: 13px;
  color: var(--lt-text-muted);
}

.ps-panel-reviewlist {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ps-panel-review__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-bottom: 6px;
}
.ps-panel-review__author {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--lt-ink);
}
.ps-panel-review__stars {
  color: var(--lt-accent, #C99A3D);
  letter-spacing: 1px;
  font-size: 13px;
}
.ps-panel-review__date {
  margin-left: auto;
  font-size: 12px;
  color: var(--lt-text-muted);
}
.ps-panel-review__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--lt-text-muted);
}

.ps-panel-reviewactions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 18px;
}
.ps-panel-reviewactions__link {
  font-size: 13px;
  color: var(--lt-text-muted);
  text-decoration: underline;
}

/* --- Mi cuenta -------------------------------------------------------------
   Reutiliza .lt-card/.ps-panel-section (seccion 21) para los tres bloques de
   arriba (email, contraseña, telefono) sin ninguna regla propia: son los
   mismos .ps-rm-field/.ps-rm-input de siempre. Solo la baja necesita algo
   nuevo. ------------------------------------------------------------------ */
.ps-panel-baja__info {
  margin: 0 0 16px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--lt-text-muted);
}
.ps-panel-baja__info a { color: var(--lt-primary); font-weight: 600; }

.ps-panel-baja__toggle summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--lt-text-muted);
}
.ps-panel-baja__toggle[open] summary { margin-bottom: 14px; }

/* Variante de boton "peligroso" (confirmar la baja): mismo tamaño que
   .lt-btn--primary, tono de aviso en vez del color de marca -- vive aqui
   (page-static.css, SOLO en /panel/ y /registro/) y no en legaltica-ds.css
   (compartido con las 51.250 landings) porque es la unica pantalla del
   sitio que necesita un boton de "accion irreversible". */
.lt-btn--danger {
  background: #B94A3E;
  border-color: #B94A3E;
  color: #fff;
}
.lt-btn--danger:hover,
.lt-btn--danger:focus-visible {
  background: #9C3E33;
  border-color: #9C3E33;
}

.ps-panel-editform__cancel {
  margin-left: 14px;
  font-size: 13px;
  color: var(--lt-text-muted);
  text-decoration: underline;
}

/* --- Baja confirmada (pagina suelta, fuera del rail) ---------------------- */
.ps-panel-baja-done {
  text-align: center;
  padding: 48px 24px;
}
.ps-panel-baja-done__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--ps-mist);
  color: var(--lt-primary);
}
.ps-panel-baja-done__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

/* ==========================================================================
   28. PANEL DEL ABOGADO — AUTOCOMPLETADO DE DIRECCIONES (tramo 4)
   (accounts/templates/accounts/panel/oficina_form.html,
   directory/static/js/panel-direcciones.js)
   ========================================================================== */
.ps-panel-addresssearch {
  position: relative;
}
.ps-panel-addresssearch__list {
  list-style: none;
  margin: 4px 0 0;
  padding: 6px;
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-sm);
  box-shadow: 0 8px 24px rgba(20, 20, 30, .12);
  max-height: 260px;
  overflow-y: auto;
}
.ps-panel-addresssearch__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 10px;
  border: 0;
  background: transparent;
  border-radius: var(--lt-r-sm);
  font-size: 13.5px;
  color: var(--lt-ink);
  cursor: pointer;
}
.ps-panel-addresssearch__item:hover,
.ps-panel-addresssearch__item:focus-visible {
  background: var(--ps-mist);
}

/* ==========================================================================
   29. PANEL DEL ABOGADO — EQUIPO Y FOTOS (tramo 4)
   (accounts/templates/accounts/panel/equipo.html, equipo_form.html,
   fotos.html)
   ========================================================================== */

/* --- Equipo: lista de tarjetas --------------------------------------------- */
.ps-panel-teamlist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}
.ps-panel-teamcard--inactive { opacity: .65; }
.ps-panel-teamcard__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.ps-panel-teamcard__name {
  margin: 0;
  font-family: var(--lt-font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--lt-ink);
}
.ps-panel-teamcard__position {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--lt-text-muted);
}
.ps-panel-teamcard__bio {
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--lt-text-muted);
}
.ps-panel-teamcard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12.5px;
  color: var(--lt-text-muted);
  margin-bottom: 10px;
}
.ps-panel-teamcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--lt-border);
  padding-top: 10px;
}
.ps-panel-teamcard__miniform {
  display: flex;
  gap: 6px;
  margin: 0;
}
.ps-panel-teamcard__movebtn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-sm);
  background: var(--lt-surface);
  color: var(--lt-text-muted);
  cursor: pointer;
}
.ps-panel-teamcard__movebtn:disabled { opacity: .35; cursor: not-allowed; }
.ps-panel-teamcard__movebtn:not(:disabled):hover { background: var(--ps-mist); }
.ps-panel-teamcard__unlink {
  border: 0;
  background: transparent;
  color: var(--lt-text-muted);
  font-size: 12.5px;
  text-decoration: underline;
  cursor: pointer;
}

/* --- Fotos: rejilla --------------------------------------------------------- */
.ps-panel-photogrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.ps-panel-photocard { padding: 12px; }
.ps-panel-photocard--hidden { opacity: .55; }
.ps-panel-photocard__imgwrap {
  position: relative;
  border-radius: var(--lt-r-sm);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--ps-mist);
  margin-bottom: 8px;
}
.ps-panel-photocard__imgwrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ps-panel-photocard__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 9px;
  border-radius: var(--lt-r-pill);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.ps-panel-photocard__badge--main {
  background: var(--lt-primary);
  color: #fff;
}
.ps-panel-photocard__type {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--lt-text-muted);
}
.ps-panel-photocard__hiddenlabel { color: var(--lt-text-muted); }
.ps-panel-photocard__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.ps-panel-photocard__actions form { margin: 0; }
.ps-panel-photocard__link {
  border: 0;
  background: transparent;
  color: var(--lt-text-muted);
  font-size: 12.5px;
  text-decoration: underline;
  cursor: pointer;
}
.ps-panel-photocard__alttoggle summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--lt-text-muted);
}
.ps-panel-photocard__alttoggle form {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.ps-panel-photocard__alttoggle input[type="text"] { flex: 1; }

/* ==========================================================================
   26. EL ASISTENTE
   (accounts/templates/accounts/panel/completar_paso.html)
   --------------------------------------------------------------------------
   S4 del diseño 2026-08-06-backoffice-abogado, tramo 4. No introduce
   formularios propios -- los bloques de cada paso reutilizan .lt-card/
   .ps-panel-section/.ps-panel-editform__form de siempre (§21), adaptados al
   contexto (ver mas abajo el bloque "EL ASISTENTE (/panel/completar/)",
   el que estiliza accounts/templates/accounts/panel/_shell_wizard.html) --
   aqui solo lo que es propio de esta pantalla: los botones de accion de
   cada paso y el aviso de "esto ya esta en tu ficha".

   La pantalla 0 (resumen + lista de cinco enlaces) que vivio aqui se
   retiro (accounts/views_wizard.py:panel_completar, docstring) y con ella
   sus clases -- `.ps-panel-wizard__resumen*`, `__pasos`/`__pasoitem*`,
   `__progreso*`, `__paso`, `__salir` -- ya sin ninguna plantilla que las
   pinte. El armazon actual (_shell_wizard.html) es el que sostiene el
   recorrido de verdad.
   ========================================================================== */

/* SIN max-width propio (misma correccion que .ps-wiz mas abajo): este div
   es el contenido DENTRO de .ps-wiz__card, que ya llena la columna del
   panel -- un tope aqui encima solo volvia a encoger justo lo que se acaba
   de ensanchar. */
.ps-panel-wizard { }

.ps-panel-wizard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.ps-panel-wizard__actions form { margin: 0; }

/* LOS MEDIOS DE VIDEOLLAMADA, pegados a su pregunta. Estaban al final de la
   tarjeta, detras de los otros tres interruptores: se respondia "Sí, atiendo
   por videollamada" y la pregunta de por que medio aparecia cuatro preguntas
   mas abajo, sin nada que la relacionara con lo que se acababa de contestar.

   OJO CON LA REJILLA. `.ps-panel-tristate` es `display: contents`: sus hijos
   son celdas DIRECTAS de la rejilla de tres columnas del grupo. Meter aqui
   un bloque sin decir nada lo convierte en una cuarta celda y descoloca
   todas las filas siguientes -- los "Prefiero no indicarlo" de aparcamiento
   y accesibilidad se van a la columna de al lado. `grid-column: 1 / -1` es
   lo que lo obliga a ocupar su propia fila entera. */
.ps-panel-tristate-group #video-call-methods-field {
  grid-column: 1 / -1;
  margin: 4px 0 10px;
  padding: 12px 0 2px 14px;
  border-left: 2px solid var(--lt-border);
}
#video-call-methods-field .ps-rm-label {
  display: block;
  margin-bottom: 10px;
  font-size: 13.5px;
}
#video-call-methods-field .ps-panel-checkgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
#video-call-methods-field .ps-rm-check {
  /* 44px de alto: son casillas que se tocan con el dedo. */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
#video-call-methods-field .ps-rm-help { margin-top: 4px; }

/* Los pasos OPCIONALES del recorrido: un "+" en vez de un numero, mas
   pequeños y con menos peso. Con los ocho pintados igual, el abogado lee
   ocho obligaciones -- y el aviso de "esto es opcional" que hay dentro del
   paso llega demasiado tarde para desmentirlo. El primero lleva una
   separacion a su izquierda: ahi es donde termina lo que hay que hacer y
   empieza lo que suma. */

/* "Esto es opcional": se dice ANTES de pedir nada, no al final. Un paso
   opcional que no lo avisa se lee igual que uno obligatorio. */
.ps-wiz__opcional {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--lt-text-muted);
}
.ps-wiz__opcional svg { flex: none; }

/* "Ahora mismo tienes N fotos": el estado actual antes de mandar a la
   pantalla de verdad. Sin esto, el paso pide algo sin decir si ya lo
   tienes. */
.ps-wiz__cuantas {
  margin: 0 0 16px;
  font-size: 15px;
  color: var(--lt-ink);
}

/* "Esto ya está en tu ficha": una linea, encima del formulario ya relleno.
   Sustituye a la caja plegada (.ps-panel-wizard__colapsado*, retirada
   2026-08-10 con su "Confirmar, es correcto / Editar este paso"): la
   informacion util de aquella caja era ESA frase, y el formulario debajo
   dice el resto mucho mejor que un resumen de dos lineas. */
.ps-panel-wizard__yatienes {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--lt-text-muted);
}
.ps-panel-wizard__yatienes svg { flex: none; color: var(--lt-ok, #1a7f5a); }

/* "Ahora no" es la salida de emergencia, no una alternativa de igual peso:
   como boton contorneado competia de tu a tu con la accion principal. Sigue
   siendo un <button> de verdad (mismo envio, misma accion), solo que pintado
   como enlace -- y con 44px de alto, que sigue siendo un objetivo tactil. */
.ps-panel-wizard__ahorano {
  border: 0;
  background: none;
  padding: 0 8px;
  min-height: 44px;
  font-size: 14px;
  color: var(--lt-text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.ps-panel-wizard__ahorano:hover,
.ps-panel-wizard__ahorano:focus-visible { color: var(--lt-ink); }

/* ---------------------------------------------------------------------------
   ZONA DE ARRASTRE de /panel/ficha/fotos/ (S3.6).

   El <input type="file"> va encima de todo, transparente y a tamaño completo:
   asi pulsar en cualquier punto abre el selector y soltar un fichero lo
   asigna, las dos cosas de forma NATIVA, sin depender de JavaScript. Por eso
   no se esconde con display:none -- un input oculto asi no recibe el clic ni
   el "drop", y ademas Chrome se niega a enviar el formulario cuando un campo
   required no es enfocable, sin decirle nada al usuario.
   --------------------------------------------------------------------------- */
.ps-dropzone {
  position: relative;
  margin-bottom: 16px;
  border: 2px dashed var(--lt-border);
  border-radius: var(--lt-r-card, 14px);
  background: var(--ps-soft);
  transition: border-color .18s ease, background .18s ease;
}
.ps-dropzone__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.ps-dropzone:hover,
.ps-dropzone__input:focus-visible + .ps-dropzone__inner {
  border-color: var(--lt-primary);
}
.ps-dropzone:hover { background: var(--ps-mist); }
.ps-dropzone__input:focus-visible {
  outline: none;
}
.ps-dropzone:focus-within {
  border-color: var(--lt-primary);
  box-shadow: 0 0 0 3px rgba(201, 79, 79, .16);
}
.ps-dropzone[data-arrastrando="si"] {
  border-color: var(--lt-primary);
  background: rgba(201, 79, 79, .06);
}

.ps-dropzone__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 34px 20px;
  text-align: center;
  pointer-events: none;
}
.ps-dropzone__icon { color: var(--lt-primary); margin-bottom: 3px; }
.ps-dropzone__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--lt-ink);
}
.ps-dropzone__or {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--lt-text-2);
  margin-top: 2px;
}
/* --lt-text-2, no --lt-text-muted (revision de contraste 2026-08-09):
   .ps-dropzone tiene background: var(--ps-soft) -- --lt-text-muted da
   4,30:1 sobre ese fondo rosado (no llega al minimo); --lt-text-2 da
   5,24:1. Mismo motivo que .ps-dropzone__or, que ya usaba --lt-text-2. */
.ps-dropzone__hint {
  font-size: 12.5px;
  color: var(--lt-text-2);
}

/* Con fichero elegido la zona se convierte en la vista previa: el texto de
   invitacion ya no pinta nada y competiria con el nombre del fichero. */
.ps-dropzone[data-con-fichero="si"] .ps-dropzone__inner { display: none; }

.ps-dropzone__preview {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}
.ps-dropzone__thumb {
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: var(--lt-r-ctl);
  background: var(--ps-mist);
}
.ps-dropzone__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ps-dropzone__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--lt-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* --lt-text-2, no --lt-text-muted: mismo --ps-soft que .ps-dropzone__hint,
   mismo motivo (revision de contraste 2026-08-09). */
.ps-dropzone__size { font-size: 12.5px; color: var(--lt-text-2); }
.ps-dropzone__clear {
  /* Por encima del input transparente: si no, el clic abre el selector en
     vez de quitar el fichero. */
  position: relative;
  z-index: 3;
  margin-left: auto;
  padding: 7px 13px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-pill);
  background: var(--lt-canvas);
  color: var(--lt-text-2);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.ps-dropzone__clear:hover { border-color: var(--lt-primary); color: var(--lt-primary); }

@media (max-width: 640px) {
  .ps-dropzone__inner { padding: 26px 16px; }
}

/* Las dos puertas para quien llega al acceso sin cuenta (reclamar una ficha
   que ya existe, o darse de alta desde cero). Van en una caja aparte y no
   como un enlace mas junto a "he olvidado mi contraseña": son la accion
   principal de quien todavia no es cliente, no un pie de formulario. */
.ps-panel-auth-alta {
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-r-card, 14px);
  background: var(--ps-soft);
}
.ps-panel-auth-alta__h {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--lt-ink);
}
.ps-panel-auth-alta__p {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--lt-text-2);
}
.ps-panel-auth-alta__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ps-panel-auth-alta__acciones .lt-btn { flex: 1 1 auto; }

/* ---------------------------------------------------------------------------
   EL ASISTENTE (/panel/completar/).

   Todo dentro de UNA tarjeta. Antes cada pieza flotaba suelta sobre el
   fondo -- identidad, recorrido, titulo y una tarjeta pequeña en medio de
   la nada -- y debajo quedaba un hueco enorme hasta que entraba el pie
   oscuro de golpe. Una sola superficie da el foco que un asistente necesita
   y evita la tarjeta dentro de otra tarjeta.

   SIN max-width/margin:auto/padding lateral propios (correccion del
   titular, con captura: "¿por que no toma el wizard todo el espacio?").
   Los 620px + el `padding: 0 var(--lt-gutter)` eran de cuando el asistente
   vivia a pagina completa, fuera del panel (`{% extends "directory/base.
   html" %}` directo). Desde que vive dentro de `_shell.html` (ver
   _shell_wizard.html), `.ps-wiz` ya esta metido en `.ps-panel-main` --
   la MISMA columna, ya acotada por `.ps-panel-shell` (max-width 1160px) y
   ya con su propio gutter -- que usan Perfil/Especialidades/Oficinas. Un
   max-width extra aqui encima del de la columna es lo que dejaba la
   tarjeta pequeña y perdida con aire muerto a los lados mientras las otras
   ocho pantallas del panel llenan su columna entera. `.ps-wiz-section`
   (el fondo de pagina completa de aquel entonces) tambien se retira: sin
   plantilla que la use desde que el asistente dejo de ser su propia
   seccion de pagina.
   --------------------------------------------------------------------------- */
.ps-wiz__card {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  border-radius: 18px;
  padding: 32px;
  box-shadow: 0 1px 2px rgba(22, 32, 46, .04), 0 12px 32px rgba(22, 32, 46, .06);
}
@media (max-width: 560px) {
  .ps-wiz__card { padding: 22px 18px; border-radius: 14px; }
}

/* Quien eres: discreto, porque no es lo que hay que leer. */
.ps-wiz__head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--lt-border);
}
.ps-wiz__foto {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.ps-wiz__quien { min-width: 0; }
.ps-wiz__nombre {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--lt-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ps-wiz__ciudad { margin: 0; font-size: 12.5px; color: var(--lt-text-muted); }
.ps-wiz__contador {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: var(--lt-r-pill);
  background: var(--ps-mist);
  font-size: 12px;
  font-weight: 700;
  color: var(--lt-text-2);
  font-variant-numeric: tabular-nums;
}

/* El recorrido: los numeros sobre una linea continua. OJO -- la forma final
   (columna, con el nombre de cada paso debajo de su marca, y la linea dibujada
   aparte) se define en el bloque "RECORRIDO EN COLUMNA" del final de este
   fichero; lo de aqui es la base sobre la que aquel monta. Aqui hubo dos
   intentos anteriores que dejaron el recorrido mudo: sin rotulos porque en
   linea salian dentados, y con el nombre solo en el `title`, que en movil no
   se ve nunca. */
.ps-wiz__ruta { margin: 20px 0 24px; }
.ps-wiz__ruta-lista {
  display: flex;
  /* "row" EXPLICITO: theme.min.css (plantilla Finder heredada) declara
     `ol, ul { flex-direction: column }` para todo el sitio. */
  flex-direction: row;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ps-wiz__ruta-item {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
}
.ps-wiz__ruta-item + .ps-wiz__ruta-item::before {
  content: '';
  flex: 1 1 auto;
  height: 2px;
  background: var(--ps-mist);
  border-radius: 2px;
}
/* El primero no lleva conector, asi que ocupa menos: sin esto se reparte el
   sobrante y los dos ultimos numeros se amontonan a la derecha. */
.ps-wiz__ruta-item:first-child { flex: 0 0 auto; }

/* ---------------------------------------------------------------------------
   LOS CINCO ESTADOS DEL RECORRIDO, EN UN SOLO SITIO.

   Estaban repartidos en TRES bloques distintos de esta misma hoja, escritos
   en momentos distintos y peleandose por la cascada: `.es-datos` se definia
   tres veces con tres aspectos distintos, y -- lo peor -- "hecho" y "actual"
   usaban los DOS el mismo rojo de marca, asi que un paso terminado y el paso
   en el que estas se veian exactamente igual. Con cuatro pasos base eso deja
   la barra sin decir nada.

   El codigo de color, y es el mismo que usa el resto del producto:

     verde  = hecho          (confirmado por el abogado)
     rojo   = aqui estas     (el acento del sitio marca el foco, nada mas)
     tinta  = hay algo       (dato en la ficha que nadie ha confirmado)
     gris   = no hay nada
     ------   opcional       (borde discontinuo: se puede saltar)

   El VERDE es nuevo y es deliberado: el acento rojo no puede significar a la
   vez "terminado" y "estas aqui". El verde ademas es la lectura universal de
   "hecho" y aqui no compite con nada -- el rojo se queda para el foco.
   ------------------------------------------------------------------------ */
.ps-wiz__ruta-marca {
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ps-wiz__ruta-marca:hover { transform: scale(1.08); }
.ps-wiz__ruta-marca:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(201, 79, 79, .35);
}

/* 1. HECHO -- verde relleno, con su marca de verificado. */
.ps-wiz__ruta-item.es-hecho .ps-wiz__ruta-marca {
  background: var(--ps-hecho, #1A7F5A);
  color: #fff;
  box-shadow: none;
}

/* 2. AQUI ESTAS -- rojo relleno y un halo que lo separa de todo lo demas.
      Gana a "hecho" a proposito: si estas repasando un paso ya confirmado,
      lo que necesitas saber es DONDE estas. */
.ps-wiz__ruta-item.es-actual .ps-wiz__ruta-marca,
.ps-wiz__ruta-item.es-actual.es-hecho .ps-wiz__ruta-marca {
  background: var(--lt-primary);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(201, 79, 79, .18);
}

/* 3. HAY ALGO, SIN CONFIRMAR -- blanco con borde de tinta y el numero en
      tinta. Ni el gris plano de un hueco vacio ni el relleno de uno hecho:
      la barra sola contesta "¿tengo algo aqui?" sin entrar a mirar. */
.ps-wiz__ruta-item.es-datos .ps-wiz__ruta-marca {
  background: var(--lt-surface);
  color: var(--lt-ink);
  box-shadow: inset 0 0 0 2px var(--lt-ink);
}

/* 4. NO HAY NADA -- gris plano, sin borde: es el estado por defecto de
      .ps-wiz__ruta-marca, mas arriba. Nada que declarar aqui. */

/* 5. OPCIONAL -- borde discontinuo y sin numero (lleva un "+"). Se separa a
      la izquierda: ahi termina lo que hay que hacer y empieza lo que suma. */
.ps-wiz__ruta-item.es-opcional .ps-wiz__ruta-marca { font-weight: 500; }
.ps-wiz__ruta-item.es-opcional:not(.es-hecho):not(.es-actual) .ps-wiz__ruta-marca {
  background: transparent;
  box-shadow: none;
  border: 1.5px dashed var(--lt-border);
  color: var(--lt-text-muted);
}
.ps-wiz__ruta-item.es-opcional:first-of-type { margin-left: 14px; }

/* El CONECTOR se pinta verde hasta donde llega lo hecho, y rojo al entrar en
   el paso actual: la linea sola ya cuenta cuanto llevas. */
.ps-wiz__ruta-item.es-hecho + .ps-wiz__ruta-item::before { background: var(--ps-hecho, #1A7F5A); }
.ps-wiz__ruta-item.es-actual::before { background: var(--lt-primary); }

.ps-wiz__ruta-marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ps-mist);
  color: var(--lt-text-muted);
  font-size: 12px;
  font-weight: 700;
  flex: 0 0 auto;
}

/* "Paso 2 de 4" / "Opcional": pequeño, en mayusculas y por encima del
   titulo -- la etiqueta que dice donde estas antes de leer que te piden. */
.ps-wiz__donde {
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lt-primary);
}

.ps-wiz__titulo {
  margin: 0 0 6px;
  font-size: 25px;
  font-weight: 800;
  line-height: 1.22;
  color: var(--lt-ink);
}
.ps-wiz__porque {
  margin: 0 0 22px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--lt-text-muted);
}

/* El formulario -- ahora la UNICA pantalla de cada paso -- tenia el mismo
   problema que la caja plegada que hubo aqui: los bloques compartidos
   (_bloque_*.html) son .lt-card por su cuenta -- superficie blanca, borde
   y radio propios -- pensados para flotar solos en las pantallas reales
   del panel (Perfil, Oficinas...). Metidos tal cual dentro de
   .ps-wiz__card, que YA es esa misma superficie blanca con borde, se leian
   como una tarjeta dentro de otra tarjeta -- el mismo defecto de "no
   termina de verse bien" que el titular señalo, solo que en el paso
   abierto en vez de en el plegado. Se aplanan: sin fondo, borde ni
   sombra propios, y cuando un paso combina mas de un bloque (paso 1:
   Contacto + Direccion; paso 2: Especialidades + Idiomas) un filete los
   separa en vez de dos cajas una encima de otra. */
.ps-wiz .lt-card.ps-panel-section {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.ps-wiz .lt-card.ps-panel-section + .lt-card.ps-panel-section {
  margin-top: 4px;
  padding-top: 24px;
  border-top: 1px solid var(--lt-border);
}

.ps-wiz .ps-panel-wizard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

/* Pie: fuera de la tarjeta, para que no compita con la accion del paso. */
.ps-wiz__pie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 20px;
  text-align: center;
}
.ps-wiz__atajo { margin: 0; }
.ps-wiz__atajo-btn,
.ps-wiz__salir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lt-text-muted);
  cursor: pointer;
}
.ps-wiz__atajo-btn { text-decoration: underline; }
.ps-wiz__atajo-btn:hover,
.ps-wiz__salir:hover { color: var(--lt-primary); }

/* Para lectores de pantalla: el nombre de cada paso, que en pantalla ya lo
   dice el titulo. */
.lt-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   ASISTENTE: los dos remates que quedaban sin cuadrar.
   --------------------------------------------------------------------------- */

/* Los botones del paso eran una pareja imposible: "Guardar y seguir" medido
   en 758x50 (la tarjeta ENTERA, porque .ps-rm-submit trae width:100% para el
   reclamo, donde si tiene sentido) y "Ahora no" en 108x34 al lado. Un boton
   que ocupa toda la fila no es un boton primario, es una barra; y dos
   acciones de la misma fila con 16px de diferencia de alto no se leen como
   pareja. Aqui van del ancho de su texto y a la misma altura. */
.ps-wiz .ps-panel-wizard__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
}
.ps-wiz .ps-panel-wizard__actions .lt-btn,
.ps-wiz .ps-panel-wizard__actions .ps-rm-submit {
  width: auto;
  max-width: none;
  min-height: 46px;
  margin-top: 0;
  padding-left: 26px;
  padding-right: 26px;
}
@media (max-width: 560px) {
  /* En movil si van a lo ancho, apilados: es donde un boton de fila entera
     ayuda de verdad. */
  .ps-wiz .ps-panel-wizard__actions { flex-direction: column; align-items: stretch; }
  .ps-wiz .ps-panel-wizard__actions .lt-btn,
  .ps-wiz .ps-panel-wizard__actions .ps-rm-submit { width: 100%; }
}

/* El recorrido tenia CUATRO de cinco pasos con el mismo anillo rojo de "hay
   datos sin confirmar", asi que no se distinguia donde estabas: todo parecia
   activo a la vez. El anillo rojo se reserva para el paso ACTUAL. "Hay datos
   sin confirmar" pasa a ser un punto gris relleno -- se distingue de un paso
   vacio sin competir con el sitio donde estas. */

/* ---------------------------------------------------------------------------
   RECORRIDO: cuatro estados que se distinguen de verdad, y navegable.

   Venia de dos errores encadenados mios. Primero cuatro de los cinco pasos
   llevaban el mismo anillo rojo y no se veia donde estabas. Al bajar "tiene
   datos sin confirmar" a gris, quedo IGUAL que un paso vacio -- y entonces
   el paso 1 parecia no tener nada mientras el asistente se lo saltaba por
   tenerlo. Si un paso esta lo bastante resuelto como para saltarselo, no
   puede pintarse como si estuviera vacio.
   --------------------------------------------------------------------------- */

/* 1. Vacio: gris plano, sin borde. */
.ps-wiz__ruta-marca {
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.ps-wiz__ruta-marca:hover { transform: scale(1.08); }
.ps-wiz__ruta-marca:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(201, 79, 79, .35);
}


/* 3. Confirmado: relleno de marca con su marca de verificado (ya definido
      mas arriba). 4. Actual: ver el bloque siguiente. */


/* ---------------------------------------------------------------------------
   RECORRIDO EN COLUMNA, CON EL NOMBRE DE CADA PASO (2026-08-11)

   Dos quejas del titular sobre la misma barra: "no se ve ningun nombre de cada
   paso" y "estoy en el 1 pero no se distingue donde estoy".

   El nombre faltaba porque ocho rotulos EN LINEA con las marcas salian
   dentados. La solucion no era quitarlos: es girar cada paso a COLUMNA -- marca
   arriba, nombre debajo, todos del mismo ancho. Asi un nombre de dos lineas
   ("Especialidades e idiomas") crece hacia abajo y no mueve ninguna marca.

   Eso obliga a sacar la linea que une los pasos del flujo: era un ::before que
   crecia como hermano flex de la marca, y en columna se pondria encima. Ahora
   va ABSOLUTA, del centro de la marca anterior al de la propia, a la altura de
   su centro (13px = la mitad de los 26px de la marca). Requisito: todos los
   items del MISMO ancho -- de ahi que el primero deje de ser `flex: 0 0 auto` y
   que el primer opcional pierda su `margin-left`, que descuadraba su tramo.
   --------------------------------------------------------------------------- */
.ps-wiz__ruta-lista { align-items: flex-start; }

.ps-wiz__ruta-item {
  position: relative;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  padding: 0 3px;
}
.ps-wiz__ruta-item:first-child,
.ps-wiz__ruta-item.es-opcional:first-of-type { flex: 1 1 0; margin-left: 0; }

.ps-wiz__ruta-item + .ps-wiz__ruta-item::before {
  position: absolute;
  top: 12px;
  /* -50% del propio ancho = el centro del paso anterior (todos miden igual).
     Los 17px son el radio de la marca (13) mas 4 de aire. */
  left: calc(-50% + 17px);
  right: calc(50% + 17px);
  flex: none;
}

.ps-wiz__ruta-nombre {
  max-width: 100%;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.28;
  text-align: center;
  color: var(--lt-text-muted);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.ps-wiz__ruta-nombre:hover { color: var(--lt-primary); }
.ps-wiz__ruta-item.es-hecho .ps-wiz__ruta-nombre { color: var(--lt-ink); }

/* DONDE ESTAS, y gana a los otros tres estados -- por eso va el ultimo. Un
   paso confirmado al que se vuelve seguia pintandose solo como confirmado y el
   recorrido se quedaba sin ningun "aqui". El doble anillo (uno del color del
   fondo, otro de marca) es lo unico de toda la barra que dibuja por FUERA del
   circulo, asi que no se confunde con ningun estado. */
.ps-wiz__ruta-item.es-actual .ps-wiz__ruta-marca {
  background: var(--lt-primary);
  color: #fff;
  box-shadow: 0 0 0 3px var(--lt-surface), 0 0 0 5px var(--lt-primary);
}
.ps-wiz__ruta-item.es-actual .ps-wiz__ruta-nombre {
  color: var(--lt-primary);
  font-weight: 800;
}

@media (max-width: 720px) {
  /* Ocho nombres a 40px de ancho no son un nombre, son un acordeon de silabas.
     En movil vuelven a caer y el nombre del paso actual lo dice el <h1> que va
     tres lineas mas abajo, que es de donde salio la idea original. */
  .ps-wiz__ruta-nombre { display: none; }
  .ps-wiz__ruta-item { gap: 0; }
}

/* Banda de la vista previa de la ficha (accounts:panel_vista_previa). Va
   sobre la ficha REAL, asi que tiene que leerse como una capa del panel y no
   como parte de lo que vera el cliente. */
.lt-preview-bar {
  background: #FDF0D5;
  border-bottom: 1px solid #E8D5A8;
}
.lt-preview-bar__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px var(--lt-gutter);
  font-size: 13.5px;
  line-height: 1.5;
  color: #7a4b00;
}
.lt-preview-bar__inner svg { flex: 0 0 auto; }
.lt-preview-bar__inner strong { color: #5d3900; }
.lt-preview-bar__volver {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  color: #7a4b00;
  text-decoration: underline;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .lt-preview-bar__inner { flex-wrap: wrap; }
  .lt-preview-bar__volver { margin-left: 0; }
}

/* ---------------------------------------------------------------------------
   ESPECIALIDADES: resumen de una linea y la estrella en la propia fila.

   Se retiro la lista de fichas ("chips") que enumeraba las elegidas: con 15
   marcadas eran quince pildoras -- casi todas de linea entera -- antes de
   llegar al selector, y repetian lo que el arbol de abajo ya dice con sus
   casillas. Sobraba en escritorio igual que en movil.
   --------------------------------------------------------------------------- */
.ps-panel-specsum {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--lt-ink);
}
.ps-panel-specsum:empty { display: none; }

/* La fila del arbol pasa a repartir: la casilla ocupa lo suyo y la estrella
   se va al extremo, sin empujar el texto. */
.ps-panel-specrow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ps-panel-specrow > .ps-rm-check { flex: 1 1 auto; min-width: 0; }

.ps-panel-specrow__star {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  font-size: 15px;
  line-height: 1;
  color: var(--lt-border);
  cursor: pointer;
}
.ps-panel-specrow__star:hover { color: var(--lt-text-muted); }
.ps-panel-specrow__star[data-principal="si"] { color: var(--lt-primary); }
.ps-panel-specrow__star:focus-visible {
  outline: none;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(201, 79, 79, .3);
}


/* --- "Solo para nosotros": lo interno, separado de lo que se publica -----
   El abogado esta rellenando una pantalla cuyo trabajo entero es decidir que
   ve un cliente. Meter ahi dos campos que NO se publican, sin separarlos, es
   pedirle que se lo crea de palabra. El fondo distinto y el candado hacen el
   trabajo que el texto solo no hace. */
.ps-panel-interno {
  margin-top: 18px;
  padding: 14px 16px 4px;
  border-radius: 10px;
  background: var(--ps-mist);
  border: 1px solid var(--lt-border);
}
.ps-panel-interno__et {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lt-text-2);
}
.ps-panel-interno__et svg { flex: none; }