/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD TABLERO — Rediseño móvil (dirección 2 del brief Mobile app
   design brief.zip). SOLO aplica en el breakpoint móvil <=768px.

   REGLAS DE SEGURIDAD (para no romper nada):
   · Las clases de este archivo nacen OCULTAS en desktop (display:none) — el
     breakpoint >=769px no cambia absolutamente nada.
   · Los componentes del dashboard actual (metric-cards, carrusel, bottom-nav)
     NO se eliminan: se reorganizan o se les añade jerarquía. Ningún id con
     handler JS existente se toca.
   · Solo CSS + estructura HTML nueva. No toca lógica contable.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ 1) HERO TABLERO — Disponible real protagonista ═══ */
#tb-hero,
#tb-status,
#tb-pend-wrapper,
#tb-ring {
  display: none;              /* oculto en desktop por defecto */
}

/* Contenedor del anillo de disponible (conic) — visible solo en móvil */
#tb-ring {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(var(--teal, #2dd4bf) 0% var(--tb-progress, 35%), rgba(255, 255, 255, 0.08) var(--tb-progress, 35%) 100%);
  align-items: center;
  justify-content: center;
}
.tb-ring-core {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: var(--cobre-deep, #0a0a18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.tb-ring-label {
  font: 600 9px 'Inter', sans-serif;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted, #5a5270);
}
.tb-ring-val {
  font: 700 27px 'Sora', sans-serif;
  color: var(--teal, #2dd4bf);
  margin-top: 2px;
}
.tb-ring-pct {
  font: 500 10px 'JetBrains Mono', monospace;
  color: var(--text-dim, #7a7290);
  margin-top: 2px;
}

/* Barra reservado / usado del hero */
.tb-total-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--cobre-surface2, #161430);
}
.tb-total-used {
  background: linear-gradient(90deg, #14a88e, #2dd4bf);
}
.tb-total-reserved {
  background: rgba(250, 204, 21, 0.6);
}

/* ═══ Marca de ritmo (brief 2c/1c) — tick vertical sobre una .progress-track,
   posicionado con `left: X%` inline. Reutilizable en cualquier barra de progreso,
   no solo mobile: por eso vive fuera de los @media de este archivo. ═══ */
.tb-pace-marker {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 13px;
  background: var(--cobre-light, #f0ab6e);
  border-radius: 1px;
  pointer-events: none;
}
.tb-pace-note {
  font: 400 10px 'Inter', sans-serif;
  color: var(--text-dim, #7a7290);
  margin-top: 2px;
}

/* ═══ Listas de compras — hero "Gasto consolidado" (brief 2c, lista abierta).
   Nuevo bloque puramente aditivo en loadListasCompras() de app.js, ningún
   id/class existente se toca. ═══ */
.lista-consolidado-hero {
  background: rgba(201, 122, 60, 0.08);
  border: 1px solid rgba(201, 122, 60, 0.3);
  border-radius: 14px;
  padding: 12px 13px;
  margin-top: 8px;
}
.lista-consolidado-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font: 600 0.68rem 'Inter', sans-serif;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-dim, #7a7290);
}
.lista-consolidado-badge {
  font: 600 0.65rem 'Inter', sans-serif;
  text-transform: none;
  color: var(--cobre-light, #f0ab6e);
}
.lista-consolidado-val {
  font: 700 1.5rem 'Sora', sans-serif;
  color: var(--cobre-light, #f0ab6e);
  margin-top: 2px;
}
.lista-consolidado-hint {
  font: 400 0.68rem 'Inter', sans-serif;
  color: var(--text-dim, #7a7290);
  margin-top: 4px;
  line-height: 1.4;
}

/* ═══ Hoja ⋯ Más — filas estilo tarjeta (brief 2e). Solo envuelve el contenido
   de los <button class="btn-cobre"> ya existentes: mismos ids/onclick, mismos
   handlers de app.js. ═══ */
.mas-row {
  width: 100%;
  padding: 11px 13px;
  gap: 11px;
  text-align: left;
}
.mas-row-icon {
  font-size: 14px;
  flex: none;
  width: 18px;
  text-align: center;
}
.mas-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mas-row-title {
  font: 600 0.86rem 'Inter', sans-serif;
  color: var(--text-primary, #e0dce8);
}
.mas-row-sub {
  font: 400 0.68rem 'Inter', sans-serif;
  color: var(--text-dim, #7a7290);
}
.mas-row-chevron {
  flex: none;
  color: var(--text-dim, #7a7290);
  font-size: 0.95rem;
}

/* ═══ 2) FRANJA DE ESTADO (Cuadre / Pendientes / Notas) ═══ */
#tb-status {
  position: sticky;
  top: 0;
  z-index: 990;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  padding: 7px 0;
  background: rgba(6, 6, 12, 0.85);
  border-top: 1px solid var(--border, #1e1b3c);
  border-bottom: 1px solid var(--border, #1e1b3c);
}
.tb-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border, #1e1b3c);
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-secondary, #b8b0cc);
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tb-chip-cuadre {
  background: rgba(244, 63, 94, 0.1);
  border-color: rgba(244, 63, 94, 0.3);
  color: #fb7185;
}
.tb-chip-pend {
  background: rgba(250, 204, 21, 0.09);
  border-color: rgba(250, 204, 21, 0.28);
  color: #facc15;
}
.tb-chip-notas {
  background: rgba(79, 108, 219, 0.1);
  border-color: rgba(79, 108, 219, 0.3);
  color: #93a5f5;
}

/* ═══ 3) MÉTRICAS EN 2 COLUMNAS + SALDO POR CUENTA ═══ */
.tb-account-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(15, 14, 34, 0.6);
  border: 1px solid var(--border, #1e1b3c);
  border-radius: 11px;
  padding: 9px 12px;
}
.tb-account-name {
  font: 500 12px 'Inter', sans-serif;
  flex: 1;
}
.tb-account-val {
  font: 600 12px 'JetBrains Mono', monospace;
  color: var(--teal, #2dd4bf);
}

/* ═══ 4) SECCIONES Y LISTAS (pendientes / últimos gastos) ═══ */
.tb-section-title {
  font: 600 9.5px 'Inter', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted, #5a5270);
  margin-bottom: 8px;
}
.tb-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border, #1e1b3c);
  border-radius: 10px;
  padding: 9px 12px;
}
.tb-list-title {
  font: 600 11.5px 'Inter', sans-serif;
  flex: 1;
  min-width: 0;
}
.tb-list-sub {
  font: 400 9.5px 'Inter', sans-serif;
  color: var(--text-muted, #5a5270);
}
.tb-list-amount {
  font: 600 11.5px 'JetBrains Mono', monospace;
  color: var(--rose, #fb7185);
}
.tb-list-amount.amber {
  color: #facc15;
}
.tb-list-amount.teal {
  color: var(--teal, #2dd4bf);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SOLO MÓVIL (<=768px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Hero Tablero visible */
  #tb-hero,
  #tb-ring {
    display: block;
  }

  /* Franja de estado: grid de 3 chips siempre visible */
  #tb-status {
    display: grid;
  }

  /* Bloques de pendientes / últimos gastos visibles */
  #tb-pend-wrapper {
    display: block;
  }

  /* Hero: apilado con el anillo centrado y disponible protagonista */
  #tb-hero {
    padding: 4px 0 10px;
  }
  .tb-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  .tb-month {
    font: 700 15px 'Sora', sans-serif;
    line-height: 1.15;
  }
  .tb-available-label {
    font: 600 10px 'Inter', sans-serif;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-muted, #5a5270);
    margin-top: 3px;
  }
  .tb-available {
    font: 700 2.4rem/1.05 'Sora', sans-serif;
    background: linear-gradient(135deg, var(--cobre, #c97a3c), var(--cobre-light, #f0ab6e));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-top: 2px;
  }
  .tb-meta {
    font: 500 10.5px 'JetBrains Mono', monospace;
    color: var(--text-dim, #7a7290);
    margin-top: 6px;
  }
  .tb-meta b {
    color: var(--text-primary, #e0dce8);
  }

  /* Anillo centrado bajo el encabezado */
  #tb-ring {
    margin: 12px auto 14px;
    display: flex;
  }

  /* Barra de total bajo el hero */
  .tb-total-bar {
    margin-top: 12px;
  }

  /* Métricas del dashboard a 2 columnas (conservando el carrusel como base).
     Compatibilidad: igual patrón que .budget-grupo-body. */
  .metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    overflow: visible;
    margin: 0 -1rem;
    padding: 0 1rem;
  }
  .metrics-grid .metrics-page {
    flex: none;
    width: 100%;
    display: contents;
  }

  /* Saldo por cuenta: lista en 2 columnas */
  .tb-accounts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* Bloques de listas */
  #tb-pend-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
  }
  .tb-list-row {
    border-left: 2px solid #facc15;
  }
  .tb-list-row.teal-border {
    border-left-color: var(--teal, #2dd4bf);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REGISTRO RÁPIDO (#modal-quick-add) — reflow mobile (brief 2b "Registro rápido").
   Solo CSS: ningún id/handler de app.js se toca. El monto pasa a ser el elemento
   protagonista arriba de la hoja (mismo input, mismo id qa-amount).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #form-quick-add-modal {
    gap: 10px;
  }
  #form-quick-add-modal #qa-amount-group {
    order: -1;
    text-align: center;
    margin-bottom: 2px;
  }
  #form-quick-add-modal #qa-amount-group label {
    text-align: center;
  }
  #form-quick-add-modal #qa-amount {
    text-align: center;
    background: transparent;
    border: none;
    font: 700 2.5rem/1.15 'Sora', sans-serif;
    color: var(--text-primary, #e0dce8);
    padding: 4px 0;
  }
  #form-quick-add-modal #qa-amount:focus {
    box-shadow: none;
  }
  #modal-quick-add .panel-cobre {
    padding: 1.2rem 1.1rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CIERRE Y ANÁLISIS (#page-analisis) — reflow mobile (brief 2d). Solo reordena
   con `order` (flex) — el DOM y los ids que usa analisis.js no se mueven, así
   que ningún querySelector relativo se rompe.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #page-analisis > .panel-cobre {
    display: flex;
    flex-direction: column;
  }
  /* Validador de banco (el "descuadre") pasa a ser lo primero que se ve. */
  #page-analisis #validador-seccion {
    order: -2;
    padding: 15px;
  }
  #page-analisis #validador-seccion > div:first-child {
    font-size: 0.92rem;
  }
  /* Resumen real por cuenta justo después. */
  #page-analisis #analisis-resumen-cuentas {
    order: -1;
  }
}