/* MindSign Docs · panel de la empresa y centro de ayuda.
   Usa los tokens de docs.css (se carga antes). Misma familia que la landing:
   tarjetas con sombra en capas, fondos con halos de color y movimiento suave
   que se apaga con «reducir movimiento». Se anima solo transform y opacity. */

/* ── Fondo con profundidad ────────────────────────────────────────────────── */
body.panel, body.ayuda-sitio { background: var(--bg); position: relative; }
body.panel::before, body.ayuda-sitio::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 520px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(48% 70% at 92% 0%, color-mix(in srgb, var(--brand) 6%, transparent) 0%, transparent 70%);
}
.panel .wrap { max-width: 1180px; padding-top: 22px; }

/* ── Barra superior ───────────────────────────────────────────────────────── */
.panel .topbar, .ayuda-top { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.panel .topbar .in, .ayuda-top .in { max-width: 1180px; gap: 10px 16px; flex-wrap: nowrap; }
.nav-panel { display: flex; gap: 2px; min-width: 0; }
.nav-panel a { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: var(--text); font-weight: 600; font-size: 14px; padding: 8px 12px; border-radius: 10px; white-space: nowrap; transition: background-color .2s ease, color .2s ease; }
.nav-panel a .ico { width: 18px; height: 18px; color: var(--muted); transition: color .2s ease; }
.nav-panel a:hover { background: var(--neutral-tint); color: var(--ink); }
.nav-panel a[aria-current="page"] { background: var(--brand-tint); color: var(--brand); }
.nav-panel a[aria-current="page"] .ico { color: var(--brand); }
.top-acciones { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.btn-nuevo .txt-corto { display: none; }
.btn-icono { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); color: var(--text); cursor: pointer; list-style: none; padding: 0; font: inherit; transition: background-color .2s ease, border-color .2s ease; }
.btn-icono::-webkit-details-marker { display: none; }
.btn-icono:hover { background: var(--neutral-tint); color: var(--ink); }
.btn-icono.sm { width: 32px; height: 32px; border-radius: 9px; }
.btn-icono.sm .ico { width: 16px; height: 16px; }
.btn-icono[disabled] { opacity: .4; cursor: not-allowed; }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; list-style: none; font-weight: 800; color: #fff; background: #3A3F4B; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--line); }
.avatar::-webkit-details-marker { display: none; }
@media (max-width: 899px) {
  .panel .topbar .in { flex-wrap: wrap; padding-bottom: 0; }
  .panel .topbar .nav-panel { order: 3; width: calc(100% + 32px); margin: 0 -16px; padding: 4px 8px 6px; border-top: 1px solid var(--line); justify-content: space-around; }
  .panel .topbar .nav-panel a { flex: 1 1 0; flex-direction: column; gap: 3px; font-size: 12px; padding: 6px 2px; min-width: 0; }
  .nav-panel a span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
}
@media (max-width: 560px) {
  .btn-nuevo .txt { display: none; }
  .btn-nuevo .txt-corto { display: inline; }
  .panel .topbar .wm, .ayuda-top .wm { font-size: 19px; }
}

/* Menús desplegables (details): funcionan sin JS, panel.js los cierra al tocar afuera. */
.menu-top { position: relative; }
.menu-top > summary { list-style: none; }
.menu-top .menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: 290px; max-width: calc(100vw - 24px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sombra-2); padding: 8px; }
.menu a, .menu .menu-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border-radius: 9px; color: var(--text); text-decoration: none; font: inherit; font-size: 14px; font-weight: 600; background: none; border: 0; cursor: pointer; }
.menu a .ico, .menu .menu-item .ico { color: var(--muted); width: 18px; height: 18px; }
.menu a:hover, .menu .menu-item:hover { background: var(--neutral-tint); color: var(--ink); }
.menu form { margin: 0; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.menu-k { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 4px 10px 6px; }
.menu-quien { margin: 4px 10px 8px; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
.menu-quien b { color: var(--ink); font-size: 14.5px; }
.menu-empresa { color: var(--brand); font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .menu-top[open] .menu { animation: caer .18s var(--ease); }
}

/* ── Cabecera de cada pantalla ────────────────────────────────────────────── */
.cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 4px 0 18px; }
.cabecera > div:first-child { flex: 1 1 240px; min-width: 0; }
.cabecera h1 { margin-bottom: 4px; }
.cabecera p { margin: 0; }
.cabecera-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ayuda-q { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--muted); text-decoration: none; box-shadow: var(--sombra-1); transition: transform .2s var(--ease), background-color .2s ease; flex: none; }
.ayuda-q .ico { width: 20px; height: 20px; }
.ayuda-q:hover { background: var(--neutral-tint); color: var(--ink); transform: translateY(-1px); }

/* ── Bienvenida ───────────────────────────────────────────────────────────── */
.bienvenida { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 24px; align-items: center; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--paper); padding: 26px; margin-bottom: 18px; box-shadow: var(--sombra-1); }
@media (min-width: 760px) { .bienvenida { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); padding: 30px 34px; } }
.bienvenida-fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bienvenida-fondo span { position: absolute; }
.bienvenida-fondo .malla { inset: 0; background:
  radial-gradient(60% 90% at 100% 0%, color-mix(in srgb, var(--brand) 8%, transparent) 0%, transparent 65%); }
.bienvenida-fondo .mancha { border-radius: 50%; filter: blur(50px); opacity: .18; }
.bienvenida-fondo .m1 { width: 220px; height: 220px; right: -40px; top: -60px; background: color-mix(in srgb, var(--brand) 40%, transparent); }
.bienvenida-fondo .m2 { display: none; }
.bienvenida h2 { font-size: clamp(21px, 3.4vw, 27px); margin-bottom: 8px; }
.bienvenida p { max-width: 60ch; }
.bienvenida .row form { margin: 0; }
.bienvenida-ilus { display: none; justify-self: center; }
@media (min-width: 760px) { .bienvenida-ilus { display: block; } }
.js .sin-js { display: none; }

