/* Ajustes propios sobre Pico.css */

:root {
  --c-pagado: #2b8a3e;
  --c-pagado-bg: #d3f9d8;
  --c-pendiente: #b07800;
  --c-pendiente-bg: #fff3bf;
  --c-disponible: #1864ab;
  --c-disponible-bg: #d0ebff;
  --c-vencido: #c92a2a;
  --c-vencido-bg: #ffe3e3;
  --c-omitido: #6c757d;
  --c-omitido-bg: #e9ecef;
  --sidebar-w: 13rem;
  /* Color de texto resuelto en :root (dentro de <a>, Pico redefine --pico-color) */
  --texto: var(--pico-color);
  --pico-font-size: 100%;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-pagado: #69db7c;
    --c-pagado-bg: #1b3a24;
    --c-pendiente: #ffd43b;
    --c-pendiente-bg: #3d3214;
    --c-disponible: #74c0fc;
    --c-disponible-bg: #16304a;
    --c-vencido: #ff8787;
    --c-vencido-bg: #4a1f22;
    --c-omitido: #adb5bd;
    --c-omitido-bg: #2b3036;
  }
}

/* ---------- Estructura ---------- */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1rem;
  border-right: 1px solid var(--pico-muted-border-color);
  background: var(--pico-card-sectioning-background-color);
}

.sidebar nav,
.sidebar nav ul {
  display: block;
  margin: 0;
  padding: 0;
}

.sidebar nav li {
  display: block;
  padding: 0;
  list-style: none;
}

.sidebar nav a {
  display: block;
  margin: 0 0 0.25rem;
  padding: 0.45rem 0.75rem;
  border-radius: var(--pico-border-radius);
  color: var(--texto);
  text-decoration: none;
}

.sidebar nav a:hover {
  background: var(--pico-secondary-focus);
}

.sidebar nav a[aria-current='page'] {
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
}

.logo {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--texto);
  text-decoration: none;
  padding: 0 0.75rem;
}

.logo-icono {
  color: var(--pico-primary);
}

.salir {
  margin-top: auto;
}

.salir button {
  width: 100%;
  margin: 0;
  padding: 0.35rem;
  font-size: 0.9rem;
}

.usuario-actual {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  color: var(--pico-muted-color);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contenido {
  min-width: 0;
  padding: 1.5rem clamp(1rem, 3vw, 2.5rem) 3rem;
  max-width: 78rem;
}

.encabezado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.encabezado h1 {
  margin: 0;
}

@media (max-width: 768px) {
  .shell {
    grid-template-columns: 1fr;
    /* La barra no se estira cuando el contenido es más corto que la pantalla */
    grid-template-rows: auto 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-right: 0;
    border-bottom: 1px solid var(--pico-muted-border-color);
  }

  .sidebar nav ul {
    display: flex;
    gap: 0.25rem;
  }

  .sidebar nav a {
    margin: 0;
  }

  .logo {
    padding: 0;
  }

  .logo-texto {
    display: none;
  }

  .sidebar nav a {
    padding: 0.35rem 0.6rem;
  }

  .sidebar nav ul {
    flex-wrap: wrap;
  }

  .salir {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0 auto;
  }

  .usuario-actual {
    margin: 0;
  }

  .salir button {
    padding: 0.3rem 0.6rem;
  }
}

/* ---------- Utilidades ---------- */

.muted {
  color: var(--pico-muted-color);
}

.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.aviso {
  padding: 0.6rem 0.9rem;
  border-left: 4px solid var(--c-pagado);
  background: var(--c-pagado-bg);
  border-radius: var(--pico-border-radius);
}

.error {
  color: var(--c-vencido) !important;
}

button.link {
  display: inline;
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pico-primary);
  font-size: inherit;
  text-decoration: underline;
  text-decoration-color: var(--pico-primary-underline);
  cursor: pointer;
}

.vacio {
  text-align: center;
}

/* ---------- Gestión ---------- */

.tabla-items td {
  vertical-align: middle;
}

.tabla-items small {
  display: block;
}

.categoria {
  color: var(--pico-muted-color);
}

.etiqueta {
  display: inline-block !important;
  margin-top: 0.15rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--c-omitido-bg);
  color: var(--c-omitido);
  font-size: 0.75rem;
}

