/* App custom styles for MKT Inventario */

:root,
[data-bs-theme="light"] {
  --bs-primary: #e31d24d2; /* Rojo OMKT */
  --bs-secondary: #999999; /* Gris neutro */
  --bs-link-color: var(--bs-primary);
}

/* Navbar brand */
.navbar-brand span {
  font-weight: 600;
  letter-spacing: 0.2px;
}

.navbar-brand img {
  display: inline-block;
  object-fit: contain;
}

/* Login page */
.body-login {
  min-height: 100vh;
  background: radial-gradient(ellipse at top left, #ffffff 0%, #f7f7f7 50%, #eeeeee 100%);
}

.card.card-login {
  border: 0;
  border-radius: 14px;
}

.card-login .brand-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.brand-header .brand-title {
  font-size: 1.25rem;
  font-weight: 700;
}

.brand-logo-lg {
  width: 48px;
  height: 48px;
}

/* Accent elements */
.badge.bg-secondary {
  background-color: var(--bs-secondary) !important;
}

/* Tema rojo y layout con sidebar */
:root {
  --brand-red: #E31D22;
  --brand-red-dark: #B31217;
  --brand-red-700: #c71c21;
}

/* Botón primario reforzado al rojo de marca */
.btn-primary {
  background-color: var(--brand-red) !important;
  border-color: var(--brand-red-dark) !important;
}
.btn-outline-primary {
  color: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
}
.btn-outline-primary:hover {
  background-color: var(--brand-red) !important;
  color: #fff !important;
}

/* Layout principal con sidebar */
.app-layout { display: flex; min-height: 100vh; background: #f7f7f9; }
.sidebar {
  width: 240px;
  background: linear-gradient(180deg, var(--brand-red-dark), var(--brand-red));
  color: #fff;
  padding: 1rem 0.75rem;
  position: sticky; top: 0; align-self: flex-start; height: 100vh;
}
.sidebar .brand { font-weight: 700; font-size: 1rem; letter-spacing: .2px; margin-bottom: .75rem; display: flex; align-items: center; gap: .5rem; }
.sidebar .brand img { height: 28px; width: auto; border-radius: 0; object-fit: contain; }
/* Dashboard: aumentar logo 30% */
.body-dashboard .sidebar .brand img { height: 36px; width: auto; }
.menu { display: flex; flex-direction: column; gap: 4px; }
.menu a { color: #fff; text-decoration: none; padding: .5rem .6rem; border-radius: .375rem; display: flex; align-items: center; gap: .5rem; opacity: .95; }
.menu a:hover, .menu a.active { background: rgba(255,255,255,0.16); opacity: 1; }
.menu .section { margin-top: .5rem; margin-bottom: .25rem; opacity: .75; font-size: .85rem; }

.content { flex: 1; min-width: 0; }
.topbar { background: #fff; border-bottom: 1px solid #eceff3; padding: .65rem 1rem; }
.topbar .user-badge { font-size: .875rem; color: #444; }

/* Hero y tarjetas de métricas */
.hero {
  background: linear-gradient(90deg, var(--brand-red-dark), var(--brand-red));
  color: #fff;
  border-radius: .75rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 10px 20px rgba(179,18,23,0.15);
}
.hero h1 { font-size: 1.35rem; margin: 0; }
.hero .subtitle { opacity: .9; font-size: .95rem; }

/* Responsive: sidebar como offcanvas en móviles, acciones y topbar */
@media (max-width: 576px) {
  .sidebar {
    position: fixed; /* saca del flujo para que el contenido use todo el ancho */
    left: -260px; /* oculta por defecto */
    top: 0;
    height: 100vh;
    width: 240px;
    z-index: 1040;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    transition: left .2s ease;
  }
  .menu-open .sidebar { left: 0; }

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 1030;
  }
  .menu-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }

  .topbar { position: sticky; top: 0; z-index: 1020; background: #fff; }
  .menu-toggle { color: var(--brand-red); }

  /* Acciones rápidas a dos columnas */
  .quick-actions .d-flex > .btn { flex: 1 1 calc(50% - 8px); }
}

/* Métricas: estilo de tarjeta */
.metric-card { display: flex; align-items: center; gap: .75rem; background: #fff; border: 1px solid #eceff3; border-radius: .5rem; padding: .75rem 1rem; }
.metric-card .icon { color: var(--brand-red); }
.metric-card .icon svg { width: 20px; height: 20px; }
.metric-card .value { font-weight: 700; font-size: 1.25rem; }
.metric-card .label { color: #6b7280; font-size: .85rem; }

/* Acciones rápidas */
.quick-actions .btn { border-radius: .5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.quick-actions .btn-outline-primary { background: #fff; }

/* Tablas y cards */
.card { border-radius: .5rem; }
.table thead th { border-bottom-color: #eaecef; }
.table-hover tbody tr:hover { background-color: #fff5f5; }

/* Página de login con degradado rojo */
.body-login {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--brand-red-dark) 0%, var(--brand-red) 70%);
  display: flex; align-items: center;
}

/* Login layout improvements */
.login-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 2rem 1rem;
}
/* Ensure row uses full width inside flex container */
.login-wrapper > .row {
  width: 100%;
}

/* Login page refinements */
.login-logo-top {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ajuste: mantener altura fija, evitar recortes laterales y quitar bordes */
.login-logo {
  height: 112px;
  width: auto;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.card-login {
  border-radius: 18px;
  max-width: 420px;
  width: 100%;
}

.card-login .card-body {
  padding: 1.5rem 1.5rem;
}

/* Encabezado del card de login, estilo referencia */
.card-login { overflow: hidden; box-shadow: 0 16px 28px rgba(179,18,23,0.15); }
.card-login__header {
  background: linear-gradient(135deg, var(--brand-red-dark), var(--brand-red));
  color: #fff;
  padding: 1.25rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.18);
}
.card-login__header .brand-title { color: #fff; font-weight: 700; font-size: 1.35rem; }
.card-login__header .brand-subtitle { color: #fff; opacity: .9; font-size: .95rem; }
.card-login__header .header-icon { display:flex; align-items:center; justify-content:center; margin-bottom:.35rem; }

/* Inputs con iconos */
.login-input .input-group-text { background:#fff; border-color:#e6e8eb; color:#6b7280; border-right:0; }
.login-input .form-control { border-color:#e6e8eb; border-left:0; }
.login-input .form-control:focus { border-color: var(--brand-red); box-shadow: 0 0 0 .2rem rgba(227,29,34,0.15); }

/* Botón principal con gradiente rojo */
.btn-login {
  background: linear-gradient(90deg, var(--brand-red-dark), var(--brand-red));
  color: #fff;
  border: 0;
  border-radius: .6rem;
  padding: .75rem 1rem;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(179,18,23,0.18);
}
.btn-login:hover { filter: brightness(1.05); color:#fff; }

/* Nota de ayuda */
.login-help { color:#6b7280; }

/* Mobile optimizations */
@media (max-width: 576px) {
  .login-logo {
    height: 80px;
    width: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .card-login {
    border-radius: 16px;
    max-width: 92vw;
  }

  .card-login .card-body {
    padding: 1.25rem 1rem;
  }

  .brand-title {
    font-size: 1rem;
  }
  .hero { padding: .75rem 1rem; }
  .hero h1 { font-size: 1.1rem; }
  .topbar .user-badge { max-width: calc(100% - 44px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* Catálogo */
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.catalog-card__img-wrapper { width: 100%; aspect-ratio: 4 / 3; background: #f5f6f8; border-bottom: 1px solid #eceff3; overflow: hidden; border-top-left-radius: .5rem; border-top-right-radius: .5rem; }
.catalog-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.catalog-card__title { font-weight: 600; font-size: 1rem; margin-bottom: .25rem; }
.catalog-card__meta { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .5rem; }
.catalog-card__desc { font-size: .9rem; }

@media (max-width: 576px) {
  .catalog-grid { grid-template-columns: 1fr 1fr; }
}