/* Identidad visual de Bulliapp: los colores salen del logo del Jardín
   Infantil Los Bulliciosos (verde con espiral amarilla). Los tonos oscuros
   (--verde-oscuro, --verde-profundo) existen para cumplir contraste AA
   (4.5:1) sobre blanco y sobre amarillo: la barra usa verde oscuro y no el
   verde puro del logo porque el texto blanco sobre #2e9c3f no alcanza AA. */

@font-face {
  font-family: "Baloo 2";
  src: url("fuentes/baloo2-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fuentes/nunito-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fuentes/nunito-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --verde: #2e9c3f;
  --verde-oscuro: #1d7a2c;
  --verde-profundo: #14541f;
  --verde-tenue: #e8f4ea;
  --amarillo: #f6d855;
  --amarillo-tenue: #fdf6d8;
  --crema: #faf7ef;
  --papel: #ffffff;
  --tinta: #22302a;
  --suave: #5c6b62;
  --borde: #dcd8cc;
  --alerta: #b3261e;
  --exito: #1d7a2c;
  --informativo: #175e91;
  --advertencia: #8a5a00;
  --radio: 12px;
  --sombra: 0 1px 3px rgba(20, 84, 31, .08), 0 4px 14px rgba(20, 84, 31, .06);
  --fuente-titulos: "Baloo 2", system-ui, "Segoe UI", sans-serif;
  --fuente-cuerpo: "Nunito", system-ui, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  font-size: 18px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--crema);
}

main { max-width: 1100px; margin: 0 auto; padding: 24px 16px 64px; }

h1, h2 { font-family: var(--fuente-titulos); font-weight: 700; color: var(--verde-profundo); }
h1 { font-size: 32px; margin: 0 0 4px; }
h2 { font-size: 24px; margin: 32px 0 12px; }

a { color: var(--verde-oscuro); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--amarillo);
  outline-offset: 2px;
}

/* ── Barra de navegación ─────────────────────────────────────────────── */
.barra {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  background: var(--verde-oscuro);
  padding: 10px 20px;
  box-shadow: var(--sombra);
}
.marca {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--fuente-titulos); font-weight: 700; font-size: 21px;
  text-decoration: none; color: #fff;
}
.logo-marca {
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--amarillo);
}
.barra nav { display: flex; gap: 6px; flex-wrap: wrap; }
.barra nav a {
  color: #fff; text-decoration: none; font-weight: 700;
  padding: 9px 13px; border-radius: 999px;
  transition: background-color .15s, color .15s;
}
.barra nav a:hover { background: var(--verde-profundo); }
.barra nav a.activo { background: var(--amarillo); color: var(--verde-profundo); }
/* Aviso de comprobantes por revisar: en la esquina derecha de la barra, en
   amarillo para que destaque del menú verde. Solo aparece cuando hay pendientes. */
.aviso-comprobantes {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--amarillo); color: var(--verde-profundo);
  font-weight: 700; text-decoration: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .35);
  transition: filter .15s;
}
.aviso-comprobantes:hover { filter: brightness(1.08); }
.aviso-comprobantes + .salir { margin-left: 0; }
.insignia {
  display: inline-block; min-width: 22px; padding: 0 7px; border-radius: 999px;
  background: var(--alerta); color: #fff; font-size: 13px; line-height: 22px; text-align: center;
}
.menu { position: relative; }
.menu summary {
  color: #fff; font-weight: 700; text-decoration: none;
  padding: 9px 13px; border-radius: 999px; cursor: pointer;
  list-style: none;
  transition: background-color .15s, color .15s;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: "\25BE"; margin-left: 6px; }
