/* ── Fuente ─────────────────────────────────── */
body {
  font-family: Inter, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ── Layout ─────────────────────────────────── */
.main-content {
  flex: 1 1 auto;
  overflow: auto;
}

/* ── HTMX ───────────────────────────────────── */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* ── Estado de filas ────────────────────────── */
.lightyellow { background-color: #fefce8 !important; }
[data-bs-theme="dark"] .lightyellow { background-color: #713f12 !important; }

.is-active   { background-color: #ec4899 !important; color: #fff !important; font-weight: 700 !important; }
.is-borrada  { background-color: #f97316 !important; color: #fff !important; font-weight: 700 !important; text-decoration: line-through !important; }
.disabled    { display: none !important; }

/* ── Tarjetas de cliente ────────────────────── */
.tarjeta {
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  padding: .75rem;
  margin-top: .5rem;
  background: var(--bs-body-bg);
}

.tarjeta-destacada {
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  padding: .75rem;
  margin-top: .5rem;
  background-color: #fce7f3;
}
[data-bs-theme="dark"] .tarjeta-destacada { background-color: #831843; }

.tarjeta-nombre    { font-weight: 700; font-size: 1.05rem; }
.tarjeta-direccion { color: var(--bs-secondary-color); }
.tarjeta-wapp a    { color: var(--bs-link-color); font-weight: 500; text-decoration: none; }
.tarjeta-wapp a:hover { text-decoration: underline; }
.tarjeta-aclaracion {
  font-size: .875rem;
  color: var(--bs-secondary-color);
  font-style: italic;
  border-top: 1px dashed var(--bs-border-color);
  padding-top: .5rem;
  margin-top: .5rem;
}

/* ── Títulos ────────────────────────────────── */
.titulo    { font-weight: 700; text-align: center; font-size: 1.75rem; }
.subtitulo { font-weight: 700; text-align: center; font-size: 1.4rem; }

/* ── Modal ──────────────────────────────────── */
.modal-card      { background: var(--bs-body-bg); border-radius: .5rem; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal-card-body { padding: 1.5rem; overflow: auto; }
@media (max-width: 767px) {
  .modal-card      { border-radius: 0; width: 100vw; margin: 0; }
  .modal-card-body { overflow-x: hidden; }
}

/* ── Acordeón zona ──────────────────────────── */
.lista-acordeon {
  border: 1px solid var(--bs-border-color);
  border-radius: .375rem;
  overflow: hidden;
  max-width: 42rem;
  margin: 0 auto;
}

.fila-resumen {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--bs-border-color);
  cursor: pointer;
  user-select: none;
  background: var(--bs-body-bg);
  transition: background .15s;
}
.fila-resumen:hover          { background: var(--bs-secondary-bg); }
.grupo-zona:last-child .fila-resumen { border-bottom: none; }

.zona-titulo    { font-size: 1rem;    color: var(--bs-body-color); }
.zona-contador  { font-size: .875rem; color: var(--bs-secondary-color); }
.icono-desplegar { display: inline-block; transition: transform .2s ease-in-out; margin-left: .5rem; }

.contenedor-detalles {
  padding: 1rem;
  border-bottom: 1px solid var(--bs-border-color);
  background: var(--bs-secondary-bg);
}

/* ── Navbar ─────────────────────────────────── */
.navbar-menu { box-shadow: 0 4px 6px rgba(0,0,0,.1); transition: all .3s; }

.navbar-item { padding: .75rem; }
.navbar-item:hover { background: var(--bs-secondary-bg); }

.navbar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
  z-index: 25;
}
.navbar-overlay.is-active { opacity: 1; visibility: visible; }

@media (max-width: 1023px) {
  .navbar-menu {
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--bs-body-bg);
    z-index: 30;
  }
  .navbar-item { border-bottom: 1px solid var(--bs-border-color); }
  .navbar-item:last-child { border-bottom: none; }
}
@media (min-width: 1024px) {
  .navbar-overlay { display: none; }
}