/* =====================================================================
   Marca Chullachaqui Publicidad en el panel (la misma de la tienda).
   Se carga AL FINAL de header.php: theme-custom.css y ui.css ya usan la
   paleta; acá va lo que les falta (fuente propia, menú lateral, primario
   de Bootstrap, bienvenida) y el login, que no usa header.php.
   Azul marino #0b2559 / #123a85, azul #1466d6, azul vivo #1e88f0.
   ===================================================================== */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/marca/montserrat-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --marino: #0b2559;
  --marino-2: #123a85;
  --azul: #1466d6;
  --azul-vivo: #1e88f0;
  --azul-claro: #8cc4ff;
  --tinte: #eaf2fd;
  --fondo: #f6f9fd;
  --borde: #dde6f3;
  --tinta: #0f1e3a;
  --tinta-suave: #47566f;
  /* primario de Bootstrap 4 / SB Admin 2 */
  --primary: #1466d6;
  --blue: #1466d6;
}

body, .navbar, .card, .modal-content, .dropdown-menu, .tooltip, .popover, .swal2-popup,
button, input, select, textarea {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}
body, #content-wrapper { background-color: var(--fondo) !important; color: var(--tinta); }
h1, h2, h3, h4, h5, h6 { letter-spacing: -.01em; }

/* ---------------------------------------------------------------- Menú lateral */
.sidebar {
  background: linear-gradient(180deg, var(--marino-2) 0%, var(--marino) 55%, #0a1f4a 100%) !important;
}
.sidebar .sidebar-brand { background: rgba(0, 0, 0, .18) !important; height: auto !important; }
.sidebar .sidebar-brand img { width: 100% !important; max-width: 150px; height: auto; filter: drop-shadow(0 0 10px rgba(30, 136, 240, .55)); }
.sidebar.toggled .sidebar-brand img { max-width: 80px; }
.sidebar .nav-item .nav-link:hover { background: rgba(255, 255, 255, .1) !important; }
.sidebar .nav-item.active .nav-link {
  background: linear-gradient(90deg, rgba(30, 136, 240, .45), rgba(30, 136, 240, .15)) !important;
  box-shadow: inset 3px 0 0 var(--azul-vivo);
}
.sidebar .nav-item.active .nav-link i, .sidebar .nav-item .nav-link:hover i { color: var(--azul-claro) !important; }
.sidebar .collapse-item:hover, .sidebar .collapse-item.active { color: var(--azul) !important; background: var(--tinte) !important; }
#sidebarToggle { background: rgba(255, 255, 255, .12) !important; }

/* ---------------------------------------------------------------- Barra superior */
.topbar { border-bottom: 1px solid var(--borde); box-shadow: 0 4px 18px rgba(11, 37, 89, .06) !important; }
.topbar-brand-name { color: var(--marino) !important; font-weight: 800 !important; }

/* ---------------------------------------------------------------- Primario de Bootstrap */
.btn-primary, .btn-primary:not(:disabled):not(.disabled):active {
  background: var(--azul) !important; border-color: var(--azul) !important; color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus { background: var(--marino) !important; border-color: var(--marino) !important; }
.btn-outline-primary { color: var(--azul) !important; border-color: var(--azul) !important; }
.btn-outline-primary:hover { background: var(--azul) !important; color: #fff !important; }
.text-primary { color: var(--azul) !important; }
.bg-primary, .badge-primary { background-color: var(--azul) !important; }
.bg-gradient-primary { background: linear-gradient(180deg, var(--marino-2), var(--marino)) !important; }
.border-left-primary { border-left-color: var(--azul) !important; }
a { color: var(--azul); }
a:hover { color: var(--marino); }
.form-control:focus, .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--azul-vivo) !important; box-shadow: 0 0 0 3px rgba(30, 136, 240, .18) !important;
}
.page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--azul) !important; border-color: var(--azul) !important; color: #fff !important;
}
.page-link { color: var(--azul); }
.card-header.bg-primary, .card-header.fondo, .fondo { background: linear-gradient(110deg, var(--marino) 0%, var(--marino-2) 100%) !important; }
.modal-header .modal-title, h1.h3.text-gray-800, .h3.text-gray-800 { color: var(--marino) !important; }
.scroll-to-top { background: var(--azul) !important; }
.swal2-styled.swal2-confirm { background-color: var(--azul) !important; }

/* Botones flotantes del inicio */
.social .cta { background: var(--marino) !important; }
.social .cta:hover { background: var(--azul) !important; }

