/* Header */
.tp-header {
  background: linear-gradient(135deg, #1e3a8a, #1176d7);
  color: #fff;
}
.tp-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 16px;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tp-header__left { display: flex; align-items: center; }

/* brand (logo + lema) */
.tp-brand { display: flex; flex-direction: column; align-items: flex-start; }
.tp-logo  { height: 44px; width: auto; display: block; user-select: none; pointer-events: none; }
.tp-tagline {
  margin-top: 6px;
  font-style: italic;
  font-weight: 500;
  font-size: 0.95rem;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.15);
  opacity: 0.98;
}

.tp-header__right { display: flex; align-items: center; gap: 8px; }
.tp-module { font-weight: 800; font-size: 1.25rem; letter-spacing: .2px; text-shadow: 0 1px 1px rgba(0,0,0,.15); }

/* auth variant */
.tp-header--auth .tp-header__inner { justify-content: center; }
.tp-header--auth .tp-header__right { display: none; }
.tp-header--auth .tp-header__left { display: none; } /* quita el logo/lema en acceso */

@media (max-width: 720px) {
  .tp-logo { height: 36px; }
  .tp-module { font-size: 1.1rem; }
  .tp-tagline { font-size: 0.9rem; }
}


/* Normaliza y evita desbordes */
* { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }

/* ===== Login page ===== */
body.login-page {
  min-height: 100vh;
  background: #0b3d91; /* fallback */
  background-image: url('../imagenes/bg/login_bg.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.login-overlay {
  backdrop-filter: blur(4px);
  background: rgba(0,0,0,0.35);
  min-height: 100vh;
  width: 100%;
}

.login-card {
  width: 380px;
  max-width: calc(100% - 32px);
  margin: 0 auto;
  margin-top: clamp(48px, 12vh, 120px);
  background: rgba(255,255,255,0.96);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.6);
}

.login-card .card-header {
  background: linear-gradient(90deg, #0d47a1, #1976d2);
  color: #fff;
  padding: 16px 20px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

.login-card .card-body {
  padding: 20px;
}

.login-brand {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px; justify-content: center;
}
.login-brand img { height: 40px; }

.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-row label { font-weight: 600; color: #333; }
.form-row input[type="text"],
.form-row input[type="password"]{
  padding: 10px 12px; border: 1px solid #cfd8dc; border-radius: 8px;
  outline: none; font-size: 16px; background: #fff;
}
.form-row input:focus { border-color: #1976d2; box-shadow: 0 0 0 3px rgba(25,118,210,.15); }

.btn-login {
  width: 100%;
  padding: 11px 16px;
  border: none; border-radius: 10px;
  font-weight: 700; cursor: pointer;
  background: #e53935; color: #fff;
  transition: transform .06s ease, opacity .2s ease;
}
.btn-login:hover { opacity: .92; }
.btn-login:active { transform: translateY(1px); }

.login-footer {
  color: #e0e0e0; text-align: center; padding: 12px 10px; font-size: 12px;
}

/* Mensaje de error */
.alert-error {
  background: #ffebee; color: #b71c1c; border: 1px solid #ffcdd2;
  border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; font-weight: 600;
}

/* Loader a pantalla completa */
#login-loader {
  position: fixed; inset: 0; display: none; z-index: 9999;
  background: rgba(0,0,0,0.55);
}
#login-loader .spinner-wrap {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  text-align: center; color: #fff;
}
#login-loader img { width: 100px; height: 120px; display: block; margin: 0 auto 10px; }

/* ===== Mega menu (tiles) ===== */
.mega-menu {
  position: relative;
  z-index: 50;
  background: rgba(0,0,0,0.35);       /* capa sobre el fondo */
  backdrop-filter: blur(2px);
  overflow: hidden;
}
.mega-menu .mega-wrap {
  display: flex; 
  flex-wrap: wrap;
  gap: 12px; 
  padding: 12px 12px 0;
  max-width: 1200px; margin: 0 auto;               /* centra y limita ancho */
}

.mega-menu .tile {
  flex: 1 1 200px;                                 /* <— se “rompe” en filas */
  min-width: 180px; max-width: 320px;
  min-width: 210px; max-width: 240px;
  background: #d32f2f; color: #fff;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  transform: translateZ(0);
  transition: transform .12s ease, box-shadow .12s ease;
}
.mega-menu .tile:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,.24); }
.mega-menu .tile.active { outline: 3px solid rgba(255,255,255,.35); }