/* ── Primeros pasos ───────────────────────────────────────────────────────── */
.primeros { margin-bottom: 18px; }
.primeros-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.primeros-cab h2 { margin: 0 0 2px; }
.primeros-cab p { margin: 0; }
.primeros-ocultar { margin: 0 0 0 auto; align-self: flex-start; }
.anillo-avance { position: relative; display: inline-grid; place-items: center; width: 58px; height: 58px; flex: none; }
.anillo-avance svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.anillo-avance b { font-family: var(--mono); font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.aa-fondo, .aa-valor { fill: none; stroke-width: 6; }
.aa-fondo { stroke: var(--line); }
.aa-valor { stroke: var(--brand); stroke-linecap: round; }
.primeros.completo .aa-valor { stroke: var(--brand); }
.pasos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.paso-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.paso-item > form, .paso-item > a { grid-column: 2; justify-self: start; margin: 0; }
@media (min-width: 640px) { .paso-item { grid-template-columns: 40px minmax(0, 1fr) auto; } .paso-item > form, .paso-item > a { grid-column: 3; justify-self: end; } }
.paso-check { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--chip-bg); color: var(--chip-ink); }
.paso-check .ico { width: 18px; height: 18px; }
.paso-item.hecho .paso-check { background: var(--brand); color: var(--on-brand); }
.paso-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.paso-txt b { color: var(--ink); }
.paso-item.hecho .paso-txt b { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.paso-item.en-curso .paso-check { background: var(--warn-tint); color: var(--warn); }

/* ── Cifras ───────────────────────────────────────────────────────────────── */
.kpis { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 18px; }
@media (min-width: 980px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; box-shadow: var(--sombra-1); min-width: 0; display: flex; flex-direction: column; }
.kpi-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--chip-bg); color: var(--chip-ink); margin-bottom: 10px; }
.kpi-ico.sello { background: var(--seal-tint); color: var(--seal); }
.kpi-k { font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 2px; line-height: 1.3; }
.kpi-n { margin: 0 0 6px; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi-n b { font-size: clamp(26px, 5.6vw, 34px); font-weight: 800; letter-spacing: -.035em; color: var(--ink); }
.kpi-n.texto b { font-size: clamp(19px, 4vw, 24px); letter-spacing: -.02em; }
.kpi-de { font-size: 14px; color: var(--muted); font-weight: 600; }
.kpi-s { font-size: 12.5px; color: var(--muted); margin: auto 0 0; padding-top: 4px; }
.kpi .barra { margin: 2px 0 4px; }

/* Barras de progreso en SVG */
.barra { display: block; width: 100%; height: 8px; overflow: visible; }
.barra-fondo { fill: var(--line); }
.barra-valor { fill: var(--brand); }
.barra.uso.alto .barra-valor { fill: var(--amber); }
.barra.sello .barra-valor { fill: var(--seal); }
.barra.mini { height: 5px; margin-top: 5px; max-width: 120px; }
.barra.avance { height: 10px; }
.uso-plan { margin: -4px 0 14px; max-width: 420px; }
.uso-plan p { margin: 0 0 6px; }

/* ── Accesos rápidos ──────────────────────────────────────────────────────── */
.atajos { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin-bottom: 18px; }
@media (min-width: 760px) { .atajos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.atajo { position: relative; display: flex; align-items: center; gap: 14px; min-height: 84px; padding: 16px 18px; border-radius: var(--r); border: 1px solid var(--line); background: var(--paper); text-decoration: none; color: var(--text); box-shadow: var(--sombra-1); overflow: hidden; isolation: isolate; transition: transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease; }
.atajo::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s ease; background: radial-gradient(220px circle at var(--mx, 85%) var(--my, 0%), color-mix(in srgb, var(--brand) 7%, transparent), transparent 70%); }
.atajo-txt { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; flex: 1 1 auto; }
.atajo b { color: var(--ink); font-size: 15.5px; line-height: 1.25; letter-spacing: -.01em; }
.atajo .small { color: var(--muted); font-size: 13px; line-height: 1.35; }
@media (min-width: 760px) { .atajo b, .atajo .small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
.atajo-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; flex: none; color: var(--brand); background: var(--brand-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 14%, transparent); transition: background-color .3s ease, color .3s ease, box-shadow .3s ease; }
.atajo-ico .ico { width: 22px; height: 22px; }
.atajo-flecha { flex: none; width: 18px; height: 18px; color: var(--muted); transition: transform .3s var(--ease), color .3s ease; }
.atajo:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r); border-color: var(--brand); }
.atajo:focus-visible .atajo-flecha { color: var(--brand); }
@media (hover: hover) {
  .atajo:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); color: var(--text); }
  .atajo:hover::before { opacity: 1; }
  .atajo:hover .atajo-ico { color: var(--on-brand); background: var(--brand); box-shadow: none; }
  .atajo:hover .atajo-flecha { transform: translateX(3px); color: var(--brand); }
}
@media (prefers-reduced-motion: reduce) { .atajo, .atajo:hover, .atajo-flecha, .atajo:hover .atajo-flecha { transform: none; transition: none; } }

/* ── Gráficos ─────────────────────────────────────────────────────────────── */
.tablero-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-bottom: 16px; }
@media (min-width: 980px) { .tablero-grid { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); } }
.tablero-grid .card + .card { margin-top: 0; }
.grafico-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 10px; }
.grafico-cab h2, .grafico h2 { margin-bottom: 2px; }
.grafico-cab p { margin: 0; }
.leyenda { list-style: none; display: flex; gap: 14px; margin: 4px 0 0; padding: 0; font-size: 12.5px; color: var(--muted); }
.leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.punto { display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--muted); flex: none; }
.punto.t-env, .punto.t-marca { background: var(--brand); }
.punto.t-fir, .punto.t-sello { background: var(--seal); }
.punto.t-alerta { background: var(--alert); }
.punto.t-aviso { background: var(--amber); }
.punto.t-neutro { background: color-mix(in srgb, var(--muted) 55%, var(--line)); }
.punto.t-apagado { background: var(--line); }
.grafico-lienzo { position: relative; }
.barras { display: block; width: 100%; height: auto; overflow: visible; }
.barras.angosto { display: none; }
@media (max-width: 599px) { .barras.ancho { display: none; } .barras.angosto { display: block; } }
.g-linea { stroke: var(--line); stroke-width: 1; }
.g-eje { font-family: var(--mono); font-size: 10.5px; fill: var(--muted); }
.barras.angosto .g-eje { font-size: 10px; }
.g-serie.env .g-barra { fill: var(--brand); }
.g-serie.fir .g-barra { fill: var(--seal); }
.g-barra { transform-box: fill-box; transform-origin: 50% 100%; }
.grafico-lienzo.sin-datos .barras { opacity: .5; }
.grafico-vacio { position: absolute; inset: 20% 8% auto; text-align: center; color: var(--muted); font-size: 14px; background: color-mix(in srgb, var(--paper) 88%, transparent); border-radius: var(--r-sm); padding: 10px 12px; margin: 0; }
.grafico-vacio.estatico { position: static; background: var(--neutral-tint); }

.anillo-estados { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 8px; }
.anillo-estados svg { width: 150px; height: 150px; flex: none; }
.anillo-fondo, .anillo-seg { fill: none; stroke-width: 16; }
.anillo-fondo { stroke: var(--neutral-tint); }
.anillo-seg { stroke: var(--muted); transform-box: view-box; transform-origin: 70px 70px; }
.anillo-seg.t-sello { stroke: var(--seal); }
.anillo-seg.t-marca { stroke: var(--brand); }
.anillo-seg.t-alerta { stroke: var(--alert); }
.anillo-seg.t-aviso { stroke: var(--amber); }
.anillo-seg.t-neutro { stroke: color-mix(in srgb, var(--muted) 55%, var(--line)); }
.anillo-seg.t-apagado { stroke: var(--line); }
.anillo-total { font-size: 26px; font-weight: 800; fill: var(--ink); letter-spacing: -.03em; font-family: var(--f); }
.anillo-etq { font-size: 10.5px; fill: var(--muted); font-family: var(--f); }
.leyenda-estados { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1 1 140px; min-width: 0; }
.leyenda-estados li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 14px; }
.leyenda-estados b { font-variant-numeric: tabular-nums; color: var(--ink); }

.embudo { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.embudo-txt { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; margin-bottom: 5px; }
.embudo-txt b { font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.embudo-barra { height: 12px; }
.embudo-barra .barra-fondo { fill: var(--neutral-tint); }
.embudo-barra.paso-1 .barra-valor { fill: color-mix(in srgb, var(--brand) 45%, var(--paper)); }
.embudo-barra.paso-2 .barra-valor { fill: color-mix(in srgb, var(--brand) 70%, var(--paper)); }
.embudo-barra.paso-3 .barra-valor { fill: var(--brand); }
.embudo-barra.paso-4 .barra-valor { fill: var(--seal); }
.barra-valor { transform-box: fill-box; transform-origin: 0 50%; }

/* ── Actividad ────────────────────────────────────────────────────────────── */
.feed { list-style: none; margin: 6px 0 0; padding: 0; }
.feed-item { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--line); }
.feed-item:first-child { border-top: 0; }
.feed-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--chip-bg); color: var(--chip-ink); }
.feed-ico .ico { width: 16px; height: 16px; }
.feed-item.t-sello .feed-ico { background: var(--seal-tint); color: var(--seal); }
.feed-item.t-alerta .feed-ico { background: var(--alert-tint); color: var(--alert); }
.feed-item.t-aviso .feed-ico { background: var(--warn-tint); color: var(--warn); }
.feed-item.t-neutro .feed-ico, .feed-item.t-apagado .feed-ico { background: var(--neutral-tint); color: var(--muted); }
.feed-item p { margin: 0; display: flex; flex-direction: column; gap: 1px; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.feed-item a { color: var(--text); text-decoration: none; }
.feed-item a:hover { color: var(--brand); text-decoration: underline; }
.feed-item b { color: var(--ink); }

/* ── Tablas y listas del panel ────────────────────────────────────────────── */
.recientes .tabla, .lista-docs .tabla { margin-top: 6px; }
.tabla tbody tr { transition: background-color .15s ease; }
@media (hover: hover) { .tabla tbody tr:hover { background: color-mix(in srgb, var(--brand-tint) 45%, transparent); } }
.pill.ejemplo { text-decoration: none; }
.filtros-barra { display: flex; gap: 10px 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 14px; }
.filtros-barra .tabs { margin: 0; }
.tabs a { display: inline-flex; align-items: center; gap: 6px; transition: border-color .2s ease, background-color .2s ease; }
.tabs a:hover { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); color: var(--ink); }
.tabs .punto { width: 7px; height: 7px; border-radius: 50%; }
.buscador { position: relative; display: flex; gap: 8px; align-items: center; flex: 1 1 280px; max-width: 460px; }
.buscador input { padding-left: 40px; }
.buscador-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; display: grid; }
.buscador.grande { max-width: 620px; margin: 0 auto; }
.buscador.grande input { min-height: 54px; font-size: 17px; border-radius: 15px; padding-right: 108px; box-shadow: var(--sombra-1); }
.buscador.grande .btn { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); }

