body {
  font-family: 'Remissis Semi Bold', sans-serif;
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: #333;
}

.container {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 0;
}
/*Header*/
.site-header {
  background-color: #000;
  padding: 15px 0;
}

.header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* permite adaptarse en móvil */
}

.logo {
  height: 70px;
  object-fit: contain;
  filter: brightness(1.6) drop-shadow(0 0 6px #fff);
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.main-nav a {
  color: gold;
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
}
/*header end
inicio
*/
.subtitulo-soluciones {
  background-color: #f8d700;
  color: #000;
  display: inline-block;
  padding: 8px 15px;
  border-radius: 4px;
  font-size: 1.3rem;
  font-weight: bold;
  margin: 30px 0 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.grid-soluciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
  margin-top: 20px;
}

.grid-soluciones .item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  font-weight: 500;
  font-size: 1rem;
}

.grid-soluciones .item img {
  width: 30px;
  height: auto;
  filter: brightness(0) saturate(100%) invert(93%) sepia(85%) saturate(750%) hue-rotate(1deg) brightness(110%) contrast(110%);
}

.hero {
  background: linear-gradient(to right, #000, #a57d00);
  color: white;
  text-align: center;
  padding: 80px 0;
}

/*end index
nosotros
*/
.intro-nosotros {
  margin-bottom: 40px;
  font-size: 1.1rem;
  color: #333;
  text-align: center;
}

.tarjetas-nosotros {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.tarjeta {
  background-color: #f8d700;
  color: #000;
  width: 300px;
  padding: 20px;
  box-shadow: 10px 14px 25px rgba(0, 0, 0, 0.4);
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
  transition: transform 0.2s ease;
}

.tarjeta:hover {
  transform: translateY(-5px);
}

.tarjeta h3 {
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 15px;
}

.tarjeta ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.tarjeta ul li {
  margin-bottom: 5px;
}

box-shadow: 10px 14px 25px rgba(0, 0, 0, 0.4);
/*end nosotros */
.btn {
  background-color: gold;
  padding: 10px 20px;
  color: black;
  text-decoration: none;
  font-weight: bold;
  border-radius: 5px;
  display: inline-block;
  margin-top: 20px;
}

.about, .features, .contact {
  background-color: #f8f8f8;
  padding: 60px 0;
}

.features ul {
  list-style: none;
  padding: 0;
}

.features li {
  padding: 10px 0;
  font-weight: bold;
  color: #555;
}

.site-footer {
  background:#171a21; /* color de fondo a tu estilo */
  color: #aaa;
  text-align: center;
  padding: 20px 0;
}

.site-footer a {
  color:#fff;
  text-decoration:none;
  margin-left:8px;
}

.site-footer a:hover {
  text-decoration:underline;
}


/*end
contactanos
*/
.contacto {
  background-color: #111;
  color: #fff;
  padding: 60px 0;
  text-align: center;
}

.titulo-contacto {
  font-size: 2rem;
  margin-bottom: 10px;
  color: #f8d700;
}

.descripcion-contacto {
  max-width: 700px;
  margin: 0 auto 40px;
  font-size: 1.1rem;
  color: #ccc;
}

.grid-contacto {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}

.contacto-item {
  background-color: #222;
  border: 2px solid #f8d700;
  padding: 20px;
  border-radius: 12px;
  width: 300px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease;
}

.contacto-item:hover {
  transform: translateY(-5px);
}

.contacto-item img {
  width: 40px;
  height: auto;
  margin-bottom: 10px;
}

.contacto-item h3 {
  color: #f8d700;
  margin: 10px 0;
}

.contacto-item a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

.contacto-item a:hover {
  text-decoration: underline;
}

.logo-wrapper {
  padding: 0;
  background-color: transparent;
  border-radius: 0;
}

/* Sección login */
.login-section {
  /* fondo con toques dorados sutiles */
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(248,215,0,.08), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(248,215,0,.06), transparent 60%),
    #f6f6f6;
  padding: 60px 0;
}

.login-container {
  max-width: 520px;
  margin: auto;
  background: #ffffff;
  padding: 28px 24px;
  border-radius: 16px;
  border: 1px solid #eee3a5;                  /* borde con tinte dorado */
  box-shadow: 0 12px 36px rgba(0,0,0,.12);     /* sombra más elegante */
	
}

.login-logo {
  text-align: center;
  margin-bottom: 8px;
}
.login-logo img {
  max-width: 200px;
  height: auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.18));
}

