/* Natillera — estilos de la web */

:root {
  color-scheme: light dark; /* barras de desplazamiento y controles nativos según el tema */
  --fondo: #f6f7f9;
  --superficie: #ffffff;
  --borde: #dde1e7;
  --texto: #1d232b;
  --suave: #5d6875;
  --primario: #1f6f5c;
  --primario-texto: #ffffff;
  --ok: #1d7a4a;
  --ok-fondo: #e3f4ea;
  --aviso: #8a5a00;
  --aviso-fondo: #fff2d6;
  --alerta: #b42318;
  --alerta-fondo: #fde8e6;
  --info: #1f5aa6;
  --info-fondo: #e4eefb;
  --radio: 10px;
  --sombra: 0 1px 2px rgb(16 24 40 / 6%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #12161b;
    --superficie: #1b2129;
    --borde: #2e3743;
    --texto: #e7ebf0;
    --suave: #9aa6b4;
    --primario: #3fae8f;
    --primario-texto: #0d1512;
    --ok: #6fd39c;
    --ok-fondo: #173326;
    --aviso: #f0c46b;
    --aviso-fondo: #3a2e12;
    --alerta: #ff8a7f;
    --alerta-fondo: #3d1c19;
    --info: #8fb8f0;
    --info-fondo: #182a42;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--primario); }
h1 { font-size: 1.6rem; margin: .25rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
h3 { font-size: 1rem; margin: 0; }

.barra {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 1rem; background: var(--superficie); border-bottom: 1px solid var(--borde);
}
.barra .marca { font-weight: 700; text-decoration: none; color: var(--texto); }
.barra { flex-wrap: wrap; }
.barra nav { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.barra nav a { white-space: nowrap; }
.barra nav a { text-decoration: none; }
.barra form { margin: 0; }

.contenido { max-width: 1280px; margin: 0 auto; padding: 1.25rem 16px 3rem; }

.tarjeta {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 1.25rem; margin-bottom: 1.25rem; box-shadow: var(--sombra);
}

.suave { color: var(--suave); }
.error { color: var(--alerta); }
.error p { margin: 0 0 .25rem; }
.aviso { background: var(--aviso-fondo); color: var(--aviso); padding: .6rem .9rem; border-radius: var(--radio); }
.ok-texto { background: var(--ok-fondo); color: var(--ok); padding: .6rem .9rem; border-radius: var(--radio); }

.chip {
  display: inline-block; padding: .05rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600;
  background: var(--fondo); color: var(--suave); border: 1px solid var(--borde); vertical-align: middle;
}
.chip.ok { background: var(--ok-fondo); color: var(--ok); border-color: transparent; }
.chip.alerta { background: var(--alerta-fondo); color: var(--alerta); border-color: transparent; }
.chip.aviso { background: var(--aviso-fondo); color: var(--aviso); border-color: transparent; }
.chip.info { background: var(--info-fondo); color: var(--info); border-color: transparent; }

/* Los estilos de botones y campos no deben tocar los controles internos de Handsontable
   (casillas, editor de celda, menús de filtro). Con :where() quedan sin peso y cualquier otra regla los ajusta. */
:where(button):not(:where(.handsontable *)) {
  font: inherit; cursor: pointer; padding: .5rem .9rem; border-radius: 8px;
  border: 1px solid var(--borde); background: var(--superficie); color: var(--texto);
}
button.primario { background: var(--primario); color: var(--primario-texto); border-color: var(--primario); }
button.enlace { border: 0; background: none; padding: 0; color: var(--primario); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }

:where(input, select, textarea):not(:where(.handsontable *, [type="checkbox"], [type="radio"])) {
  font: inherit; width: 100%; padding: .45rem .6rem; border-radius: 8px;
  border: 1px solid var(--borde); background: var(--superficie); color: var(--texto);
}
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--primario); }

.formulario label, .login label { display: block; margin-bottom: .75rem; font-weight: 600; }
.formulario label input, .formulario label select, .formulario label textarea,
.login label input { margin-top: .25rem; font-weight: 400; }
.formulario small { display: block; font-weight: 400; }
.con-error input, .con-error select { border-color: var(--alerta); }

.login { max-width: 380px; margin: 4rem auto; }
.login button { width: 100%; }
.con-google .g_id_signin { display: flex; justify-content: center; margin-bottom: 1rem; }

.migas { font-size: .9rem; color: var(--suave); margin-bottom: .5rem; }
.pestanas { display: flex; gap: .25rem; border-bottom: 1px solid var(--borde); margin-bottom: 1rem; overflow-x: auto; }
.pestanas a { padding: .5rem .9rem; text-decoration: none; color: var(--suave); border-bottom: 2px solid transparent; white-space: nowrap; }
.pestanas a.activa { color: var(--texto); border-bottom-color: var(--primario); font-weight: 600; }

.lista-ciclos { list-style: none; padding: 0; margin: 0; }
.lista-ciclos li { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .6rem 0; border-top: 1px solid var(--borde); }
.lista-ciclos .acciones { margin-left: auto; display: flex; gap: 1rem; }

.indicadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.indicador { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: .8rem 1rem; }
.indicador span { display: block; color: var(--suave); font-size: .85rem; }
.indicador strong { display: block; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.indicador small { color: var(--suave); }
.indicador.destacado { border-color: var(--primario); }
.indicador.alerta strong { color: var(--alerta); }

.herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: .5rem; }
.en-linea { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.en-linea input { width: auto; }
.segmentado { display: inline-flex; border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; }
.segmentado a { padding: .4rem .9rem; text-decoration: none; color: var(--suave); background: var(--superficie); }
.segmentado a.activa { background: var(--primario); color: var(--primario-texto); }

.leyenda { display: flex; gap: .5rem; margin: .5rem 0; font-size: .85rem; }
.leyenda span { padding: .1rem .5rem; border-radius: 6px; }
.estado-grilla { min-height: 1.5rem; margin: .25rem 0; }
.estado-grilla.ok { color: var(--ok); }
.estado-grilla.error { color: var(--alerta); font-weight: 600; }

.dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; }
.acciones-prestamo { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.acciones-prestamo .tarjeta { margin-bottom: 0; }

.tabla-bloque { margin: 1.25rem 0; }
.tabla-bloque h3 { margin-bottom: .5rem; }
.hot { width: 100%; overflow: hidden; }

/* Barra de herramientas y barra de estado de cada grilla (tipo Excel) */
.grilla-herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.grilla-buscar { width: 220px; max-width: 100%; padding: .35rem .6rem; }
.grilla-herramientas .enlace { margin-left: auto; }
.grilla-pie {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem;
  margin-top: .4rem; padding: .45rem .75rem; border: 1px solid var(--borde); border-radius: 8px;
  background: var(--superficie); font-size: .85rem; font-variant-numeric: tabular-nums;
}
.grilla-estado { color: var(--suave); white-space: pre-wrap; }
.grilla-estado.ok { color: var(--ok); }
.grilla-estado.error { color: var(--alerta); font-weight: 600; }
.grilla-totales { display: flex; flex-wrap: wrap; gap: .35rem .9rem; }
.grilla-totales .total small { color: var(--suave); margin-right: .3rem; }

.botonera { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.titulo-con-acciones { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; }
.desplegable summary { cursor: pointer; color: var(--primario); font-weight: 600; margin-top: .75rem; }
.desplegable[open] summary { margin-bottom: .75rem; }
.rejilla-formulario { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 1rem; align-items: end; }
.fila-formulario { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem 1rem; }
.fila-formulario label { flex: 1 1 200px; margin-bottom: 0; }
.fila-formulario .error { flex-basis: 100%; }
button:disabled { opacity: .5; cursor: not-allowed; }
.grupos-config { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
fieldset.tarjeta { margin: 0; }
fieldset legend { font-weight: 700; padding: 0 .3rem; }
aside > .tarjeta { margin-bottom: 1rem; }
/* Botones por fila de la grilla (✓ pago completo, $+ abono) */
.handsontable td.celda-acciones { white-space: nowrap; text-align: center; padding: 0 2px; }
.accion-fila {
  font: inherit; cursor: pointer;
  min-width: 32px; padding: 0 .4rem; margin: 2px 2px; line-height: 1.6; font-size: .8rem; font-weight: 700;
  border-radius: 6px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto);
}
.accion-fila.accion-completo { background: var(--ok-fondo); color: var(--ok); border-color: transparent; }
.accion-fila.accion-abono { background: var(--aviso-fondo); color: var(--aviso); border-color: transparent; }
.accion-fila:hover:not(:disabled) { filter: brightness(1.15); }
.accion-fila:disabled { opacity: .35; }

.dialogo {
  border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--texto);
  padding: 1.25rem; width: min(380px, calc(100vw - 32px));
}
.dialogo::backdrop { background: rgb(0 0 0 / 45%); }
.dialogo .botonera { justify-content: flex-end; margin: 1rem 0 0; }

.fila-formulario { align-items: flex-start; }
.fila-formulario label { min-width: 160px; }
/* El botón baja la altura del título del campo para quedar alineado con las cajas. */
.fila-formulario > button { white-space: nowrap; margin-top: calc(1.5em + .25rem); }
.aviso ul { margin: .25rem 0 0; padding-left: 1.2rem; }

.reglas summary { cursor: pointer; font-weight: 600; }
.reglas dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: .75rem 0 0; }
.reglas dt { color: var(--suave); }
.reglas dd { margin: 0; }

/* Celdas de la grilla de aportes. El tema de Handsontable pinta el fondo de las celdas, por eso el !important. */
.handsontable td.num { font-variant-numeric: tabular-nums; }
.handsontable td.celda-pagada, .leyenda .celda-pagada { background-color: var(--ok-fondo) !important; color: var(--ok); }
.handsontable td.celda-parcial, .leyenda .celda-parcial { background-color: var(--aviso-fondo) !important; color: var(--aviso); }
.handsontable td.celda-atrasada, .leyenda .celda-atrasada { background-color: var(--alerta-fondo) !important; color: var(--alerta); }

@media (max-width: 800px) {
  .dos-columnas { grid-template-columns: 1fr; }
  .barra nav { gap: .7rem; font-size: .9rem; }
  .lista-ciclos .acciones { margin-left: 0; }
}

/* Invitación, solicitudes y "Mi cuenta" */
.mensajes p { margin: 0 0 .75rem; }
.centrado { text-align: center; }
.unirse { max-width: 560px; margin: 2rem auto; }
.unirse h1 { margin-top: 0; }
.invitacion {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: .5rem 0 1rem;
  padding: .75rem 1rem; border: 1px dashed var(--borde); border-radius: var(--radio);
}
.invitacion input { flex: 1 1 260px; width: auto; font-size: .85rem; }
.codigo { display: block; font-size: 1.35rem; letter-spacing: .15em; font-variant-numeric: tabular-nums; }
.opciones-ingreso { border: 0; padding: 0; margin: 0 0 1rem; }
.opciones-ingreso legend { font-weight: 600; margin-bottom: .5rem; }
.opcion {
  display: flex; gap: .75rem; align-items: flex-start; padding: .75rem; margin-bottom: .5rem;
  border: 1px solid var(--borde); border-radius: var(--radio); cursor: pointer; font-weight: 400 !important;
}
.opcion input { width: auto; margin-top: .3rem; }
.opcion:has(input:checked) { border-color: var(--primario); background: var(--ok-fondo); }
.opcion small { display: block; }
.solicitud { padding: .75rem 0; border-top: 1px solid var(--borde); }
.solicitud:first-of-type { border-top: 0; }
.solicitud-quien { display: flex; flex-direction: column; gap: .15rem; min-width: 220px; flex: 2 1 240px; }
.solicitud-quien .chip { align-self: flex-start; }
.posicion {
  display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--primario); color: var(--primario-texto); font-weight: 700;
}
.pedidos { list-style: none; margin: 0; padding: 0; }
.pedidos li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .6rem 0; border-top: 1px solid var(--borde); }
.pedidos li:first-child { border-top: 0; }
.pedidos li > span { flex: 1 1 280px; }
.pedidos small { display: block; }
.pedidos form { margin: 0; }
.tarjeta.destacada { border-color: var(--primario); }
.en-natillera { flex-basis: 100%; }
.historial { margin: 0; padding-left: 1.2rem; }
.historial li { margin: .25rem 0; }