/* ── Estados vacíos ───────────────────────────────────────────────────────── */
.vacio { text-align: center; padding: 28px 16px 32px; color: var(--muted); }
.vacio .ilus { width: 200px; height: auto; margin: 0 auto 6px; display: block; }
.vacio h2 { color: var(--ink); margin-bottom: 6px; }
.vacio p { max-width: 46ch; margin: 0 auto 16px; }
.vacio.compacto { padding: 12px 8px 4px; }
.vacio.compacto .ilus { width: 150px; }
.vacio.compacto p { font-size: 14px; margin-bottom: 0; }
.ilus .il-sombra { fill: color-mix(in srgb, var(--ink) 8%, transparent); }
.ilus .il-hoja { fill: var(--paper); stroke: color-mix(in srgb, var(--brand) 35%, var(--line)); stroke-width: 1.6; }
.ilus .il-atras { fill: var(--brand-tint); }
.ilus .il-linea { fill: none; stroke: var(--line); stroke-width: 5; stroke-linecap: round; }
.ilus .il-firma { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ilus .il-acento { fill: none; stroke: var(--brand); stroke-width: 4; stroke-linecap: round; }
.ilus .il-acento-fondo { fill: var(--brand-tint); }
.ilus .il-sello { fill: none; stroke: var(--seal); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ilus .il-sello-fondo { fill: var(--seal-tint); }
.ilus .il-lente { fill: color-mix(in srgb, var(--paper) 70%, transparent); stroke: var(--brand); stroke-width: 4; }
.ilus .il-chispa { fill: none; stroke: color-mix(in srgb, var(--brand) 55%, transparent); stroke-width: 2.4; stroke-linecap: round; }

/* ── Asistente de nuevo documento ─────────────────────────────────────────── */
.asistente-pasos { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 0; margin: 0 0 10px; counter-reset: paso; }
.asistente-pasos li { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--muted); font-size: 14px; font-weight: 600; }
.ap-num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: none; border: 2px solid var(--line); background: var(--paper); color: var(--muted); font-family: var(--mono); font-size: 13px; font-weight: 500; transition: background-color .3s ease, border-color .3s ease, color .3s ease; }
.ap-num .ico { width: 17px; height: 17px; }
.ap-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ap-nota { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.asistente-pasos li.actual { color: var(--ink); }
.asistente-pasos li.actual .ap-num { border-color: var(--brand); background: var(--brand); color: var(--on-brand); box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 18%, transparent); }
.asistente-pasos li.hecho { color: var(--ink); }
.asistente-pasos li.hecho .ap-num { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); }
.asistente-pasos li.saltado .ap-num { border-style: dashed; }
@media (max-width: 640px) {
  .asistente-pasos li { flex-direction: column; text-align: center; gap: 4px; font-size: 11.5px; }
  .asistente-pasos li:not(.actual) .ap-txt { opacity: .8; }
  .ap-nota { display: none; }
}
.asistente-barra { height: 6px; border-radius: 6px; background: var(--line); overflow: hidden; margin: 0 0 18px; }
.ab-valor { display: block; height: 100%; width: 100%; border-radius: 6px; background: var(--brand); transform-origin: 0 50%; transition: transform .6s var(--ease); }
.ab-valor.p1 { transform: scaleX(.25); } .ab-valor.p2 { transform: scaleX(.5); } .ab-valor.p3 { transform: scaleX(.75); } .ab-valor.p4 { transform: scaleX(1); }
.asistente-pasos.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ab-valor.m1 { transform: scaleX(.3333); } .ab-valor.m2 { transform: scaleX(.6667); } .ab-valor.m3 { transform: scaleX(1); }
.asistente { margin: 0; }
.enter-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
.paso-panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--sombra-1); }
.paso-panel > h2 { font-size: 21px; }
.resumen-errores { margin-bottom: 14px; }
.eleccion { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); margin: 12px 0 16px; }
@media (min-width: 640px) { .eleccion { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.eleccion-op { position: relative; display: flex; gap: 12px; align-items: center; border: 1.5px solid var(--line); border-radius: var(--r); padding: 14px 16px; cursor: pointer; margin: 0; font-weight: 400; background: var(--paper); transition: border-color .2s ease, background-color .2s ease, transform .2s var(--ease); }
.eleccion-op input { position: absolute; opacity: 0; pointer-events: none; }
.eleccion-op > span:last-child { display: flex; flex-direction: column; gap: 1px; }
.eleccion-op b { color: var(--ink); }
.eo-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--neutral-tint); color: var(--muted); flex: none; transition: background-color .2s ease, color .2s ease; }
.eleccion-op:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.paso-panel:has(.eleccion input[value="plantilla"]:checked) .modo[data-modo="pdf"], .paso-panel:has(.eleccion input[value="pdf"]:checked) .modo[data-modo="plantilla"] { display: none; }
.eleccion-op:has(input:checked) .eo-ico { background: var(--brand); color: var(--on-brand); }
.eleccion-op:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.eleccion-op:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--line)); }
.modo + .modo { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line); }
.con-eleccion .modo + .modo { margin-top: 0; padding-top: 0; border-top: 0; }
.con-eleccion .modo[hidden] { display: none; }
.archivo-listo { display: flex; align-items: center; gap: 12px; border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line)); border-radius: var(--r); padding: 12px 14px; margin-bottom: 10px; background: var(--paper); }
.al-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--chip-bg); color: var(--chip-ink); flex: none; }
.al-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; overflow-wrap: anywhere; }
.al-txt b { color: var(--ink); }
.plantillas-elegir { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
@media (min-width: 640px) { .plantillas-elegir { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plantilla-op { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: var(--r); padding: 14px; text-decoration: none; color: var(--text); background: var(--paper); transition: border-color .2s ease, transform .25s var(--ease), box-shadow .25s ease; }
.plantilla-op > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.plantilla-op b { color: var(--ink); overflow-wrap: anywhere; }
.plantilla-op > .ico { color: var(--muted); }
.po-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--chip-bg); color: var(--chip-ink); flex: none; }
@media (hover: hover) { .plantilla-op:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--sombra-1); color: var(--text); } }

