/* =====================================================================
   SENDA · Capa de identidad visual · 3.23.73
   Se carga DESPUES de todas las demas hojas y solo ajusta apariencia:
   tipografia, tratamiento de cifras, bordes y sombras.
   No cambia ninguna medida de layout, ni posiciones, ni tamanos de caja.
   Para volver atras: quitar el <link> de esta hoja. Nada mas depende de ella.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;450;500;600;700&display=swap');

:root{
  --senda-ink:#10161f;
  --senda-muted:#6b7480;
  --senda-rule:#e0e4ea;
  --senda-accent:#1b3a5c;
  --senda-negativo:#9c3a33;
  --senda-positivo:#2c5279;
  --senda-radio:5px;
}

/* --- 1. Tipografia ------------------------------------------------- */
body, button, input, select, textarea{
  font-family:"IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
body{ -webkit-font-smoothing:antialiased; }

/* Etiquetas cortas en mayuscula: mono, con aire entre letras. */
.supplier-summary article span,
.summary-card span,
.eyebrow,
.audit-balance span,
.balance-row span,
.stat span,
th{
  font-family:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing:.07em;
}

/* --- 2. Las cifras ------------------------------------------------- */
/* Ancho fijo y tabular: los importes se alinean por unidad y se comparan
   de un vistazo. Es la convencion de cualquier libro contable. */
.negative-amount, .positive-amount,
.supplier-summary article strong,
.compact-account-balance,
.task-amount, .audit-balance strong,
.balance-row strong,
td.amount, .amount,
.flujo-monto, .saldo-monto{
  font-family:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-variant-numeric:tabular-nums;
  font-weight:500;
  letter-spacing:-.01em;
}
.negative-amount{ color:var(--senda-negativo); }
.positive-amount{ color:var(--senda-positivo); }

/* --- 3. Superficies: linea fina en lugar de sombra ------------------ */
.summary-card, .panel, .action-card, .supplier-card, .doc-card,
.modal-card, .audit-card, .compact-account-card, .balance-box,
.supplier-summary article, .flujo-panel, .stat-card{
  box-shadow:none;
  border:1px solid var(--senda-rule);
  border-radius:var(--senda-radio);
}
.supplier-card-main{ border-radius:var(--senda-radio) var(--senda-radio) 0 0; }
.supplier-card-link{ border-radius:0 0 var(--senda-radio) var(--senda-radio); }

/* --- 4. Controles -------------------------------------------------- */
.primary-button, .secondary-button, button, .btn{
  border-radius:var(--senda-radio);
  box-shadow:none;
  font-weight:500;
}
.primary-button{ background:var(--senda-accent); border-color:var(--senda-accent); }
.primary-button, .secondary-button{ text-decoration:none; }
input, select, textarea{ border-radius:var(--senda-radio); box-shadow:none; }
:focus-visible{ outline:2px solid var(--senda-accent); outline-offset:2px; }

/* --- 5. Menu lateral: plano, sin degrade --------------------------- */
.sidebar{ background:#f5f7fa; border-right:1px solid var(--senda-rule); }
.sidebar::before, .sidebar::after{ display:none; }
.nav-item{ border-radius:0; box-shadow:none; border-left:2px solid transparent; }
.nav-item.active{
  background:#e7ecf3; border-left-color:var(--senda-accent);
  color:var(--senda-ink); font-weight:600;
}
.nav-item.active::after{ display:none; }

/* --- 6. Etiquetas de estado: contorno, no relleno saturado --------- */
.supplier-type-tag, .supplier-balance-tag, .payment-order-status,
.status-pill, .audit-badge, .task-invalid{
  border-radius:3px;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  letter-spacing:.06em;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* =====================================================================
   7. MENOS VERDE · 3.23.74
   El recoloreo anterior unifico el TONO pero no bajo la CANTIDAD de
   elementos que lo usan: los diez iconos del menu, los titulos de panel,
   los enlaces, el saludo y los importes positivos. El resultado seguia
   siendo verde en todos lados, solo que el mismo verde.
   Regla: el acento queda para DOS cosas, el boton principal y la seccion
   donde estas parado. Todo lo demas, tinta o gris.
   El verde y el rojo de los importes NO se tocan: ahi el color informa.
   ===================================================================== */

/* Los iconos del menu se definen mas abajo, en la seccion 15.
   Aca habia una lista de :nth-child(1..12) que los ponia grises. Quedo
   sin efecto por dos motivos: en la 3.24.5 se decidio darles color, y en
   la 3.28.0 el menu paso a tener grupos, con lo cual esa numeracion ya
   no cae sobre los enlaces. Se saca para que haya un solo lugar donde
   mirar cuando el menu se ve raro. */

/* Saludo y fecha de la barra superior: informacion, no decoracion. */
.topbar-greeting, .topbar-greeting strong{ color:var(--senda-ink); font-weight:500; }
.topbar-greeting svg, .topbar-date svg{ color:#98a1ad; }

/* Titulos de panel: ordenan, no compiten. */
.panel-heading h2, .panel h2, .summary-label{ color:var(--senda-ink); }

/* Enlaces dentro del contenido: tinta, subrayado al pasar el mouse.
   Un enlace no necesita color para leerse como enlace. */
.panel a:not(.primary-button):not(.secondary-button):not(.nav-item),
.text-button,
.panel-heading a,
.supplier-card-link,
.dashboard-panel a:not(.primary-button):not(.secondary-button){
  color:var(--senda-ink); text-decoration:none;
}
.panel a:not(.primary-button):not(.secondary-button):not(.nav-item):hover,
.text-button:hover, .panel-heading a:hover, .supplier-card-link:hover{
  color:var(--senda-accent); text-decoration:underline;
}

/* Avatar e iconos sueltos de la barra lateral. */
.sidebar-avatar{ background:#eff1f5; color:var(--senda-ink); }
.sidebar-user-button{ color:var(--senda-ink); }

/* Iconos redondos de las tarjetas de resumen: fondo neutro. */
.summary-card-icon, .action-icon, .balance-group-icon{
  background:#eff1f5; color:#6b7480;
}

/* Lo que SI conserva color, porque el color es el dato: */
.positive-amount, .amount.positive, .movement-type.in, .transfer-in{ color:var(--senda-positivo); }
.negative-amount, .amount.negative, .movement-type.out, .transfer-out{ color:var(--senda-negativo); }

/* =====================================================================
   8. INICIO PARA SOCIOS · 3.23.75
   Una mirada economica: cuanto hay, que se debe, cuanto sale y hasta
   cuando alcanza. En ese orden y con ese peso visual.
   ===================================================================== */

.main-content:has(.socios-veredicto){ max-width:1180px; }

/* --- El veredicto: lo primero y lo mas grande --- */
.socios-veredicto{
  display:flex; gap:26px; align-items:center; flex-wrap:wrap;
  background:var(--paper,#fff); border:1px solid var(--senda-rule);
  border-left:3px solid var(--senda-accent);
  border-radius:var(--senda-radio); padding:26px 28px; margin-bottom:18px;
}
.socios-veredicto.socios-alerta{ border-left-color:#8a6a1f; }
.socios-veredicto-texto{ flex:1 1 380px; min-width:0; }
.socios-veredicto h1{
  margin:0; font-size:27px; font-weight:600; letter-spacing:-.02em;
  line-height:1.22; color:var(--senda-ink); text-wrap:balance;
}
.socios-veredicto p{ margin:9px 0 0; color:#39424f; font-size:14.5px; max-width:60ch; }

.socios-salvedad{
  flex:0 1 330px; background:#faf5e9; border:1px solid #e0cd9c;
  border-radius:var(--senda-radio); padding:14px 16px;
}
.socios-salvedad strong{ display:block; font-size:13px; color:#5f4713; margin-bottom:4px; }
.socios-salvedad span{ display:block; font-size:12.5px; color:#5f4713; line-height:1.5; }
.socios-salvedad a{
  display:inline-block; margin-top:9px; font-size:12.5px; font-weight:500;
  color:#5f4713; text-decoration:underline;
}

/* --- Las tres cifras --- */
.socios-cifras{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  border:1px solid var(--senda-rule); border-radius:var(--senda-radio);
  overflow:hidden; margin-bottom:18px; background:var(--paper,#fff);
}
.socios-cifra{
  padding:17px 22px; border-right:1px solid var(--senda-rule);
  text-decoration:none; color:inherit; display:block; transition:background .12s;
}
.socios-cifra:last-child{ border-right:0; }
.socios-cifra:hover{ background:#f5f7fa; }
.socios-k{
  display:block; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10px;
  letter-spacing:.11em; text-transform:uppercase; color:var(--senda-muted); margin-bottom:6px;
}
.socios-v{
  display:block; font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums; font-size:22px; font-weight:500;
  letter-spacing:-.015em; color:var(--senda-ink);
}
.socios-s{ display:block; font-size:12px; color:var(--senda-muted); margin-top:4px; }

/* --- El grafico --- */
.socios-grafico{
  background:var(--paper,#fff); border:1px solid var(--senda-rule);
  border-radius:var(--senda-radio); padding:22px 26px 24px; margin-bottom:18px;
}
.socios-grafico-head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.socios-grafico-head h2{ margin:0; font-size:16px; font-weight:600; color:var(--senda-ink); }
.socios-grafico-head p{ margin:3px 0 0; font-size:12.5px; color:var(--senda-muted); }
.socios-plot{ width:100%; height:auto; display:block; margin:18px 0 2px; overflow:visible; }
.socios-plot-valor{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px; font-weight:500;
  font-variant-numeric:tabular-nums;
}
.socios-plot-mes{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.08em;
}
.socios-grafico-pie{ margin:10px 0 0; font-size:12px; color:var(--senda-muted); max-width:78ch; line-height:1.5; }

/* --- Las dos columnas de detalle --- */
.socios-detalle{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
@media(max-width:860px){ .socios-detalle{ grid-template-columns:1fr; } }
.socios-detalle article{
  background:var(--paper,#fff); border:1px solid var(--senda-rule);
  border-radius:var(--senda-radio); padding:20px 22px;
}
.socios-detalle h2{
  margin:0 0 12px; font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px;
  font-weight:500; letter-spacing:.11em; text-transform:uppercase; color:var(--senda-muted);
}
.socios-fila{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:10px 0; border-bottom:1px solid var(--senda-rule); font-size:13.5px;
}
.socios-fila:last-child{ border-bottom:0; }
.socios-fila-link{ text-decoration:none; color:inherit; }
.socios-fila-link:hover .socios-fila-que b{ text-decoration:underline; }
.socios-fila-que{ min-width:0; }
.socios-fila-que b{ display:block; font-weight:500; color:var(--senda-ink); }
.socios-fila-que small{ display:block; color:var(--senda-muted); font-size:11.5px; margin-top:2px; }
.socios-fila-monto{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums;
  white-space:nowrap; font-weight:500;
}
.socios-fila-ir{ color:var(--senda-muted); }
.socios-chip{
  display:inline-block; font-family:"IBM Plex Mono",ui-monospace,monospace; font-style:normal;
  font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; padding:1px 6px;
  border-radius:3px; border:1px solid #dcb3ae; color:var(--senda-negativo); margin-left:6px;
}
.socios-vacio{ margin:0; color:var(--senda-muted); font-size:13px; }

/* --- Accesos a los modulos: discretos, para quien si los usa --- */
.socios-accesos{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  padding:14px 2px 4px; border-top:1px solid var(--senda-rule);
}
.socios-accesos span{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--senda-muted);
}
.socios-accesos a{ font-size:13px; color:#39424f; text-decoration:none; }
.socios-accesos a:hover{ color:var(--senda-accent); text-decoration:underline; }

/* --- 9. Acceso de la contadora en el Inicio · 3.24.2 ---------------- */
/* Franja fina entre las cifras y el grafico. Baja, para que no compita
   con los numeros, pero visible sin bajar la pantalla. */
.socios-contadora{
  display:flex; flex-wrap:wrap; gap:16px;
  align-items:center; justify-content:space-between;
  background:#fff; border:1px solid var(--senda-rule);
  border-left:3px solid var(--senda-accent);
  border-radius:var(--senda-radio); padding:14px 20px; margin-bottom:18px;
}
.socios-contadora strong{
  display:block; font-size:15px; font-weight:600;
  letter-spacing:-.01em; color:var(--senda-ink);
}
.socios-contadora p{
  margin:3px 0 0; max-width:74ch;
  font-size:12.5px; line-height:1.5; color:var(--senda-muted);
}
/* El boton va definido una sola vez, en la seccion 16. */
@media(max-width:720px){
  .socios-contadora{ padding:14px 16px; }
  .socios-contadora > a{ width:100%; text-align:center; }
}

/* =====================================================================
   10. EL MENU · 3.24.5
   ---------------------------------------------------------------------
   Tres cosas, pedidas y medidas:

   a) El menu va en blanco. Antes era #f5f7fa, casi el mismo gris que el
      fondo del contenido, y la columna no terminaba de separarse.

   b) El item elegido va en verde pleno con la letra en blanco. Antes
      era un fondo #e7ecf3 sobre #f5f7fa: 1,09 de contraste entre uno y
      otro, o sea practicamente el mismo color. Lo unico que marcaba
      donde estabas era una raya de 2px. Ahora no hay duda posible.

   c) Los iconos recuperan un toque de color. En 3.23.74 los habia
      aplanado todos a #98a1ad, que contra el fondo del menu daba
      2,40 de contraste: por debajo del minimo de 3 que necesita un
      icono para leerse. Eran la mayor masa visual de la columna y
      quedaron casi invisibles; de ahi que el menu se viera apagado.

   El verde de los iconos es el mismo de la marca, no diez colores
   distintos como antes de la limpieza: el menu se lee como una sola
   cosa y el color no vuelve a ser decoracion.

   Contrastes sobre blanco: letras 12,8:1 · iconos 4,1:1 ·
   letra blanca sobre el verde del activo 10,2:1.
   ===================================================================== */

.sidebar{
  background:#ffffff !important;
  border-right:1px solid var(--senda-rule);
  box-shadow:none;
}
.sidebar::before, .sidebar::after{ display:none !important; }
.sidebar-brand{ border-bottom:1px solid var(--senda-rule); }

.main-nav .nav-item{
  color:#272d38 !important;
  border-left:0 !important;
  border-radius:9px !important;
  font-weight:500 !important;
  box-shadow:none !important;
}

/* Los iconos, con algo de color propio.
   Antes esto era una lista de :nth-child(1..15) porque los quince enlaces
   eran los unicos hijos del <nav>. Con los grupos de la 3.28.0 el <nav>
   tiene ademas los rotulos <p>, asi que esa numeracion dejo de apuntar a
   donde apuntaba. Una sola regla hace lo mismo y no se rompe cuando se
   agrega o se mueve un item.

   El tono no es capricho: sobre blanco da 7,05 de contraste. El verde
   que habia antes daba 6,35 y el azul con el que quedo la 3.28.0 daba
   5,61 — por eso el menu se veia apagado. */
.main-nav .nav-item svg{ color:#1f5a99 !important; }

.main-nav .nav-item:hover{
  background:#f2f4f8 !important;
  border-color:transparent !important;
  transform:none !important;
}

.main-nav .nav-item.active{
  background:#1b3a5c !important;
  color:#ffffff !important;
  border-left:0 !important;
  border-color:transparent !important;
  box-shadow:none !important;
  font-weight:600 !important;
}
.main-nav .nav-item.active svg{ color:#ffffff !important; }
.main-nav .nav-item.active::after{ display:none !important; }

/* =====================================================================
   11. ANULAR UN MOVIMIENTO · 3.25.0
   ---------------------------------------------------------------------
   Ojo con [hidden]: en 3.23.63 una regla display:flex se lo comio y el
   panel quedaba siempre visible. Por eso cada elemento que se muestra y
   se esconde lleva su [hidden]{display:none!important} al lado.
   ===================================================================== */

.movement-edit-footer{
  display:flex !important; align-items:center; justify-content:space-between; gap:12px;
}
.movement-edit-footer[hidden]{ display:none !important; }
.movement-edit-footer-actions{ display:flex; align-items:center; gap:9px; margin-left:auto; }

/* Y esta es la que faltaba: .secondary-button y .primary-button traen su
   propio display, que le gana a [hidden]. Sin esto los botones que el
   JS esconde se siguen viendo. Es el mismo error de 3.23.63; esta vez lo
   agarro la prueba antes de subirlo. */
.movement-edit-footer button[hidden],
.movement-edit-footer a[hidden]{ display:none !important; }

/* Anular no es una accion de todos los dias: va como enlace, no como boton. */
.link-danger-button{
  background:none; border:0; padding:4px 2px; cursor:pointer;
  font-family:"IBM Plex Sans", sans-serif; font-size:12.5px; font-weight:500;
  color:var(--senda-negativo); text-decoration:underline; text-underline-offset:3px;
}
.link-danger-button:hover{ color:#7d2c26; }
.link-danger-button[hidden]{ display:none !important; }

.danger-button{
  min-height:38px; padding:0 18px; border-radius:var(--senda-radio);
  border:1px solid var(--senda-negativo); background:var(--senda-negativo);
  color:#fff; font-size:13px; font-weight:600; cursor:pointer;
}
.danger-button:hover{ background:#7d2c26; border-color:#7d2c26; }
.danger-button:disabled{ opacity:.6; cursor:default; }
.danger-button[hidden]{ display:none !important; }

.movement-annul-panel{
  display:block; padding:2px 0 4px;
}
.movement-annul-panel[hidden]{ display:none !important; }
.movement-annul-panel h3{
  margin:0 0 7px; font-size:14.5px; font-weight:600; color:var(--senda-ink);
}
.movement-annul-panel p{
  margin:0 0 14px; font-size:13px; line-height:1.55; color:#39424f; max-width:60ch;
}
.movement-annul-panel label{ display:block; }
.movement-annul-panel label span{
  display:block; margin-bottom:5px;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--senda-muted);
}
.movement-annul-panel input{
  width:100%; box-sizing:border-box;
  min-height:38px; padding:0 11px; font-size:13.5px;
  border:1px solid #cfd5dc; border-radius:var(--senda-radio);
  background:#fff; color:var(--senda-ink);
}
.movement-annul-panel input:focus{ outline:2px solid rgba(27,58,92,.25); outline-offset:1px; }

/* La grilla de edicion se esconde mientras se pide el motivo. */
.movement-edit-grid[hidden]{ display:none !important; }

/* Una fila anulada, y la fila que anula, en el listado. */
.movement-annulled td, .movement-annulled{ color:var(--senda-muted); }
.movement-annulled .amount, .movement-annulled td.amount{ text-decoration:line-through; }
.movement-annul-tag{
  display:inline-block; margin-left:7px;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:2px 6px; border-radius:3px; white-space:nowrap;
  border:1px solid color-mix(in srgb, var(--senda-negativo) 34%, transparent);
  color:var(--senda-negativo);
}

/* --- 12. El buzón en el Inicio · 3.26.0 ----------------------------- */
/* Mismo formato que la carpeta de la contadora, pero el borde cambia de
   color: ambar mientras falte algo, verde cuando estan todos. Es lo
   unico del Inicio que mide trabajo pendiente y no plata. */
.socios-buzon{
  display:flex; flex-wrap:wrap; gap:16px;
  align-items:center; justify-content:space-between;
  background:#fff; border:1px solid var(--senda-rule);
  border-left:3px solid #8a6a1f;
  border-radius:var(--senda-radio); padding:14px 20px; margin-bottom:10px;
}
.socios-buzon.al-dia{ border-left-color:var(--senda-accent); }
.socios-buzon span{
  display:block;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--senda-muted);
}
.socios-buzon strong{
  display:block; margin:5px 0 4px;
  font-size:16px; font-weight:600; letter-spacing:-.02em; color:var(--senda-ink);
}
.socios-buzon p{
  margin:0; max-width:70ch; font-size:12.5px; line-height:1.5; color:#39424f;
}
/* El boton va definido una sola vez, en la seccion 16. */
@media(max-width:720px){ .socios-buzon > a{ width:100%; text-align:center; } }

/* --- 13. El acceso a la ficha profesional · 3.27.0 ------------------ */
/* Va en esta hoja y no en contabilidad.css porque la pantalla de
   proveedores no carga aquella, y esta se carga en todas. */
.supplier-card-link{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.supplier-card-ficha{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:10px; letter-spacing:.05em; text-decoration:none; white-space:nowrap;
  padding:5px 9px; border-radius:4px;
  border:1px solid var(--senda-rule); color:var(--senda-accent);
}
.supplier-card-ficha:hover{ border-color:var(--senda-accent); background:#eef2f7; }

/* 14. Proveedores tecnicos · SENDA 3.27.1
   Va en verde lleno y no en el gris de los otros: es el acceso a otra
   pantalla, no una accion mas sobre la lista que se esta mirando. */
.tecnicos-button{
  display:inline-flex; align-items:center; gap:6px;
  /* Al final de la fila: en pantalla ancha queda a la derecha de todo,
     y cuando no entra baja pero sigue alineado ahi, no suelto a la izquierda. */
  margin-left:auto;
  padding:10px 15px; border-radius:8px;
  background:var(--senda-accent, #1b3a5c); color:#fff;
  font-weight:600; font-size:13.5px; text-decoration:none;
  border:1px solid transparent;
}
.tecnicos-button:hover{ background:#14283f; color:#fff; }

/* =====================================================================
   15. ESTETICA EJECUTIVA  ·  SENDA 3.28.0
   ---------------------------------------------------------------------
   Paleta azul noche sobre plata. Los colores ya se cambiaron uno por uno
   en todos los archivos; lo que va aca es lo que cambia de forma, no de
   color: el tamaño de la marca, los grupos del menu y la jerarquia de
   las cifras del Inicio.
   ===================================================================== */

/* --- La marca: emblema chico y la palabra en palo seco liviana --- */
.sidebar-brand{
  min-height:0 !important;
  display:flex !important; flex-direction:column; align-items:center; justify-content:center;
  gap:6px !important; padding:20px 14px 16px !important; margin:0 !important;
  border-bottom:1px solid var(--senda-rule) !important;
}
.sidebar-brand img{
  width:44px !important; height:auto !important;
  filter:none !important; opacity:.95;
}
.sidebar-brand b{
  display:block; font-weight:300; font-size:15px; line-height:1;
  font-family:"Optima","Candara","Gill Sans MT","Gill Sans",system-ui,sans-serif;
  letter-spacing:.42em; text-indent:.42em;   /* el sangrado compensa el aire del final */
  color:var(--senda-ink);
}
.sidebar-brand span{
  color:var(--senda-muted) !important; font-size:7.5px !important;
  letter-spacing:.16em !important; text-transform:uppercase; font-weight:500;
}

/* --- Los grupos del menu --- */
.nav-grupo{
  margin:15px 0 4px; padding:0 18px;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:9px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--senda-muted); font-weight:600;
}
.nav-grupo:first-child{ margin-top:6px; }
.main-nav .nav-item{ padding-top:6px !important; padding-bottom:6px !important; }

/* --- El Inicio: que se lea primero lo que importa ---
   Las tres cifras tenian el mismo tamaño y competian entre si. Disponible
   manda; lo que sale y lo vencido acompañan. --- */
.socios-cifras{ grid-template-columns:1.35fr 1fr 1fr; }
.socios-cifra:first-child .socios-v{ font-size:26px; color:var(--senda-accent); }
.socios-cifra:not(:first-child) .socios-v{ font-size:16px; }
.socios-cifra:not(:first-child) .socios-s{ font-size:11.5px; }

/* --- El grafico deja de gritar: mas bajo y en un tono apagado --- */
.socios-grafico-head h2{ font-size:13.5px; }
.socios-grafico-head p{ font-size:11.5px; }
.socios-plot{ max-height:150px; margin:14px 0 2px; }
.socios-plot rect{ fill:#8d9cae; }
.socios-plot-valor{ font-size:10.5px; fill:var(--senda-muted); }

@media (max-width:900px){
  .socios-cifras{ grid-template-columns:1fr; }
}

/* --- 3.28.1 · el menu se veia apagado ---
   Tres cosas lo dejaban sin cuerpo: los iconos mas claros que antes (ya
   corregido arriba), los renglones muy separados entre si, y que al pasar
   el mouse casi no pasaba nada. --- */
.main-nav .nav-item{
  min-height:36px !important;
  font-size:13.5px !important;
  font-weight:500 !important;
  color:#1c2430 !important;
}
.main-nav .nav-item svg{ width:18px !important; height:18px !important; }
.main-nav .nav-item:hover{ background:#eef2f7 !important; color:#10161f !important; }
.main-nav .nav-item:hover svg{ color:#16406f !important; }
.main-nav .nav-item.active svg{ color:#ffffff !important; }

/* Los rotulos de grupo separan, pero no tienen que pesar mas que los
   items que encabezan. */
.nav-grupo{ margin:16px 0 3px !important; color:#78818e !important; }
.nav-grupo:first-child{ margin-top:4px !important; }

/* =====================================================================
   16. LOS BOTONES DE LAS FRANJAS DEL INICIO  ·  SENDA 3.28.2
   ---------------------------------------------------------------------
   El buzon y la carpeta son dos tarjetas del mismo rango, pero tenian
   botones distintos: uno azul lleno y el otro de contorno. Competian
   entre si en vez de acompañarse. Ahora comparten una sola definicion.

   Los tres detalles que los hacian ver toscos, corregidos:
     · el interletrado negativo (-.01em) apretaba las letras de una
       negrita de 13px y se leia mal. Va en cero.
     · el radio de 5px era muy cerrado para el peso del borde. Va a 6.
     · no tenian transicion, asi que el boton no respondia al mouse.

   El marco de 2px es lo que le da cuerpo de boton, y el estado apretado
   se hunde: mas oscuro, con la sombra para adentro y un pixel para
   abajo. Sin eso, un contorno claro se lee como un cartel y no como
   algo que se puede apretar.
   ===================================================================== */
.socios-buzon > a,
.socios-contadora > a{
  display:inline-block; white-space:nowrap; text-decoration:none;
  background:#fff; color:var(--senda-accent);
  border:2px solid #c3cedc; border-radius:6px;
  padding:9px 20px;
  font-size:12.5px; font-weight:600; letter-spacing:0;
  box-shadow:0 1px 2px rgba(16,22,31,.06);
  transition:background .13s ease, border-color .13s ease,
             box-shadow .13s ease, transform .06s ease;
}
.socios-buzon > a:hover,
.socios-contadora > a:hover{
  background:#f2f6fa; border-color:#a8bacf; color:var(--senda-accent);
  box-shadow:0 2px 6px rgba(16,22,31,.10);
}
.socios-buzon > a:active,
.socios-contadora > a:active{
  background:#dbe4ee; border-color:#8ea5bf;
  box-shadow:inset 0 2px 4px rgba(16,22,31,.14);
  transform:translateY(1px);
}
.socios-buzon > a:focus-visible,
.socios-contadora > a:focus-visible{
  outline:2px solid var(--senda-accent); outline-offset:2px;
}

@media(max-width:720px){
  .socios-buzon > a,
  .socios-contadora > a{ width:100%; text-align:center; }
}