/* Entrar */
body[data-sesion="no"] main { max-width: none; padding: var(--e5) var(--e4); }
.entrar { min-height: calc(100vh - 6rem); display: grid; place-items: center; }
.entrar__caja { width: min(26rem, 100%); background: var(--superficie); border: 1px solid var(--linea); border-top: 4px solid var(--marino); border-radius: var(--radio-g); padding: var(--e6); box-shadow: var(--sombra); }
.entrar__logo { width: 11rem; height: auto; margin: 0 auto var(--e4); }
.entrar__caja h1 { font-size: var(--t-l); margin-bottom: var(--e2); text-align: center; }
.entrar__caja > p { color: var(--tinta-suave); margin-bottom: var(--e5); text-align: center; }
.entrar__caja .boton { width: 100%; justify-content: center; margin-top: var(--e2); }
.entrar__error { background: var(--error-f); color: var(--error-t); padding: var(--e3); border-radius: var(--radio); margin-bottom: var(--e4); font-size: var(--t-s); border-left: 4px solid var(--error-b); }
.entrar__demo { margin-top: var(--e4); font-size: var(--t-xs); color: var(--tinta-suave); background: var(--superficie-2); padding: var(--e2) var(--e3); border-radius: var(--radio); }

/* Cabecera de pantalla */
.panel__cabecera { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--e4); flex-wrap: wrap; margin-bottom: var(--e5); }
.panel__cabecera p { color: var(--tinta-suave); margin: var(--e1) 0 0; max-width: 42rem; }
.resumen { display: flex; gap: var(--e5); flex-wrap: wrap; font-size: var(--t-s); color: var(--tinta-suave); }
.resumen strong { font: 500 1.375rem/1 var(--fuente-titulo); display: block; color: var(--marino); }
.resumen__atasco strong { color: var(--cobalto); }

/* ---- Inicio ---- */
.inicio__cabecera { margin-bottom: var(--e6); }
.inicio__saludo { font-size: var(--t-s); color: var(--tinta-suave); margin: 0 0 var(--e2); }
.inicio__titular { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; max-width: 26ch; text-wrap: balance; }
.inicio__apoyo { font-size: var(--t-base); color: var(--tinta-suave); margin: var(--e3) 0 0; max-width: 40rem; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--linea-fuerte); margin-bottom: var(--e7); background: var(--superficie); border-radius: var(--radio-g); border: 1px solid var(--linea); overflow: hidden; }
.kpi { padding: var(--e3) var(--e4); display: grid; gap: 2px; border-left: 1px solid var(--linea); }
.kpi:first-child { border-left: 0; }
.kpi strong { font: 500 var(--t-num)/1 var(--fuente-titulo); color: var(--marino); }
.kpi span { font-size: var(--t-s); color: var(--tinta-suave); }
.kpi--alerta { background: var(--marino); }
.kpi--alerta strong, .kpi--alerta span { color: #fff; }
.inicio__rejilla { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--e7); align-items: start; }
.inicio__principal > h2, .inicio__lateral > h2 { font-size: var(--t-l); margin-bottom: var(--e4); }
.subtitulo-lista { font-size: var(--t-m); margin: var(--e5) 0 var(--e3); }
.lista-pendientes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.pendiente { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e4); align-items: center; background: var(--superficie); border: 1px solid var(--linea); border-left: 4px solid var(--marino); border-radius: var(--radio-g); padding: var(--e3) var(--e4); }
.pendiente--revision { border-left-color: var(--cobalto); }
.pendiente__campana, .tarjeta__campana { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--tinta-suave); font-weight: 500; margin: 0 0 2px; }
.pendiente h3 { font-size: var(--t-m); }
.pendiente h3 a { color: var(--marino); text-decoration: none; }
.pendiente h3 a:hover { color: var(--cobalto); }
.pendiente__falta { margin: var(--e1) 0 0; font-size: var(--t-s); color: var(--tinta-suave); }
.pendiente__falta strong { color: var(--tinta); }
.pendiente__accion { display: grid; gap: var(--e2); justify-items: end; min-width: 10.5rem; }
.meter { width: 100%; height: 5px; border-radius: 999px; background: var(--azul-100); overflow: hidden; }
.meter__relleno { display: block; width: 100%; height: 100%; background: var(--cobalto); transform-origin: left; border-radius: 999px; }
.novedades { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--linea); display: grid; gap: var(--e4); }
.novedades li { padding-left: var(--e4); position: relative; }
.novedades li::before { content: ""; position: absolute; left: -6px; top: 0.45em; width: 10px; height: 10px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--cobalto); }
.novedades p { margin: 0; font-size: var(--t-s); }
.novedades__detalle { color: var(--tinta-suave); }
.novedades__donde { color: var(--tinta-suave); font-size: var(--t-xs) !important; margin-top: 2px !important; }
.inicio__campanas { margin-top: var(--e5); font-weight: 500; }