.firmantes-lista { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.firmante-tarjeta { position: relative; border: 1px solid var(--line); border-radius: var(--r); padding: 14px; background: var(--paper); transition: box-shadow .2s ease, border-color .2s ease, transform .2s var(--ease); }
.firmante-tarjeta.con-error { border-color: color-mix(in srgb, var(--alert) 45%, var(--line)); }
.firmante-tarjeta.arrastrando { z-index: 5; box-shadow: var(--sombra-2); border-color: var(--brand); transform: scale(1.01); }
.firmante-tarjeta.destello { border-color: var(--brand); }
.ft-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ft-asa { display: grid; place-items: center; width: 30px; height: 34px; border-radius: 8px; border: 0; background: none; color: var(--muted); cursor: grab; touch-action: none; padding: 0; }
.ft-asa:hover, .ft-asa:focus-visible { background: var(--neutral-tint); color: var(--ink); }
.ft-asa:active { cursor: grabbing; }
.ft-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--chip-bg); color: var(--chip-ink); font-family: var(--mono); font-size: 13px; font-weight: 500; flex: none; }
.ft-titulo { font-weight: 700; color: var(--ink); font-size: 14.5px; white-space: nowrap; }
@media (max-width: 480px) { .paso-panel { padding: 16px; } .firmante-tarjeta { padding: 12px; } .ft-cab { gap: 6px; } .ft-acciones { gap: 4px; } }
.ft-acciones { margin-left: auto; display: flex; gap: 6px; }
.paralelo .ft-num { background: var(--neutral-tint); color: var(--muted); }
.hint-inline { font-weight: 400; color: var(--muted); font-size: 12.5px; }
.firmante-tarjeta .field + .field { margin-top: 0; }
.ft-rol { grid-column: 1 / -1; }
@media (min-width: 640px) { .ft-rol { grid-column: auto; } }
.msg-campo { display: block; min-height: 0; font-size: 13px; margin-top: 4px; color: var(--alert); }
.msg-campo:empty { display: none; }
.campo-error input, .campo-error select, input[aria-invalid="true"] { border-color: var(--alert); }
.campo-ok input { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234F46E5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px; }
.opciones-envio .radios { margin-top: 4px; }
.vence input { max-width: 260px; }

.resumen { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
@media (min-width: 900px) { .resumen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.resumen .card + .card { margin-top: 0; }
.resumen h3 { display: flex; align-items: center; gap: 8px; margin: 0; }
.resumen h3 .ico { color: var(--brand); }
.resumen .dl { margin-top: 12px; }
.resumen .pre { white-space: pre-line; }
.lista-firmantes { list-style: none; margin: 12px 0 8px; padding: 0; display: grid; gap: 12px; }
.lista-firmantes li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; overflow-wrap: anywhere; }
.donde { display: inline-flex; align-items: center; gap: 5px; color: var(--brand); margin-top: 2px; }
.donde .ico { width: 15px; height: 15px; }
.asistente-nav { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 16px; }
.asistente-nav .atras { order: -1; margin-right: auto; }
.asistente-nav [data-sig] { order: 3; }
@media (max-width: 640px) {
  .asistente-nav { position: sticky; bottom: 0; z-index: 10; margin: 16px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
  .asistente-nav .btn:not(.atras) { flex: 1 1 auto; }
}

/* ── Ubicar firmas ────────────────────────────────────────────────────────── */
.ubicar { margin-top: 12px; }
.ubicar-pagina { box-shadow: var(--sombra-1); }
.panel .ubicar-lado { top: 84px; }
@media (max-width: 899px) { .panel .ubicar-lado { position: static; } }
.marca-firma { box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--brand) 50%, transparent); }
.radio.fija { cursor: default; background: var(--brand-tint); border-color: transparent; }
.radio.fija .ico { color: var(--brand); margin-top: 2px; }

/* ── Detalle del documento ────────────────────────────────────────────────── */
.doc-cabecera { margin-bottom: 16px; }
.dc-titulo { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.dc-titulo > div:nth-child(2) { flex: 1 1 260px; min-width: 0; }
.dc-titulo h1 { margin: 0 0 4px; overflow-wrap: anywhere; font-size: clamp(21px, 4vw, 27px); }
.dc-titulo p { margin: 0; }
.dc-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--chip-bg); color: var(--chip-ink); flex: none; }
.dc-ico .ico { width: 24px; height: 24px; }
.dc-ico.sello { background: var(--seal-tint); color: var(--seal); }
.dc-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dc-avance { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.dc-avance p { margin: 0 0 7px; }
.aviso.generando { display: flex; align-items: center; gap: 10px; }
.girando { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--brand) 25%, transparent); border-top-color: var(--brand); flex: none; }
.aviso.borrador .row { margin-top: 4px; }
.personas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.persona-tarjeta { border: 1px solid var(--line); border-radius: var(--r); padding: 14px; background: var(--paper); }
.persona-tarjeta.t-sello { border-color: color-mix(in srgb, var(--seal) 35%, var(--line)); }
.pt-cab { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.pt-avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--chip-bg); color: var(--chip-ink); font-weight: 800; }
.persona-tarjeta.t-sello .pt-avatar { background: var(--seal-tint); color: var(--seal); }
.persona-tarjeta.t-alerta .pt-avatar { background: var(--alert-tint); color: var(--alert); }
.pt-quien { min-width: 0; overflow-wrap: anywhere; }
.pt-hitos { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; position: relative; }
.pt-hitos::before { content: ""; position: absolute; left: 12%; right: 12%; top: 15px; height: 2px; background: var(--line); }
.pt-hitos li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; font-size: 12px; color: var(--muted); }
.pt-hitos li .ico { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--line); color: var(--muted); box-sizing: border-box; }
.pt-hitos li span { display: flex; flex-direction: column; font-weight: 600; }
.pt-hitos li small { font-weight: 400; font-size: 11px; line-height: 1.25; }
.pt-hitos li.ok { color: var(--ink); }
.pt-hitos li.ok .ico { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); }
.pt-hitos li.ok.sello .ico { border-color: var(--seal); background: var(--seal-tint); color: var(--seal); }
.pt-hitos li.no .ico { border-color: var(--alert); background: var(--alert-tint); color: var(--alert); }
@media (max-width: 420px) { .pt-hitos li small { display: none; } }
.persona-tarjeta .acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.persona-tarjeta .acciones form { margin: 0; }
.cambiar-correo { width: 100%; }
.cambiar-correo > summary { list-style: none; display: inline-flex; }
.cambiar-correo > summary::-webkit-details-marker { display: none; }
.cambiar-correo[open] > summary { background: var(--brand-tint); }
.linea-tiempo { list-style: none; margin: 8px 0 0; padding: 0; position: relative; }
.linea-tiempo::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: var(--line); transform-origin: top; }
.lt-item { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 8px 0; }
.lt-ico { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--chip-bg); color: var(--chip-ink); box-shadow: 0 0 0 4px var(--paper); }
.lt-ico .ico { width: 16px; height: 16px; }
.lt-item.t-sello .lt-ico { background: var(--seal-tint); color: var(--seal); }
.lt-item.t-alerta .lt-ico { background: var(--alert-tint); color: var(--alert); }
.lt-item.t-aviso .lt-ico { background: var(--warn-tint); color: var(--warn); }
.lt-item.t-neutro .lt-ico, .lt-item.t-apagado .lt-ico { background: var(--neutral-tint); color: var(--muted); }
.lt-txt { min-width: 0; overflow-wrap: anywhere; padding-top: 5px; }
.lt-txt .hash { display: block; margin-top: 2px; }
.enlace-copiar .row { flex-wrap: nowrap; }
.enlace-largo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.versiones .hash { display: block; margin-top: 2px; }
details.anular { padding: 0; }
details.anular > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px; }
details.anular > summary::-webkit-details-marker { display: none; }
details.anular > summary > span { display: flex; flex-direction: column; }
details.anular > summary b { color: var(--alert); }
details.anular > summary .ico { color: var(--muted); transition: transform .25s var(--ease); }
details.anular[open] > summary .ico { transform: rotate(180deg); }
details.anular > p, details.anular > form { padding: 0 20px; }
details.anular > form { padding-bottom: 20px; }

/* ── Tarjetas de listas (plantillas, correos) ─────────────────────────────── */
.tarjetas { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tarjetas.una { grid-template-columns: minmax(0, 1fr); } }
.tarjetas .card + .card { margin-top: 0; }
.tarjeta-item { display: flex; flex-direction: column; gap: 10px; transition: transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease; }
@media (hover: hover) { .tarjeta-item:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); } }
.ti-cab { display: flex; align-items: flex-start; gap: 12px; }
.ti-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--chip-bg); color: var(--chip-ink); flex: none; }
.ti-cab > div { flex: 1; min-width: 0; }
.ti-cab h2, .ti-cab h3 { margin: 0 0 2px; font-size: 16.5px; overflow-wrap: anywhere; }
.ti-cab p { margin: 0; }
.ti-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.ti-acciones form { margin: 0; }
.ti-datos { display: flex; gap: 6px; flex-wrap: wrap; }
.dato { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); background: var(--neutral-tint); border-radius: 99px; padding: 3px 10px; }
.dato .ico { width: 14px; height: 14px; }

