/* =========================================================================
   Catálogo público para clientes (/catalogo)
   Usa la misma marca del sistema (azul y dorado), pero con una presentación
   pensada para el cliente y sobre todo para el celular, que es desde donde
   la mayoría lo va a ver.
   ========================================================================= */
:root {
  --azul: #14309c;
  --azul-osc: #0a1a54;
  --dorado: #c79a3e;
  --dorado-claro: #e6c778;
  --dorado-osc: #9c7626;
  --verde: #2f9e5c;
  --rojo: #d9483b;
  --gris-100: #f5f7fa;
  --gris-200: #e7ebf0;
  --gris-400: #b7c0cc;
  --gris-600: #6b7686;
  --texto: #1f2933;
  --radio: 12px;
  --transicion-boton: 140ms cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--gris-100);
  color: var(--texto);
  -webkit-text-size-adjust: 100%;
}

/* -------- Encabezado -------- */
.cat-header {
  background: linear-gradient(90deg, var(--azul-osc), var(--azul) 85%);
  color: white;
  border-bottom: 3px solid var(--dorado);
}
.cat-header-interno {
  max-width: 1180px; margin: 0 auto; padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
}
.cat-marca { display: flex; align-items: center; gap: 12px; }
.cat-logo { height: 42px; width: auto; }
.cat-nombre { font-size: 21px; font-weight: 700; letter-spacing: 0.5px; line-height: 1.1; }
.cat-nombre span { color: var(--dorado-claro); }
.cat-tagline { font-size: 13px; color: #c9d3f0; margin-top: 2px; }

.cat-tasa {
  font-size: 13px; color: #dbe3f7; text-align: right;
  background: rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 7px 14px;
}
.cat-tasa strong { color: white; }

/* -------- Buscador -------- */
.cat-main { max-width: 1180px; margin: 0 auto; padding: 22px 20px 120px; }

.cat-buscador { margin-bottom: 20px; }

.cat-campo-busqueda { position: relative; }
.cat-lupa {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  font-size: 17px; opacity: 0.55; pointer-events: none;
}
#cat-buscar {
  width: 100%; font-family: inherit; font-size: 16px; padding: 15px 16px 15px 46px;
  border: 1px solid var(--gris-200); border-radius: var(--radio); background: white;
  box-shadow: 0 2px 10px rgba(10, 26, 84, 0.06);
}
#cat-buscar:focus { outline: 2px solid var(--dorado); outline-offset: 1px; }

.cat-filtros {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px;
}
#cat-categoria {
  font-family: inherit; font-size: 14px; padding: 9px 12px;
  border: 1px solid var(--gris-400); border-radius: 8px; background: white;
}
.cat-check {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--gris-600); cursor: pointer;
}
.cat-check input { width: 17px; height: 17px; accent-color: var(--azul); }

.cat-conteo { margin-top: 12px; font-size: 13px; color: var(--gris-600); }

/* -------- Rejilla de productos -------- */
.cat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 16px;
}