/* ---- Campañas ---- */
.lista-campanas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.campana { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) auto; gap: var(--e5); align-items: center; padding: var(--e4) var(--e5); background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-g); position: relative; transition: border-color var(--duracion), box-shadow var(--duracion); }
@media (hover: hover) and (pointer: fine) { .campana:hover { border-color: var(--cobalto); box-shadow: var(--sombra); } }
.campana:focus-within { border-color: var(--cobalto); }
.campana__ir { display: block; margin-top: var(--e2); font-size: var(--t-s); font-weight: 500; color: var(--cobalto); }

/* ---- Landings: tarjetas con lo que falta ---- */
.lista-tarjetas { list-style: none; margin: 0 0 var(--e5); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 40rem), 1fr)); gap: var(--e3); align-items: start; }
.tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-left: 4px solid var(--linea-fuerte); border-radius: var(--radio-g); padding: var(--e4) var(--e5); display: grid; gap: var(--e3); }
.tarjeta--incompleta { border-left-color: var(--naranja); }
.tarjeta--completa { border-left-color: var(--verde); }
.tarjeta--aprobada { border-left-color: var(--azul-100); }
.tarjeta__cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e4); flex-wrap: wrap; }
.tarjeta__nombre { font-size: var(--t-m); }
.tarjeta__nombre a { color: var(--marino); text-decoration: none; }
.tarjeta__nombre a:hover { color: var(--cobalto); }
.tarjeta__tema { color: var(--tinta-suave); font-size: var(--t-s); margin: var(--e1) 0 0; }
.tarjeta__resumen { margin: 0; font-size: var(--t-base); }
.tarjeta__falta { display: grid; gap: var(--e2); }
.fichas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2); }
.fichas li { font-size: var(--t-xs); font-weight: 500; background: var(--acento-fondo); color: var(--marino); border-radius: 999px; padding: 0.15em 0.75em; }
.fichas__mas { background: transparent !important; color: var(--tinta-suave) !important; font-weight: 400 !important; }
.tarjeta__pie { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--e4); flex-wrap: wrap; border-top: 1px solid var(--linea); padding-top: var(--e3); }
.tarjeta__datos { margin: 0; display: flex; gap: var(--e6); flex-wrap: wrap; font-size: var(--t-s); }
.tarjeta__datos dt { font-size: var(--t-xs); color: var(--tinta-suave); text-transform: uppercase; letter-spacing: 0.06em; }
.tarjeta__datos dd { margin: 0; }
.tarjeta__datos .tarde { color: var(--marino); font-weight: 500; }
.tarjeta__acciones { display: flex; gap: var(--e3); align-items: center; flex-wrap: wrap; }
.diag { display: inline-flex; align-items: center; gap: 0.5em; font: 500 var(--t-s)/1 var(--fuente-texto); padding: 0.4em 0.9em 0.4em 0.7em; border-radius: 999px; white-space: nowrap; }
.diag__marca { width: 0.7em; height: 0.7em; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; }
.diag--incompleta { background: var(--naranja); color: var(--naranja-t); }
.diag--incompleta .diag__marca { background: currentColor; border-color: currentColor; }
.diag--completa { background: var(--verde); color: #fff; }
.diag--completa .diag__marca { background: currentColor; border-color: currentColor; }
.diag--aprobada { background: var(--azul-100); color: var(--marino); }
.diag--aprobada .diag__marca { background: currentColor; }
.filtros { display: flex; gap: var(--e2); flex-wrap: wrap; margin-bottom: var(--e5); }
.filtro { font: inherit; font-weight: 500; font-size: var(--t-s); display: inline-flex; gap: var(--e2); align-items: center; min-height: 2rem; padding: 0 var(--e4); border-radius: 999px; border: 1px solid var(--linea-fuerte); background: var(--superficie); color: var(--marino); cursor: pointer; transition: background-color var(--duracion), transform var(--duracion); }
.filtro:active { transform: scale(0.97); }
.filtro[aria-pressed="true"] { background: var(--marino); border-color: var(--marino); color: #fff; }
.filtro__n { font-weight: 400; opacity: 0.8; }

/* Listas sencillas (archivos, banners, usuarios) */
.lista-simple { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.fila-simple { display: flex; justify-content: space-between; align-items: center; gap: var(--e4); flex-wrap: wrap; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-g); padding: var(--e3) var(--e4); }
.fila-simple__nombre { font-size: var(--t-m); }
.fila-simple__nombre a { color: var(--marino); text-decoration: none; }
.fila-simple__nombre a:hover { color: var(--cobalto); }
.usuario__campanas { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }

/* Acceso de usuarios a una campaña */
.accesos { border: 1px solid var(--linea); border-radius: var(--radio-g); background: var(--superficie); padding: var(--e3) var(--e4); margin: 0 0 var(--e4); display: grid; gap: var(--e1); }
.acceso { padding: var(--e2) 0; border-bottom: 1px solid var(--linea); }
.acceso:last-child { border-bottom: 0; }
.acceso label { cursor: pointer; }
.acceso__datos { color: var(--tinta-suave); font-size: var(--t-xs); }

/* ---- Ficha: lo que falta, a la vista ---- */
.banner-falta { border-radius: var(--radio-g); padding: var(--e5); margin-bottom: var(--e5); }
.banner-falta h2 { font-size: var(--t-l); color: inherit; margin-bottom: var(--e2); }
.banner-falta p { margin: 0 0 var(--e3); }
.banner-falta--completa { background: #EAF6EE; color: #14532D; border: 1px solid var(--verde); }
.banner-falta--completa h2 { display: flex; align-items: center; gap: var(--e2); margin-bottom: var(--e1); }
.banner-falta--completa p { margin: 0; }
.banner-falta__tic { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--verde); color: #fff; font-size: var(--t-s); }
.banner-falta--plegable { padding: 0; background: none; border: 0; }
.banner-falta--plegable .pend-landing { margin-bottom: 0; }
.banner-falta__cuerpo { padding: var(--e4) var(--e5); }
.banner-falta__cuerpo .banner-falta__ir { color: var(--cobalto); }
.banner-falta__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e2); font-size: var(--t-s); }
.banner-falta__ir { font: inherit; font-weight: 500; color: #fff; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bloque__estado { border-radius: var(--radio); padding: var(--e3) var(--e4); margin-bottom: var(--e4); font-size: var(--t-s); }
.bloque__estado p { margin: 0; }
.bloque__estado ul { margin: var(--e2) 0 0; padding-left: var(--e5); }
.bloque__estado--incompleto { background: var(--acento-fondo); border-left: 4px solid var(--marino); color: var(--marino); }
.bloque__estado--completo { background: var(--superficie-2); border-left: 4px solid var(--azul-100); color: var(--tinta-suave); }
.bloque--destacado { box-shadow: 0 0 0 3px var(--cobalto); }

/* Colores corporativos */
.colores__rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); margin-bottom: var(--e4); }
.color { background: var(--superficie-2); border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e3) var(--e4); }
.color__etiqueta { font-weight: 500; font-size: var(--t-s); }
.color__fila { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.color__selector { width: 3.5rem; height: 2.75rem; padding: 2px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: #fff; cursor: pointer; }
.color__codigo { font-size: var(--t-s); }
.color__contraste { margin: var(--e2) 0 0; font-size: var(--t-xs); }
.color__contraste--bien { color: var(--tinta-suave); }
.color__contraste--mal { color: var(--error-t); font-weight: 500; background: var(--error-f); border-radius: var(--radio); padding: var(--e2) var(--e3); }
.muestras { list-style: none; margin: 0 0 var(--e3); padding: 0; display: flex; gap: var(--e5); flex-wrap: wrap; font-size: var(--t-s); }
.muestra { display: flex; align-items: center; gap: var(--e2); }
.muestra__color { width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--linea-fuerte); }
.colores__propios { margin-top: var(--e4); }
.formatos { background: var(--superficie-2); border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e3) var(--e4); margin-bottom: var(--e3); }
.formatos__titulo { margin: 0 0 var(--e2); }
.formatos__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--e2); font-size: var(--t-s); }
.formato--falta { color: var(--tinta-suave); }
.formato--hay { color: var(--marino); font-weight: 500; }
.formato__marca { display: inline-block; width: 1.2em; }
.formato__estado { font-size: var(--t-xs); }