tr.inactivo td {
  opacity: 0.6;
}

.chip {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  border: 1px solid currentColor;
}

.chip-gasto {
  color: var(--pico-primary);
}

.chip-tarea {
  color: var(--pico-muted-color);
  border-style: dashed;
}

.chip-tarjeta {
  color: var(--c-disponible);
}

.acciones-fila {
  white-space: nowrap;
  text-align: right;
}

.acciones-fila form {
  display: inline;
  margin: 0 0 0 0.75rem;
}

.form-item .acciones {
  display: flex;
  gap: 0.75rem;
}

.form-item .acciones > * {
  width: auto;
  margin: 0;
}

.vista-previa {
  margin-bottom: var(--pico-spacing);
  padding: 0.6rem 0.9rem;
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-sectioning-background-color);
}

.vista-previa p {
  margin: 0;
}

/* Sin JS: se ocultan los campos que no aplican según la selección */
.form-item:has(select[name='tipo'] option[value='tarea']:checked) .solo-gasto,
.form-item:has(select[name='frecuencia_meses'] option[value='0']:checked) .solo-recurrente,
.form-item:has(input[name='cuotas']:placeholder-shown) .solo-cuotas {
  visibility: hidden;
}

.form-item:has(select[name='tipo'] option[value='tarea']:checked) .solo-gasto,
.form-item:has(select[name='frecuencia_meses'] option[value='0']:checked) .solo-recurrente {
  display: none;
}

/* Tarjeta de crédito: es mensual y con estado de cuenta, así que no lleva monto, moneda ni regla de fechas. */
.solo-tarjeta {
  display: none;
}

.form-item:has(select[name='tipo'] option[value='tarjeta']:checked) .no-tarjeta {
  display: none;
}

.form-item:has(select[name='tipo'] option[value='tarjeta']:checked) .solo-tarjeta {
  display: revert;
}

.ayuda-tarjeta {
  color: var(--pico-muted-color);
  font-size: 0.9rem;
}

.vista-previa ul {
  margin: 0.25rem 0 0.4rem;
  padding-left: 1.2rem;
}

.vista-previa li {
  list-style: disc;
  margin: 0;
}

/* ---------- Estados (badges y marcas) ---------- */

.badge {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge.estado-pagado { background: var(--c-pagado-bg); color: var(--c-pagado); }
.badge.estado-pendiente { background: var(--c-pendiente-bg); color: var(--c-pendiente); }
.badge.estado-vencido { background: var(--c-vencido-bg); color: var(--c-vencido); }
.badge.estado-disponible { background: var(--c-disponible-bg); color: var(--c-disponible); }
.badge.estado-omitido { background: var(--c-omitido-bg); color: var(--c-omitido); }

/* ---------- Tarjetas de totales ---------- */

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.tarjeta {
  margin: 0;
  padding: 1rem 1.1rem;
  border-top: 4px solid var(--pico-muted-border-color);
}

.tarjeta.total { border-top-color: var(--pico-primary); }
.tarjeta.estado-pagado { border-top-color: var(--c-pagado); }
.tarjeta.estado-pendiente { border-top-color: var(--c-pendiente); }
.tarjeta.estado-vencido { border-top-color: var(--c-vencido); }

.tarjeta h2 {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
}

.montos {
  margin: 0;
  padding: 0;
}

.montos li {
  list-style: none;
  text-align: left;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.35;
}

.tarjetas.compacto {
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.tarjetas.compacto .tarjeta {
  padding: 0.6rem 0.8rem;
  box-shadow: none;
  border: 1px solid var(--pico-muted-border-color);
  border-top-width: 3px;
}

.tarjetas.compacto .montos li {
  font-size: 1.05rem;
}

/* ---------- Filas de vencimientos ---------- */

.vencs {
  margin: 0;
  padding: 0;
}

.venc {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr) auto auto;
  grid-template-areas: 'marca info monto badge' 'marca acciones acciones acciones';
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.35rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--pico-muted-border-color);
  list-style: none;
}

.venc:last-child {
  border-bottom: 0;
}