/* ── Notificaciones (toasts) ──────────────────────────────────────────────── */
.toasts { position: fixed; z-index: 70; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
@media (max-width: 640px) { .toasts { left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: auto; } }
.toast { pointer-events: auto; display: grid; grid-template-columns: 34px minmax(0, 1fr) 30px; gap: 10px; align-items: start; background: var(--paper); color: var(--text); border: 1px solid var(--line); border-radius: var(--r); padding: 12px; box-shadow: var(--sombra-2); font-size: 14.5px; position: relative; overflow: hidden; }
.toast p { margin: 0; padding-top: 6px; overflow-wrap: anywhere; }
.toast-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--chip-bg); color: var(--chip-ink); }
.toast.error .toast-ico { background: var(--alert-tint); color: var(--alert); }
.toast.advertencia .toast-ico { background: var(--warn-tint); color: var(--warn); }
.toast.info .toast-ico { background: var(--neutral-tint); color: var(--muted); }
.toast-x { width: 30px; height: 30px; border-radius: 8px; border: 0; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; padding: 0; }
.toast-x:hover { background: var(--neutral-tint); color: var(--ink); }
.toast-tiempo { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: color-mix(in srgb, var(--brand) 45%, transparent); transform-origin: 0 50%; }
.toast.error .toast-tiempo { display: none; }
.toast.sale { opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.js .avisos-flash .aviso[data-toast] { display: none; }

/* ── Panel lateral de ayuda (el «?») ──────────────────────────────────────── */
.cajon-fondo { position: fixed; inset: 0; z-index: 80; background: rgba(11, 10, 31, .45); }
.cajon { position: fixed; z-index: 81; top: 0; right: 0; bottom: 0; width: min(520px, 100vw); background: var(--paper); box-shadow: var(--sombra-2); display: flex; flex-direction: column; }
.cajon-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.cajon-cab p { margin: 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cajon-cuerpo { overflow-y: auto; padding: 18px 20px 28px; -webkit-overflow-scrolling: touch; }
.cajon-cuerpo:focus { outline: none; }
.cajon-mas { margin-top: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .cajon { animation: deslizar-izq .32s var(--ease); }
  .cajon-fondo { animation: aparecer .25s ease; }
}

/* ── Recorrido guiado ─────────────────────────────────────────────────────── */
.guia-capa { position: fixed; inset: 0; z-index: 90; }
.guia-foco { position: fixed; z-index: 91; border-radius: 14px; pointer-events: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 70%, transparent), 0 0 0 9999px rgba(10, 12, 16, .55); transition: opacity .2s ease; }
.guia-globo { position: fixed; z-index: 92; width: min(360px, calc(100vw - 32px)); background: var(--paper); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sombra-2); padding: 18px; }
.guia-globo:focus { outline: none; }
.guia-k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--brand); margin: 0 0 4px; text-transform: uppercase; }
.guia-globo h2 { font-size: 18px; margin-bottom: 6px; }
.guia-globo p { font-size: 14.5px; margin-bottom: 14px; }
.guia-puntos { display: flex; gap: 5px; margin-bottom: 14px; }
.guia-puntos span { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.guia-puntos span.on { background: var(--brand); }
.guia-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.guia-acciones .saltar { margin-right: auto; color: var(--muted); font-size: 14px; }
.guia-cerrar { position: absolute; top: 10px; right: 10px; }
@media (max-width: 640px) {
  .guia-globo.abajo-fijo { left: 16px !important; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); top: auto !important; width: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .guia-globo.entra { animation: globo-entra .28s var(--ease); }
}

/* ── Centro de ayuda ──────────────────────────────────────────────────────── */
.ayuda-wrap { max-width: 1120px; }
.ayuda-marca { font-weight: 700; color: var(--ink); text-decoration: none; font-size: 14.5px; padding-left: 14px; border-left: 1px solid var(--line); white-space: nowrap; }
@media (max-width: 480px) { .ayuda-marca { display: none; } }
.ayuda-hero { position: relative; isolation: isolate; overflow: hidden; text-align: center; border-radius: var(--r-lg); padding: 38px 18px 30px; margin-bottom: 26px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--sombra-1); }
.ayuda-hero h1 { font-size: clamp(26px, 5vw, 38px); margin-bottom: 18px; }
.ayuda-hero-fondo { position: absolute; inset: 0; z-index: -1; }
.ayuda-hero-fondo .malla { position: absolute; inset: 0; background:
  radial-gradient(50% 90% at 85% 0%, color-mix(in srgb, var(--brand) 7%, transparent) 0%, transparent 70%); }
.ayuda-atajos { margin: 14px 0 0; }
.ayuda-seccion { margin-bottom: 30px; }
.ayuda-seccion > h2 { display: flex; align-items: center; gap: 10px; font-size: 20px; margin-bottom: 14px; }
.ayuda-seccion > h2 .ico { color: var(--brand); width: 22px; height: 22px; }
.ayuda-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 680px) { .ayuda-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ayuda-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ayuda-tarjeta { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); text-decoration: none; color: var(--text); box-shadow: var(--sombra-1); transition: transform .3s var(--ease), box-shadow .3s ease, border-color .3s ease; }
.ayuda-tarjeta > span:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ayuda-tarjeta b { color: var(--ink); }
.ayuda-tarjeta[hidden] { display: none; }
@media (hover: hover) { .ayuda-tarjeta:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); color: var(--text); } }
.at-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--chip-bg); color: var(--chip-ink); flex: none; }
.manuales { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
@media (min-width: 760px) { .manuales { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.manual { display: flex; gap: 16px; align-items: center; padding: 16px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); text-decoration: none; color: var(--text); box-shadow: var(--sombra-1); transition: transform .3s var(--ease), box-shadow .3s ease; }
.manual > span:last-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.manual b { color: var(--ink); }
.manual-dl { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-weight: 700; }
@media (hover: hover) { .manual:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); color: var(--text); } .manual:hover .manual-portada { transform: rotate(-2deg) translateY(-2px); } }
.manual-portada { position: relative; flex: none; width: 74px; height: 98px; border-radius: 6px; background: #0B0A1F; color: #fff; padding: 9px 8px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 10px 20px -10px rgba(11, 10, 31, .6); overflow: hidden; transition: transform .35s var(--ease); }
.manual-portada::before { content: ""; position: absolute; width: 90px; height: 90px; right: -40px; top: -40px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 40%, transparent); filter: blur(10px); }
.mp-wm { position: relative; font-size: 9px; font-weight: 800; letter-spacing: -.02em; }
.mp-wm b { color: #C7CCFB; }
.mp-wm i { font-style: normal; font-family: var(--mono); font-weight: 500; font-size: 7px; border: 1px solid #C7CCFB; color: #C7CCFB; border-radius: 3px; padding: 0 2px; }
.mp-t { position: relative; font-size: 9.5px; font-weight: 800; line-height: 1.15; }
.ayuda-articulo { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 980px) { .ayuda-articulo { grid-template-columns: minmax(0, 1fr) 300px; } }
.ayuda-lateral { display: grid; gap: 14px; }
@media (min-width: 980px) { .ayuda-lateral { position: sticky; top: 84px; } }
.ayuda-lateral .card + .card { margin-top: 0; }
.lista-lateral { list-style: none; margin: 0; padding: 0; }
.lista-lateral a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 9px; color: var(--text); text-decoration: none; font-size: 14px; font-weight: 600; }
.lista-lateral a .ico { color: var(--muted); width: 17px; height: 17px; }
.lista-lateral a:hover { background: var(--neutral-tint); color: var(--ink); }
.lista-lateral a[aria-current="page"] { background: var(--brand-tint); color: var(--brand); }
.lista-lateral a[aria-current="page"] .ico { color: var(--brand); }
.manual-mini { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--text); }
.manual-mini > .ico { color: var(--brand); width: 26px; height: 26px; }
.manual-mini > span { display: flex; flex-direction: column; }
.manual-mini b { color: var(--ink); }
.articulo { padding: 26px; }
.articulo.parcial { padding: 0; border: 0; box-shadow: none; }
.articulo-cab { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.articulo-cab h1, .articulo-cab h2 { margin: 0 0 4px; }
.articulo-cab p { margin: 0; }
.articulo-cuerpo { font-size: 16px; line-height: 1.65; }
.articulo-cuerpo h2 { font-size: 19px; margin: 26px 0 8px; }
.articulo-cuerpo p, .articulo-cuerpo ul, .articulo-cuerpo ol { margin: 0 0 12px; }
.articulo-cuerpo ul, .articulo-cuerpo ol { padding-left: 22px; }
.articulo-cuerpo li { margin-bottom: 6px; }
.articulo-cuerpo li::marker { color: var(--brand); font-weight: 700; }
.articulo-cuerpo code { background: var(--brand-tint); color: var(--brand); padding: 1px 6px; border-radius: 6px; font-size: .88em; white-space: nowrap; }
.articulo-cuerpo pre { background: var(--neutral-tint); border-radius: var(--r-sm); padding: 12px 14px; overflow-x: auto; font-family: var(--mono); font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; }
.articulo-cuerpo table { width: 100%; border-collapse: collapse; margin: 6px 0 16px; font-size: 14.5px; }
.articulo-cuerpo th { text-align: left; font-family: var(--mono); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.articulo-cuerpo td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.articulo-cuerpo .nota { background: var(--brand-tint); border-radius: var(--r); padding: 14px 16px; margin: 4px 0 16px; }
.articulo-cuerpo .nota p:last-child { margin-bottom: 0; }
.articulo-cuerpo .nota-t { margin-bottom: 4px; color: var(--ink); }
.figura { margin: 8px 0 18px; }
.figura img { display: block; width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--sombra-1); background: #F6F7FB; }
.figura figcaption { font-size: 13px; color: var(--muted); text-align: center; margin-top: 8px; }
.articulo-vecinos { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.articulo-vecinos a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line); max-width: 100%; }
.articulo-vecinos a > span { display: flex; flex-direction: column; min-width: 0; }
.articulo-vecinos a b { color: var(--ink); }
.articulo-vecinos a.sig { margin-left: auto; text-align: right; }
.articulo-vecinos a:hover { border-color: var(--brand); color: var(--text); }
@media (max-width: 640px) { .articulo { padding: 18px; } .articulo-cuerpo { font-size: 15.5px; } .articulo-cuerpo td, .articulo-cuerpo th { padding: 8px 6px; } .articulo-cuerpo table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } }

