@font-face { font-family: 'DM Sans'; font-weight: 400; font-display: swap; src: url(../fuentes/dm-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 500; font-display: swap; src: url(../fuentes/dm-sans-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 600; font-display: swap; src: url(../fuentes/dm-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-display: swap; src: url(../fuentes/poppins-medium.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-display: swap; src: url(../fuentes/poppins-semibold.woff2) format('woff2'); }

/* tokens de altumvalue.app */
:root {
  --azul: #0046A4; --celeste: #00A9DC; --rojo: #A33934;
  --texto: #000000; --texto2: #333B48; --texto3: #5B6675;
  --fondo: #E9EEF5; --sup: #EEF2F8; --sup2: #E3E9F1; --borde: #DCE3EE;
  --luz: rgba(255, 255, 255, .95); --sombra: rgba(154, 170, 194, .55);
  --anillo: 0 0 0 1px rgba(255, 255, 255, .55);
  --e1: 5px 5px 12px var(--sombra), -5px -5px 12px var(--luz);
  --e2: 8px 8px 20px var(--sombra), -8px -8px 20px var(--luz);
  --hundido: inset 2px 2px 5px var(--sombra), inset -2px -2px 5px var(--luz);
  --brillo: 4px 4px 12px rgba(0, 70, 164, .32), -3px -3px 9px var(--luz);
  --curva: cubic-bezier(.23, 1, .32, 1);
  --titulo: 'Poppins', 'DM Sans', sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 400 15px/1.5 'DM Sans', sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--titulo); font-weight: 600; margin: 0; line-height: 1.2; letter-spacing: -.015em; }
h1 { font-size: 27px; }
h2 { font-size: 18px; }
h3 { font-size: 15.5px; }
p { margin: 0; }
a { color: var(--azul); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: default; opacity: .5; }
:focus-visible { outline: 2px solid var(--celeste); outline-offset: 3px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tenue { color: var(--texto3); }
.fuerte { font-weight: 600; }
.neg { color: var(--rojo); }
.azul { color: var(--azul); }
.cifra { font-family: var(--titulo); font-weight: 600; font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.chico { font-size: 13px; }

/* superficies neumórficas, como Card de la aplicación */
.hoja, .tarjeta { background: var(--sup); border-radius: 14px; box-shadow: var(--anillo), var(--e1); }
.hoja { padding: 22px; }
.tarjeta { padding: 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; transition: transform .35s var(--curva), box-shadow .35s var(--curva); }
.tarjeta.viva:hover { transform: translateY(-2px); box-shadow: var(--anillo), var(--e2); }

/* botones */
.primario { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 10px 20px; font-family: var(--titulo); font-weight: 600; font-size: 14px; color: white; background-image: linear-gradient(90deg, #0046A4 0%, #00A9DC 100%); box-shadow: var(--brillo), inset 0 1px 0 rgba(255, 255, 255, .18); transition: transform .3s var(--curva), filter .3s; white-space: nowrap; }
.primario:hover:not(:disabled) { transform: translateY(-1.5px); filter: brightness(1.06); }
.primario:active:not(:disabled) { transform: translateY(.5px); }
.primario.sm { padding: 7px 15px; font-size: 13px; }
.secundario { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--sup); border: 0; border-radius: 999px; padding: 9px 16px; font-weight: 600; font-size: 13.5px; color: var(--texto2); box-shadow: var(--anillo), var(--e1); transition: color .2s, transform .3s var(--curva); white-space: nowrap; }
.secundario:hover:not(:disabled) { color: var(--azul); transform: translateY(-1px); }
.secundario:active:not(:disabled) { box-shadow: var(--hundido); transform: none; }
.enlace { background: none; border: 0; padding: 4px 0; color: var(--azul); font-weight: 600; font-size: 13.5px; text-align: left; }
.enlace:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }
.ancho { width: 100%; }
.mas { font-size: 17px; line-height: 1; font-weight: 500; }

/* campos */
.campo { width: 100%; background: var(--sup); border: 0; border-radius: 12px; padding: 10px 14px; box-shadow: var(--hundido); font-size: 16px; transition: box-shadow .2s; }
.campo:focus-visible { outline: 0; box-shadow: var(--hundido), 0 0 0 3px rgba(0, 70, 164, .22); }
.campo.redondo { border-radius: 999px; box-shadow: var(--anillo); padding-left: 38px; }
.buscador { position: relative; flex: 1 1 220px; min-width: 0; max-width: 380px; }
.buscador svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--texto3); pointer-events: none; }
select.campo { appearance: none; padding-right: 34px; }
.selector { position: relative; display: inline-block; min-width: 180px; }
.selector::after { content: ''; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px; border: solid var(--texto3); border-width: 0 1.5px 1.5px 0; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
label.rotulo { display: block; font-size: 13px; color: var(--texto3); margin-bottom: 6px; }
.error { color: var(--rojo); font-size: 13.5px; margin-top: 8px; }

/* pestañas en píldora, como Clientes y Leads */
.pestanas { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--sup2); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.pestanas button { border: 0; background: none; border-radius: 999px; padding: 6px 15px; font-weight: 600; font-size: 13px; color: var(--texto3); white-space: nowrap; transition: color .2s, background .2s; }
.pestanas button:hover { color: var(--texto); }
.pestanas button[aria-pressed="true"] { background: var(--sup); color: var(--texto); box-shadow: var(--anillo); }
.pestanas .n { color: var(--texto3); font-weight: 500; margin-left: 3px; }

/* barra de dirección: cada sitio es un lugar distinto */
.direccion { display: flex; align-items: center; justify-content: center; gap: 8px; height: 34px; padding: 0 16px; background: var(--sup2); border-bottom: 1px solid var(--borde); font-size: 12.5px; color: var(--texto2); }
.direccion b { font-weight: 600; color: var(--texto); }
.direccion svg { color: var(--azul); flex: none; }
.direccion .lado { margin-left: auto; }
.direccion .izq { margin-right: auto; visibility: hidden; }

/* bienvenida */
.bienvenida { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.bienvenida > div { width: 100%; max-width: 680px; text-align: center; }
.bienvenida img { width: 220px; height: auto; }
.bienvenida h1 { margin-top: 36px; font-size: 32px; }
.bienvenida .sub { margin-top: 8px; color: var(--texto3); }
.elecciones { display: flex; gap: 22px; margin-top: 36px; }
.eleccion { flex: 1; background: var(--fondo); border: 0; border-radius: 18px; padding: 26px 22px; text-align: left; box-shadow: var(--e1); transition: transform .3s var(--curva), box-shadow .3s var(--curva); }
.eleccion:hover { transform: translateY(-3px); box-shadow: var(--e2); }
.eleccion:active { transform: none; box-shadow: var(--hundido); }
.eleccion strong { display: block; font-family: var(--titulo); font-size: 19px; font-weight: 600; color: var(--azul); }
.eleccion span { display: block; margin-top: 4px; color: var(--texto3); font-size: 14px; }
.eleccion .dom { margin-top: 14px; font-size: 13px; color: var(--texto2); font-weight: 600; }
.eleccion svg { display: block; margin-bottom: 16px; color: var(--azul); }
.pie-demo { margin-top: 36px; font-size: 13px; color: var(--texto3); }

/* intranet, como altumvalue.app */
.marco { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: calc(100vh - 34px); }
.lateral { padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: calc(100vh - 34px); overflow-y: auto; box-shadow: 6px 0 16px -8px var(--sombra); }
.lateral .logo { padding: 4px 10px 16px; }
.lateral .logo img { width: 140px; height: auto; display: block; }
.nav a, .nav .fija { display: flex; align-items: center; gap: 11px; padding: 8px 10px; color: var(--texto2); font-weight: 500; font-size: 14px; border-radius: 10px; transition: background .2s, color .2s; }
.nav a:hover { background: var(--sup2); color: var(--texto); }
.nav a[aria-current="page"] { color: var(--azul); background: var(--sup); box-shadow: var(--anillo), var(--e1); font-weight: 600; }
.nav .fija { color: var(--texto3); opacity: .7; }
.nav svg { flex: none; }
.nav .grupo { padding: 14px 10px 6px; font-size: 12px; font-weight: 600; color: var(--texto3); }
.nav .separa { border-top: 1px solid var(--borde); margin: 12px 10px 4px; }
.nav .nuevo-n { margin-left: auto; font-size: 12px; color: var(--azul); font-weight: 600; }
.lateral .abajo { margin-top: auto; padding: 12px 10px 0; border-top: 1px solid var(--borde); }

.arriba { position: sticky; top: 0; z-index: 20; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 20px; background: rgba(233, 238, 245, .82); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 6px 16px -10px var(--sombra); }
.arriba .ctl { height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border: 0; background: none; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--texto); }
.arriba .ctl:hover:not(:disabled) { background: var(--sup2); }
.arriba .ctl:disabled { color: var(--texto3); opacity: .45; }
.arriba .global { flex: 0 1 340px; }
.arriba .global .campo { padding-top: 7px; padding-bottom: 7px; font-size: 14px; }
.arriba .derecha { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.presencia { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 4px; border-radius: 999px; background: var(--sup2); box-shadow: var(--anillo); font-size: 12px; font-weight: 600; color: var(--texto2); white-space: nowrap; }
.inicial { width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: white; background: var(--azul); flex: none; }
.inicial.osc { background: var(--texto2); }
.punto-vivo { width: 7px; height: 7px; border-radius: 999px; background: var(--azul); }
.campana { position: relative; width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; border-radius: 9px; color: var(--texto2); }
.campana:hover { background: var(--sup2); }
.campana .cuenta { position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: var(--rojo); color: white; font-size: 10px; font-weight: 700; display: grid; place-items: center; border: 1.5px solid var(--fondo); }
.usuario { display: flex; align-items: center; gap: 8px; padding: 3px 10px 3px 4px; border: 1px solid var(--borde); border-radius: 10px; background: none; text-align: left; }
.usuario:hover { background: var(--sup2); }
.usuario b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.1; }
.usuario small { display: block; font-size: 11px; color: var(--texto3); }
.desplegable { position: absolute; top: 46px; right: 20px; width: 320px; max-width: calc(100vw - 24px); background: var(--sup); border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--e2); z-index: 40; overflow: hidden; animation: entra .3s var(--curva); }
.desplegable .cab { padding: 10px 14px; font-weight: 600; font-size: 13px; border-bottom: 1px solid var(--borde); }
.desplegable button, .desplegable a { display: block; width: 100%; text-align: left; padding: 11px 14px; border: 0; background: none; font-size: 13px; color: var(--texto); border-bottom: 1px solid var(--borde); }
.desplegable button:hover, .desplegable a:hover { background: var(--sup2); }
.principal { padding: 28px 32px 64px; max-width: 1120px; width: 100%; }

/* portal de socios, otro sitio */
.portal-cab { position: sticky; top: 0; z-index: 20; background: rgba(233, 238, 245, .86); backdrop-filter: blur(14px); box-shadow: 0 6px 16px -10px var(--sombra); }
.portal-cab .fila { max-width: 1080px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 20px; }
.portal-cab img { width: 128px; height: auto; display: block; }
.portal-cab .marca { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--texto3); font-weight: 600; }
.portal-nav { display: flex; gap: 2px; }
.portal-nav a { padding: 7px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--texto3); white-space: nowrap; transition: color .2s, background .2s; }
.portal-nav a:hover { color: var(--texto); background: var(--sup2); }
.portal-nav a[aria-current="page"] { color: var(--texto); background: var(--sup); box-shadow: var(--anillo), var(--e1); }
.portal-cab .quien { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.portal-main { max-width: 1080px; margin: 0 auto; padding: 32px 24px 64px; }
.menu-btn, .arriba .menu-intra { display: none; }
.menu-movil { display: none; }

/* cabecera de pantalla */
.cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.cabecera .sub { margin-top: 4px; color: var(--texto2); font-size: 14px; }
.filtros { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }

.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.tarjeta .cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tarjeta h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjeta .rango { font-family: var(--titulo); font-weight: 600; font-size: 17px; margin-top: 4px; }
.tarjeta .acciones { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.tarjeta textarea { min-height: 76px; resize: vertical; }
.hecho { color: var(--azul); font-size: 13.5px; font-weight: 600; }

/* cuenta atrás */
.reloj { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--borde); }
.reloj .t { font-family: var(--titulo); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--azul); font-size: 15px; }
.reloj .q { font-size: 12.5px; color: var(--texto3); }
.reloj.corto .t { font-size: 13px; }

/* tablas que se apilan en el móvil */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-size: 12.5px; font-weight: 600; color: var(--texto3); padding: 0 12px 10px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla td { padding: 13px 12px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr { transition: background .2s; }
.tabla tbody tr:hover { background: rgba(255, 255, 255, .45); }
.tabla th.num { text-align: right; }
.tabla .sub { display: block; font-size: 13px; font-weight: 400; color: var(--texto3); }
.tabla tr.clic { cursor: pointer; }

.estado { font-weight: 600; font-size: 14px; }
.e-invertido, .e-pagada, .e-activo, .e-firmado { color: var(--azul); }
.e-caida, .e-devuelta, .e-pendiente-firma { color: var(--rojo); }
.e-sin, .e-registrado, .e-pendiente { color: var(--texto3); font-weight: 500; }

.barra { height: 6px; background: var(--sup2); border-radius: 999px; overflow: hidden; box-shadow: var(--hundido); }
.barra > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #00A9DC, #0046A4); width: 0; transition: width 1.1s var(--curva); }
.barra.fina { height: 4px; }

/* comisión */
.gran-cifra { font-family: var(--titulo); font-size: 44px; font-weight: 600; line-height: 1.1; }
.niveles { display: flex; border-top: 1px solid var(--borde); margin-top: 24px; }
.niveles > div { flex: 1; padding: 16px 16px 0 0; border-top: 2px solid transparent; margin-top: -1px; color: var(--texto3); }
.niveles > div.actual { border-top-color: var(--azul); color: var(--texto); }
.niveles b { display: block; font-weight: 600; }
.niveles .actual b { color: var(--azul); }
.niveles span { display: block; font-size: 13.5px; }
.orientativo { font-size: 12.5px; color: var(--texto3); font-style: italic; }
.dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.bloque + .bloque { margin-top: 32px; }
.bloque > h2 { margin-bottom: 14px; }

.codigo { font-family: var(--titulo); font-size: 30px; font-weight: 600; color: var(--azul); word-break: break-all; }
.linea-copia { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 18px 0; border-bottom: 1px solid var(--borde); }
.linea-copia:last-child { border-bottom: 0; }
.linea-copia .valor { min-width: 0; overflow-wrap: anywhere; }

.fila-doc { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.fila-doc:last-child { border-bottom: 0; }
.fila-doc .que { flex: 1 1 180px; min-width: 0; }
.fila-doc > svg { flex: none; color: var(--azul); }
.fila-doc .botones { display: flex; gap: 8px; flex-wrap: wrap; }

/* tablero */
.tablero { display: flex; gap: 14px; overflow-x: auto; padding: 4px 4px 14px; scroll-snap-type: x mandatory; }
.columna { flex: 0 0 214px; scroll-snap-align: start; background: rgba(255, 255, 255, .28); border-radius: 14px; padding: 12px 10px; box-shadow: var(--anillo); transition: background .2s, box-shadow .2s; }
.columna.partner { background: var(--sup); box-shadow: var(--anillo), var(--e1); }
.columna.encima { box-shadow: 0 0 0 2px var(--celeste); }
.columna > header { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px; margin-bottom: 2px; font-weight: 600; font-size: 14px; }
.columna .regla { font-size: 12px; color: var(--texto3); min-height: 18px; margin: 0 4px 10px; }
.columna .tarjeta { margin-bottom: 10px; padding: 13px; }
.columna .ref { font-size: 12px; color: var(--azul); font-weight: 600; }
.columna .vacia { color: var(--texto3); font-size: 13px; padding: 12px 4px; }
.columna h3 { font-size: 14.5px; }
.tarjeta[draggable="true"] { cursor: grab; }
.llega { animation: llega .8s var(--curva); }
@keyframes llega { from { opacity: 0; transform: translateX(-28px) scale(.97); } to { opacity: 1; transform: none; } }

/* asistente */
.opciones { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.respuesta { font-size: 16px; line-height: 1.65; min-height: 80px; }
.respuesta .cursor { display: inline-block; width: 2px; height: 1.1em; background: var(--azul); vertical-align: text-bottom; animation: parpadeo 1s steps(2) infinite; }
.datos-usados { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--borde); font-size: 13px; color: var(--texto3); }
@keyframes parpadeo { 50% { opacity: 0; } }
.baro td { vertical-align: middle; }
.baro .barra { width: 100%; min-width: 80px; }

/* firma y móvil simulado */
.firma { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.pasos { list-style: none; margin: 16px 0 0; padding: 0; }
.pasos li { padding: 12px 0 12px 30px; position: relative; color: var(--texto3); border-bottom: 1px solid var(--borde); }
.pasos li:last-child { border-bottom: 0; }
.pasos li::before { content: ''; position: absolute; left: 4px; top: 17px; width: 12px; height: 12px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--texto3); }
.pasos li.ok { color: var(--texto); }
.pasos li.ok::before { background: var(--azul); box-shadow: none; }
.pasos li.ahora { color: var(--texto); font-weight: 600; }
.pasos li.ahora::before { box-shadow: inset 0 0 0 1.5px var(--azul); animation: pulso 1.2s ease-in-out infinite; }
.movil { width: 100%; max-width: 300px; margin: 0 auto; background: var(--texto); border-radius: 36px; padding: 10px; box-shadow: var(--e2); }
.movil .pantalla { background: var(--fondo); border-radius: 28px; min-height: 480px; padding: 22px 18px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.movil .ranura { width: 90px; height: 5px; border-radius: 999px; background: var(--borde); margin: 0 auto 6px; }
.movil .mini { font-size: 12px; color: var(--texto3); }
.casillas { display: flex; gap: 6px; justify-content: center; }
.casillas span { width: 34px; height: 42px; border-radius: 10px; box-shadow: var(--hundido); display: grid; place-items: center; font-family: var(--titulo); font-weight: 600; font-size: 18px; }

/* lo que nadie tiene */
.nadie { border-top: 1px solid var(--borde); padding-top: 26px; }
.novedad { cursor: pointer; text-align: left; border: 0; font: inherit; color: inherit; }
.novedad[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--celeste), var(--e1); }
.novedad .wow { color: var(--texto2); font-size: 14px; }
.novedad .ir { margin-top: auto; padding-top: 8px; color: var(--azul); font-weight: 600; font-size: 13.5px; }
.escena { margin-top: 22px; }
.hueco { border: 1.5px dashed var(--borde); border-radius: 14px; padding: 24px 20px; color: var(--texto3); min-height: 150px; display: flex; flex-direction: column; justify-content: center; }
.hueco b { color: var(--texto2); font-weight: 600; }
.chat { display: flex; flex-direction: column; gap: 8px; }
.burbuja { max-width: 86%; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; animation: entra .4s var(--curva); }
.burbuja.yo { align-self: flex-end; background: var(--azul); color: white; }
.burbuja.el { align-self: flex-start; background: var(--sup); box-shadow: var(--anillo); }
.veredicto { font-family: var(--titulo); font-weight: 600; font-size: 16px; }
.marca-agua { position: relative; overflow: hidden; }
.marca-agua .sello-agua { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font-family: var(--titulo); font-weight: 600; font-size: 22px; color: var(--azul); opacity: .1; transform: rotate(-24deg); white-space: nowrap; }
.aereo { width: 100%; height: auto; display: block; border-radius: 12px; }
input[type="range"] { width: 100%; accent-color: var(--azul); }
.grafico text { font: 500 11px 'DM Sans', sans-serif; fill: var(--texto3); }
.grafico circle { cursor: pointer; }

/* cargando */
.esqueleto { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.esq { height: 14px; background: var(--sup2); border-radius: 999px; animation: pulso 1.2s ease-in-out infinite; }
@keyframes pulso { 50% { opacity: .45; } }
.girando { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 999px; animation: gira .8s linear infinite; vertical-align: -2px; flex: none; }
@keyframes gira { to { transform: rotate(360deg); } }
.entra { animation: entra .5s var(--curva) both; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* acceso del socio */
.acceso { min-height: calc(100vh - 34px); display: grid; place-items: center; padding: 32px 16px; }
.acceso > div { width: 100%; max-width: 400px; }
.acceso img { width: 170px; display: block; margin-bottom: 8px; }
.acceso .marca { font-size: 13px; font-weight: 600; color: var(--texto3); margin-bottom: 34px; }
.acceso form { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; align-items: stretch; }
.correo-simulado { margin-top: 24px; }
.correo-simulado .de { font-size: 13px; color: var(--texto3); padding-bottom: 10px; border-bottom: 1px solid var(--borde); margin-bottom: 14px; }

#aviso { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); max-width: calc(100% - 32px); background: var(--texto); color: white; padding: 12px 18px; border-radius: 12px; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .3s, transform .4s var(--curva); z-index: 60; }
#aviso.ver { opacity: 1; transform: translate(-50%, 0); }

.nota-editor { display: none; }
body.editor .nota-editor { display: block; font-size: 12px; color: var(--rojo); border: 1px dashed var(--rojo); padding: 6px 8px; margin: 6px 0; }

@media (max-width: 960px) {
  .portal-nav { display: none; }
  .menu-btn { display: inline-flex; }
  .portal-cab .quien .nombre { display: none; }
  .menu-movil { display: block; position: fixed; inset: 96px 12px auto 12px; background: var(--fondo); border-radius: 16px; box-shadow: var(--e2); padding: 10px; z-index: 30; max-height: calc(100vh - 110px); overflow-y: auto; animation: entra .35s var(--curva); }
  .menu-movil a { display: block; padding: 11px 12px; border-radius: 10px; font-weight: 600; color: var(--texto2); }
  .menu-movil a[aria-current="page"] { color: var(--azul); background: var(--sup); }
  .firma { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .marco { display: block; }
  .lateral { display: none; }
  .lateral.abierto { display: flex; position: fixed; inset: 34px auto 0 0; width: min(82vw, 300px); height: auto; background: var(--fondo); z-index: 50; animation: entra .3s var(--curva); }
  .velo { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 45; }
  .arriba .global, .presencia .rot { display: none; }
  .arriba .menu-intra { display: inline-flex; }
}
@media (max-width: 640px) {
  .arriba { padding: 0 10px; gap: 4px; }
  .arriba .ctl .rot, .usuario .quien-txt, .presencia { display: none; }
  .principal, .portal-main { padding: 22px 16px 56px; }
  .portal-cab .fila { padding: 10px 16px; gap: 10px; }
  .portal-cab .marca span { display: none; }
  h1 { font-size: 22px; }
  .bienvenida h1 { font-size: 26px; }
  .elecciones { flex-direction: column; gap: 16px; }
  .dos { grid-template-columns: minmax(0, 1fr); }
  .gran-cifra { font-size: 36px; }
  .niveles { flex-direction: column; }
  .niveles > div { padding: 12px 0 12px 14px; border-top: 0; border-left: 2px solid transparent; margin-top: 0; }
  .niveles > div.actual { border-left-color: var(--azul); }
  .selector { flex: 1 1 140px; min-width: 0; }
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tr { padding: 12px 0; border-bottom: 1px solid var(--borde); }
  .tabla tr:last-child { border-bottom: 0; }
  .tabla td { border: 0; padding: 3px 0; text-align: left; display: flex; justify-content: space-between; gap: 12px; }
  .tabla td[data-l]::before { content: attr(data-l); color: var(--texto3); font-size: 13px; font-weight: 400; }
  .tabla td.titular { display: block; font-weight: 600; }
  .tabla td:empty { display: none; }
  .baro .barra { min-width: 0; max-width: 50%; align-self: center; }
  .codigo { font-size: 26px; }
  .hoja { padding: 16px; }
  .direccion { font-size: 12px; }
  .direccion .lado { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}