/* Celular y tablet chica. Se carga al final, por eso pisa a style.css y theme.css. */

/* Globito de cuentas pendientes (se usa también en escritorio) */
.nb { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: var(--gold); color: var(--on-accent, #14110a); font: 700 11px var(--font-body); }

@media (max-width: 800px) {
  /* ---- Menú inferior ---- */
  header nav#nav { padding-top: 4px; background: rgba(10, 10, 14, .96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  header nav#nav a { position: relative; flex: 1 1 auto; font-size: 10.5px; letter-spacing: -.01em; line-height: 1.15; gap: 3px; padding: 7px 2px; border-radius: 10px; }
  header nav#nav a svg { width: 21px; height: 21px; }
  .nl { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nx { display: none; }
  .nb { position: absolute; top: 1px; left: calc(50% + 6px); margin: 0; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; box-shadow: 0 0 0 2px rgba(10, 10, 14, .96); }
  header nav#nav a.on { background: rgba(var(--gold-rgb), .14); color: #fff; }
  #t { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 32px); text-align: center; }

  /* ---- Títulos y botones de acción ---- */
  main { padding: 20px 16px 120px; }
  .top { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 18px; }
  .top h1 { font-size: 30px; }
  .top p { font-size: 15.5px; }
  .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
  .acts .btn { width: 100%; text-align: center; padding: 12px 8px; font-size: 15px; }
  .acts .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .acts select { width: 100%; grid-column: 1 / -1; }

  /* ---- Tarjetas de cifras ---- */
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .stat { padding: 16px 16px 14px; min-width: 0; }
  .stat .l { font-size: 14px; }
  .stat .v { font-size: 24px; margin: 6px 0 8px; overflow-wrap: anywhere; }

  /* ---- Usuarios: cada cuenta como una tarjeta ---- */
  .ut tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: center; padding: 14px 2px; }
  .ut td:nth-child(1) { grid-column: 1 / -1; }
  .ut td:nth-child(2) { display: none; }
  .ut td:nth-child(3) { grid-column: 1; }
  .ut td:nth-child(4) { grid-column: 2; }
  .ut td:nth-child(5) { grid-column: 1 / -1; }
  .ut td:empty { display: none; }
  .ut .rsel { width: 100%; }
  .ut .btn { width: 100%; padding: 10px; }
  .pp > div { min-width: 0; overflow-wrap: anywhere; }

  /* ---- Listas: cada fila de tabla pasa a ser una tarjeta con dos líneas ---- */
  .dl tr, .dlt tr, .dnr tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; align-items: center; padding: 14px 2px; }
  .dl td, .dlt td, .dnr td { min-width: 0; }
  .pos, td.r.n { white-space: nowrap; }
  .dl td, .dlt td { overflow-wrap: anywhere; }

  /* Últimas donaciones (panel): nombre y monto arriba; concepto y fecha abajo */
  .dl td:nth-child(1) { grid-area: 2 / 2; justify-self: end; font-size: 13px; color: var(--ink-soft); }
  .dl td:nth-child(2) { grid-area: 1 / 1; font-weight: 600; }
  .dl td:nth-child(3) { grid-area: 2 / 1; font-size: 14px; }
  .dl td:nth-child(4) { grid-area: 1 / 2; justify-self: end; font-weight: 700; font-size: 16px; }

  /* Donaciones (consulta): donante y monto; concepto; fecha, tipo y origen */
  .dlt td:nth-child(2) { grid-area: 1 / 1; }
  .dlt td:nth-child(6) { grid-area: 1 / 2; justify-self: end; font-weight: 700; font-size: 16px; }
  .dlt td:nth-child(3) { grid-area: 2 / 1 / 2 / 3; font-size: 14.5px; }
  .dlt td:nth-child(1) { grid-area: 3 / 1; font-size: 13px; color: var(--ink-soft); }
  .dlt td:nth-child(4) { grid-area: 3 / 2; justify-self: end; font-size: 13px; color: var(--gold); font-weight: 600; }
  .dlt td:nth-child(5) { grid-area: 4 / 1; font-size: 12.5px; color: var(--ink-soft); }
  .dlt td:nth-child(7) { grid-area: 4 / 2; justify-self: end; }
  .dlt td:nth-child(7):empty { display: none; }

  /* Donantes (consulta): nombre y estado; teléfono y tipo; total y última donación */
  .dnr td:nth-child(1) { grid-area: 1 / 1; }
  .dnr td:nth-child(6) { grid-area: 1 / 2; justify-self: end; align-self: start; }
  .dnr td:nth-child(2) { grid-area: 2 / 1; font-size: 14px; color: var(--ink-soft); padding-top: 2px; }
  .dnr td:nth-child(3) { grid-area: 2 / 2; justify-self: end; font-size: 13px; color: var(--ink-soft); }
  .dnr td:nth-child(4) { grid-area: 3 / 1; font-weight: 700; font-size: 16px; padding-top: 6px; }
  .dnr td:nth-child(5) { grid-area: 3 / 2; justify-self: end; font-size: 13px; color: var(--ink-soft); padding-top: 6px; }
  .dnr td:nth-child(4)::before, .dnr td:nth-child(5)::before { display: block; font-size: 11.5px; font-weight: 400; color: var(--ink-soft); letter-spacing: .02em; }
  .dnr td:nth-child(4)::before { content: "Total donado"; }
  .dnr td:nth-child(5)::before { content: "Última donación"; text-align: right; }

  /* Próximos eventos y historiales cortos: texto a la izquierda, fecha a la derecha */
  .panel td.r { margin-left: auto; text-align: right; }

  /* Retoques de las tarjetas de lista */
  .dnr .pp > div { overflow: hidden; overflow-wrap: normal; }
  .dnr .pp small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dnr td:nth-child(4) { text-align: left; }
  .ut td.r { margin-left: 0; text-align: left; }
  .dlt td:nth-child(7) .btn, .dlt td:nth-child(7) button { padding: 5px 12px; font-size: 13px; opacity: .85; }

  /* Filtros: los dos botones parejos */
  .fb { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .fb .btn { width: 100%; text-align: center; }
}

/* ---- Pantallas muy angostas ---- */
@media (max-width: 480px) {
  .acard { padding: 30px 22px; }
  .alogo { margin-bottom: 20px; }
  .alogo img { height: 92px; }
  .acard h1 { font-size: 26px; }
}

/* ---- Celulares angostos (hasta ~380 px) ---- */
@media (max-width: 380px) {
  header { padding: 8px 12px; gap: 8px; }
  .brand { gap: 8px; }
  .brand-logo { height: 34px; }
  .brand > span { padding-left: 8px; }
  .brand b { font-size: 16px; }
  .brand small { font-size: 8.5px; letter-spacing: .22em; }
  .me { gap: 6px; }
  .me .lo { padding: 7px 10px; font-size: 14px; }
  .me .lo.ic { padding: 7px 8px; }
  .stat .v { font-size: 20px; }
}

/* Cifras y meses del gráfico: que no se corten ni se pisen */
@media (max-width: 800px) {
  .stat .v { white-space: nowrap; overflow-wrap: normal; }
  .bars { gap: 4px; }
  .bars .col b { font-size: 10px; letter-spacing: -.03em; margin-top: 6px; }
  .bars .bw i span { font-size: 11px; }
}

/* Con 7 botones (administrador) en pantallas muy angostas, letra más chica para que no se corten */
@media (max-width: 360px) {
  header nav#nav { padding-left: 2px; padding-right: 2px; }
  header nav#nav a { font-size: 9px; letter-spacing: -.02em; padding: 7px 0; }
  header nav#nav a svg { width: 19px; height: 19px; }
}