/* ── Movimiento ───────────────────────────────────────────────────────────── */
/* Las entradas de los gráficos las activa panel.js (clase «animar») solo si la
   pestaña está visible y la persona no pidió reducir el movimiento; la quita
   al terminar. Sin JS, o con la pestaña en segundo plano, todo se ve quieto. */
@media (prefers-reduced-motion: no-preference) {
  .anima-grupo.animar .g-barra { animation: crecer-y .7s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 16ms); }
  .anima-grupo.animar .anillo-seg { animation: girar-in .9s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 90ms); }
  .anima-grupo.animar .barra-valor { animation: crecer-x .9s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 110ms); }
  .anima-grupo.animar .lt-item { animation: subir .45s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 60ms); }
  .anima-grupo.animar.linea-tiempo::before { animation: crecer-y-top .9s var(--ease) backwards; }
  .animar .anima-x { animation: crecer-x .9s var(--ease) backwards; }
  .animar .anima-giro { animation: girar-in 1s var(--ease) backwards; }
  .kpi.animar { animation: subir .5s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
  .paso-item.recien .paso-check { animation: sello-entra .6s var(--ease); }
  .girando { animation: girar 1s linear infinite; }
  .firmante-tarjeta.nueva { animation: subir .35s var(--ease); }
  .toast.entra { animation: toast-entra .35s var(--ease); }
  .toast-tiempo { animation: vaciar-x var(--dur, 6s) linear forwards; }
  .toast:hover .toast-tiempo, .toast:focus-within .toast-tiempo { animation-play-state: paused; }
  .bienvenida-fondo .m1 { animation: deriva 16s ease-in-out infinite alternate; }
  .bienvenida-fondo .m2 { animation: deriva 20s ease-in-out infinite alternate-reverse; }
  .ilus .il-flota { animation: flotar 6s ease-in-out infinite; }
  .ilus .il-insignia { animation: flotar 6s ease-in-out -2s infinite; }
  .paso-panel.entra { animation: subir .4s var(--ease); }
  .ab-valor.desde { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-valor { transition: none; }
}
@keyframes crecer-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes crecer-y-top { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes crecer-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes girar-in { from { transform: rotate(-80deg); opacity: 0; } to { transform: rotate(0); opacity: 1; } }
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes subir { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes caer { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes deslizar-izq { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes globo-entra { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-entra { from { transform: translateY(14px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes vaciar-x { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes deriva { from { transform: translate(0, 0); } to { transform: translate(-30px, 20px); } }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ── Marca de la empresa en la barra del panel ────────────────────────────── */
.marcas { display: flex; align-items: center; gap: 12px; min-width: 0; flex: none; }
.marca-sep { width: 1px; height: 26px; background: var(--line); flex: none; }
/* Placa blanca: un logo con letras oscuras y fondo transparente se ve igual en modo oscuro. */
.logo-panel { height: 34px; max-width: 132px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 4px 8px; }
@media (max-width: 1099px) and (min-width: 900px) { .marca-sep, .logo-panel { display: none; } }
/* En el celular la barra no da para el logo: con él, «Nuevo», ayuda y la cuenta
   bajaban a una segunda fila. El logo sigue en lo que ven quienes firman. */
@media (max-width: 520px) { .marca-sep, .logo-panel { display: none; } }
@media (max-width: 420px) {
  .marcas { gap: 8px; }
  .panel .topbar .nav-panel a { font-size: 11px; }
}

/* ── Personalización de la marca ──────────────────────────────────────────── */
.marca-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .marca-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.marca-form { display: flex; flex-direction: column; gap: 22px; }
.marca-bloque { display: flex; flex-direction: column; gap: 12px; }
.marca-bloque + .marca-bloque { border-top: 1px solid var(--line); padding-top: 20px; }
.marca-leyenda { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.marca-leyenda .ico { color: var(--muted); }
.marca-bloque .field + .field { margin-top: 2px; }
.logo-actual { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.logo-actual p { margin: 0; flex: 1 1 180px; }
.logo-caja { flex: none; width: 200px; max-width: 100%; height: 76px; border-radius: var(--r-sm); border: 1px solid var(--line); display: grid; place-items: center; padding: 10px; background-color: #fff; background-image: linear-gradient(45deg, #F1F2F4 25%, transparent 25%, transparent 75%, #F1F2F4 75%), linear-gradient(45deg, #F1F2F4 25%, transparent 25%, transparent 75%, #F1F2F4 75%); background-size: 14px 14px; background-position: 0 0, 7px 7px; }
.logo-caja img { max-width: 100%; max-height: 56px; object-fit: contain; }
.logo-vacio { font-size: 13px; color: #5D6370; font-weight: 600; }
.color-fila { display: flex; align-items: flex-end; gap: 12px; }
.color-fila input[type=color] { flex: none; width: 56px; height: 46px; padding: 3px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--paper); cursor: pointer; }
.color-fila input[type=color]:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 45%, transparent); outline-offset: 1px; }
.color-hex { flex: 1 1 auto; min-width: 0; max-width: 220px; }
.color-hex input { font-family: var(--mono); text-transform: uppercase; }
.color-final { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); }
.color-muestra { width: 28px; height: 28px; border-radius: 8px; background: var(--vista); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); flex: none; }
.marca-bloque .aviso { margin: 0; }
.marca-acciones { border-top: 1px solid var(--line); padding-top: 18px; }

.vista-card { display: flex; flex-direction: column; gap: 12px; }
.vista-card + .vista-card { margin-top: 0; }
.vista-titulo { display: flex; align-items: center; gap: 8px; font-size: 13px; font-family: var(--mono); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0; }
.vista-titulo .ico { width: 16px; height: 16px; }
.vista-card > .btn { align-self: flex-start; }
.vista-card .hint { margin: -6px 0 0; }

/* Las maquetas imitan pantallas en claro: son lo que ve la otra persona. */
.vm-firmante, .vm-correo, .vm-cert { border-radius: 12px; border: 1px solid #E3E5EA; overflow: hidden; background: #fff; color: #2A2E37; }
.vm-barra { display: flex; align-items: center; gap: 9px; padding: 10px 14px; background: var(--vista-tinte); border-bottom: 1px solid #E3E5EA; font-weight: 700; color: #15171C; min-height: 50px; min-width: 0; }
.vm-logo { height: 28px; max-width: 150px; object-fit: contain; }
.vm-chip { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--vista); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.vm-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.vm-cuerpo { padding: 14px; display: flex; flex-direction: column; gap: 6px; background: #F6F7F9; }
.vm-pasos { display: flex; gap: 6px; list-style: none; margin: 0 0 4px; padding: 0; }
.vm-pasos li { flex: 1; height: 5px; border-radius: 3px; background: #E3E5EA; }
.vm-pasos li.on { background: var(--vista); }
.vm-k { margin: 0; font-size: 12px; color: #5D6370; overflow-wrap: anywhere; }
.vm-doc { margin: 0 0 6px; font-weight: 800; color: #15171C; font-size: 15px; }
.vm-boton { align-self: stretch; text-align: center; background: var(--vista); color: #fff; font-weight: 700; font-size: 13.5px; padding: 10px 14px; border-radius: 10px; }
.vm-de { margin: 0; overflow-wrap: anywhere; }
.vm-correo { background: #EEF0F3; }
.vm-correo-cab { background: var(--vista); padding: 16px 14px 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.vm-placa { display: inline-block; background: #fff; border-radius: 8px; padding: 6px 10px; }
.vm-placa img { height: 26px; max-width: 150px; object-fit: contain; display: block; }
.vm-correo-nombre { color: #fff; font-weight: 800; font-size: 16px; overflow-wrap: anywhere; }
.vm-correo-titulo { color: #fff; font-weight: 700; font-size: 13px; }
.vm-correo-cuerpo { background: #fff; padding: 14px; display: flex; flex-direction: column; gap: 7px; }
.vm-linea { height: 7px; border-radius: 4px; background: #E3E5EA; }
.vm-linea.corta { width: 62%; }
.vm-correo-cuerpo .vm-boton { align-self: center; margin-top: 6px; }
.vm-cert { position: relative; padding: 14px 14px 12px; }
.vm-cert-banda { position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--vista); }
.vm-cert-cab { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding-top: 4px; }
.vm-cert-cab > div { min-width: 0; }
.vm-cert-cab p { margin: 0; }
.vm-cert-logo { height: 26px; max-width: 140px; object-fit: contain; display: block; margin-bottom: 4px; }
.vm-cert-empresa { font-size: 11px; color: #5D6370; font-weight: 600; overflow-wrap: anywhere; }
.vm-cert-k { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--vista); font-weight: 700; margin-top: 6px !important; }
.vm-cert-doc { font-weight: 800; font-size: 14px; color: #15171C; }
.vm-cert-folio { font-size: 11px; color: #5D6370; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px !important; }
.vm-cert-pill { background: #E7F5EE; color: #17704A; font-weight: 700; font-size: 10px; padding: 2px 8px; border-radius: 99px; }
.vm-qr { flex: none; width: 46px; height: 46px; fill: #15171C; }
.vm-cert-tabla { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; border-top: 2px solid var(--vista); padding-top: 8px; }
.vm-cert-tabla span { height: 6px; border-radius: 3px; background: #E3E5EA; }
.vm-cert-tabla span:nth-child(2) { width: 80%; }
.vm-cert-tabla span:nth-child(3) { width: 55%; }

/* ── Franja del plan (pago pendiente, 80 % y 100 % del límite) ───────────── */
.franja-plan { border-bottom: 1px solid var(--line); background: var(--neutral-tint); color: var(--text); font-size: 14px; }
.franja-plan .in { max-width: 1120px; margin: 0 auto; padding: 9px max(16px, env(safe-area-inset-left)); display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.franja-plan .ico { flex: none; width: 18px; height: 18px; color: var(--muted); }
.franja-plan p { margin: 0; flex: 1 1 220px; min-width: 0; }
.franja-plan a { font-weight: 700; white-space: nowrap; }
.franja-plan.es-aviso { background: var(--warn-tint); color: var(--warn); }
.franja-plan.es-aviso .ico { color: var(--warn); }
.franja-plan.es-aviso a { color: var(--warn); }
.franja-plan.es-alerta { background: var(--alert-tint); color: var(--alert); }
.franja-plan.es-alerta .ico, .franja-plan.es-alerta a { color: var(--alert); }
.kpi-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; font-weight: 700; text-decoration: none; align-self: flex-start; }
.kpi-link .ico { width: 16px; height: 16px; }
.kpi-link:hover { text-decoration: underline; }
.aviso-txt + a, .aviso.error a { font-weight: 700; color: inherit; }

/* ── Plan y pagos ─────────────────────────────────────────────────────────── */
.plan-top { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-bottom: 26px; }
@media (min-width: 900px) { .plan-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.plan-top .card + .card { margin-top: 0; }
.plan-actual, .plan-uso { display: flex; flex-direction: column; box-shadow: var(--sombra-1); }
.plan-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 2px; }
.plan-cab h2 { font-size: 24px; margin: 0; }
.plan-cab .pill { font-size: 12px; padding: 4px 11px; }
.plan-precio { font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; margin: 2px 0 10px; font-variant-numeric: tabular-nums; }
.plan-iva { font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.plan-detalle { color: var(--text); max-width: 52ch; }
.plan-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: auto 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); }
.plan-datos div { min-width: 0; }
.plan-datos dt { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.plan-datos dd { margin: 2px 0 0; font-weight: 700; color: var(--ink); }
.plan-accion { padding-top: 18px; }
.uso-k { font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 0 4px; }
.uso-n { margin: 0 0 10px; line-height: 1; font-variant-numeric: tabular-nums; }
.uso-n b { font-size: clamp(32px, 7vw, 42px); font-weight: 800; letter-spacing: -.04em; color: var(--ink); }
.uso-n span { font-size: 16px; font-weight: 600; color: var(--muted); }
.barra.grande { height: 12px; }
.barra.uso.lleno .barra-valor { fill: var(--alert); }
.uso-s { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.uso-otros { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.uso-otros li { min-width: 0; display: flex; flex-direction: column; }
.uso-otro-k { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.uso-otro-n { color: var(--muted); font-size: 13.5px; }
.uso-otro-n b { color: var(--ink); font-size: 17px; }
.uso-otros .barra.mini { max-width: none; }
.excedente { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; }
.excedente p { margin: 0 0 6px; }
.excedente p:last-child { margin-bottom: 0; }
.comparador { margin-bottom: 22px; }
.comparador-cab { margin-bottom: 12px; }
.comparador-cab p { margin: 0; max-width: 80ch; }
.planes-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .planes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .planes-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.plan-op { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; min-width: 0; box-shadow: var(--sombra-1); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.plan-op:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); }
.plan-op.actual { border-color: color-mix(in srgb, var(--brand) 55%, var(--line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 55%, var(--line)), var(--sombra-1); }
.plan-op.recomendado { border-style: dashed; border-color: color-mix(in srgb, var(--brand) 60%, var(--line)); }
.plan-op-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.plan-op-cab h3 { margin: 0; font-size: 17px; }
.etiqueta-plan { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.etiqueta-plan .ico { width: 13px; height: 13px; }
.etiqueta-plan.actual { background: var(--brand); color: var(--on-brand); }
.etiqueta-plan.rec { background: var(--brand-tint); color: var(--brand); }
.plan-op-precio { font-size: 21px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; margin: 8px 0 4px; font-variant-numeric: tabular-nums; }
.plan-op-precio .plan-iva { font-size: 13px; }
.plan-op-para { margin: 0 0 12px; }
.plan-op-lista { list-style: none; margin: 0 0 16px; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 14px; }
.plan-op-lista li { display: flex; align-items: flex-start; gap: 8px; }
.plan-op-lista .ico { flex: none; width: 17px; height: 17px; color: var(--muted); margin-top: 2px; }
.plan-op-pie { margin-top: auto; }
.plan-op-actual { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; font-weight: 700; color: var(--brand); font-size: 14.5px; }
.plan-op-actual .ico { width: 18px; height: 18px; }
.pago-seguro { display: flex; gap: 14px; align-items: flex-start; }
.pago-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--chip-bg); color: var(--chip-ink); }
.pago-txt { min-width: 0; }
.pago-txt h2 { font-size: 16.5px; }
.pago-txt p { max-width: 70ch; }
.pago-txt .row form { margin: 0; }
.pago-txt .link-btn { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 480px) { .pago-ico { display: none; } .uso-otros { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .plan-op, .plan-op:hover { transition: none; transform: none; } }
.cajon-cuerpo table { display: block; overflow-x: auto; }

/* ── Menú de la cuenta ────────────────────────────────────────────────────── */
.menu-cuenta .menu { max-height: calc(100vh - 84px); max-height: calc(100dvh - 84px); overflow-y: auto; overscroll-behavior: contain; }
.menu a[aria-current="page"] { background: var(--brand-tint); color: var(--brand); }
.menu a[aria-current="page"] .ico { color: var(--brand); }
.menu-rol { display: inline-block; margin-left: 8px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.avatar.en-cuenta { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--brand); }
.menu .producto-sel { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 4px 4px 2px; padding: 4px; border-radius: 11px; background: var(--neutral-tint); }
.menu .producto-sel a { justify-content: center; padding: 7px 8px; font-size: 13.5px; }
.menu .producto-sel a[aria-current="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--line), var(--shadow); cursor: default; }
.producto-sel a[aria-current="true"] .ico { color: var(--brand); }

/* ── Cuenta: Perfil, Equipo y Empresa ─────────────────────────────────────── */
.cuenta-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .cuenta-grid { grid-template-columns: minmax(0, 1fr) 340px; } .cuenta-lado { position: sticky; top: 84px; } }
.cuenta-grid > .card + .card, .cuenta-grid > .card + aside { margin-top: 0; }
.cuenta-principal:not(form) { display: grid; gap: 18px; min-width: 0; }
.cuenta-principal > .card + .card { margin-top: 0; }
.cuenta-lado h2, .card-cab h2 { font-size: 16.5px; display: flex; align-items: center; gap: 8px; margin: 0; }
.cuenta-lado h2 .ico { color: var(--muted); }
.cuenta-lado > * + * { margin-top: 12px; }
.cuenta-lado .btn { width: 100%; justify-content: center; }
.cuenta-lado .link-btn { display: inline-flex; align-items: center; gap: 6px; }
.card-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cuenta-nada { margin: 0; }
.personas { list-style: none; margin: 0; padding: 0; }
.persona { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.persona:first-child { border-top: 0; padding-top: 4px; }
.persona-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 180px; overflow-wrap: anywhere; }
.persona-txt b { color: var(--ink); font-weight: 700; }
.persona .tu { color: var(--muted); font-weight: 500; }
.avatar-lista { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--chip-bg); color: var(--chip-ink); font-weight: 800; font-size: 14px; }
.avatar-lista.pendiente .ico { width: 17px; height: 17px; }
details.confirmar { position: relative; }
details.confirmar > summary { list-style: none; cursor: pointer; }
details.confirmar > summary::-webkit-details-marker { display: none; }
details.confirmar[open] > summary { background: var(--neutral-tint); }
.confirmar-caja { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 280px; max-width: calc(100vw - 48px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--sombra-2); padding: 14px; }
.confirmar-caja p { font-size: 14px; margin: 0 0 12px; overflow-wrap: anywhere; }
.confirmar-caja form { margin: 0; }
.persona-fin { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 520px) {
  .persona-fin { flex: 1 1 100%; padding-left: 48px; }
  details.confirmar { margin-left: auto; }
  details.confirmar[open] { flex: 1 1 100%; margin-left: 0; }
  .confirmar-caja { position: static; width: auto; max-width: none; margin-top: 8px; box-shadow: none; }
}
@media (prefers-reduced-motion: no-preference) { details.confirmar[open] .confirmar-caja { animation: caer .18s var(--ease); } }
.cuenta-vacio { text-align: center; padding: 36px 20px; }
.cuenta-vacio-ico { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--chip-bg); color: var(--chip-ink); margin-bottom: 12px; }
.cuenta-vacio h2 { font-size: 18px; }
.cuenta-vacio p { max-width: 46ch; margin: 0 auto 16px; }
.perfil-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.perfil-cab h2 { margin: 0; font-size: 19px; overflow-wrap: anywhere; }
.perfil-cab p { margin: 2px 0 0; }
.avatar.grande { width: 56px; height: 56px; font-size: 22px; cursor: default; flex: none; }
.datos-lista { margin: 0; display: grid; gap: 0; }
.datos-lista > div { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.datos-lista dt { color: var(--muted); font-size: 13.5px; }
.datos-lista dd { margin: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.sep { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
.empresa-form fieldset + fieldset { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.empresa-form legend { float: left; width: 100%; display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 12px; }
.empresa-form legend + * { clear: both; }
.empresa-form .fields-2 > .field + .field { margin-top: 0; }
.empresa-form legend .ico { color: var(--muted); width: 18px; height: 18px; }
.empresa-form .fields-2 { margin-top: 14px; }
.empresa-form input[disabled] { background: var(--neutral-tint); color: var(--muted); }
.form-pie { margin-top: 22px; }
.lista-simple { margin: 0; padding-left: 18px; color: var(--text); }
.lista-simple li + li { margin-top: 6px; }

/* ── Plan y pagos: vuelta de Mercado Pago, ciclo, historial ───────────────── */
.vuelta-pago { display: flex; gap: 10px 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.vuelta-pago p { margin: 0; flex: 1 1 280px; }
.vuelta-pago form { margin: 0; }
.plan-cancela { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; font-size: 14px; }
.plan-cancela .ico { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.excedente-pendiente { margin-top: 16px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--warn-tint); color: var(--warn); display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; }
.excedente-pendiente p { margin: 0; flex: 1 1 240px; font-size: 14px; }
.excedente-pendiente form { margin: 0; }
.excedente-pendiente .btn.sec { color: var(--ink); background: var(--paper); }
.planes-form { margin: 0; }
.pagador-mp { max-width: 460px; margin: 0 0 16px; }
.pagador-mp .hint { display: block; margin-top: 4px; }
.ciclo-sel { display: inline-grid; grid-template-columns: auto auto; gap: 4px; padding: 4px; margin: 0 0 14px; border-radius: 12px; background: var(--neutral-tint); }
.ciclo-op { margin: 0; position: relative; cursor: pointer; }
.ciclo-op input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ciclo-op span { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 14px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--text); }
.ciclo-op small { font-size: 12px; font-weight: 500; color: var(--muted); }
.ciclo-op input:checked + span { background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }
.ciclo-op input:checked + span small { color: var(--brand); }
.ciclo-op input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 1px; }
.plan-op-anual { margin: -4px 0 8px; }
.pagos .tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla-pagos td a { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.tabla-pagos td a .ico { width: 15px; height: 15px; }
@media (max-width: 640px) { .pagos .tabla td.num { text-align: left; } }
.pago-txt form { margin: 0; }
.cancelar-plan { margin-top: 16px; }

/* ── Sin envíos disponibles ───────────────────────────────────────────────── */
.sin-envios .vacio p { max-width: 520px; margin-left: auto; margin-right: auto; }
.sin-envios-uso { max-width: 360px; margin: 6px auto 16px; }
.sin-envios-acciones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 4px 0 14px; }