/* ============================================================================
   SayProposals · kit de UI del panel
   Desplegables custom (nunca burbujas/pills), modales premium, deltas, tablas
   y barras. Mismo lenguaje visual que el shell de la beta (base.css).
   ========================================================================== */

.ico{width:1em;height:1em;flex:none;}

/* ---------- Desplegable ---------- */
.dd{position:relative;display:inline-block;}
.dd-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:9px 13px;
  font-family:inherit;font-size:13.5px;font-weight:700;color:var(--txt);cursor:pointer;
  transition:border-color .16s, box-shadow .16s;text-align:left;}
.dd-btn:hover{border-color:var(--celeste);}
.dd.on .dd-btn{border-color:var(--celeste);box-shadow:0 0 0 3px rgba(142,177,209,.18);}
.dd-btn .ico{width:15px;height:15px;color:var(--gris2);transition:transform .18s;}
.dd.on .dd-btn .ico{transform:rotate(180deg);}
.dd-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dd-et{color:var(--gris);font-weight:600;margin-right:5px;}
.dd-ph{color:var(--gris2);font-weight:600;}

.dd-menu{position:absolute;z-index:60;top:calc(100% + 6px);left:0;min-width:100%;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px;
  box-shadow:0 16px 40px rgba(28,43,72,.16);max-height:320px;overflow-y:auto;
  animation:dd-in .14s ease both;}
.dd-menu.der{left:auto;right:0;}
@keyframes dd-in{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}

.dd-op{display:block;width:100%;text-align:left;background:none;border:0;border-radius:8px;
  padding:9px 11px;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--txt);
  cursor:pointer;white-space:nowrap;}
.dd-op:hover,.dd-op:focus{background:var(--celeste-soft);outline:none;}
.dd-op.act{background:var(--navy);color:#fff;}
.dd-op.act:hover,.dd-op.act:focus{background:var(--navy);}
.dd-op small{display:block;font-size:11px;font-weight:600;opacity:.62;margin-top:1px;}

/* El ítem cuyo panel está desplegado. `.act` (el filtro que rige de verdad)
   le gana, porque son dos cosas distintas: uno está aplicado y el otro
   abierto, y mientras se elige un rango pueden no coincidir. */
.dd-op.abierto{background:var(--celeste-soft);}
.dd-op.act.abierto{background:var(--navy);color:#fff;}

/* Panel desplegable: va DEBAJO de la lista, que queda entera y usable. */
.dd-menu.con-panel{width:288px;max-height:none;}
.dd-panel{margin-top:5px;padding:10px 6px 2px;border-top:1px solid var(--line);}

/* ---------- Menú flotante anclado ---------- */
/* Cuelga del body con position:fixed: nunca hereda el min-width:100% de
   .dd-menu, que contra el body es el ancho del viewport.

   Sin altura máxima y sin overflow: el menú muestra todas sus opciones de una,
   nunca una lista con scroll interno. El ancho lo da el texto más largo, así
   que ningún ítem sale cortado. */
.flotante{position:fixed;z-index:220;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:6px;box-shadow:0 18px 44px rgba(28,43,72,.20);
  width:max-content;min-width:180px;max-width:min(340px,calc(100vw - 16px));
  animation:dd-in .14s ease both;}

/* Grupos: navegación · links · gestión · archivar y eliminar. */
.flot-grupo + .flot-grupo{margin-top:5px;padding-top:5px;border-top:1px solid var(--line);}

/* ---------- Modal ---------- */
body.sin-scroll{overflow:hidden;}

.mdl-overlay{position:fixed;inset:0;z-index:200;background:rgba(16,25,43,.62);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:32px 24px;
  opacity:0;transition:opacity .18s;}
.mdl-overlay.on{opacity:1;}

.mdl{background:#fff;border-radius:18px;width:100%;max-height:calc(100vh - 64px);
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 32px 90px rgba(12,20,36,.38);
  transform:translateY(14px) scale(.985);transition:transform .22s cubic-bezier(.2,.8,.3,1);}
.mdl-overlay.on .mdl{transform:none;}

.mdl-head{display:flex;align-items:center;gap:16px;padding:20px 22px 18px 26px;
  border-bottom:1px solid var(--line);flex:none;}
.mdl-tit h2{font-size:17px;font-weight:800;letter-spacing:-.2px;}
.mdl-sub{font-size:12.5px;color:var(--gris);margin-top:3px;}
.mdl-head-der{margin-left:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.mdl-x{display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;
  background:#f2f5f8;border:0;border-radius:10px;color:var(--navy);cursor:pointer;
  transition:background .16s;}
.mdl-x:hover{background:var(--celeste-soft);}
.mdl-x .ico{width:17px;height:17px;}

.mdl-body{flex:1;overflow-y:auto;overscroll-behavior:contain;}

/* ---------- Delta vs período anterior ---------- */
.delta{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:800;
  padding:2px 7px 2px 5px;border-radius:7px;letter-spacing:.01em;}
.delta .ico{width:12px;height:12px;}
.delta.sube{background:var(--verde-soft);color:var(--verde);}
.delta.baja{background:var(--rojo-soft);color:var(--rojo);}
.delta.igual{background:#eef1f5;color:var(--gris);}

/* ---------- Tabla ---------- */
.tabla{width:100%;border-collapse:collapse;font-size:13px;}
.tabla th{text-align:left;font-size:10px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--gris2);padding:0 14px 10px;white-space:nowrap;}
.tabla td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:middle;}
.tabla tbody tr:hover{background:#fafbfd;}
.tabla .num{font-variant-numeric:tabular-nums;font-weight:700;}
.tabla .disp{display:inline-flex;align-items:center;gap:7px;color:var(--gris);font-weight:600;}
.tabla .disp .ico{width:15px;height:15px;color:var(--navy);}

/* ---------- Barra horizontal de lista ---------- */
.barra-fila{display:grid;grid-template-columns:1fr auto;gap:4px 12px;margin-bottom:13px;}
.barra-fila:last-child{margin-bottom:0;}
.barra-fila .et{font-size:13px;font-weight:700;}
.barra-fila .vl{font-size:12.5px;font-weight:800;color:var(--gris);font-variant-numeric:tabular-nums;}
.barra-pista{grid-column:1 / -1;height:7px;border-radius:99px;background:#eef1f5;overflow:hidden;}
.barra-llena{height:100%;border-radius:99px;background:var(--celeste);transition:width .5s ease;}
.barra-llena.fuerte{background:var(--navy);}

/* ---------- Encabezado de tarjeta ---------- */
.card-h{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.card-h h3{font-size:13.5px;font-weight:800;letter-spacing:-.1px;}
.card-h .der{margin-left:auto;font-size:12px;color:var(--gris);font-weight:600;}