/* Barra de navegación global */
/* Las variables se alimentan desde base.html (inline style) que define
   --color-primario, --color-secundario, --color-acento, --color-seleccion.
   Aquí sólo hacemos los mapeos con fallback para que todos los módulos (inventario, etc.)
   adopten automáticamente los colores configurados en el panel. */
:root {
	--c-verde: var(--color-primario, #78C841);
	--c-lima: var(--color-secundario, #B4E50D);
	--c-naranja: var(--color-acento, #FF9B2F);
	--c-rojo: #FB4141;
	--verde: var(--c-verde);
	--verde-dark: var(--color-secundario, #4e8a29);
	--gris-fondo: #f5f7f5;
	--grad-primario: linear-gradient(135deg, var(--c-verde), var(--verde-dark));
	--texto-primario: var(--color-seleccion, #ffffff);
}
body { margin:0; padding-top:64px; font-family: system-ui, Arial, sans-serif; }
.topbar { position:fixed; top:0; left:0; right:0; height:64px; background:var(--color-primario, var(--grad-primario)); display:flex; align-items:center; padding:0 1.4rem; box-shadow:0 4px 14px -4px rgba(0,0,0,.25); z-index:100; }
.topbar .brand { color:#fff; font-weight:700; font-size:1.05rem; letter-spacing:.5px; text-decoration:none; margin-right:2rem; }
.topbar nav ul { list-style:none; margin:0; padding:0; display:flex; gap:1.2rem; }
.topbar nav a { color:#dfeee6; text-decoration:none; font-size:.8rem; font-weight:600; letter-spacing:.5px; position:relative; padding:.4rem .2rem; display:inline-flex; align-items:center; }
.topbar nav a:hover { color:#fff; }
.topbar nav a.active { color:#fff; }
.topbar nav a.active:after, .topbar nav a:hover:after { content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px; border-radius:2px; background:var(--color-secundario, var(--c-lima)); }
@media (max-width:680px){ .topbar { padding:0 .9rem; } .topbar nav ul { gap:.75rem; } body { padding-top:60px; } }
main { padding:1rem 1.2rem; }

/* Utilidades de botones basadas en la paleta */
.btn-success, .btn-warning, .btn-danger, .btn-neutral { cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; font-weight:600; letter-spacing:.5px; border:none; border-radius:10px; padding:.55rem .95rem; font-size:.7rem; text-decoration:none; transition:.25s box-shadow,.25s transform,.25s background; }
.btn-success { background:linear-gradient(135deg,var(--c-verde),var(--c-lima)); color:#13240c; box-shadow:0 4px 10px -4px rgba(120,200,65,.45); }
.btn-success:hover { background:linear-gradient(135deg,var(--c-lima),var(--c-verde)); box-shadow:0 10px 22px -10px rgba(120,200,65,.55); transform:translateY(-2px); }
.btn-success:active { transform:translateY(0); box-shadow:0 4px 10px -4px rgba(120,200,65,.45); }

.btn-warning { background:linear-gradient(135deg,var(--c-naranja),#ffb257); color:#3a2300; box-shadow:0 4px 10px -4px rgba(255,155,47,.45); }
.btn-warning:hover { background:linear-gradient(135deg,#ffb257,var(--c-naranja)); box-shadow:0 10px 22px -10px rgba(255,155,47,.55); transform:translateY(-2px); }
.btn-warning:active { transform:translateY(0); box-shadow:0 4px 10px -4px rgba(255,155,47,.45); }

.btn-danger { background:linear-gradient(135deg,var(--c-rojo),#d52d2d); color:#fff; box-shadow:0 4px 10px -4px rgba(251,65,65,.45); }
.btn-danger:hover { background:linear-gradient(135deg,#d52d2d,var(--c-rojo)); box-shadow:0 10px 22px -10px rgba(251,65,65,.55); transform:translateY(-2px); }
.btn-danger:active { transform:translateY(0); box-shadow:0 4px 10px -4px rgba(251,65,65,.45); }

/* Botón neutro (volver / cancelar) */
.btn-neutral { background:linear-gradient(135deg,#6c757d,#4f565b); color:#fff; box-shadow:0 4px 10px -4px rgba(80,86,90,.45); }
.btn-neutral:hover { background:linear-gradient(135deg,#7a848d,#5a6268); box-shadow:0 10px 22px -10px rgba(80,86,90,.55); transform:translateY(-2px); }
.btn-neutral:active { transform:translateY(0); box-shadow:0 4px 10px -4px rgba(80,86,90,.45); }

.btn-success:focus-visible, .btn-warning:focus-visible, .btn-danger:focus-visible, .btn-neutral:focus-visible { outline:3px solid rgba(255,255,255,.6); outline-offset:2px; }