/* Mapeo territorial · Santa Rosa y Toay */
:root {
  --tinta: #1d1630; --gris: #6a6480; --violeta: #5b2d8e; --violeta-osc: #3d1d63; --claro: #efe9f6;
  --borde: #e4deec; --fondo: #f6f4f9; --rojo: #c8372d; --ok: #1f7a4d; --oro: #e8a317;
  --barra: 56px; --lateral: 300px; --detalle: 380px;
  --sombra: 0 6px 24px rgba(29, 22, 48, .14);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--tinta); background: var(--fondo); }
a { color: var(--violeta); }
[hidden] { display: none !important; }

/* ---------- Formularios y botones ---------- */
label { display: block; font-weight: 600; margin-bottom: 12px; font-size: .86rem; }
input, select, textarea { width: 100%; font: inherit; font-weight: 400; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; margin-top: 4px; background: #fff; color: var(--tinta); }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(91, 45, 142, .25); border-color: var(--violeta); }
textarea { resize: vertical; }
button, .boton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 700; font-size: .9rem; background: var(--violeta); color: #fff; border: 0; padding: 9px 16px; border-radius: 8px; cursor: pointer; text-decoration: none; }
button:hover { filter: brightness(1.08); }
button:disabled { opacity: .5; cursor: default; }
button.boton--sec, .boton--sec { background: var(--claro); color: var(--violeta); }
button.boton--peligro { background: #fde8e6; color: var(--rojo); }
button.enlace { background: none; color: var(--violeta); padding: 4px 0; font-weight: 600; text-decoration: underline; }
button.ancho { width: 100%; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500; margin-bottom: 8px; cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--violeta); }
.fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.nota { color: var(--gris); font-size: .84rem; margin: 10px 0 0; }
.aviso { padding: 10px 14px; border-radius: 10px; margin: 0 0 14px; font-weight: 600; font-size: .9rem; }
.aviso--ok { background: #e3f4ea; color: var(--ok); }
.aviso--error { background: #fef3f2; color: var(--rojo); }

/* ---------- Barra superior ---------- */
.barra { height: var(--barra); display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 20px; background: var(--violeta-osc); color: #fff; position: relative; z-index: 1100; }
.barra a { color: #fff; text-decoration: none; }
.barra__marca { font-weight: 800; font-size: 1rem; display: flex; align-items: center; gap: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra__punto { width: 12px; height: 12px; border-radius: 50%; background: var(--oro); box-shadow: 0 0 0 4px rgba(232, 163, 23, .25); flex: none; }
.barra__nav { display: flex; gap: 6px; font-size: .9rem; align-items: center; }
.barra__nav a { opacity: .85; padding: 6px 10px; border-radius: 8px; }
.barra__nav a:hover, .barra__nav a.activo { opacity: 1; background: rgba(255, 255, 255, .12); }
.barra__yo small { opacity: .7; margin-left: 4px; font-size: .75rem; }

/* ---------- Páginas comunes (usuarios, cuenta, actividad, login) ---------- */
.cont { padding: 28px; max-width: 1300px; margin: 0 auto; }
.titulo { font-size: 1.5rem; margin: 0 0 18px; }
.caja { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 20px; margin-bottom: 18px; }
.caja h2 { margin-top: 0; font-size: 1.1rem; }
.caja--angosta { max-width: 420px; }
.login { max-width: 360px; margin: 60px auto; background: #fff; padding: 32px; border-radius: 16px; border: 1px solid var(--borde); box-shadow: var(--sombra); text-align: center; }
.login label { text-align: left; }
.login h1 { margin: 6px 0 0; font-size: 1.4rem; }
.login__sub { margin: 0 0 22px; color: var(--gris); }
.login__icono { width: 54px; height: 54px; margin: 0 auto; border-radius: 14px; background: var(--violeta) radial-gradient(circle at 50% 42%, var(--oro) 0 7px, transparent 8px); position: relative; }
.login__icono::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 14px; background: var(--oro); transform: translate(-50%, 2px); }

.tabla-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--borde); border-radius: 12px; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gris); padding: 12px 14px; border-bottom: 1px solid var(--borde); background: #fbfafd; }
.tabla td { padding: 11px 14px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla small { color: var(--gris); }
.nowrap { white-space: nowrap; }
.vacio { text-align: center; color: var(--gris); padding: 30px !important; }
.paginas { display: flex; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.paginas a { padding: 6px 12px; background: #fff; border: 1px solid var(--borde); border-radius: 8px; text-decoration: none; }
.paginas a.actual { background: var(--violeta); color: #fff; border-color: var(--violeta); }
.estado { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.estado--resuelto { background: #e3f4ea; color: var(--ok); }
.estado--descartado { background: #eee; color: #666; }
.estado--alterado { background: #fde8e6; color: var(--rojo); }
.usuarios { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start; }
.tabla--usuarios tr.inactivo td { opacity: .55; }
.tabla--usuarios tr.inactivo td:last-child { opacity: 1; }
.tabla--usuarios select { width: auto; margin: 0; padding: 6px 8px; }
.en-linea { margin: 0; }
.acciones summary { cursor: pointer; color: var(--violeta); font-weight: 600; }
.acciones[open] { min-width: 230px; }
.acciones form { margin-top: 10px; }
.acciones label { font-size: .82rem; margin-bottom: 6px; }
.acciones button { padding: 7px 12px; font-size: .85rem; }
.acciones__fila { display: flex; gap: 8px; }
.sello-principal { display: inline-block; margin-left: 6px; font-size: .72rem; font-weight: 700; background: #fff4dc; color: #8a5a00; padding: 1px 8px; border-radius: 999px; }
.sin-permiso { color: var(--gris); }
@media (max-width: 1000px) { .usuarios { grid-template-columns: 1fr; } }

/* ---------- App del mapa ---------- */
body.app { height: 100vh; overflow: hidden; }
.app__cuerpo { position: relative; display: flex; height: calc(100vh - var(--barra)); }

/* Panel izquierdo */
.lateral { width: var(--lateral); flex: none; background: #fff; border-right: 1px solid var(--borde); overflow-y: auto; display: flex; flex-direction: column; z-index: 1000; }
.lateral__bloque { padding: 14px 16px; border-bottom: 1px solid var(--borde); }
.lateral__bloque label { margin-bottom: 10px; }
.lateral__bloque > input[type=search] { margin: 0; }
.segmentado { display: flex; background: var(--claro); border-radius: 9px; padding: 3px; margin-bottom: 12px; }
.segmentado button { flex: 1; background: none; color: var(--violeta); padding: 6px 4px; font-size: .82rem; border-radius: 7px; }
.segmentado button.activo { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.segmentado--form label { flex: 1; margin: 0; }
.segmentado--form input { display: none; }
.segmentado--form span { display: block; text-align: center; padding: 7px; border-radius: 7px; color: var(--violeta); cursor: pointer; }
.segmentado--form input:checked + span { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

.resumen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; font-size: .74rem; color: var(--gris); text-transform: uppercase; letter-spacing: .04em; }
.resumen span { display: block; font-size: 1.45rem; font-weight: 800; color: var(--tinta); letter-spacing: 0; line-height: 1.2; }
.resumen div:nth-child(1) span { color: #b07800; }
.resumen div:nth-child(2) span { color: var(--violeta); }

.aviso-sinbarrio { margin: 12px 16px 0; background: #fff4dc; color: #8a5a00; font-size: .82rem; justify-content: space-between; text-align: left; }
.aviso-sinbarrio span { text-decoration: underline; }

.lateral__lista { flex: 1; border-bottom: 0; }
.lateral__lista h3 { margin: 0 0 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.lista-barrios { list-style: none; margin: 0; padding: 0; }
.lista-barrios li[data-id] { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: .9rem; }
.lista-barrios li[data-id]:hover { background: var(--fondo); }
.lista-barrios li.activo { background: var(--claro); }
.lista-barrios i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.lista-barrios__loc { font-size: .72rem; font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: .05em; padding: 10px 8px 2px; }
.lb__nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb__nombre small { color: var(--gris); margin-left: 6px; font-size: .75rem; }
.lb__num { min-width: 26px; text-align: center; font-size: .75rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; }
.lb__num--ref { background: #fff2d6; color: #8a5a00; }
.lb__num--afi { background: var(--claro); color: var(--violeta); }
.lateral__acciones { display: grid; gap: 8px; border-top: 1px solid var(--borde); position: sticky; bottom: 0; background: #fff; }

/* Mapa */
.mapa-wrap { position: relative; flex: 1; min-width: 0; }
#mapa { position: absolute; inset: 0; background: #e8e6ee; }
.boton-lateral { display: none; position: absolute; top: 12px; left: 12px; z-index: 900; box-shadow: var(--sombra); }
.leyenda { position: absolute; left: 12px; bottom: 22px; z-index: 800; background: rgba(255, 255, 255, .95); border-radius: 10px; padding: 8px 12px; font-size: .8rem; box-shadow: var(--sombra); }
.leyenda__pines { display: flex; gap: 14px; }
.leyenda__escala { display: grid; gap: 3px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--borde); }
.leyenda__escala:empty { display: none; }
.leyenda__escala strong { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); margin-bottom: 2px; }
.leyenda__escala div { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.leyenda__escala i { width: 22px; height: 12px; border-radius: 3px; opacity: .85; border: 1px solid rgba(0, 0, 0, .1); }
.leyenda span { display: flex; align-items: center; gap: 6px; }
.pin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); display: inline-block; }
.pin--referente { background: var(--oro); width: 14px; height: 14px; }
.pin--afiliado { background: var(--violeta); }
.modo-edicion { cursor: crosshair; }
.barra-flotante { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 1000; background: var(--tinta); color: #fff; border-radius: 12px; padding: 10px 12px 10px 16px; display: flex; align-items: center; gap: 10px; box-shadow: var(--sombra); max-width: calc(100% - 40px); font-size: .9rem; }
.barra-flotante button { padding: 7px 14px; }
.barra-flotante button.boton--sec { background: rgba(255, 255, 255, .15); color: #fff; }

/* Etiquetas de barrio sobre el mapa */
.etq-wrap { background: none; border: 0; }
.etq { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px; pointer-events: auto; cursor: pointer; white-space: nowrap; }
.etq__nombre { font-size: .76rem; font-weight: 800; color: var(--tinta); text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; }
.etq__tags { display: flex; gap: 4px; }
.tag { display: inline-flex; align-items: baseline; gap: 3px; font-size: .72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; line-height: 1.4; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.tag b { font-size: .82rem; font-weight: 800; }
.tag--ref { background: var(--oro); color: #3a2600; }
.tag--afi { background: var(--violeta); color: #fff; }
.tag--cero { opacity: .55; }
.tag--grande { font-size: .85rem; padding: 4px 12px; box-shadow: none; }
.tag--grande b { font-size: 1rem; }
.etq--sel .etq__nombre { font-size: .86rem; }
.etq--sel .tag { transform: scale(1.08); }
/* Etiqueta compacta (barrio chico en pantalla): solo los dos números, unidos */
.etq--compacta .etq__nombre, .etq--compacta .tag__txt { display: none; }
.etq--compacta .etq__tags { gap: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); border-radius: 999px; }
.etq--compacta .tag { box-shadow: none; padding: 1px 7px; }
.etq--compacta .tag--ref { border-radius: 999px 0 0 999px; }
.etq--compacta .tag--afi { border-radius: 0 999px 999px 0; }
.etq--mini .tag { padding: 0 5px; }
.etq--mini .tag b { font-size: .66rem; }

.pulso { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--violeta), 0 2px 8px rgba(0, 0, 0, .3); animation: pulso 1.6s ease-out infinite; }
.pulso--referente { background: var(--oro); }
.pulso--afiliado { background: var(--violeta); }
@keyframes pulso { 0% { box-shadow: 0 0 0 2px var(--violeta), 0 0 0 0 rgba(91, 45, 142, .5); } 100% { box-shadow: 0 0 0 2px var(--violeta), 0 0 0 18px rgba(91, 45, 142, 0); } }

/* Panel derecho de detalle */
.detalle { position: absolute; top: 12px; right: 12px; bottom: 12px; width: var(--detalle); z-index: 1000; background: #fff; border-radius: 14px; box-shadow: var(--sombra); overflow-y: auto; padding: 20px; }
.detalle__cerrar { position: absolute; top: 12px; right: 12px; background: var(--fondo); color: var(--gris); width: 32px; height: 32px; padding: 0; border-radius: 50%; z-index: 2; }
.det-cab { border-left: 5px solid var(--c); padding: 2px 40px 4px 14px; margin-bottom: 14px; }
.det-cab small { color: var(--gris); font-size: .8rem; }
.det-cab h2 { margin: 2px 0 10px; font-size: 1.35rem; line-height: 1.2; }
.det-cab--persona h2 { margin-bottom: 4px; }
.det-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.det-acciones { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.det-acciones button { flex: 1; }
.det-mas { margin-top: 12px; font-size: .88rem; }
.det-mas summary { cursor: pointer; color: var(--violeta); font-weight: 600; }
.det-mas div { display: grid; gap: 6px; margin-top: 8px; }
.det-filtro { background: var(--claro); color: var(--violeta); border-radius: 8px; padding: 6px 10px; font-size: .82rem; margin: 0 0 8px; }
.det-vacio { color: var(--gris); font-size: .9rem; }
.det-sub { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); margin: 18px 0 6px; }
.det-sub span { background: var(--fondo); color: var(--tinta); border-radius: 999px; padding: 0 9px; letter-spacing: 0; }
.lista-personas { list-style: none; margin: 0; padding: 0; }
.lista-personas li[data-persona] { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; cursor: pointer; }
.lista-personas li[data-persona]:hover { background: var(--fondo); }
.lista-personas .vacio { padding: 6px !important; text-align: left; }
.lp__avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 800; flex: none; }
.lp__avatar--referente { background: #fff2d6; color: #8a5a00; border: 2px solid var(--oro); }
.lp__avatar--afiliado { background: var(--claro); color: var(--violeta); }
.lp__txt { flex: 1; min-width: 0; line-height: 1.25; }
.lp__txt strong { display: block; font-size: .9rem; }
.lp__txt small { color: var(--gris); font-size: .8rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp__pin { font-size: .8rem; }
.det-volver { background: none; color: var(--violeta); padding: 0; margin-bottom: 12px; font-weight: 600; }
.det-tipo { display: inline-block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 2px 10px; border-radius: 999px; }
.det-tipo--referente { background: var(--oro); color: #3a2600; }
.det-tipo--afiliado { background: var(--violeta); color: #fff; }
.det-datos { display: grid; grid-template-columns: 90px 1fr; gap: 8px 12px; margin: 0 0 14px; font-size: .92rem; }
.det-datos dt { color: var(--gris); font-size: .84rem; }
.det-datos dd { margin: 0; word-break: break-word; }
.det-notas { background: #fbfafd; border-left: 3px solid var(--violeta); padding: 10px 14px; border-radius: 0 8px 8px 0; font-size: .9rem; margin-bottom: 14px; }
.det-ubic { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .86rem; background: var(--fondo); padding: 10px 12px; border-radius: 10px; }
.det-ubic .sin, .ubic-form .sin { color: var(--gris); font-style: italic; }
.det-meta { color: var(--gris); font-size: .78rem; margin: 16px 0 0; }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 2000; background: rgba(29, 22, 48, .45); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; }
.modal__caja { position: relative; background: #fff; border-radius: 16px; width: 100%; max-width: 560px; padding: 24px; box-shadow: var(--sombra); }
.modal__caja h2 { margin: 0 0 16px; font-size: 1.25rem; padding-right: 30px; }
.modal__cerrar { position: absolute; top: 14px; right: 14px; background: var(--fondo); color: var(--gris); width: 32px; height: 32px; padding: 0; border-radius: 50%; }
.modal__botones { display: flex; gap: 10px; margin-top: 6px; }
.con-boton { display: flex; gap: 8px; margin-top: 4px; }
.con-boton input { margin: 0; }
.geo-resultados { margin: -4px 0 12px; display: grid; gap: 4px; }
.geo-resultados button { background: var(--fondo); color: var(--tinta); font-weight: 500; justify-content: flex-start; text-align: left; font-size: .84rem; }
.geo-resultados .nota { margin: 0 0 4px; }
.ubic-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--fondo); border-radius: 10px; padding: 8px 10px; margin-bottom: 12px; font-size: .86rem; }
.ubic-form #ubic-texto { flex: 1; min-width: 160px; }
.ubic-form button { padding: 6px 12px; font-size: .82rem; }
.colores { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.colores .color { width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--borde); }
.colores .color.activo { box-shadow: 0 0 0 2px var(--tinta); }
.colores input[type=color] { width: 40px; height: 32px; padding: 2px; margin: 0; }

/* Toast */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 3000; padding: 10px 18px; border-radius: 10px; color: #fff; font-weight: 600; box-shadow: var(--sombra); max-width: calc(100% - 32px); }
.toast--ok { background: var(--ok); }
.toast--error { background: var(--rojo); }
.toast--info { background: var(--tinta); }

/* Leaflet: ajustes */
.leaflet-container { font: inherit; }
.leaflet-tooltip { font-size: .8rem; font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .barra { padding: 0 12px; }
  .barra__marca { font-size: .9rem; }
  .barra__nav a { padding: 6px 6px; }
  .barra__nav small { display: none; }
  .lateral { position: absolute; top: 0; left: 0; bottom: 0; transform: translateX(-100%); transition: transform .2s; box-shadow: var(--sombra); }
  .lateral.abierto { transform: none; }
  .boton-lateral { display: inline-flex; top: auto; bottom: 28px; }
  .detalle { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 62%; }
  .leyenda { left: auto; right: 12px; bottom: 28px; }
}
@media (max-width: 560px) {
  .barra__texto { display: none; }
  .barra__nav { overflow-x: auto; }
  .leyenda { display: none; }
  .fila2 { grid-template-columns: 1fr; }
  .cont { padding: 16px; }
}

/* Ocultar el detalle de referentes y afiliados sobre los barrios */
.sin-detalle .etq__tags { display: none; }

/* Orden de la lista de barrios */
.lista-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.lista-cab h3 { margin: 0 !important; }
.orden { display: flex; background: var(--claro); border-radius: 7px; padding: 2px; }
.orden button { background: none; color: var(--violeta); padding: 3px 8px; font-size: .74rem; border-radius: 5px; }
.orden button.activo { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }

/* Importación de afiliados */
.pasos { margin: 0 0 14px; padding-left: 20px; font-size: .9rem; }
.pasos li { margin-bottom: 4px; }
.imp-totales { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 12px; }
.imp-totales div { background: #e3f4ea; color: var(--ok); border-radius: 10px; padding: 10px; text-align: center; font-size: .8rem; font-weight: 600; }
.imp-totales div.mal { background: #fef3f2; color: var(--rojo); }
.imp-totales div.medio { background: #fff4dc; color: #8a5a00; }
.imp-totales div:not(:first-child):not(.mal):not(.medio) { background: var(--fondo); color: var(--gris); }
.imp-totales span { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.imp-totales small { display: block; font-weight: 400; opacity: .85; }
#imp-resumen details { margin-bottom: 10px; font-size: .86rem; }
#imp-resumen summary { cursor: pointer; font-weight: 700; color: var(--violeta); }
.imp-lista { margin: 6px 0 0; padding-left: 18px; max-height: 180px; overflow-y: auto; font-size: .82rem; }
.imp-ubicar { align-items: flex-start; background: var(--fondo); border-radius: 10px; padding: 10px; }
.imp-ubicar input { margin-top: 3px; }
.imp-ubicar small { display: block; color: var(--gris); font-weight: 400; }
.imp-progreso { margin: 10px 0; font-size: .84rem; color: var(--gris); }
.imp-barra { height: 8px; background: var(--claro); border-radius: 99px; overflow: hidden; margin-bottom: 4px; }
.imp-barra i { display: block; height: 100%; width: 0; background: var(--violeta); transition: width .3s; }