/* =============================================================
   Estilos propios de la versión web. Todo lo común (menú, paneles,
   tablas, botones, formularios) viene de admin.css, copiado tal cual
   de la app Flask para que se vea igual; aquí solo lo que es nuevo.
   ============================================================= */

[hidden] { display: none !important; }

/* ── Login (antes templates/login.html) ─────────────────────── */
.pantalla-login {
  margin: 0; min-height: 100vh; background: var(--fondo);
  font-family: var(--fuente-base); color: var(--texto);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem;
}
.pantalla-login::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 6px; background: var(--degradado-marca);
}
.login-card {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 20px;
  box-shadow: var(--sombra-md); padding: 2.5rem 2.25rem 2rem; width: 100%; max-width: 400px;
}
.login-card .login-marca {
  display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 1.75rem; text-align: center;
}
.login-marca .brand-nombre {
  font-family: var(--fuente-titulos); font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1;
}
.login-marca .brand-generico {
  display: block; font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--naranja); margin-top: 6px;
}
.login-card .form-label {
  display: block; font-family: var(--fuente-titulos); font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--atenuado); margin-bottom: 6px;
}
.login-card .campo { margin-bottom: 1rem; }
.login-card input {
  width: 100%; border-radius: 10px; border: 1px solid var(--borde); background: var(--panel-suave);
  font-family: var(--fuente-base); font-size: 0.95rem; padding: 0.7rem 0.85rem; color: var(--texto);
}
.login-card input:focus { border-color: var(--principal); background: var(--panel); outline: none; box-shadow: 0 0 0 3px var(--naranja-suave); }
.btn-login {
  font-family: var(--fuente-titulos); background: var(--boton-principal); border: 1px solid var(--boton-principal-borde);
  color: var(--boton-principal-texto); border-radius: 10px; font-weight: 700; font-size: 0.98rem;
  padding: 0.75rem; width: 100%; cursor: pointer; margin-top: 0.5rem;
}
.btn-login:hover { background: var(--boton-principal-hover); }
.btn-login:disabled { opacity: .6; cursor: progress; }
.login-enlace { display: block; text-align: center; margin-top: 1rem; font-size: 0.82rem; color: var(--texto-naranja); font-weight: 600; text-decoration: none; }
.login-enlace:hover { color: var(--principal); }
.login-pie { margin-top: 1.5rem; font-size: 0.72rem; color: var(--atenuado-claro); letter-spacing: 0.04em; }

/* ── Carga ──────────────────────────────────────────────────── */
.cargando { display: flex; justify-content: center; padding: 48px 0; }
.spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--naranja-suave); border-top-color: var(--principal);
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ── CRUD: piezas que en Truck vivían en <style> de cada template ── */
.btn-crud-danger {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 10px;
  font-family: var(--fuente-titulos); font-weight: 700; font-size: 13.5px; cursor: pointer;
  background: var(--rojo-suave); color: var(--texto-rojo); border: 1px solid var(--rojo-borde);
}
.btn-crud-danger:hover { background: var(--rojo-borde); }
.pag-btn {
  display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 8px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--borde); background: var(--panel); color: var(--texto); cursor: pointer; text-decoration: none;
}
.pag-btn:hover { background: var(--gris-suave); }
.pag-btn.pag-active { background: var(--boton-principal); border-color: var(--boton-principal-borde); color: var(--boton-principal-texto); cursor: default; }
.td-acciones { white-space: nowrap; }
.celda-nick { font-family: var(--fuente-titulos); font-size: 11px; font-weight: 700; color: var(--texto-naranja); letter-spacing: .04em; }

/* ── Usuarios (antes <style> de usuarios.html) ── */
.badge-rol, .badge-estado { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.badge-rol.badge-admin    { background: var(--naranja-suave); color: var(--principal-oscuro); }
.badge-rol.badge-operador { background: var(--gris-suave); color: var(--texto); }
.badge-rol.badge-cliente  { background: var(--gris-suave); color: var(--atenuado); }
.badge-activo   { background: var(--verde-suave); color: var(--texto-verde); }
.badge-inactivo { background: var(--gris-suave); color: var(--atenuado-claro); }
.celda-usuario { display: flex; align-items: center; gap: 10px; }

/* ── Gráfica de Reportes (una serie; skill dataviz: barras ≤ 24 px, extremo 4 px, eje recesivo) ── */
.rg-grafica { position: relative; display: flex; gap: 10px; }
.rg-eje { display: flex; flex-direction: column; justify-content: space-between; height: 180px; font-size: 11px; color: var(--atenuado); text-align: right; min-width: 52px; transform: translateY(-6px); }
.rg-area { position: relative; flex: 1; border-bottom: 1px solid var(--borde); }
.rg-guia { position: absolute; left: 0; right: 0; height: 1px; background: var(--gris-suave); }
.rg-cols { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-around; }
.rg-col { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; flex: 1; outline: none; cursor: default; }
.rg-col:focus-visible .rg-barra, .rg-col:hover .rg-barra { filter: brightness(.92); }
.rg-barra { width: 24px; max-width: 60%; background: var(--principal); border-radius: 4px 4px 0 0; }
.rg-valor { font-size: 11px; font-weight: 700; color: var(--texto); margin-bottom: 4px; white-space: nowrap; }
.rg-mes { position: absolute; bottom: -20px; font-size: 11px; color: var(--atenuado); white-space: nowrap; }
.rg-area { margin-bottom: 22px; }
.rg-tip { position: absolute; top: -6px; transform: translate(-50%, -100%); background: var(--texto); color: var(--panel); font-size: 12px; padding: 5px 9px; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 5; }
@media (max-width: 900px) { .rg-fila { grid-template-columns: 1fr !important; } }

/* ── Portal del cliente: línea de tiempo del envío (estado por color, regla 9) ── */
.portal-pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.portal-paso { position: relative; text-align: center; font-size: 13px; color: var(--atenuado); padding-top: 4px; }
.portal-paso strong { display: block; margin-top: 6px; font-family: var(--fuente-titulos); }
.portal-punto { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--gris-suave); color: var(--atenuado); font-weight: 700; border: 2px solid var(--borde); }
.portal-paso.hecho .portal-punto { background: var(--panel); border-color: var(--verde); color: var(--verde); }
.portal-paso.hecho strong { color: var(--texto); }
.portal-paso.activo .portal-punto { background: var(--naranja-suave); border-color: var(--principal); color: var(--texto-naranja); }
.portal-paso.activo strong { color: var(--texto); }
.portal-paso:not(:last-child)::after { content: ""; position: absolute; top: 19px; left: calc(50% + 20px); right: calc(-50% + 20px); height: 2px; background: var(--borde); }
.portal-paso.hecho:not(:last-child)::after { background: var(--verde); }