.cat-card {
  background: white; border-radius: var(--radio); border: 1px solid var(--gris-200);
  padding: 16px 18px 14px; display: flex; flex-direction: column;
  box-shadow: 0 2px 10px rgba(10, 26, 84, 0.05);
}
.cat-card.agotado { background: #fbfcfd; }
.cat-card { transition: box-shadow var(--transicion-boton), transform var(--transicion-boton); }
.cat-card:hover { box-shadow: 0 8px 24px rgba(10, 26, 84, .1); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .cat-card:hover { transform: none; } }

.cat-card-top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  margin-bottom: 8px;
}
.cat-categoria {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--dorado-osc); background: #fff4e0; padding: 4px 10px; border-radius: 20px;
}
.cat-estado { font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
.cat-estado.hay { background: #e4f6ec; color: var(--verde); }
.cat-estado.no-hay { background: var(--gris-200); color: var(--gris-600); }

.cat-card h3 { margin: 0 0 2px; font-size: 17px; line-height: 1.3; color: var(--azul-osc); }
/* Marca, modelo y color: lo que distingue dos productos que se llaman casi
   igual. Van en etiquetas debajo del nombre, y si el producto no los tiene
   cargados la tarjeta no cambia de alto. */
.cat-ficha { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 8px; }
.cat-dato {
  font-size: 11.5px; color: var(--gris-600); background: var(--gris-100);
  border: 1px solid var(--gris-200); border-radius: 20px; padding: 3px 9px;
}
.cat-dato b { color: var(--texto); font-weight: 700; }

.cat-codigo { font-size: 12px; color: var(--gris-600); margin-bottom: 12px; }

.cat-precios { border-top: 1px solid var(--gris-200); padding-top: 12px; margin-top: auto; }
.cat-bloque-precio + .cat-bloque-precio {
  border-top: 1px dashed var(--gris-200); margin-top: 10px; padding-top: 10px;
}
.cat-precio-linea { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cat-precio-label { font-size: 12.5px; font-weight: 700; color: var(--gris-600); text-transform: uppercase; letter-spacing: 0.4px; }
.cat-precio-monto { font-size: 20px; font-weight: 800; color: var(--azul-osc); }
.cat-precio-detalle { font-size: 12.5px; color: var(--azul); margin-top: 3px; }
.cat-precio-inicial { font-size: 12.5px; color: var(--dorado-osc); margin-top: 3px; font-weight: 600; }
.cat-precio-descuento { font-size: 12.5px; color: var(--verde); font-weight: 600; margin-top: 3px; }
/* Las tres formas de pagar en divisas, en chico y sin gritar: es una
   aclaracion del precio de arriba, no una segunda oferta. */
.cat-precio-descuento small { display: block; font-weight: 500;
  font-size: 11.5px; color: var(--gris-600); margin-top: 1px; }
/* El contrato se paga aparte del producto. Va en tono sobrio: es un dato que
   el cliente debe conocer antes de venir, ni una oferta ni una advertencia. */
.cat-precio-contrato { font-size: 12.5px; color: var(--gris-600); margin-top: 3px; }
.cat-precio-contrato strong { color: var(--azul-osc); }

.cat-acciones { display: flex; gap: 9px; margin-top: 14px; }


/* -------- Foto del producto -------- */
.cat-foto {
  position: relative; margin: -16px -18px 12px; height: 200px; overflow: hidden;
  border-radius: var(--radio) var(--radio) 0 0; background: var(--gris-100);
  display: flex; align-items: center; justify-content: center;
}
.cat-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-foto.sin-foto span { font-size: 13px; color: var(--gris-400); font-weight: 600; }
.cat-cinta-encargo {
  position: absolute; top: 10px; left: 0; background: rgba(10, 26, 84, 0.88); color: white;
  font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 0 20px 20px 0;
  letter-spacing: 0.4px;
}
.cat-card.agotado .cat-foto img { filter: grayscale(0.55) opacity(0.85); }

.cat-item-foto {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 8px; object-fit: cover;
  border: 1px solid var(--gris-200); display: block; background: var(--gris-100);
}
.cat-item-foto.sin-foto { border-style: dashed; }

@media (max-width: 640px) { .cat-foto { height: 210px; } }

/* -------- Botones -------- */
.cat-btn {
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  border: 1px solid transparent; border-radius: 9px; padding: 11px 16px; text-align: center;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: white; border-color: var(--gris-200); color: #3a4552;
  transition: background var(--transicion-boton), border-color var(--transicion-boton),
              color var(--transicion-boton), box-shadow var(--transicion-boton),
              transform var(--transicion-boton);
}
.cat-btn:hover { background: var(--gris-100); border-color: var(--gris-400); transform: translateY(-1px); }
.cat-btn:active { transform: translateY(0); transition-duration: 60ms; }
.cat-btn:focus-visible { outline: 2px solid var(--dorado); outline-offset: 2px; }

.cat-btn-principal {
  background: linear-gradient(90deg, var(--dorado-osc), var(--dorado));
  border-color: transparent; color: white; box-shadow: 0 1px 3px rgba(156, 118, 38, .3);
}
.cat-btn-principal:hover {
  background: linear-gradient(90deg, var(--dorado-osc), var(--dorado));
  border-color: transparent; color: white; box-shadow: 0 6px 16px rgba(156, 118, 38, .38);
}

.cat-btn-whatsapp { background: #25d366; border-color: transparent; color: white;
  box-shadow: 0 1px 3px rgba(37, 211, 102, .3); }
.cat-btn-whatsapp:hover { background: #1fbe5b; border-color: transparent; color: white;
  box-shadow: 0 6px 16px rgba(37, 211, 102, .35); }

.cat-btn-ancho { width: 100%; margin-top: 10px; }
.cat-acciones .cat-btn { flex: 1; }
.cat-btn:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }

/* "✓ Agregado": confirma sin gritar */
.cat-btn-agregado { background: #e4f6ec; border-color: #9cd8b4; color: var(--verde); }
.cat-btn-agregado:hover { background: #d6f0e2; border-color: var(--verde); color: var(--verde); }

.cat-btn-sutil { background: none; border-color: transparent; color: var(--gris-600); }
.cat-btn-sutil:hover { background: var(--gris-100); border-color: var(--gris-200); color: var(--texto); }

@media (prefers-reduced-motion: reduce) {
  .cat-btn, .cat-btn:hover, .cat-btn:active { transition: none; transform: none; }
}

/* -------- Estados de la página -------- */
.cat-vacio, .cat-cargando { padding: 50px 20px; text-align: center; color: var(--gris-600); }
.cat-vacio p { margin: 4px 0; }
.cat-hint { font-size: 13px; color: var(--gris-600); }
.cat-aviso {
  margin-top: 26px; font-size: 12.5px; color: var(--gris-600); line-height: 1.6;
  border-top: 1px solid var(--gris-200); padding-top: 16px;
}

.cat-footer {
  background: var(--azul-osc); color: #b9c4e4; text-align: center;
  padding: 18px 20px; font-size: 13px;
}

.catalogo-apagado { max-width: 420px; margin: 90px auto; text-align: center; padding: 0 20px; }
.apagado-icono { height: 60px; margin-bottom: 14px; }
.catalogo-apagado h1 { font-size: 22px; color: var(--azul-osc); }
.catalogo-apagado p { color: var(--gris-600); }


/* -------- Ayuda: cómo se compra -------- */
.cat-header-derecha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.cat-btn-ayuda {
  font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  color: var(--azul-osc); background: var(--dorado-claro); border: none;
  border-radius: 20px; padding: 9px 16px; white-space: nowrap;
}
.cat-btn-ayuda {
  transition: background var(--transicion-boton), box-shadow var(--transicion-boton),
              transform var(--transicion-boton);
}
.cat-btn-ayuda:hover { background: white; transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.cat-btn-ayuda:active { transform: translateY(0); }

.cat-invitacion {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 16px; padding: 14px 18px;
  background: white; border: 1px solid var(--dorado-claro);
  border-left: 4px solid var(--dorado); border-radius: var(--radio);
  box-shadow: 0 2px 10px rgba(10, 26, 84, 0.05);
}
.cat-invitacion-texto { display: flex; flex-direction: column; gap: 2px; }
.cat-invitacion-texto strong { font-size: 15px; color: var(--azul-osc); }
.cat-invitacion-texto span { font-size: 13.5px; color: var(--gris-600); }
.cat-invitacion-botones { display: flex; gap: 9px; }
.cat-btn-sutil { background: none; color: var(--gris-600); }
.cat-btn-sutil:hover { background: var(--gris-200); }

.cat-ayuda-pregunta {
  margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--azul-osc);
}
.cat-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px;
  background: var(--gris-100); padding: 5px; border-radius: 11px;
}
.cat-tab {
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  border: none; background: none; color: var(--gris-600);
  padding: 10px 8px; border-radius: 8px;
}
.cat-tab.activa { background: white; color: var(--azul-osc); box-shadow: 0 1px 4px rgba(10, 26, 84, 0.12); }

.cat-pasos { list-style: none; margin: 0 0 4px; padding: 0; }
.cat-pasos li {
  display: flex; align-items: flex-start; gap: 12px; padding: 11px 0;
  font-size: 14.5px; line-height: 1.45; color: var(--texto);
  border-bottom: 1px solid var(--gris-200);
}
.cat-pasos li:last-child { border-bottom: none; }
.cat-paso-icono { font-size: 20px; line-height: 1.2; flex-shrink: 0; }

/* la línea de las cuotas y la del descuento se pueden tocar para que
   expliquen esa modalidad */
.cat-explicable { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.cat-explicable:hover { filter: brightness(0.85); }

@media (max-width: 640px) {
  .cat-btn-ayuda { width: 100%; }
  .cat-invitacion { padding: 13px 15px; }
  .cat-invitacion-botones { width: 100%; }
  .cat-invitacion-botones .cat-btn { flex: 1; }
}



/* -------- Pago de la inicial -------- */
.cat-paso-pago {
  border: 1px solid var(--dorado-claro); background: #fffdf7;
  border-radius: 12px; padding: 14px; margin: 4px 0 16px;
}
.cat-pago-encabezado { text-align: center; margin-bottom: 12px; }
.cat-pago-encabezado span { display: block; font-size: 12px; color: var(--gris-600);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.cat-pago-encabezado strong { display: block; font-size: 27px; font-weight: 800; color: var(--azul-osc); }
.cat-pago-encabezado small { display: block; font-size: 13px; color: var(--gris-600); }

.cat-pago-pregunta { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: var(--azul-osc); }
.cat-metodos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cat-metodo {
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 11px 8px; border-radius: 9px; border: 1px solid var(--gris-400);
  background: white; color: #3a4552; text-align: center;
}
.cat-metodo { transition: background var(--transicion-boton), border-color var(--transicion-boton),
              color var(--transicion-boton), transform var(--transicion-boton); }
.cat-metodo:hover { border-color: var(--dorado); background: #fffdf7; transform: translateY(-1px); }
.cat-metodo:active { transform: translateY(0); }
.cat-metodo.elegido { background: var(--azul-osc); border-color: var(--azul-osc); color: white; }

.cat-datos-pago {
  background: white; border: 1px solid var(--gris-200); border-radius: 10px;
  padding: 12px 14px; margin-top: 12px;
}
.cat-dato { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0;
  font-size: 13.5px; border-bottom: 1px solid var(--gris-100); }
.cat-dato:last-child { border-bottom: none; }

/* Mandar USDT por la red equivocada es perder el dinero, y no se puede
   deshacer. Por eso este aviso no es un 'hint' gris mas: tiene que
   verse antes de que el cliente copie la direccion. */
.cat-aviso-red { margin-top: 10px; padding: 9px 11px; border-radius: 8px;
  background: #fff4e5; border: 1px solid #f0c48a; color: #8a4b00;
  font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.cat-dato span { color: var(--gris-600); }
.cat-dato strong { color: var(--azul-osc); text-align: right; overflow-wrap: anywhere; }

.cat-campos-pago { margin-top: 12px; }
.cat-campos-pago label { margin-bottom: 10px; }

.cat-comprobante { margin-top: 4px; }
.cat-btn-archivo { display: inline-flex; cursor: pointer; font-size: 13px; padding: 9px 14px; }
.cat-comprobante small { display: block; margin-top: 5px; font-size: 12px; color: var(--gris-600); }
.cat-comprobante-vista { position: relative; display: inline-flex; margin-top: 8px; }
.cat-comprobante-vista img { max-width: 130px; max-height: 130px; border-radius: 9px;
  border: 1px solid var(--gris-200); display: block; }
.cat-comprobante-vista button {
  position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%;
  border: none; background: var(--rojo); color: white; font-size: 15px; cursor: pointer; line-height: 1;
}

.cat-aviso-tienda {
  margin-top: 12px; background: white; border: 1px solid var(--gris-200);
  border-radius: 10px; padding: 12px 14px; font-size: 13px; line-height: 1.55; color: var(--texto);
}

@media (max-width: 480px) { .cat-metodos { grid-template-columns: 1fr; } }

/* -------- Confirmación del encargo -------- */
.cat-listo-icono.pendiente { background: #fff4e0; color: var(--dorado-osc); }

.cat-codigo-caja {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--gris-100); border: 1px dashed var(--gris-400);
  border-radius: 12px; padding: 12px; margin: 14px 0 10px;
}
.cat-codigo-caja span { font-size: 11.5px; color: var(--gris-600); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.6px; }
.cat-codigo-caja strong {
  font-size: 30px; font-weight: 800; letter-spacing: 5px; color: var(--azul-osc);
  font-family: "Consolas", "Courier New", monospace;
}

.cat-aparta {
  background: #fff4e0; border-radius: 9px; padding: 10px 13px; margin: 12px 0 0;
  font-size: 12.5px; color: var(--dorado-osc); line-height: 1.5;
}

/* -------- Barra flotante del encargo -------- */
.cat-barra-encargo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: white; border-top: 1px solid var(--gris-200);
  box-shadow: 0 -4px 18px rgba(10, 26, 84, 0.12);
  padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.cat-barra-info { display: flex; flex-direction: column; line-height: 1.35; }
.cat-barra-info strong { font-size: 15px; color: var(--azul-osc); }
.cat-barra-info span { font-size: 12.5px; color: var(--gris-600); }

/* -------- Modales -------- */
.cat-modal-fondo {
  position: fixed; inset: 0; z-index: 60; background: rgba(10, 26, 84, 0.55);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.cat-modal {
  background: white; border-radius: 14px; width: 100%; max-width: 520px;
  max-height: 100%; overflow-y: auto;
}
.cat-modal-angosto { max-width: 400px; }
.cat-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 12px; border-bottom: 1px solid var(--gris-200);
}
.cat-modal-header h2 { margin: 0; font-size: 19px; color: var(--azul-osc); }
.cat-cerrar {
  background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer;
  color: var(--gris-400); width: 34px; height: 34px; border-radius: 9px;
  transition: background var(--transicion-boton), color var(--transicion-boton);
}
.cat-cerrar:hover { background: var(--gris-100); color: var(--texto); }
.cat-modal-cuerpo { padding: 18px 22px 22px; }

.cat-lista-encargo { margin-bottom: 18px; }
.cat-item-encargo {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--gris-200);
}
.cat-item-nombre { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--azul-osc); }
.cat-item-nombre small { display: block; font-weight: 400; color: var(--gris-600); font-size: 12.5px; }
.cat-cantidad { display: flex; align-items: center; gap: 6px; }
.cat-cantidad button {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--gris-200);
  background: white; font-size: 17px; line-height: 1; cursor: pointer; color: var(--azul-osc);
  transition: background var(--transicion-boton), border-color var(--transicion-boton);
}
.cat-cantidad button:hover { background: var(--gris-100); border-color: var(--gris-400); }
.cat-cantidad span { min-width: 22px; text-align: center; font-weight: 700; }
.cat-quitar {
  background: none; border: none; color: var(--gris-400); font-size: 18px; cursor: pointer;
  padding: 4px; width: 30px; height: 30px; border-radius: 8px;
  transition: background var(--transicion-boton), color var(--transicion-boton);
}
.cat-quitar:hover { background: #fbeae8; color: var(--rojo); }

.cat-total-encargo {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 12px; font-size: 15px; font-weight: 700; color: var(--azul-osc);
}
.cat-total-encargo small { display: block; font-weight: 400; font-size: 12.5px; color: var(--gris-600); text-align: right; }

#cat-form-encargo label {
  display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700;
  color: #3a4552; margin-bottom: 12px;
}
#cat-form-encargo input, #cat-form-encargo textarea {
  font-family: inherit; font-size: 16px; font-weight: 400; padding: 11px 12px;
  border: 1px solid var(--gris-400); border-radius: 9px; resize: vertical;
}
.cat-form-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.cat-nota-legal { font-size: 12px; color: var(--gris-600); line-height: 1.55; margin: 4px 0 0; }
.cat-error { color: var(--rojo); font-size: 13.5px; min-height: 18px; margin: 8px 0 0; }

.cat-listo { padding: 30px 26px; text-align: center; }
.cat-listo-icono {
  width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%;
  background: #e4f6ec; color: var(--verde); font-size: 30px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.cat-listo h2 { margin: 0 0 8px; font-size: 21px; color: var(--azul-osc); }
.cat-listo p { margin: 0 0 8px; font-size: 14px; }

/* -------- Celulares -------- */
@media (max-width: 640px) {
  .cat-header-interno { padding: 13px 16px; }
  .cat-logo { height: 36px; }
  .cat-nombre { font-size: 18px; }
  .cat-tasa { text-align: left; width: 100%; font-size: 12.5px; }
  .cat-main { padding: 18px 12px 130px; }

  /* Dos por fila: se ve el doble de mercancía en el mismo golpe de vista.
     A esta anchura (unos 165 px por tarjeta) todo lo de dentro tiene que
     encoger, o se desborda. */
  .cat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  .cat-card { padding: 10px 10px 12px; border-radius: 12px; }

  /* la foto manda: es lo que hace que alguien se detenga */
  .cat-foto { margin: -10px -10px 9px; height: 132px; border-radius: 12px 12px 0 0; }
  .cat-cinta-encargo { font-size: 10px; padding: 3px 8px; top: 7px; }

  /* la categoría y el "disponible" se apilan si no caben al lado */
  .cat-card-top { flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
  .cat-categoria { font-size: 9.5px; padding: 3px 7px; letter-spacing: .3px; }
  .cat-estado { font-size: 9.5px; padding: 3px 7px; }

  .cat-card h3 { font-size: 14px; line-height: 1.25; }
  .cat-codigo { font-size: 10.5px; margin-bottom: 8px; }

  .cat-precios { padding-top: 9px; }
  .cat-bloque-precio + .cat-bloque-precio { margin-top: 7px; padding-top: 7px; }
  /* la etiqueta y el monto, uno debajo del otro: en la misma línea no caben */
  .cat-precio-linea { display: block; }
  .cat-precio-label { font-size: 10px; letter-spacing: .2px; }
  .cat-precio-monto { font-size: 18px; display: block; }
  .cat-precio-detalle,
  .cat-precio-inicial,
  .cat-precio-descuento,
  .cat-precio-contrato { font-size: 11px; margin-top: 2px; line-height: 1.3; }

  /* uno encima del otro: lado a lado darían botones de 75 px, que no se
     aciertan con el dedo */
  .cat-acciones { flex-direction: column; gap: 6px; margin-top: 10px; }
  .cat-acciones .cat-btn { width: 100%; padding: 10px 8px; font-size: 12.5px; }
  .cat-filtros { gap: 10px; }
  #cat-categoria { flex: 1; }
  .cat-barra-encargo { padding: 11px 16px; }
  .cat-barra-encargo .cat-btn { padding: 11px 14px; font-size: 13.5px; }
  .cat-modal-cuerpo { padding: 16px; }
  .cat-form-fila { grid-template-columns: 1fr; gap: 0; }
}

/* Por debajo de 340 px dos tarjetas ya no dan: mejor una bien vista que
   dos ilegibles. Son teléfonos viejos, pero los hay. */
@media (max-width: 339px) {
  .cat-grid { grid-template-columns: 1fr; }
  .cat-foto { height: 190px; }
  .cat-card h3 { font-size: 16px; }
  .cat-precio-monto { font-size: 20px; }
  .cat-acciones { flex-direction: row; }
}

/* -------- La lámina de requisitos -------- */
/* La lámina se abre por encima del encargo, que está después en el documento
   y si no la taparia. */
#cat-modal-requisitos { z-index: 70; }

.cat-aviso-requisitos {
  margin: 0 0 14px; padding: 10px 14px; font-size: 13.5px; color: var(--azul-osc);
  background: #fff8e6; border: 1px solid #e8c877; border-radius: 10px;
}
.cat-aviso-requisitos button {
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--azul); font-weight: 700; text-decoration: underline;
}
.cat-aviso-requisitos button:hover { color: var(--dorado-osc); }

.cat-modal-lamina { max-width: 620px; }
.cat-lamina {
  display: block; width: 100%; height: auto; border-radius: 10px;
  border: 1px solid var(--gris-200); background: var(--gris-100);
}
.cat-lamina-nota {
  font-size: 12.5px; color: var(--gris-600); text-align: center; margin: 10px 0 14px;
}

/* -------- Llegó escaneando la etiqueta de un producto -------- */
.cat-escaneado {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  background: #fff8e6; border: 1px solid #e8c877; border-left: 5px solid var(--dorado);
  border-radius: 12px; padding: 12px 18px; margin-bottom: 18px;
}
.cat-escaneado span { display: block; font-size: 13px; color: #8a6a1f; }
.cat-escaneado strong { display: block; font-size: 17px; color: var(--azul-osc); }

/* la tarjeta a la que apunta la etiqueta, para que se reconozca de una */
.cat-card.escaneado {
  border-color: var(--dorado);
  box-shadow: 0 0 0 4px var(--dorado), 0 12px 30px rgba(10, 26, 84, .2);
}


/* -------- Interruptor de moneda -------- */
/* Cambia todos los precios de la pagina, asi que no puede parecer un filtro
   mas: va en su propia barra, antes de los productos. */
.cat-modo-pago { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 11px 14px; border-radius: 12px;
  background: var(--blanco, #fff); border: 1px solid var(--gris-200, #e6e6ee); }
.cat-modo-titulo { font-size: 13.5px; font-weight: 600; color: var(--azul-osc); }
.cat-modo-botones { display: inline-flex; background: var(--gris-100, #f4f4fa);
  border-radius: 9px; padding: 3px; gap: 3px; }
.cat-modo-btn { border: 0; background: transparent; border-radius: 7px;
  padding: 7px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  color: var(--gris-600); transition: all .14s; white-space: nowrap; }
.cat-modo-btn:hover { color: var(--azul-osc); }
.cat-modo-btn.activo { background: #fff; color: var(--azul-osc);
  box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.cat-modo-nota { font-size: 12.5px; color: var(--gris-600); flex: 1 1 200px; }
.cat-modo-nota b { color: var(--verde); }

/* La linea de equivalencia bajo el precio: en modo bolivares dice lo que
   costaria en divisas, y en modo divisas lo que costaria en bolivares. */
.cat-precio-otra-moneda { font-size: 12.5px; color: var(--gris-600); margin-top: 3px; }
.cat-precio-otra-moneda strong { color: var(--azul-osc); }

@media (max-width: 560px) {
  .cat-modo-pago { gap: 8px; }
  .cat-modo-nota { flex-basis: 100%; }
}

/* un producto que se vende solo de contado */
.cat-solo-detal .cat-no-aplica { font-size: .95rem; opacity: .6; }
.cat-precio-detalle-fijo { font-size: .85rem; opacity: .75; margin-top: .2rem; }