.login-title {
  text-align: center;
  margin: 6px 0 22px;
  font-size: 1.6rem;
  font-weight: 800;
  color: #a57d00;            /* dorado oscuro para el título */
  letter-spacing: .3px;
}

/* Campos */
.login-form .form-group { margin-bottom: 16px; }

.login-form label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
  color: #222;
}

.login-form input {
  width: 100%;
  padding: 14px 14px;
  border: 1px solid #d7d7d7;
  border-radius: 12px;
  outline: none;
  background: #fff;
  transition: box-shadow .15s ease, border-color .15s ease, transform .02s ease;
box-sizing: border-box;
  margin: 0;
}
.login-form input::placeholder { color: #a0a0a0; }
.login-form input:focus {
  border-color: #f8d700;                           /* dorado */
  box-shadow: 0 0 0 4px rgba(248,215,0,.22);       /* anillo de foco accesible */
}

/* Botón */
.btn-login {
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #f8d700, #caa800); /* dorado → dorado oscuro */
  color: #000;                                     /* buen contraste en dorado */
  font-weight: 800;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(165,125,0,.35);
  transition: transform .06s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-login:hover { filter: brightness(1.02); box-shadow: 0 12px 28px rgba(165,125,0,.45); }
.btn-login:active { transform: translateY(1px); }

.login-help {
  margin-top: 14px;
  text-align: center;
  font-size: .95rem;
  color: #555;
}
.login-help a {
  color: #a57d00;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.login-help a:hover { border-bottom-color: #a57d00; }

/* Responsivo */
@media (max-width: 520px) {
  .login-section { padding: 40px 14px; }
  .login-container { padding: 22px; border-radius: 12px; }
  .login-title { font-size: 1.4rem; }
}

/* Brillo dorado suave (opcional) */
.login-section::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:
    radial-gradient(800px 300px at 60% 0%, rgba(248,215,0,.06), transparent 70%);
  transform: translateY(-2%);
  animation: mgGlow 6s ease-in-out infinite alternate;
}
@keyframes mgGlow{
  from { filter: brightness(1);    opacity:.9; }
  to   { filter: brightness(1.08); opacity:1;  }
}

/* Fondo premium negro–dorado */
.login-section {
  min-height: calc(100vh - 80px);
  padding: 80px 16px;
	
	
  /* Degradado principal + brillos dorados sutiles */
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(248,215,0,.10), transparent 60%),
    radial-gradient(1000px 500px at 110% 110%, rgba(248,215,0,.08), transparent 60%),
    linear-gradient(160deg, #000 0%, #0b0b0b 40%, #111 60%, #000 100%);
}
/*end login*/

/*catalogo*/
.catalog-container{max-width:1100px;margin:0 auto;padding:1rem;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}

.card{background:#fff;border:1px solid #e9eef3;border-radius:14px;overflow:hidden;
      box-shadow:0 4px 12px rgba(0,0,0,.06);display:flex;flex-direction:column}
.card img{width:100%;height:180px;object-fit:contain;background:#fafbff}
.card-body{padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.code{font-size:.85rem;color:#3a506b;letter-spacing:.5px}
.name{font-weight:800;color:#0e1628;min-height:2.4em;line-height:1.2}
.desc{font-size:.9rem;color:#4a5568;min-height:3.2em}
.price-stock{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
.price{font-size:1.05rem;font-weight:800;color:#1c2541}
.stock{font-size:.85rem;border-radius:999px;padding:.25rem .6rem;background:#eef6ff;color:#115293}
.stock.zero{background:#ffecec;color:#a30000}

.pagination{display:flex;justify-content:center;gap:10px;margin:28px 0}
.btn{border:1px solid #d5dfec;background:#fff;color:#0e1628;
     padding:.6rem 1rem;border-radius:10px;font-weight:600;cursor:pointer;text-decoration:none}
.btn-primary{background:#5bc0be;color:#04343a;border-color:transparent}
.page-info{display:inline-flex;align-items:center;padding:.6rem 1rem;border:1px solid #e6eef7;border-radius:10px}
  .searchbar {display:flex; gap:.5rem; align-items:center; margin:1rem 0;}
  .searchbar input[type="text"]{flex:1; padding:.65rem .8rem; border:1px solid #d5dfec; border-radius:10px; font:inherit}
  .searchbar .btn{border:1px solid #d5dfec; background:#fff; color:#0e1628; padding:.6rem 1rem; border-radius:10px; font-weight:600; cursor:pointer; text-decoration:none}
  .searchbar .btn-primary{background:#5bc0be; color:#04343a; border-color:transparent}
  .catalog-empty{padding:2rem 0; color:#556; text-align:center}
/*end catalogo*/

/* ====== CATALOGO cliente ====== */
.catalog {
  background-color: #FFF;
  color: #000;
  padding-bottom: 40px;
}

.catalog-title {
  text-align: center;
  font-size: 2rem;
  color: gold;
  margin: 20px 0 8px;
}

.catalog-subtitle {
  text-align: center;
  color: #ccc;
  font-size: 1rem;
}

.catalog-search {
  text-align: center;
  margin: 20px 0;
}

.catalog-search input[type="text"] {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid gold;
  background: #000;
  color: #fff;
  width: 60%;
  max-width: 460px;
}

.catalog-search input[type="text"]::placeholder {
  color: #999;
}

.catalog-search .btn {
  padding: 10px 18px;
  margin-left: 6px;
}

.catalog-meta {
  text-align: center;
  color: #bbb;
  font-size: 0.9rem;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 20px;
}

.catalog-empty {
  grid-column: 1/-1;
  text-align: center;
  color: #ccc;
  font-size: 1.1rem;
}

/* ====== TARJETAS ====== */
.card {
  background: #fff;
  border: 1px solid gold;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

.card-body {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-code {
  color: gold;
  font-weight: 700;
  margin-bottom: 6px;
}

.card-name {
  margin: 0 0 6px;
  font-size: 1.05rem;
}

.card-desc {
  margin: 0 0 8px;
  color: #ccc;
  min-height: 40px;
}

.card-price-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.card-price-row span {
  background-color: transparent;
  border: 1px solid #ccc;   /* opcional */
  color: #000;
  border-radius: 6px;       /* opcional */
  padding: 4px 6px;         /* opcional */
}

.badge-price {
  background: #111;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.9rem;
}

.card-stock {
  font-size: 1.9rem;
}

.card-stock.is-ok {
  color: #9be79b;
}

.card-stock.is-zero {
  color: #ff9b9b;
}

/* ====== PAGINACION ====== */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 20px 0 40px;
}

.page-info {
  color: #ccc;
}

.btn {
  display: inline-block;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  font-size: 0.9rem;
}

.btn-primary {
  background: gold;
  color: #000;
  border: 1px solid gold;
}

.btn-outline {
  background: #000;
  border: 1px solid gold;
  color: gold;
}

.btn:hover {
  opacity: 0.85;
}

/*fin catalogocliente*/

/* ===== Header cliente ===== */
.site-header{ background:#000; color:#ffd200; }
.header-flex{ display:flex; align-items:center; gap:24px; padding:14px 20px; max-width:1200px; margin:0 auto; }
.logo{ height:48px; display:block; }

.main-nav .nav-list{ display:flex; align-items:center; gap:24px; list-style:none; margin:0; padding:0; }
.main-nav a{ color:#ffd200; text-decoration:none; font-weight:700; padding:8px 10px; border-radius:10px; }
.main-nav a:hover{ background:#121212; }

/* Franja inferior con el nombre de usuario */
.user-strip{ background:#0d0d0d; border-top:1px solid #1f1f1f; }
.user-strip .container{ max-width:1200px; margin:0 auto; padding:8px 20px; }
.user-name{ color:#ffd200; font-weight:700; opacity:.95; }

/* ===== Dropdown menú administración ===== */
.nav-list .dropdown {
  position: relative;
}

.nav-list .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #000;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 220px;
  border: 1px solid #222;
  border-radius: 6px;
  z-index: 1000;
}

.nav-list .dropdown-menu li {
  width: 100%;
}

.nav-list .dropdown-menu a {
  display: block;
  padding: 10px 14px;
  color: gold;
  font-weight: 500;
  text-decoration: none;
}

.nav-list .dropdown-menu a:hover {
  background-color: #121212;
}

.nav-list .dropdown:hover .dropdown-menu {
  display: block;
}

/*Fin headercliente*/

/*actualizar precios*/
  body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;margin:24px;background:#f8fafc;color:#0f172a}
  .card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;max-width:760px;padding:20px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
  h1{font-size:20px;margin:0 0 12px}
  .note{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:8px;padding:12px;margin:12px 0}
  .errors{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;border-radius:8px;padding:12px;margin:12px 0}
  .success{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;border-radius:8px;padding:12px;margin:12px 0}
  label{display:block;margin:12px 0 6px}
  input[type=file]{padding:8px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;width:100%}
  button{margin-top:12px;padding:10px 14px;border-radius:10px;border:0;background:#0ea5e9;color:#fff;font-weight:600;cursor:pointer}
  table{width:100%;border-collapse:collapse;margin-top:12px;font-size:13px}
  th,td{border:1px solid #e2e8f0;padding:6px 8px}
  th{background:#f8fafc;text-align:left}
  .muted{color:#475569}

/* Forgot password – detalles visuales */
.mg-reset-illus{
  display:block;
  margin: 0 auto 14px;           /* centrada */
  max-width: 160px;              /* tamaño cómodo */
  height:auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)) brightness(1.05);
}

.mg-alert{
  background: #0d0d0d;           /* negro premium */
  color: #f8d700;                 /* dorado */
  border: 1px solid #f8d700;
  border-radius: 12px;
  padding: 12px 14px;
  text-align: center;
  margin: 12px 0 18px;
  font-weight: 700;
  letter-spacing: .2px;
}

/* Ajuste visual del input para que se vea “premium” en negro-dorado */
.login-form input{
  background:#0b0b0b;
  color:#fff;
  border:1px solid #333;
}
.login-form input::placeholder{ color:#9b9b9b; }
.login-form input:focus{
  border-color:#f8d700;
  box-shadow: 0 0 0 4px rgba(248,215,0,.20);
}
/* ===========================
   Admin Usuarios – Estilos
   =========================== */
:root{
  --bg: #0f172a;            /* slate-900 */
  --panel: #111827;         /* gray-900 */
  --panel-2: #0b1222;
  --text: #e5e7eb;          /* gray-200 */
  --muted: #94a3b8;         /* slate-400 */
  --brand: #06b6d4;         /* cyan-500 */
  --brand-2:#22d3ee;        /* cyan-400 */
  --success-bg:#052e1b;
  --success-bd:#16a34a;
  --error-bg:#3b0b0b;
  --error-bd:#ef4444;
  --input-bg:#0b1222;
  --input-bd:#1f2937;
  --input-bd-focus:#22d3ee;
  --card-bd:#1f2937;
  --shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
  --radius: 16px;
  --radius-sm: 10px;
  --speed: .18s;
}

/* Envuélvelo con <div class="wrap admin-users"> */
.admin-users{
  max-width: 960px;
  margin: 24px auto 48px;
  padding: 0 16px;
  color: var(--text);
}
.admin-users h1{
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: .2px;
  margin: 8px 0 18px;
}
.admin-users h2{
  font-size: clamp(18px, 1.7vw, 22px);
  margin: 0 0 14px;
  font-weight: 600;
  color: #f3f4f6;
}

/* Badge “Nivel 4” */
.admin-users .badge{
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #001018;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .78rem;
  box-shadow: 0 6px 16px rgba(34,211,238,.25);
}

/* Tarjetas */
.admin-users .card{
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--card-bd);
  border-radius: var(--radius);
  padding: 18px;
  margin: 14px 0 18px;
  box-shadow: var(--shadow);
}

/* Mensajes */
.admin-users .msg{
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  margin: 10px 0 14px;
  line-height: 1.3;
  border: 1px solid transparent;
}
.admin-users .ok{
  background: linear-gradient(180deg, var(--success-bg), #062415);
  border-color: var(--success-bd);
}
.admin-users .err{
  background: linear-gradient(180deg, var(--error-bg), #2d0a0a);
  border-color: var(--error-bd);
}

/* Filas del formulario */
.admin-users .row{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.admin-users label{
  color: var(--muted);
  font-size: .94rem;
}

/* Inputs */
.admin-users input[type="text"],
.admin-users input[type="email"],
.admin-users input[type="number"],
.admin-users input[type="password"]{
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-bd);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  transition: border-color var(--speed), box-shadow var(--speed), transform var(--speed);
  outline: none;
}
.admin-users input::placeholder{ color: #6b7280; }
.admin-users input:focus{
  border-color: var(--input-bd-focus);
  box-shadow: 0 0 0 3px rgba(34,211,238,.15);
  transform: translateY(-1px);
}

/* Botones */
.admin-users .actions{ display:flex; gap:10px; }
.admin-users button{
  appearance: none;
  border: 0;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--speed), box-shadow var(--speed), opacity var(--speed);
  background: radial-gradient(120% 120% at 50% 0%, var(--brand-2) 0%, var(--brand) 45%, #0891b2 100%);
  color: #001018;
  box-shadow: 0 10px 24px rgba(34,211,238,.22);
}
.admin-users button:hover{ transform: translateY(-2px); }
.admin-users button:active{ transform: translateY(0); }
.admin-users button:disabled{ opacity:.6; cursor:not-allowed; }

/* Textos auxiliares */
.admin-users .help{
  color: var(--muted);
  font-size: .9rem;
  margin-top: 6px;
}

/* Mini tabla de vista (campos de solo lectura) */
.admin-users .readonly{
  background: #0c1324;
  border: 1px dashed #233049;
  padding: 8px 10px;
  border-radius: 10px;
  color: #cbd5e1;
}

/* Microanimación al montar las cards */
@media (prefers-reduced-motion: no-preference){
  .admin-users .card{ animation: cardIn .25s ease-out both; }
  @keyframes cardIn{
    from{ transform: translateY(6px); opacity: .0; }
    to{ transform: translateY(0); opacity: 1; }
  }
}

/* Responsive */
@media (max-width: 720px){
  .admin-users .row{ grid-template-columns: 1fr; }
  .admin-users .actions{ flex-wrap: wrap; }
}

/* Modo claro (opcional si tu sitio no es oscuro) */
.light .admin-users{
  --bg: #f8fafc;
  --panel: #ffffff;
  --panel-2:#f8fafc;
  --text:#0f172a;
  --muted:#64748b;
  --card-bd:#e5e7eb;
  --input-bg:#ffffff;
  --input-bd:#d1d5db;
  --shadow: 0 8px 24px rgba(2,6,23,.06), inset 0 1px 0 rgba(255,255,255,.6);
}

/* FAB carrito */
.cart-fab{
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #0ea5e9;           /* azul */
  color: #001018;
  box-shadow: 0 10px 24px rgba(14,165,233,.35);
  text-decoration: none;
  z-index: 1000;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.cart-fab:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(14,165,233,.42); }
.cart-fab:active{ transform: translateY(0); }
.cart-badge{
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #f43f5e;          /* rosa/rojo */
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(244,63,94,.35);
}
@media (max-width: 640px){
  .cart-fab{ right: 14px; bottom: 14px; width: 50px; height: 50px; }
}

.card-qty-row{
  display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap;
}
.card-qty-row input[type=number]{ width:90px; }
.add-to-cart .btn svg{ vertical-align:middle; }
/* ===== Carrito: lista compacta ===== */
.cart-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
.cart-table th, .cart-table td{
  border-bottom:1px solid #e5e7eb;
  padding:10px;
  vertical-align:top;
}
.cart-table th{ text-align:left; color:#64748b; font-weight:600; }
.prod-cell{ display:flex; gap:10px; align-items:flex-start; }
.thumb{
  width:64px; height:64px; object-fit:cover;
  border-radius:8px; border:1px solid #e5e7eb;
}
.mono{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.qty-input{ width:90px; }
.nivel-select{ min-width:70px; }
.muted{ color:#6b7280; display:block; margin-top:4px; font-size:12px; }
.actions-cell .btn-sm{ padding:6px 10px; font-size:12px; border-radius:8px; }

/* Responsive: lista tipo cards */
@media (max-width: 860px){
  .cart-table thead{ display:none; }
  .cart-table, .cart-table tbody, .cart-table tr, .cart-table td{ display:block; width:100%; }
  .cart-table tr{ border:1px solid #e5e7eb; border-radius:12px; padding:10px; margin-bottom:12px; }
  .cart-table td{ border:0; padding:8px 0; }
  .cart-table td::before{
    content: attr(data-label);
    display:block; font-weight:600; color:#64748b; margin-bottom:2px;
  }
  .thumb{ width:72px; height:72px; }
  .mono{ white-space:normal; }
}
/* ===== Chat widget (forzar visibilidad correcta) ===== */
#mg-chat.mg-chat {
  position: fixed;
  left: 16px;   /* 👈 lo movemos a la izquierda */
  bottom: 16px;
  z-index: 9999;
  font-family: inherit;
}


#mg-chat .mg-chat-toggle { padding: 10px 14px; border-radius: 999px; border: 0; box-shadow: 0 4px 16px rgba(0,0,0,.15); cursor: pointer; }
#mg-chat #mg-chat-panel.mg-chat-panel { width: 320px; height: 420px; background: #fff; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.2); display: flex; flex-direction: column; overflow: hidden; }
#mg-chat .mg-chat-header { padding: 10px 12px; background: #171a21; color: #fff; display:flex; align-items:center; justify-content:space-between; }
#mg-chat .mg-chat-messages { flex: 1; overflow:auto; padding: 10px; background: #f6f7f9; }
#mg-chat .mg-chat-form { display:flex; gap:8px; padding: 10px; border-top: 1px solid #e5e7eb; }
#mg-chat .mg-chat-form input[type="text"] { flex:1; border:1px solid #e5e7eb; border-radius: 8px; padding: 8px 10px; }

#mg-chat .mg-msg { margin: 6px 0; display:flex; }
#mg-chat .mg-msg.mg-user { justify-content: flex-end; }
#mg-chat .mg-msg.mg-admin { justify-content: flex-start; }
#mg-chat .mg-msg-bubble { max-width: 80%; padding: 8px 10px; border-radius: 12px; background:#e8f0ff; }
#mg-chat .mg-msg.mg-user .mg-msg-bubble { background:#d1fae5; }
#mg-chat .mg-msg-meta { font-size: 11px; opacity:.7; margin-top: 4px; }

/* Estado minimizado: oculta panel; deja solo botón */
#mg-chat.minimized #mg-chat-panel { display: none !important; }

/* Transición al abrir */
#mg-chat #mg-chat-panel { transition: opacity .18s ease, transform .18s ease; transform: translateY(8px); opacity: 0; }
#mg-chat:not(.minimized) #mg-chat-panel:not([hidden]) { opacity: 1; transform: translateY(0); }

/* Pulso cuando llegan mensajes y está minimizado */
#mg-chat .mg-chat-toggle.pulse { animation: mgPulse 0.6s ease; }
@keyframes mgPulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* Responsive: en móvil, ocupa casi toda la pantalla */
@media (max-width: 480px) {
  #mg-chat #mg-chat-panel.mg-chat-panel { width: calc(100vw - 24px); height: 60vh; right: 12px; left: 12px; }
}
/* Gadget flotante */
.mg-chat { position: fixed; right: 16px; bottom: 16px; z-index: 9999; font-family: inherit; }
.mg-chat-toggle { padding: 10px 14px; border-radius: 999px; border: 0; box-shadow: 0 4px 16px rgba(0,0,0,.15); cursor: pointer; }
.mg-chat-panel { width: 320px; height: 420px; background: #fff; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.2); display: flex; flex-direction: column; overflow: hidden; }
.mg-chat-header { padding: 10px 12px; background: #171a21; color: #fff; display:flex; align-items:center; justify-content:space-between; }
.mg-chat-messages { flex: 1; overflow:auto; padding: 10px; background: #f6f7f9; }
.mg-chat-form { display:flex; gap:8px; padding: 10px; border-top: 1px solid #e5e7eb; }
.mg-chat-form input[type="text"] { flex:1; border:1px solid #e5e7eb; border-radius: 8px; padding: 8px 10px; }

.mg-msg { margin: 6px 0; display:flex; }
.mg-msg.mg-user { justify-content: flex-end; }
.mg-msg.mg-admin { justify-content: flex-start; }
.mg-msg-bubble { max-width: 80%; padding: 8px 10px; border-radius: 12px; background:#e8f0ff; }
.mg-msg.mg-user .mg-msg-bubble { background:#d1fae5; }
.mg-msg-meta { font-size: 11px; opacity:.7; margin-top: 4px; }

/* Admin layout de ejemplo */
.container .grid { display:grid; grid-template-columns: 280px 1fr; gap:16px; }
.container aside .list { list-style:none; padding:0; margin:0; }
.container aside .list li { padding:8px 6px; border-bottom:1px solid #eee; }

.mg-chat-toggle.pulse { animation: mgPulse 0.6s ease; }
@keyframes mgPulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/*fin actualizar precios*/
/*
.container { max-width: 460px; margin: 40px auto; padding: 24px; }
label { display:block; margin: 12px 0 6px; font-weight:600; }
input[type="email"], input[type="password"] { width:100%; padding:10px; border:1px solid #ccc; border-radius:8px; }
button { margin-top:14px; padding:10px 14px; border:0; border-radius:8px; cursor:pointer; }
*/