@media (max-width: 62rem) {
  .inicio__rejilla { grid-template-columns: 1fr; gap: var(--e6); }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi:nth-child(3) { border-left: 0; }
  .kpi:nth-child(n+3) { border-top: 1px solid var(--linea); }
  .colores__rejilla { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .pendiente { grid-template-columns: 1fr; }
  .pendiente__accion { justify-items: stretch; }
  .pendiente__accion .boton { justify-content: center; }
  .tarjeta { padding: var(--e4); }
  .tarjeta__pie { align-items: stretch; }
  .tarjeta__acciones .boton { flex: 1; justify-content: center; }
  .campana { grid-template-columns: 1fr; }
  .kpi { padding: var(--e3) var(--e4); }
}
@media (max-width: 900px) {
  .campana__datos { grid-row: auto; }
}

.tarjeta__todo { font-size: var(--t-s); }
.tarjeta__todo summary { cursor: pointer; font-weight: 500; color: var(--cobalto); }
.tarjeta__todo h4 { font: 500 var(--t-s)/1.3 var(--fuente-texto); margin: var(--e3) 0 var(--e1); color: var(--marino); }
.tarjeta__todo ul { margin: 0; padding-left: var(--e5); }
.datos-campana { margin-top: var(--e6); }
.datos-campana > summary { cursor: pointer; font: 500 var(--t-m)/1.2 var(--fuente-titulo); color: var(--marino); padding: var(--e3) 0; }
.datos-campana .formulario-nueva { margin-top: var(--e3); }

.campo--destacado { outline: 3px solid var(--cobalto); outline-offset: 6px; border-radius: var(--radio); }

/* Inicio: solo lo pendiente. El naranja es EXCLUSIVAMENTE el color del aviso «Pendiente». */
:root { --pendiente-f: #FF9F4A; --pendiente-t: #3B1A00; } /* texto sobre naranja: 8,3:1 */
.alerta-pendiente { display: inline-flex; align-items: center; gap: 0.4em; font: 500 var(--t-xs)/1 var(--fuente-texto); letter-spacing: 0.04em; text-transform: uppercase; background: var(--pendiente-f); color: var(--pendiente-t); border-radius: 999px; padding: 0.45em 0.9em; white-space: nowrap; flex: none; }
.alerta-pendiente::before { content: "!"; display: grid; place-items: center; width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--pendiente-t); color: var(--pendiente-f); font-size: 0.95em; }
.pend-landing { background: var(--superficie); border: 1px solid var(--linea-fuerte); border-radius: var(--radio-g); margin-bottom: var(--e3); overflow: hidden; }
.pend-landing__cab { display: flex; align-items: center; gap: var(--e3); padding: var(--e3) var(--e4); background: var(--marino); color: #fff; cursor: pointer; list-style: none; user-select: none; transition: background-color var(--duracion); }
.pend-landing__cab::-webkit-details-marker { display: none; }
.pend-landing__cab:focus-visible { outline: 3px solid #fff; outline-offset: -5px; border-radius: var(--radio-g); }
@media (hover: hover) and (pointer: fine) { .pend-landing__cab:hover { background: var(--marino-profundo); } }
.pend-landing__nombre { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pend-landing__chevron { flex: none; width: 0.6rem; height: 0.6rem; border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg); transition: transform 200ms var(--curva); margin-right: var(--e1); }
.pend-landing[open] > .pend-landing__cab .pend-landing__chevron { transform: rotate(45deg); }
.pend-landing__ficha { margin: 0; padding: var(--e2) var(--e4); border-top: 1px solid var(--linea); font-weight: 500; font-size: var(--t-s); }
.pend-landing__ficha a { display: inline-block; padding: var(--e1) 0; }
.pend-landing__cab h2 { color: #fff; font-size: var(--t-m); }
.pend-landing__cab h2 a { color: #fff; text-decoration: none; }
.pend-landing__cab h2 a:hover { text-decoration: underline; }
.pend-landing__campana { margin: 0 0 2px; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em; color: #B9C7E3; font-weight: 500; }
.pend-landing__cuenta { flex: none; margin: 0; font: 500 0.9375rem/1 var(--fuente-titulo); font-variant-numeric: tabular-nums; }
.pend-landing__cuenta span { font: 400 var(--t-s)/1 var(--fuente-texto); margin-left: 0.4em; color: #DCE6F7; }
.pend-lista { list-style: none; margin: 0; padding: 0; }
.pend-item { border-top: 1px solid var(--linea); }
.pend-item:first-child { border-top: 0; }
.pend-item a { display: flex; align-items: center; gap: var(--e3); padding: var(--e2) var(--e4); text-decoration: none; color: var(--tinta); transition: background-color var(--duracion); }
@media (hover: hover) and (pointer: fine) { .pend-item a:hover { background: var(--acento-fondo); } }
.pend-item a:focus-visible { outline-offset: -3px; }
.pend-item__texto { flex: 1; min-width: 0; font-weight: 400; color: var(--tinta); }
.pend-item__bloque { color: var(--tinta-suave); font-size: var(--t-xs); font-weight: 400; display: block; }
.pend-item__ir { color: var(--cobalto); font-weight: 500; font-size: var(--t-s); white-space: nowrap; }
.pend-vacio { background: var(--superficie); border: 1px solid var(--linea); border-left: 5px solid var(--cobalto); border-radius: var(--radio-g); padding: var(--e6); }
.pend-vacio h2 { margin-bottom: var(--e2); }
.pend-vacio p { margin: 0; color: var(--tinta-suave); font-size: var(--t-m); }
@media (max-width: 40rem) { .pend-item a { padding: var(--e3) var(--e4); flex-wrap: wrap; } .pend-landing__cab { padding: var(--e4); } .pend-item__ir { display: none; } }

/* Interruptor «Activa» */
.interruptor { display: inline-flex; align-items: center; gap: var(--e3); cursor: pointer; font-size: var(--t-s); font-weight: 500; color: var(--marino); }
.interruptor__caja { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor__pista { position: relative; flex: none; width: 2.25rem; height: 1.25rem; border-radius: 999px; background: var(--linea-fuerte); transition: background-color 160ms var(--curva); }
.interruptor__pista::after { content: ""; position: absolute; top: 3px; left: 3px; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: #fff; transition: transform 160ms var(--curva); box-shadow: 0 1px 2px rgb(24 27 62 / 0.3); }
.interruptor__caja:checked + .interruptor__pista { background: var(--cobalto); }
.interruptor__caja:checked + .interruptor__pista::after { transform: translateX(1rem); }
.interruptor__caja:focus-visible + .interruptor__pista { outline: 3px solid var(--foco); outline-offset: 2px; }
.tarjeta__estados { display: grid; gap: var(--e3); justify-items: end; }
.generar__activa { margin-bottom: var(--e3); }
@media (max-width: 40rem) { .tarjeta__estados { justify-items: start; } }
.tarjeta__cabeza > div:first-child { flex: 1 1 18rem; min-width: 0; }
.tarjeta__estados { margin-left: auto; }

/* ---- Bienvenida (inicio) ---- */
.bienvenida { background: var(--superficie); border: 1px solid var(--linea-fuerte); border-left: 5px solid var(--cobalto); border-radius: var(--radio-g); padding: var(--e4) var(--e5); margin-bottom: var(--e5); max-width: 46rem; }
.bienvenida__titulo { font: 500 var(--t-l)/1.2 var(--fuente-titulo); letter-spacing: -0.015em; color: var(--marino); margin: 0 0 var(--e3); }
.bienvenida__texto { font-size: var(--t-base); line-height: 1.65; margin: 0 0 var(--e2); max-width: 38rem; }
.bienvenida__texto:last-child { margin-bottom: 0; color: var(--marino); }
@media (max-width: 40rem) { .bienvenida { padding: var(--e4); } .bienvenida__texto { font-size: var(--t-base); } }

/* ---- Columna lateral: logo, plegado en escritorio ---- */
.lateral__marca { flex-direction: row; align-items: center; gap: var(--e3); padding: 0 var(--e2); }
.lateral__logo { flex: none; display: grid; place-items: center; background: #fff; border-radius: 6px; padding: 3px 6px; }
.lateral__logo img { display: block; height: 1.75rem; width: auto; aspect-ratio: 677 / 369; object-fit: contain; }
.lateral__nombre { text-align: left; font-size: var(--t-s); line-height: 1.2; }
.lateral__plegar { display: flex; align-items: center; gap: var(--e2); font: inherit; font-weight: 500; font-size: var(--t-s); cursor: pointer; min-height: 2.25rem; padding: 0 var(--e3); border-radius: var(--radio); background: transparent; color: #DCE6F7; border: 0; transition: background-color var(--duracion), transform var(--duracion); }
.lateral__plegar svg, .desplegar svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.lateral__plegar:active, .desplegar:active { transform: scale(0.97); }
.lateral__plegar:focus-visible { outline-color: #fff; }
@media (hover: hover) and (pointer: fine) { .lateral__plegar:hover { background: rgb(255 255 255 / 0.1); color: #fff; } }
.lateral__enlace--vista { font: inherit; font-weight: 500; font-size: var(--t-s); cursor: pointer; width: 100%; text-align: left; background: transparent; border: 1px dashed rgb(255 255 255 / 0.4); margin-top: var(--e3); }
.desplegar { position: fixed; left: var(--e3); top: var(--e3); z-index: 41; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 0; border-radius: var(--radio); background: var(--marino); color: #fff; cursor: pointer; box-shadow: var(--sombra); transition: transform var(--duracion), background-color var(--duracion); }
.desplegar:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .desplegar:hover { background: var(--marino-profundo); } }
body[data-sesion="no"] .desplegar { display: none; }
@media (min-width: 62.0625rem) {
  .app { transition: padding-left 220ms var(--curva-cajon); }
  .lateral { transition: transform 220ms var(--curva-cajon), visibility 0s; }
  body[data-lateral="plegado"] .app { padding-left: 0 !important; }
  body[data-lateral="plegado"] .lateral { transform: translateX(-100%); visibility: hidden; transition: transform 220ms var(--curva-cajon), visibility 0s linear 220ms; }
  body[data-lateral="plegado"] main { padding-top: calc(var(--e6) + 2.5rem); }
}
@media (max-width: 62rem) { .desplegar, .lateral__plegar { display: none; } }

/* ---- Vista «Ver cómo MKT»: franja fija y permanente ---- */
body { --franja: 0rem; }
body[data-vista="marketing"] { --franja: 3rem; }
.franja-vista { position: fixed; inset: 0 0 auto 0; z-index: 70; height: var(--franja); display: flex; align-items: center; justify-content: center; gap: var(--e4); padding: 0 var(--e4); background: var(--cobalto); color: #fff; font-size: var(--t-s); border-bottom: 3px solid #fff; box-shadow: 0 2px 10px rgb(24 27 62 / 0.35); }
.franja-vista__texto { min-width: 0; line-height: 1.25; }
.franja-vista__salir { flex: none; font: inherit; font-weight: 500; font-size: var(--t-s); cursor: pointer; min-height: 2.25rem; padding: 0 var(--e4); border-radius: 999px; background: #fff; color: var(--marino); border: 0; transition: transform var(--duracion) var(--curva), background-color var(--duracion); }
.franja-vista__salir:active { transform: scale(0.97); }
.franja-vista__salir:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .franja-vista__salir:hover { background: var(--azul-100); } }
body[data-vista="marketing"] .app { padding-top: var(--franja); }
body[data-vista="marketing"] .lateral { top: var(--franja); }
body[data-vista="marketing"] .desplegar { top: calc(var(--franja) + var(--e3)); }
body[data-vista="marketing"] .indice { top: calc(var(--e5) + var(--franja)); }
body[data-vista="marketing"] .barra-movil { top: var(--franja); }
@media (max-width: 40rem) {
  body[data-vista="marketing"] { --franja: 5rem; }
  .franja-vista { gap: var(--e3); padding: 0 var(--e3); font-size: var(--t-xs); justify-content: space-between; }
  .franja-vista__salir { min-height: 2.75rem; font-size: var(--t-xs); }
}

/* Listado de landings: atajo «Generar landing» junto al nombre. Secundario: el botón principal sigue siendo «Completar lo que falta». */
.tarjeta__titulo { display: flex; align-items: center; gap: var(--e2) var(--e3); flex-wrap: wrap; }
.tarjeta__titulo .tarjeta__nombre { min-width: 0; overflow-wrap: anywhere; }
.tarjeta__generar { flex: none; }

/* ---- Tactil: lo pulsable mantiene 44 x 44 px de zona de pulsacion aunque el dibujo sea mas pequeño ---- */
@media (max-width: 62rem), (pointer: coarse) {
  .boton, .filtro { position: relative; }
  .boton::after, .filtro::after { content: ""; position: absolute; inset: -0.5rem 0; }   /* 32 px visibles + 16 = 48 px */
  .boton--s::after { inset: -0.75rem 0; }                                                  /* 28 px visibles + 24 = 52 px */
  input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="url"], input[type="number"], input[type="search"], input[type="time"], input[type="tel"], select { min-height: 2.75rem; }
  .casilla { min-height: 2.75rem; }
  .reg-mov, .atajo, .seg__op, .selector, .pestanas a, .lateral__enlace, .lateral__salir, .lateral__plegar { min-height: 2.75rem; }
  .reg-mov { width: 2.75rem; height: 2.75rem; }
  .pestanas a { display: inline-flex; align-items: center; }
  .interruptor { min-height: 2.75rem; }
  .lateral__perfil { display: inline-block; padding: var(--e3) 0; }
  button.ayuda-boton::after { inset: -0.85rem; }
  select.selector { min-height: 2.75rem; }
  .generar__ver a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .tarjeta__nombre a, .fila-simple__nombre a, .pendiente h3 a, .migas a, .banner-falta__ir, .herencia__enlace, .tarjeta__todo summary, .sugerencias__titulo, .indice button, .campana__ir, .pend-landing__ficha a {
    display: inline-flex; align-items: center; min-height: 2.75rem; }
  .tarjeta__nombre a, .fila-simple__nombre a, .pendiente h3 a, .migas a { margin-block: -0.8rem; }
  .sugerencias__titulo, .indice button { display: flex; }
  .sugerencias__cuerpo a, .campo__ayuda a, .ayuda-pop a { display: inline-block; padding-block: 0.8rem; margin-block: -0.8rem; }
}
@media (max-width: 40rem) { .tarjeta__estados { margin-left: 0; } }

/* Resultado de «Generar landing» en la tarjeta: trabajando, hecho (con enlace a la ficha) o error. */
.tarjeta__resultado { margin: var(--e2) 0 0; padding: var(--e2) var(--e3); border-radius: var(--r-s, 0.5rem); border-left: 4px solid var(--azul-100); background: var(--azul-50, #f3f6fb); font-size: var(--t-s, 0.9rem); }
.tarjeta__resultado[hidden] { display: none; }
.tarjeta__resultado--ok { border-left-color: var(--verde); }
.tarjeta__resultado--error { border-left-color: var(--naranja); background: #fff4ec; }
.tarjeta__resultado a { font-weight: 600; }
.tarjeta__generar[aria-busy="true"] { cursor: progress; }

/* Configurador por objetivo (ficha, Estrategia): sugerencias marcadas por defecto, cada una con su porqué. */
.objetivos .casilla label { display: block; }
.objetivos .casilla .campo__ayuda { display: block; margin: 0; }
.configurador { margin-top: var(--e3); padding: var(--e3); border-radius: var(--r-s, 0.5rem); border: 1px solid var(--azul-100); background: var(--azul-50, #f3f6fb); }
.configurador h3 { margin: 0 0 var(--e2); font-size: var(--t-m, 1.05rem); }
.configurador__lista { list-style: none; margin: var(--e3) 0; padding: 0; display: grid; gap: var(--e3); }
.configurador__fila { display: grid; grid-template-columns: auto 1fr; gap: var(--e2) var(--e3); align-items: start; }
.configurador__fila--quieta { opacity: 0.75; }
.configurador__fila input[type="checkbox"] { margin-top: 0.25rem; width: 1.25rem; height: 1.25rem; }
.configurador__tic { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; font-weight: 700; }
.configurador__porque, .configurador__cambio, .configurador__nota { margin: 0.15rem 0 0; font-size: var(--t-s, 0.9rem); }
.configurador__cambio { color: var(--marino, inherit); }
.configurador__nota, .configurador__aviso { color: #8a4a00; font-weight: 600; }