.tile-orange { background: #ef6c00; }
.tile-red    { background: #d84315; }

.tile .tile-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; font-weight: 800; font-size: 22px; letter-spacing:.3px;
}
.tile .tile-ico { 
  width: 38px; height: 38px; 
  display: block;
  object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.tile .tile-title { line-height: 1; }

/*Caso Menu sin Iconos */
.tile-ico { display:inline-block; }
.tile-ico:not([src]), .tile-ico[src=""] { display:none; }

.tile .tile-sub {
  display: none;
  background: rgba(0,0,0,.15);
  padding: 10px 12px; gap: 6px; display: none;
}
.tile.hover .tile-sub, .tile.active .tile-sub { display: flex; flex-wrap: wrap; }
.tile .tile-sub a {
  color: #fff; background: rgba(255,255,255,.14);
  padding: 6px 10px; margin: 4px; border-radius: 6px; text-decoration: none;
  font-weight: 600; font-size: 13px;
}
.tile .tile-sub a.on, .tile .tile-sub a:hover { background: rgba(255,255,255,.28); }



/* Dock de acciones a la derecha */
.action-dock {
  position: fixed; right: 16px; top: 120px; z-index: 60;
  display: grid; gap: 14px;
}
.action-dock a {
  width: 56px; height: 56px; border-radius: 50%;
  background: #ffffffee; display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.25); transition: transform .1s ease;
}
.action-dock a:hover { transform: translateY(-2px); }
.action-dock img { width: 28px; height: 28px; display: block;}

/* Responsive */
@media (max-width: 992px){
  .mega-menu .tile { flex: 1 1 46%; min-width: 160px; } /* 2 por fila aprox */
  .tile .tile-head { font-size: 18px; }
}
@media (max-width: 600px){
  .mega-menu .tile { flex: 1 1 46%; min-width: 160px; } /* 2 por fila aprox */
  .action-dock { right: 10px; top: 100px; }
  .action-dock a { width: 50px; height: 50px; }
  .action-dock img { width: 26px; height: 26px; }
}


/*Menu Oculto*/
/* ==== Topbar (botón menú) ==== */
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding: 8px 12px;
}
.btn-menu{
  background:#ffffff; color:#0d47a1; border:0; font-weight:800;
  padding:8px 12px; border-radius:10px; cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.btn-menu:hover{ filter:brightness(.96); }

/* Drawer: ocupa toda la franja superior, sobre el header (z-index alto) */
.menu-drawer{
  position: fixed; top:0; left:0; right:0;
  z-index: 9999;                               /* por encima del logo/header */
  background: linear-gradient(90deg,#0d47a1,#1976d2);
  border-bottom: 3px solid rgba(255,255,255,.25);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

/* Backdrop para click fuera */
.menu-backdrop{
  position: fixed; inset: 0; z-index: 9998; display: none;
  background: rgba(0,0,0,.35);
}

/* Contenedor centrado y a ANCHO COMPLETO */
.menu-inner{
  max-width: 100%;                 /* no limitar por el logo */
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  flex-wrap: nowrap;               /* <— UNA SOLA FILA en escritorio */
  justify-content: center;         /* distribuye al centro */
  gap: 12px;
  overflow-x: auto;                 /* si no entra por poco, hace scroll suave */
  scrollbar-width: thin;
}

/* Tiles más pequeños (entran 7 en ~1280px) */
.menu-tile{
  flex: 0 0 160px;                 /* ancho fijo por tile */
  height: 56px;
  display: flex; align-items: center; gap: 10px;
  background: #d84315; color: #fff; text-decoration: none;
  padding: 10px 12px; border-radius: 12px;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  transition: transform .12s ease, filter .12s ease;
  white-space: nowrap;
}
.menu-tile:hover { transform: translateY(-2px); filter: brightness(1.05); }

.menu-ico{ width: 20px; height: 20px; display: block; }
.menu-ico[src=""], .menu-ico:not([src]){ display:none; }

/* Estado colapsado (solo para pointer-events del drawer) */
.menu-drawer.is-collapsed { pointer-events: none; }

/* Evita scroll horizontal del documento */
*{ box-sizing: border-box; }
html, body{ width:100%; max-width:100%; overflow-x:hidden; }

/* ===== Smartphone: grilla 2 o 1 columna, ocupa pantalla como overlay */
@media (max-width: 900px){
  .menu-inner{
    flex-wrap: wrap;               /* en móvil, se apilan */
    justify-content: flex-start;
    gap: 10px;
  }
  .menu-tile{
    flex: 1 1 calc(50% - 10px);    /* 2 por fila */
    min-width: 150px;
    height: 54px;
  }
}
@media (max-width: 520px){
  .menu-tile{
    flex: 1 1 100%;                /* 1 por fila en pantallas muy pequeñas */
    height: 52px;
  }
}

/* ===== Tabla Repuestos ===== */
.repuestos-wrap .tbl { width:100%; border-collapse:collapse; }

.repuestos-wrap .tbl thead th {
  padding:8px 10px; border-bottom:1px solid #e5e7eb;
  font-weight:600; color:#374151;
}

.repuestos-wrap .tbl tbody td {
  padding:10px; border-bottom:1px solid #f3f4f6;
}

/* Zebra striping */
.repuestos-wrap .tbl tbody tr:nth-child(even) { background:#fafafa; }

/* Alineación numérica (Precio=col 5, Stock=col 6) */
.repuestos-wrap .tbl thead th:nth-child(5),
.repuestos-wrap .tbl thead th:nth-child(6),
.repuestos-wrap .tbl tbody td:nth-child(5),
.repuestos-wrap .tbl tbody td:nth-child(6) { text-align:right; }

/* Estados */
.repuestos-wrap .badge { display:inline-block; padding:2px 8px; border-radius:12px; font-size:12px; }
.repuestos-wrap .badge-ok  { background:#e8f5e9; color:#1b5e20; }
.repuestos-wrap .badge-off { background:#ffebee; color:#b71c1c; }

/* Stock crítico = 0 */
.repuestos-wrap .stock-zero { color:#b71c1c; font-weight:600; }

/* Paginador */
.repuestos-wrap .pager { display:flex; gap:6px; align-items:center; justify-content:flex-end; margin-top:8px; }
.repuestos-wrap .pager a { padding:4px 8px; border:1px solid #ddd; border-radius:6px; text-decoration:none; cursor:pointer; }
.repuestos-wrap .pager a.active { background:#f3f4f6; pointer-events:none; }