.venc-marca {
  grid-area: marca;
  align-self: stretch;
  border-radius: 2px;
  background: var(--c-pendiente);
}

.venc.estado-pagado .venc-marca { background: var(--c-pagado); }
.venc.estado-vencido .venc-marca { background: var(--c-vencido); }
.venc.estado-disponible .venc-marca { background: var(--c-disponible); }
.venc.estado-omitido .venc-marca { background: var(--c-omitido); }

/* Tareas: marca hueca y punteada para distinguirlas de los gastos */
.venc.tipo-tarea .venc-marca {
  background: none !important;
  border-left: 3px dotted var(--c-pendiente);
}
.venc.tipo-tarea.estado-pagado .venc-marca { border-left-color: var(--c-pagado); }
.venc.tipo-tarea.estado-vencido .venc-marca { border-left-color: var(--c-vencido); }
.venc.tipo-tarea.estado-disponible .venc-marca { border-left-color: var(--c-disponible); }
.venc.tipo-tarea.estado-omitido .venc-marca { border-left-color: var(--c-omitido); }

.venc-info { grid-area: info; min-width: 0; }
.venc-info small { display: block; }
.venc-nombre { font-weight: 600; }
.venc-monto { grid-area: monto; font-weight: 600; }
.monto-linea { display: block; white-space: nowrap; }
.venc .badge { grid-area: badge; }

.venc.estado-pagado .venc-nombre,
.venc.estado-omitido .venc-nombre {
  color: var(--pico-muted-color);
}
.venc.estado-omitido .venc-nombre { text-decoration: line-through; }

.venc-acciones {
  grid-area: acciones;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.venc-acciones .accion {
  display: flex;
  gap: 0.4rem;
  margin: 0;
}

.venc-acciones button,
.venc-acciones input {
  width: auto;
  margin: 0;
  padding: 0.2rem 0.65rem;
  font-size: 0.85rem;
  height: auto;
}

.venc-acciones input.monto-real {
  width: 7.5rem;
}

.venc.htmx-request {
  opacity: 0.55;
}

/* ---------- Calendario ---------- */

.cal-botones {
  display: flex;
  gap: 0.4rem;
}

.cal-botones a {
  margin: 0;
  padding: 0.35rem 0.85rem;
}

.cal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: 1.25rem;
  align-items: start;
}

.cal-grilla {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-top: 1px solid var(--pico-muted-border-color);
  border-left: 1px solid var(--pico-muted-border-color);
}

.cal-cab,
.cal-vacio,
.cal-dia {
  border-right: 1px solid var(--pico-muted-border-color);
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.cal-cab {
  padding: 0.35rem;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--pico-muted-color);
}

.cal-vacio {
  background: var(--pico-card-sectioning-background-color);
}

.cal-dia {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-height: 6.25rem;
  padding: 0.3rem;
  color: var(--texto);
  text-decoration: none;
  transition: background-color 0.12s;
}

.cal-dia:hover {
  background: var(--pico-secondary-focus);
}

.cal-dia.sel {
  outline: 2px solid var(--pico-primary);
  outline-offset: -2px;
}

