/* ══════════════════════════════════════════════════════════════
   cuenta.css — Login, registro y panel del cliente
   (cuenta/login.php, cuenta/registro.php, cuenta/index.php)
═══════════════════════════════════════════════════════════════ */

/* ── Tarjeta centrada de login/registro ── */
.acc-wrap { max-width: 480px; margin: 0 auto; }
.acc-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 30px 26px;
}

.acc-alert {
  background: rgba(229,72,77,.08); border: 1px solid rgba(229,72,77,.25);
  color: var(--red); font-size: .85rem; padding: 10px 14px;
  border-radius: var(--r-sm); margin-bottom: 18px;
}

.acc-form { display: flex; flex-direction: column; gap: 16px; }

/* Mismas clases .cf-* que usan contacto.php — repetidas aquí porque
   css/contacto.css solo se carga en /contacto/. */
.cf-field { display: flex; flex-direction: column; gap: 6px; }
.cf-label { font-size: .82rem; font-weight: 600; color: var(--text-2); }
.cf-input {
  padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--border);
  font-size: .9rem; background: var(--bg); color: var(--text-1);
}
.cf-input:focus { outline: none; border-color: var(--g2); }

.acc-check {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--bg-s); border-radius: var(--r-sm); padding: 12px 14px;
  font-size: .82rem; color: var(--text-2); line-height: 1.5;
}
.acc-check input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; }
.acc-check strong { color: var(--text-1); }

.acc-switch { text-align: center; margin-top: 20px; font-size: .85rem; color: var(--text-2); }
.acc-switch a { color: var(--g2); font-weight: 700; }

/* ── Panel del cliente (cuenta/index.php) ── */
.acc-banner {
  padding: 14px 18px; border-radius: var(--r-md); font-size: .85rem; margin-bottom: 22px;
}
.acc-banner-pendiente { background: rgba(245,166,35,.08); border: 1px dashed var(--amber); color: #A8760E; }
.acc-banner-ok { background: var(--g2-soft); color: var(--g1); font-weight: 600; }

/* Código de descuento de bienvenida (5%) — se queda visible en cada
   visita a /cuenta/ hasta que tú lo marques "usado" desde
   /admin/clientes.php (todavía no hay checkout automático que lo
   aplique solo). */
.acc-descuento {
  background: var(--g2-soft); color: var(--g1); font-weight: 600;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.acc-descuento-codigo {
  background: var(--card-bg); border: 1px dashed var(--g2); color: var(--text-1);
  font-family: monospace; font-weight: 800; font-size: .85rem;
  padding: 4px 10px; border-radius: var(--r-sm); letter-spacing: .02em;
}

.acc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.acc-badge-mayorista {
  display: inline-block; background: var(--g2); color: #fff; font-size: .66rem;
  font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  padding: 3px 10px; border-radius: var(--r-pill); margin-left: 6px;
}

.acc-empty {
  background: var(--card-bg); border: 1px dashed var(--border); border-radius: var(--r-lg);
  padding: 40px 20px; text-align: center; color: var(--text-2); font-size: .9rem;
}

.acc-pedidos { display: flex; flex-direction: column; gap: 16px; }
.acc-pedido {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 18px 20px;
}
.acc-pedido-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px;
}
.acc-pedido-head strong { font-size: .95rem; color: var(--text-1); }
.acc-pedido-fecha { font-size: .78rem; color: var(--text-3); margin-left: 8px; }

.acc-estatus {
  font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
  padding: 5px 11px; border-radius: var(--r-pill); white-space: nowrap;
}
.acc-estatus-pendiente_pago { background: rgba(245,166,35,.12); color: #A8760E; }
.acc-estatus-pagado         { background: var(--g2-soft); color: var(--g1); }
.acc-estatus-enviado        { background: rgba(45,130,247,.1); color: #2A5CAD; }
.acc-estatus-entregado      { background: var(--g2-soft); color: var(--g1); }
.acc-estatus-cancelado      { background: rgba(229,72,77,.1); color: var(--red); }

.acc-pedido-items { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.acc-item { display: flex; justify-content: space-between; gap: 10px; font-size: .85rem; color: var(--text-2); }
.acc-item-nombre { flex: 1; }
.acc-item-precio { font-weight: 700; color: var(--text-1); white-space: nowrap; }

.acc-pedido-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--border);
}
.acc-total { font-weight: 800; color: var(--text-1); font-size: .92rem; }
.acc-garantia { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; }
.acc-garantia svg { width: 14px; height: 14px; }
.acc-garantia-ok { color: var(--g1); }
.acc-garantia-vencida { color: var(--text-3); }

.acc-admin-link { text-align: center; margin-top: 40px; font-size: .78rem; color: var(--text-3); }
.acc-admin-link a { color: var(--text-2); text-decoration: underline; }

/* Ícono discreto de acceso al modo administrador (login.php y
   registro.php) — antes había que escribir /admin/login.php a mano en
   el buscador; ahora es un clic. A propósito chiquito y en gris, no
   es algo que un cliente normal necesite notar. */
.acc-admin-icon-wrap { text-align: center; margin-top: 28px; }
.acc-admin-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg-s); color: var(--text-3); border: 1px solid var(--border);
  transition: color .15s ease, border-color .15s ease;
}
.acc-admin-icon:hover { color: #A8760E; border-color: var(--amber); }

@media (max-width: 560px) {
  .acc-card { padding: 24px 18px; }
  .acc-pedido-head, .acc-pedido-foot { flex-direction: column; align-items: flex-start; }
}