/* --- App instalable: barra superior, campana y barra inferior en el celular --- */
.marca { display: inline-flex; align-items: center; gap: .5rem; }
.marca img { border-radius: 7px; }
.barra-derecha { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.campana { position: relative; display: inline-flex; color: var(--texto); padding: .25rem; }
.contador {
  position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--alerta); color: #fff; font-size: .7rem; font-weight: 700;
  display: inline-grid; place-items: center; line-height: 1;
}
.barra-inferior { display: none; }

.activar-push { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; }
.activar-push h2 { margin-bottom: .25rem; }
.activar-push p { margin: 0; }
.activar-push .botonera { margin: 0; }

.avisos { list-style: none; margin: 0; padding: 0; }
.avisos li { border: 1px solid var(--borde); border-radius: var(--radio); margin-bottom: .5rem; background: var(--superficie); }
.avisos li.nuevo { border-left: 4px solid var(--primario); }
.avisos a { display: flex; flex-direction: column; gap: .15rem; padding: .75rem 1rem; color: var(--texto); text-decoration: none; }
.avisos li.nuevo strong::before { content: "● "; color: var(--primario); }
.avisos .vacio { padding: 1rem; }

@media (max-width: 700px) {
  .barra .menu-escritorio, .barra .instalar { display: none; }
  body.con-sesion { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .barra { position: sticky; top: 0; z-index: 20; padding-top: calc(.75rem + env(safe-area-inset-top)); }
  .barra-inferior {
    position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
    display: flex; justify-content: space-around; align-items: stretch;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    background: var(--superficie); border-top: 1px solid var(--borde);
  }
  .barra-inferior > a, .barra-inferior summary {
    position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 0; font-size: .72rem; color: var(--suave); text-decoration: none; list-style: none; cursor: pointer;
  }
  .barra-inferior summary::-webkit-details-marker { display: none; }
  .barra-inferior svg { width: 24px; height: 24px; }
  .barra-inferior [aria-current="page"], .barra-inferior details[open] summary { color: var(--primario); }
  .barra-inferior .contador { top: 0; right: calc(50% - 22px); }
  .barra-inferior .mas { flex: 1; display: flex; }
  .barra-inferior .mas summary { width: 100%; }
  .barra-inferior .hoja {
    position: fixed; left: 8px; right: 8px; bottom: calc(68px + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; gap: .25rem; padding: .75rem;
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
    box-shadow: 0 8px 24px rgb(0 0 0 / 30%);
  }
  .barra-inferior .hoja a, .barra-inferior .hoja button { padding: .6rem .5rem; text-align: left; font-size: 1rem; text-decoration: none; }
  .barra-inferior .hoja form { margin: 0; }
}

/* Dentro de la app instalada no hace falta el botón de instalar */
@media (display-mode: standalone) {
  [data-instalar] { display: none !important; }
}

/* Ficha del socio o cliente: un bloque por año */
.ciclo-ficha > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; cursor: pointer; font-size: 1.05rem; }
.ciclo-ficha[open] > summary { margin-bottom: 1rem; }
.ciclo-ficha h3 { margin: 1rem 0 .5rem; }

/* Comprobantes de pagos reportados: miniaturas que abren el archivo (fotos o PDF). */
.comprobantes { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: .35rem 0 0; }
.comprobantes a { display: flex; flex-direction: column; align-items: center; gap: .2rem; width: 6.5rem; text-decoration: none; }
.comprobantes img, .comprobantes .archivo-pdf {
  width: 6.5rem; height: 6.5rem; object-fit: cover; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--fondo);
}
.comprobantes .archivo-pdf { display: grid; place-items: center; font-weight: 700; color: var(--suave); }
.comprobantes small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--suave); }
details.reportar { margin: .75rem 0; }
details.reportar summary { cursor: pointer; font-weight: 600; }
.alerta-texto { color: var(--alerta); }
/* Enlaces con forma de botón (ej. Crear cuenta / Ya tengo cuenta en la invitación). */
a.boton { display: inline-block; padding: .5rem .9rem; border-radius: 8px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); text-decoration: none; }
a.boton.primario { background: var(--primario); color: var(--primario-texto); border-color: var(--primario); }