.menu summary:hover { background: var(--verde-profundo); }
.menu summary.activo { background: var(--amarillo); color: var(--verde-profundo); }
.menu-panel {
  position: absolute; top: 100%; left: 0; margin-top: 4px;
  background: var(--verde-oscuro); border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
  min-width: 220px; max-width: calc(100vw - 24px); z-index: 20;
}
.menu[open] { z-index: 21; }
.menu-panel a { width: 100%; }
.salir { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.salir span { color: var(--verde-tenue); }
.salir button {
  background: transparent; color: #fff; border: 1px solid var(--verde-tenue);
  padding: 8px 16px; font-size: 16px;
}
.salir button:hover { background: var(--verde-profundo); }

/* ── Superficies ─────────────────────────────────────────────────────── */
.tarjeta {
  background: var(--papel); border: 1px solid transparent;
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 20px; text-decoration: none; color: inherit; display: block;
}
a.tarjeta { transition: box-shadow .15s, border-color .15s; cursor: pointer; }
a.tarjeta:hover { border-color: var(--verde); box-shadow: 0 4px 18px rgba(20, 84, 31, .14); }
.tarjeta-angosta { max-width: 420px; margin: 60px auto; }
.tarjetas { display: flex; gap: 16px; flex-wrap: wrap; margin: 24px 0; }
.tarjetas .tarjeta { flex: 1 1 240px; }
.numero {
  display: block; font-size: 38px; font-weight: 700;
  font-family: var(--fuente-titulos); color: var(--verde-profundo);
}
.etiqueta { color: var(--suave); }
.detalle { display: block; margin-top: 6px; font-size: 13px; color: var(--suave); }

.logo-ingreso {
  display: block; width: 96px; height: 96px; border-radius: 50%;
  margin: 0 auto 16px; border: 3px solid var(--amarillo);
}

/* ── Formularios ─────────────────────────────────────────────────────── */
label { display: block; margin: 16px 0 4px; font-weight: 700; }
input, select, textarea {
  width: 100%; padding: 12px; font-size: 18px; font-family: inherit;
  border: 1px solid var(--borde); border-radius: 8px; background: var(--papel);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: 3px solid var(--amarillo); outline-offset: 1px;
  border-color: var(--verde);
}

button, .boton, .boton-principal {
  display: inline-block; padding: 12px 24px; min-height: 48px;
  font-size: 18px; font-family: inherit; font-weight: 700;
  border-radius: 999px; border: 1px solid var(--borde);
  background: var(--papel); color: var(--tinta);
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
button:hover, .boton:hover { border-color: var(--verde-oscuro); }
.boton-principal { background: var(--verde-oscuro); border-color: var(--verde-oscuro); color: #fff; }
.boton-principal:hover { background: var(--verde-profundo); border-color: var(--verde-profundo); }
.boton-peligro { background: var(--alerta); border-color: var(--alerta); color: #fff; }
.boton-peligro:hover { background: #8f1e17; border-color: #8f1e17; }
.acciones { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0; }

/* ── Tablas de dinero ────────────────────────────────────────────────── */
table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--papel); border-radius: var(--radio);
  box-shadow: var(--sombra); overflow: hidden;
}
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--verde-tenue); }
th {
  background: var(--verde-tenue); color: var(--verde-profundo);
  font-size: 16px; font-weight: 700;
}
tbody tr { transition: background-color .15s; }
tbody tr:hover { background: var(--amarillo-tenue); }
tfoot th { border-bottom: none; }
td.dinero, th.dinero { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-scroll { overflow-x: auto; }
/* Solo la cuadrícula de almuerzos: espacio para que el panel flotante de
   recarga de la última fila no quede recortado por el contenedor de scroll.
   El margen negativo cancela el alto extra en el flujo del documento. En las
   demás tablas este padding desplazaría la barra de scroll horizontal. */
.tabla-scroll.con-panel { padding-bottom: 240px; margin-bottom: -240px; }
tr.anulado td { text-decoration: line-through; color: var(--suave); }
.saldo-negativo { color: var(--alerta); font-weight: 700; }
.recarga { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.recarga input[type="number"] { width: 5em; }
.recarga select { width: auto; }

/* ── Avisos ──────────────────────────────────────────────────────────── */
.aviso { padding: 14px 16px; border-radius: var(--radio); border: 1px solid var(--borde); background: var(--papel); }
.aviso-error { background: #fdecea; border-color: var(--alerta); color: var(--alerta); }
.aviso-success { background: var(--verde-tenue); border-color: var(--exito); color: var(--verde-profundo); }
.aviso-info { background: #eaf1fd; border-color: var(--informativo); color: var(--informativo); }
/* "warning" es el tag que Django genera para messages.warning() (ver
   django.contrib.messages.constants.DEFAULT_TAGS); la plantilla base arma la
   clase como "aviso-{{ mensaje.tags }}", así que el nombre de esta clase
   tiene que coincidir exactamente con ese tag, no con una palabra en
   español. Ámbar, distinto del rojo de error y del azul informativo: un dato
   que hay que atender después, no el fallo de la operación que se acaba de
   ejecutar. Ver messages.warning() en jardin/cartera/views.py:vista_generar_cuentas. */
.aviso-warning { background: var(--amarillo-tenue); border-color: var(--advertencia); color: var(--advertencia); }

.fecha, .nav-semana, .nav-mes { color: var(--suave); margin-top: 0; }

/* ── Cuadrícula semanal de almuerzos ─────────────────────────────────── */
/* overflow: visible (no scoped a `table`, que necesita overflow: hidden
   para recortar las esquinas redondeadas de las demás tablas) para que el
   panel-recarga de la última fila, que abre hacia abajo, no quede cortado
   por esta caja. Ver .tabla-scroll: el mismo problema existía por el eje Y
   del overflow-x: auto según la spec de CSS Overflow. */
.cuadricula { overflow: visible; }
.cuadricula td { text-align: center; }
.cuadricula th.bloqueado { background: #eee; color: #999; }
.celda-pagada .celda-boton { background: var(--verde); color: #fff; }
.celda-pendiente .celda-boton { background: #c0392b; color: #fff; }
.celda-vacia .celda-boton { background: transparent; border: 1px dashed var(--verde-oscuro); min-width: 28px; min-height: 24px; }
.celda-bloqueada { background: #eee; color: #999; }
.celda-futura { background: #fafafa; }
.cuadricula th.hoy, .cuadricula td.hoy { outline: 2px solid var(--amarillo); }
.festivo-nombre { display: block; font-size: 0.7em; color: #999; }
.celda-boton { border-radius: 6px; cursor: pointer; padding: 2px 8px; }
.pestanas-areas { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.pestana { padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--verde-oscuro); color: var(--verde-oscuro); text-decoration: none; }
.pestana.activa { background: var(--verde); border-color: var(--verde); color: #fff; font-weight: 700; }
.panel-recarga { display: inline-block; position: relative; margin-left: 6px; }
.panel-recarga summary { list-style: none; cursor: pointer; display: inline-block; width: 22px; height: 22px; line-height: 20px; text-align: center; border-radius: 50%; border: 1px solid var(--verde-oscuro); color: var(--verde-oscuro); }
.panel-recarga summary::-webkit-details-marker { display: none; }
.panel-recarga[open] { z-index: 21; }
.panel-recarga[open] summary { background: var(--verde); color: #fff; }
.panel-recarga-cuerpo { position: absolute; right: 0; top: 100%; background: #fff; border: 1px solid var(--verde-oscuro); border-radius: 12px; box-shadow: var(--sombra); padding: 10px; min-width: 240px; max-width: calc(100vw - 24px); z-index: 21; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.vacio { color: var(--suave); padding: 32px 0; }
.ayuda { color: var(--suave); font-size: 0.9em; margin-top: 4px; }
.avisos-cortos { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px; }
.avisos-cortos li { background: var(--amarillo-tenue); color: var(--advertencia); border: 1px solid var(--advertencia); border-radius: 999px; padding: 2px 8px; font-size: 0.85em; white-space: nowrap; }
.imagen-detalle img { display: block; max-width: 100%; max-height: 80vh; border: 1px solid var(--borde); border-radius: 8px; }
.detalle-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 24px; margin: 16px 0; }
.detalle-datos dt { color: var(--suave); font-size: 0.9em; }
.detalle-datos dd { margin: 0 0 8px; }
.foto-contacto { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; vertical-align: middle; margin-right: 8px; border: 1px solid var(--borde); }

/* ── Calendario del mes (inicio) ─────────────────────────────────────── */
.calendario-envoltura { overflow-x: auto; }
.calendario-mes { width: 100%; table-layout: fixed; }
.calendario-mes td { vertical-align: top; min-height: 64px; height: 64px; padding: 4px; }
.calendario-mes .otro-mes { opacity: 0.35; }
.calendario-mes .dia-descanso { background: #f1efe8; }
.calendario-mes td.hoy { outline: 2px solid var(--amarillo); }
.numero-dia { font-weight: 700; }
.agregar-evento { float: right; text-decoration: none; color: var(--verde-oscuro); }
.evento-dia { display: block; font-size: 0.8em; background: var(--amarillo); color: #333; border-radius: 6px; padding: 1px 4px; margin-top: 2px; }
.proximos-eventos .evento-hoy { border-left: 4px solid var(--amarillo); padding-left: 8px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}