.cal-num {
  display: inline-grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.cal-dia.hoy .cal-num {
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
  font-weight: 700;
}

.marcas {
  margin: 0;
  padding: 0;
  color: var(--texto);
}

.marca,
.marca-mas {
  list-style: none;
  margin: 0 0 0.15rem;
  overflow: hidden;
  font-size: 0.72rem;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Gasto: píldora rellena. Tarea: píldora hueca con borde punteado y ✓ */
.marca {
  padding: 0 0.35rem;
  border-radius: 4px;
  border-left: 3px solid var(--c-pendiente);
  background: var(--c-pendiente-bg);
}

.marca.estado-pagado { border-left-color: var(--c-pagado); background: var(--c-pagado-bg); }
.marca.estado-vencido { border-left-color: var(--c-vencido); background: var(--c-vencido-bg); }
.marca.estado-disponible { border-left-color: var(--c-disponible); background: var(--c-disponible-bg); }
.marca.estado-omitido {
  border-left-color: var(--c-omitido);
  background: var(--c-omitido-bg);
  text-decoration: line-through;
}

.marca.tipo-tarea {
  background: transparent;
  border: 1px dashed var(--c-pendiente);
}
.marca.tipo-tarea::before { content: '✓ '; }
.marca.tipo-tarea.estado-pagado { border-color: var(--c-pagado); }
.marca.tipo-tarea.estado-vencido { border-color: var(--c-vencido); }
.marca.tipo-tarea.estado-disponible { border-color: var(--c-disponible); }
.marca.tipo-tarea.estado-omitido { border-color: var(--c-omitido); }

.marca-mas {
  color: var(--pico-muted-color);
}

/* Período "Para pagar" (recordatorio/ventana): banda continua hasta el vencimiento.
   Las bandas se extienden sobre el padding y el borde de la celda para no cortarse. */
.marca,
.tramo,
.carril-vacio {
  height: 1.35em;
}

.tramo,
.carril-vacio {
  list-style: none;
  margin: 0 0 0.15rem;
  font-size: 0.72rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tramo {
  padding: 0 0.35rem;
  background: var(--c-disponible-bg);
  color: var(--texto);
}

.tramo.estado-vencido {
  background: var(--c-vencido-bg);
}

.tramo.ini {
  border-left: 3px solid var(--c-disponible);
  border-radius: 4px 0 0 4px;
}

.tramo.estado-vencido.ini {
  border-left-color: var(--c-vencido);
}

.tramo:not(.corte) {
  margin-right: calc(-0.3rem - 1px);
}

.tramo.cont,
.marca.tramo-fin.cont {
  margin-left: calc(-0.3rem - 1px);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.tramo.cont {
  padding-left: calc(0.35rem + 0.3rem + 1px);
}

.tramo.corte {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* El vencimiento que cierra una banda continúa la línea (sin borde izquierdo). */
.marca.tramo-fin.cont {
  border-left: 0;
  padding-left: calc(0.35rem + 0.3rem + 1px);
}

.leyenda .tramo {
  display: inline-block;
  width: 1.4rem;
  height: 0.9rem;
  margin: 0;
  border-radius: 4px;
}

.leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0.6rem 0 0;
  padding: 0;
  font-size: 0.8rem;
  color: var(--pico-muted-color);
}

.leyenda li {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.leyenda .marca {
  display: inline-block;
  width: 1.4rem;
  height: 0.9rem;
  margin: 0;
}

.cal-totales {
  margin-top: 1.25rem;
}

.cal-totales {
  margin-bottom: 1.25rem;
}

.cal-totales .tarjetas {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 640px) {
  .cal-totales .tarjetas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.panel-dia {
  position: sticky;
  top: 1rem;
  padding: 1rem 1.1rem;
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
  box-shadow: var(--pico-card-box-shadow);
}

.panel-cab {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.5rem;
}

.panel-cab h2 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.cerrar {
  font-size: 1.4rem;
  line-height: 1;
  text-decoration: none;
  color: var(--pico-muted-color);
}

.cal-lista {
  display: none;
}

.cal-lista-dia h3 {
  margin: 1rem 0 0.25rem;
  font-size: 0.95rem;
}

.cal-lista-dia.hoy h3 {
  color: var(--pico-primary);
}

@media (max-width: 1024px) {
  .cal-layout {
    grid-template-columns: 1fr;
  }

  .panel-dia {
    position: static;
  }
}

/* En móvil: lista por día en lugar de grilla */
@media (max-width: 768px) {
  .cal-nav h1 {
    font-size: 1.5rem;
  }

  .cal-grilla,
  .cal-leyenda,
  .panel-dia {
    display: none;
  }

  .cal-lista {
    display: block;
  }

  .venc {
    grid-template-columns: 4px minmax(0, 1fr) auto;
    grid-template-areas: 'marca info badge' 'marca monto monto' 'marca acciones acciones';
  }

  .venc-monto {
    text-align: left;
  }
}

/* ---------- Resumen ---------- */

.resumen-listas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: 1rem 2rem;
}

.resumen-listas > section {
  min-width: 0;
}

.resumen-listas h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
}

.contador {
  display: inline-grid;
  place-items: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  font-size: 0.8rem;
  background: var(--c-omitido-bg);
  color: var(--c-omitido);
}

.contador.estado-vencido {
  background: var(--c-vencido-bg);
  color: var(--c-vencido);
}

.contador.estado-disponible {
  background: var(--c-disponible-bg);
  color: var(--c-disponible);
}

@media (max-width: 768px) {
  .resumen-listas {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Login ---------- */

.login {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 1rem;
}

.login article {
  width: min(24rem, 100%);
}

.login h1 {
  margin: 0;
  font-size: 1.4rem;
}

/* ---------- Gestión: detalle de cuotas ("Ver más") ---------- */

.acciones-fila > a + a {
  margin-left: 0.75rem;
}

tr.detalle > td {
  padding: 0.25rem 0 1rem;
  background: var(--pico-card-sectioning-background-color);
}

.detalle-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.25rem;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
}

.detalle-total {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}

.detalle-total .montos {
  display: inline-flex;
  gap: 0.75rem;
}

.detalle-total .montos li {
  font-size: 0.9rem;
}

.detalle-scroll {
  max-height: 22rem;
  overflow-y: auto;
  margin: 0 1rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: var(--pico-background-color);
}

.tabla-cuotas {
  margin: 0;
  font-size: 0.88rem;
}

.tabla-cuotas th,
.tabla-cuotas td {
  padding: 0.3rem 0.75rem;
}

.tabla-cuotas thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--pico-background-color);
}

.tabla-cuotas tr.proxima td {
  font-weight: 600;
}

.tabla-cuotas tr.proxima td:first-child {
  box-shadow: inset 4px 0 var(--c-disponible);
}

.tabla-items td:nth-child(5) {
  white-space: nowrap;
}

/* ---------- Modales y comprobantes ---------- */

dialog.modal > article {
  width: min(32rem, 100%);
}

dialog.modal.ancho > article {
  width: min(56rem, 100%);
}

dialog.modal header h2 {
  margin: 0;
  font-size: 1.15rem;
}

#modal-error:empty {
  display: none;
}

.acciones-modal {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: end;
  gap: 0.6rem;
}

.acciones-modal > *,
.acciones-modal button,
.acciones-modal [role='button'] {
  width: auto;
  margin: 0;
}

.acciones-modal form {
  margin: 0;
}

.acciones-modal .reemplazar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.6rem;
  width: 100%;
  padding-top: 0.75rem;
  border-top: 1px solid var(--pico-muted-border-color);
}

.acciones-modal .reemplazar label {
  flex: 1 1 16rem;
  margin: 0;
}

.vista-comprobante {
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-sectioning-background-color);
}