/* Borrar la cuenta y la política de privacidad */
button.peligro { background: #b3261e; color: #fff; border-color: #b3261e; width: 100%; }
.legible { max-width: 760px; margin: 2rem auto; line-height: 1.55; }
.legible h2 { margin-top: 1.5rem; font-size: 1.1rem; }

/* Mis natilleras: una tarjeta por natillera y, adentro, sus secciones */
.encabezado-con-accion { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.encabezado-con-accion .boton { white-space: nowrap; }
a.tarjeta-natillera { display: block; color: inherit; text-decoration: none; }
a.tarjeta-natillera:hover { border-color: var(--primario); }
.tarjeta-natillera .titulo-tarjeta { display: flex; justify-content: space-between; align-items: center; }
.tarjeta-natillera h2 { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .4rem 0 .8rem; }
a.chip { text-decoration: none; } /* los chips que llevan a otro ciclo */
a.enlace-tarjeta { display: block; color: inherit; text-decoration: none; }
.codigo { font-size: 1.6rem; letter-spacing: .1em; }
.tarjeta-natillera .indicadores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.tarjeta-natillera .indicador { min-width: 0; padding: .6rem .75rem; }
.tarjeta-natillera .indicador strong { font-size: 1.1rem; }

/* Configuración (⚙): menú desplegable en el PC; en el celular sale como hoja desde la barra de abajo */
.ajustes { position: relative; }
.ajustes summary { list-style: none; cursor: pointer; display: inline-flex; padding: .25rem; color: var(--texto); border-radius: 8px; }
.ajustes summary::-webkit-details-marker { display: none; }
.ajustes summary:hover, .ajustes[open] summary { background: var(--fondo); }
.menu-ajustes {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 40; min-width: 240px;
  display: flex; flex-direction: column; padding: .5rem;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: 0 8px 24px rgb(0 0 0 / 25%);
}
.menu-ajustes a, .menu-ajustes button { padding: .55rem .6rem; border-radius: 8px; text-align: left; text-decoration: none; color: var(--texto); font-size: .95rem; }
.menu-ajustes a:hover, .menu-ajustes button:hover { background: var(--fondo); }
.menu-quien { display: flex; flex-direction: column; padding: .4rem .6rem .6rem; margin-bottom: .25rem; border-bottom: 1px solid var(--borde); }
.menu-quien small { color: var(--suave); }
.menu-salir { border-top: 1px solid var(--borde); margin-top: .25rem; padding-top: .25rem; }
.menu-salir button { width: 100%; color: var(--alerta); }
.barra nav.menu-escritorio a { padding: .35rem .6rem; border-radius: 8px; color: var(--suave); }
.barra nav.menu-escritorio a[aria-current="page"] { color: var(--texto); background: var(--fondo); font-weight: 600; }
@media (max-width: 700px) {
  .barra .campana, .barra .ajustes { display: none; }  /* en el celular están en la barra de abajo */
}

/* Mis natilleras en pantalla grande: tarjetas en rejilla */
.rejilla-natilleras { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.rejilla-natilleras .tarjeta { margin: 0; }
.pagina-natillera { max-width: 980px; }
.barra-inferior .hoja a, .barra-inferior .hoja button.enlace { color: var(--texto); }
.barra-inferior .hoja .menu-salir button { color: var(--alerta); }

/* Vista previa de los campos de plata y del interés (comun.js) */
.vista-campo { display: block; margin-top: .2rem; font-weight: 400; font-size: .85rem; color: var(--suave); font-variant-numeric: tabular-nums; }
.vista-campo:empty { display: none; }
[data-reparto-estado]:empty { display: none; }
[data-reparto-estado] { flex-basis: 100%; padding: .35rem .6rem; }

/* Pestañas del ciclo: las de todos los días y "Más" con las otras */
.pestanas-fila { display: flex; align-items: flex-end; gap: .25rem; border-bottom: 1px solid var(--borde); margin-bottom: 1rem; }
.pestanas-fila .pestanas { flex: 1; min-width: 0; border-bottom: 0; margin-bottom: 0; }
.contador-pestana {
  display: inline-block; min-width: 1.3rem; padding: 0 .35rem; border-radius: 999px; margin-left: .2rem;
  background: var(--alerta); color: #fff; font-size: .75rem; font-weight: 700; text-align: center; line-height: 1.3rem;
}
.pestanas-mas { position: relative; flex: none; }
.pestanas-mas summary {
  list-style: none; cursor: pointer; padding: .5rem .9rem; color: var(--suave); border-bottom: 2px solid transparent; white-space: nowrap;
}
.pestanas-mas summary::-webkit-details-marker { display: none; }
.pestanas-mas summary.activa { color: var(--texto); border-bottom-color: var(--primario); font-weight: 600; }
.menu-mas {
  position: absolute; right: 0; top: 100%; z-index: 40; min-width: 200px;
  display: flex; flex-direction: column; padding: .4rem;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: 0 8px 24px rgb(0 0 0 / 25%);
}
.menu-mas a { padding: .55rem .6rem; border-radius: 8px; text-decoration: none; color: var(--texto); }
.menu-mas a:hover { background: var(--fondo); }
.menu-mas a[aria-current="page"] { font-weight: 600; color: var(--primario); }

/* Para hoy (resumen del ciclo) */
.para-hoy h3 { margin-top: .9rem; font-size: .95rem; color: var(--suave); }
.tareas { list-style: none; margin: .4rem 0 0; padding: 0; }
.tareas li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; padding: .45rem 0; border-top: 1px solid var(--borde); }
.tareas li:first-child { border-top: 0; }
.tareas li.alerta-texto strong { color: var(--alerta); }
.tareas .boton.whatsapp { margin-left: auto; padding: .25rem .7rem; font-size: .85rem; }

/* Calendario de cuotas del socio: un cuadrito por mes con su estado */
.calendario-cuotas { list-style: none; margin: .5rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: .4rem; }
.calendario-cuotas li {
  display: flex; flex-direction: column; gap: .05rem; padding: .45rem .5rem; border-radius: 8px;
  border: 1px dashed var(--borde); color: var(--suave); font-size: .8rem; line-height: 1.25;
}
.calendario-cuotas strong { font-size: .95rem; color: var(--texto); text-transform: capitalize; }
.calendario-cuotas small { font-variant-numeric: tabular-nums; }
.calendario-cuotas .cuota-pagada { background: var(--ok-fondo); color: var(--ok); border: 1px solid transparent; }
.calendario-cuotas .cuota-parcial { background: var(--aviso-fondo); color: var(--aviso); border: 1px solid transparent; }
.calendario-cuotas .cuota-atrasada { background: var(--alerta-fondo); color: var(--alerta); border: 1px solid var(--alerta); }
.calendario-cuotas .cuota-pagada strong, .calendario-cuotas .cuota-parcial strong, .calendario-cuotas .cuota-atrasada strong { color: inherit; }
.calendario-cuotas .cuota-retirado { opacity: .55; }
.leyenda-cuotas { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .8rem; margin: 0; }
.leyenda-cuotas span { padding: .1rem .5rem; border-radius: 6px; border: 1px dashed var(--borde); }
.leyenda-cuotas .cuota-pagada { background: var(--ok-fondo); color: var(--ok); border-style: solid; border-color: transparent; }
.leyenda-cuotas .cuota-parcial { background: var(--aviso-fondo); color: var(--aviso); border-style: solid; border-color: transparent; }
.leyenda-cuotas .cuota-atrasada { background: var(--alerta-fondo); color: var(--alerta); border-style: solid; border-color: var(--alerta); }

/* Recibo: de dónde sale lo que se entrega (retiro) */
.recibo { margin: .5rem 0; max-width: 420px; font-variant-numeric: tabular-nums; }
.recibo div { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; }
.recibo dt { font-weight: 400; }
.recibo dd { margin: 0; text-align: right; }
.recibo .resta dd { color: var(--alerta); }
.recibo .total { border-top: 1px solid currentColor; margin-top: .3rem; padding-top: .4rem; font-weight: 700; }
.aviso .recibo { color: var(--texto); }
div.aviso > p { margin: 0 0 .4rem; }

/* Mis natilleras: unirse con código va primero */
.unirse-primero .fila-formulario { margin: 0; }
.unirse-primero label { flex: 1; margin-bottom: 0; }

/* Aviso de que una acción falló (sin internet, sesión vencida...), abajo y encima de todo. */
.falla-global { position: fixed; left: 1rem; right: 1rem; bottom: 5rem; z-index: 50; margin: 0 auto; max-width: 36rem;
  padding: .8rem 1rem; border-radius: var(--radio); background: var(--alerta-fondo); color: var(--alerta);
  border: 1px solid var(--alerta); box-shadow: var(--sombra); }