/* ---------------------------------------------------------------- Bienvenida (inicio) */
.marca-bienvenida {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 1.25rem 1.75rem; border-radius: 16px; color: #fff;
  background:
    radial-gradient(50% 140% at 100% 0%, rgba(30, 136, 240, .55), transparent 65%),
    linear-gradient(110deg, var(--marino) 0%, var(--marino-2) 100%);
  box-shadow: 0 18px 40px -22px rgba(11, 37, 89, .7);
}
.marca-bienvenida img { width: 150px; height: auto; flex: none; filter: drop-shadow(0 0 14px rgba(30, 136, 240, .6)); }
.marca-bienvenida span {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--azul-claro);
}
.marca-bienvenida h1 { margin: .2rem 0 0; font-size: 1.6rem; font-weight: 800; color: #fff; }
.marca-bienvenida p { margin: .2rem 0 0; color: rgba(255, 255, 255, .8); font-size: .9rem; }
@media (max-width: 575.98px) {
  .marca-bienvenida { flex-direction: column; text-align: center; }
}

/* ---------------------------------------------------------------- Login */
.login-marca, .login-marca *, .login-marca *::before, .login-marca *::after { box-sizing: border-box; }
.login-marca {
  min-height: 100vh; margin: 0; display: grid; background: var(--fondo); color: var(--tinta);
}
@media (min-width: 900px) { .login-marca { grid-template-columns: 1.1fr 1fr; } }
.login-marca__lado {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 1.5rem;
  padding: 3rem clamp(1.5rem, 5vw, 5rem); color: #fff;
  background:
    radial-gradient(60% 80% at 20% 0%, rgba(30, 136, 240, .55), transparent 65%),
    linear-gradient(135deg, var(--marino-2) 0%, var(--marino) 70%);
}
.login-marca__lado img { width: min(100%, 380px); height: auto; filter: drop-shadow(0 0 22px rgba(30, 136, 240, .6)); }
.login-marca__lado h2 { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); font-weight: 800; color: #fff; line-height: 1.1; }
.login-marca__lado h2 em { font-style: normal; color: var(--azul-claro); }
.login-marca__lado p { margin: 0; max-width: 30rem; color: rgba(255, 255, 255, .8); }
.login-marca__form {
  display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.25rem;
}
.login-marca__caja { width: min(100%, 380px); }
.login-marca__caja .ojo {
  font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--azul);
}
.login-marca__caja h1 { margin: .4rem 0 .3rem; font-size: 1.9rem; font-weight: 800; color: var(--marino); }
.login-marca__caja > p { margin: 0 0 1.75rem; color: var(--tinta-suave); font-size: .9rem; }
.login-campo { position: relative; margin-bottom: 1rem; }
.login-campo label { display: block; margin-bottom: .35rem; font-size: .8rem; font-weight: 700; color: var(--tinta-suave); }
.login-campo i { position: absolute; left: 1rem; bottom: .95rem; color: var(--azul); }
.login-campo input {
  width: 100%; padding: .8rem 1rem .8rem 2.6rem; font-size: .95rem;
  border: 1px solid var(--borde); border-radius: 12px; background: #fff; color: var(--tinta);
}
.login-campo input:focus { outline: none; border-color: var(--azul-vivo); box-shadow: 0 0 0 3px rgba(30, 136, 240, .2); }
.login-boton {
  width: 100%; margin-top: .5rem; padding: .9rem 1rem; border: 0; border-radius: 999px; cursor: pointer;
  font-size: .95rem; font-weight: 700; color: #fff; background: var(--azul);
  box-shadow: 0 10px 22px -10px rgba(20, 102, 214, .8);
  transition: background .15s, transform .15s;
}
.login-boton:hover { background: var(--marino); transform: translateY(-1px); }
.login-boton:focus-visible { outline: 3px solid var(--azul-vivo); outline-offset: 2px; }
.login-marca small.pie { display: block; margin-top: 2rem; color: var(--tinta-suave); font-size: .75rem; text-align: center; }
@media (max-width: 899.98px) {
  .login-marca__lado { align-items: center; text-align: center; padding: 2rem 1.25rem; }
  .login-marca__lado img { width: 220px; }
  .login-marca__lado p { display: none; }
}

/* theme-custom.css fija el padding de .form-control con !important y la lupa
   de los buscadores tk quedaba encima del texto. */
.tk-input-ico .form-control { padding-left: 2.3rem !important; }
.tk-input-ico > i { color: var(--azul); }

/* Títulos y filtros de las pantallas del panel web (Pedidos web, Contenido Web) */
h1.h3.text-gray-800, .h3.text-gray-800 { font-weight: 800 !important; letter-spacing: -.02em; }
.nav-pills { gap: .4rem; }
.nav-pills .nav-link {
  border-radius: 999px; padding: .4rem .95rem; font-size: .85rem; font-weight: 600;
  color: var(--tinta-suave); background: #fff; border: 1px solid var(--borde);
}
.nav-pills .nav-link:hover { color: var(--azul); border-color: #b9d3f3; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background: var(--azul) !important; border-color: var(--azul); color: #fff !important;
}
.nav-pills .nav-link .badge { background: var(--tinte); color: var(--azul); margin-left: .25rem; }
.nav-pills .nav-link.active .badge { background: rgba(255, 255, 255, .25); color: #fff; }