.vista-comprobante img {
  max-width: 100%;
  max-height: 65vh;
  object-fit: contain;
}

.vista-comprobante iframe {
  width: 100%;
  height: 65vh;
  border: 0;
}

.sin-vista {
  margin: 0;
  padding: 2.5rem 1rem;
  text-align: center;
}

a.clip {
  align-self: center;
  font-size: 0.85rem;
  white-space: nowrap;
}

.celda-comprobante {
  white-space: nowrap;
}

.pagina-modal .acciones-modal {
  justify-content: flex-start;
}

/* ---------- Facturas y gastos con fecha variable ---------- */

:root {
  --c-sin-factura: #7048e8;
  --c-sin-factura-bg: #efeaff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-sin-factura: #b197fc;
    --c-sin-factura-bg: #2b2245;
  }
}

.badge.estado-sin_factura {
  background: var(--c-sin-factura-bg);
  color: var(--c-sin-factura);
}

.venc.estado-sin_factura .venc-marca {
  background: repeating-linear-gradient(180deg, var(--c-sin-factura) 0 4px, transparent 4px 7px);
}

.contador.estado-sin_factura {
  background: var(--c-sin-factura-bg);
  color: var(--c-sin-factura);
}

.venc-acciones a.boton-factura {
  margin: 0;
  padding: 0.2rem 0.65rem;
  font-size: 0.85rem;
  width: auto;
}

a.enlace-factura {
  align-self: center;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* "Este mes se paga": lo que falta cargar, debajo del calendario */
.por-cargar {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem 0.5rem;
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
  box-shadow: var(--pico-card-box-shadow);
}

.por-cargar-cab {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.por-cargar-cab h2 {
  margin: 0 0 0.15rem;
  font-size: 1.05rem;
}

.por-cargar-total {
  text-align: right;
}

.por-cargar-total small {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.por-cargar-total .montos li {
  text-align: right;
  font-size: 1rem;
}

.por-cargar-grupo h3 {
  margin: 0.75rem 0 0.1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
}

.por-cargar ul {
  margin: 0;
  padding: 0;
}

.por-cargar-fila {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.25rem 0.9rem;
  padding: 0.6rem 0;
  list-style: none;
  border-top: 1px solid var(--pico-muted-border-color);
}

.por-cargar-grupo h3 + ul .por-cargar-fila:first-child {
  border-top: 0;
}

.por-cargar-marca {
  align-self: stretch;
  border-radius: 2px;
  background: repeating-linear-gradient(180deg, var(--c-sin-factura) 0 4px, transparent 4px 7px);
}

.por-cargar-info strong {
  display: block;
}

.por-cargar-info small {
  font-size: 0.8rem;
}

.por-cargar-monto {
  text-align: right;
  font-weight: 600;
}

.por-cargar-monto small {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
}

.por-cargar-fila a.boton-factura {
  margin: 0;
  padding: 0.25rem 0.75rem;
  font-size: 0.85rem;
  width: auto;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .por-cargar-fila {
    grid-template-columns: 4px minmax(0, 1fr) auto;
  }

  .por-cargar-fila a.boton-factura {
    grid-column: 2 / -1;
    justify-self: start;
  }
}

.plantillas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.plantillas a {
  margin: 0;
  padding: 0.3rem 0.8rem;
  font-size: 0.9rem;
}

.check-factura {
  margin-bottom: var(--pico-spacing);
}

.check-factura small {
  display: block;
  margin-top: 0.25rem;
  color: var(--pico-muted-color);
}

.si-variable {
  display: none;
}

/* Solo aplica a gastos: si el tipo es tarea, la casilla se ignora. */
.form-item:has(input[name='con_factura']:checked):not(:has(option[value='tarea']:checked)) .si-variable {
  display: inline;
}

.form-item:has(input[name='con_factura']:checked):not(:has(option[value='tarea']:checked)) .si-fija,
.form-item:has(input[name='con_factura']:checked):not(:has(option[value='tarea']:checked)) .solo-fecha-fija {
  display: none;
}

.archivo-actual {
  font-size: 0.9rem;
}

.acciones-modal .quitar {
  margin-right: auto;
}

/* ---------- Datos para pagar ---------- */

.datos-pago {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  margin-bottom: 0.9rem;
  font-size: 0.9rem;
}

.detalle-cab .datos-pago {
  margin: 0;
}

.dato-pago {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

button.copiar {
  width: auto;
  margin: 0;
  padding: 0.05rem 0.45rem;
  font-size: 0.75rem;
  border-radius: 999px;
  background: transparent;
  color: var(--pico-primary);
  border: 1px solid var(--pico-primary-border);
}

a.boton-pagar {
  width: auto;
  margin: 0;
  padding: 0.25rem 0.8rem;
  font-size: 0.85rem;
}

a.enlace-pagar {
  align-self: center;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

.acciones-fila > a.enlace-pagar + a {
  margin-left: 0.75rem;
}

.datos-pago-form {
  margin-bottom: var(--pico-spacing);
  padding: 0.75rem 1rem 0;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
}

.datos-pago-form legend {
  padding: 0 0.4rem;
  font-weight: 600;
}

.tabla-items td small.muted {
  display: block;
}

/* ---------- Usuarios ---------- */

.aviso-info {
  padding: 0.6rem 0.9rem;
  border-left: 4px solid var(--c-pendiente);
  background: var(--c-pendiente-bg);
  border-radius: var(--pico-border-radius);
}

.tabla-usuarios {
  margin-bottom: 2rem;
}

/* ---------- Historial ---------- */

.dia-historial h2 {
  margin: 1.5rem 0 0.5rem;
  font-size: 1rem;
  color: var(--pico-muted-color);
}

.eventos {
  margin: 0;
  padding: 0;
  list-style: none;
}

.eventos .evento {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--pico-muted-border-color);
  list-style: none;
}

.evento time {
  color: var(--pico-muted-color);
  font-variant-numeric: tabular-nums;
}

.evento p {
  margin: 0;
}

.cargar-mas {
  margin-top: 1.5rem;
  text-align: center;
}

/* ---------- Tablas con scroll horizontal (móvil) ---------- */

.tabla-scroll {
  overflow-x: auto;
}

/* ---------- Auto ---------- */

.acciones-encabezado,
.acciones-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.acciones-encabezado [role='button'] {
  margin: 0;
}

.acciones-form {
  justify-content: flex-end;
}

.acciones-form button,
.acciones-form [role='button'] {
  width: auto;
  margin: 0;
}

.check-tanque small {
  display: block;
  margin-top: 0.25rem;
}

.indicadores-auto .tarjeta p {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  text-align: left;
}

.tabla-auto-totales tr.total th,
.tabla-auto-totales tr.total td {
  border-top: 2px solid var(--pico-muted-border-color);
  font-weight: 700;
}

.tabla-auto-totales .montos li {
  font-size: 1rem;
  font-weight: inherit;
  text-align: right;
}

.tabla-auto td,
.tabla-auto th {
  white-space: nowrap;
}

.anios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 1.5rem 0 0;
}

.anios a[aria-current='page'] {
  font-weight: 700;
  text-decoration: none;
  color: var(--pico-color);
}

.borrar-gasto {
  display: flex;
  justify-content: flex-end;
}

.borrar-gasto button {
  width: auto;
  color: var(--c-vencido);
  border-color: var(--c-vencido);
}

/* ---------- Tarjetas: lectura con IA y movimientos ---------- */

.form-leer .leyendo {
  display: none;
  color: var(--c-disponible);
  font-weight: 600;
}

.form-leer .leyendo.htmx-request {
  display: block;
}

.otra-opcion {
  margin-top: var(--pico-spacing);
  border-top: 1px solid var(--pico-muted-border-color);
  padding-top: 0.75rem;
}

.otra-opcion summary {
  color: var(--pico-muted-color);
}

.movimientos-leidos {
  margin-bottom: var(--pico-spacing);
}

.movimientos-leidos .overflow-auto {
  max-height: 18rem;
}

.tabla-movimientos {
  font-size: 0.9rem;
}

.tabla-movimientos.compacta {
  margin-bottom: 0.5rem;
}

.tabla-movimientos td,
.tabla-movimientos th {
  padding: 0.35rem 0.5rem;
}

.tabla-movimientos tfoot th {
  font-weight: 600;
}

.tabla-movimientos tr.mov-pago td.num {
  color: var(--c-pagado);
}

.chip-mov {
  margin-left: 0.4rem;
  font-size: 0.7rem;
  color: var(--pico-muted-color);
}

.chip-anualidad {
  color: var(--c-pendiente);
}

.periodos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--pico-spacing);
}

.periodos a {
  margin: 0;
  padding: 0.25rem 0.7rem;
  font-size: 0.85rem;
}

.lista-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: var(--pico-spacing);
}

.tarjeta-credito header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}

.tarjeta-credito h2 {
  margin: 0;
  font-size: 1.15rem;
}

.tabla-meses {
  margin: 0;
  font-size: 0.9rem;
}

.tabla-meses td {
  padding: 0.4rem 0.5rem;
}

.tabla-meses td:first-child small,
.tabla-meses td.num small {
  display: block;
}

.tabla-meses td,
.tabla-meses th {
  white-space: nowrap;
}

.mes-proximo summary {
  margin-bottom: 0.4rem;
}

/* Resumen: "Próximos 14 días" plegado */
.resumen-plegable > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding: 0.25rem 0;
}

.resumen-plegable > summary h2 {
  margin: 0;
}

.resumen-plegable > summary::after {
  margin-left: auto;
}

.resumen-listas > .seccion-ancha {
  grid-column: 1 / -1;
}

.proximo-dia h3 {
  margin: 0.9rem 0 0.15rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.proximo-dia h3::first-letter {
  text-transform: uppercase;
}

.proximo-dia h3 .muted {
  font-weight: 400;
}