/* Tema de marca «Comercial Costa Unare» — Agroferretería tecnológica.
   Se carga DESPUÉS de app.css y solo sobrescribe colores; si app.css se actualiza, este archivo sigue aplicando.
   Paleta tomada de comercialcostaunare.com: fondo azul noche (#020617), índigo (#6366f1),
   degradado esmeralda → ámbar → cian y el logo de remolino (azul, morado y naranja). */

:root {
  --noche-950: #020617; --noche-900: #0a1020; --noche-850: #0f172a; --noche-800: #172033; --noche-700: #1e293b;
  --tiza-50: #f1f5f9; --tiza-200: #e2e8f0; --tiza-300: #cbd5e1; --tiza-500: #94a3b8; --tiza-600: #64748b;
  /* «oro» es el color de acento del sistema: ahora índigo */
  --oro-200: #c7d2fe; --oro-300: #a5b4fc; --oro-400: #818cf8; --oro-500: #6366f1; --oro-600: #4f46e5; --oro-950: #ffffff;
  --comercial: #34d399; --operacion: #22d3ee; --gerencia: #a78bfa; --aviso: #fbbf24;
  --vidrio: rgba(15, 23, 42, .66); --vidrio-fuerte: rgba(15, 23, 42, .9);
  --cu-degradado: linear-gradient(90deg, #34d399, #fbbf24 60%, #22d3ee);
}

body {
  background-color: var(--noche-950);
  background-image:
    radial-gradient(900px 520px at 0% -10%, rgba(99, 102, 241, .16), transparent 60%),
    radial-gradient(800px 480px at 105% 0%, rgba(34, 211, 238, .08), transparent 60%),
    radial-gradient(700px 500px at 50% 120%, rgba(52, 211, 153, .07), transparent 60%);
}

/* Estructura */
.lateral { background: linear-gradient(180deg, rgba(10, 16, 32, .94), rgba(2, 6, 23, .94)); }
.barra { background: rgba(2, 6, 23, .74); }

/* Logo del negocio en lugar del ícono del rubro */
.marca-logo { background: url(../img/marca-costa-unare.png) center / contain no-repeat; box-shadow: none; border-radius: 0; width: 44px; height: 44px; }
.marca-logo svg.ico { display: none; }
.marca-txt b { background: var(--cu-degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Botón principal y acentos */
.btn-oro { color: #fff; background: linear-gradient(90deg, #6366f1, #7c3aed); box-shadow: 0 10px 26px -12px rgba(99, 102, 241, .9); }
.btn-oro:hover { background: linear-gradient(90deg, #818cf8, #6d28d9); box-shadow: 0 14px 30px -12px rgba(99, 102, 241, 1); }
.input:focus { border-color: rgba(129, 140, 248, .7); box-shadow: 0 0 0 3px rgba(129, 140, 248, .18); }
.tasa-chip { background: rgba(99, 102, 241, .1); border-color: rgba(99, 102, 241, .28); }
.tasa-chip:hover { background: rgba(99, 102, 241, .18); }
.barra-col i { background: linear-gradient(180deg, #818cf8, rgba(79, 70, 229, .55)); }
.nav-contador { color: #fff; background: linear-gradient(90deg, #6366f1, #7c3aed); }

/* Tarjeta principal de Inicio: degradado de la marca */
.hero { color: #fff; background: linear-gradient(120deg, #22d3ee 0%, #6366f1 48%, #7c3aed 100%); box-shadow: 0 30px 60px -28px rgba(99, 102, 241, .8); }
.hero:hover { box-shadow: 0 36px 70px -28px rgba(99, 102, 241, .95); }
.hero-ico { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .22); }
.hero p { opacity: .88; }
.hero-flecha { background: #fff; color: #4f46e5; }

/* Pedidos, portal y tarjetas */
.aviso-pedidos { background: linear-gradient(90deg, rgba(99, 102, 241, .16), rgba(99, 102, 241, .04)); border-color: rgba(99, 102, 241, .35); }
.aviso-pedidos:hover { border-color: rgba(99, 102, 241, .6); }
.portal-tab.activo { background: rgba(99, 102, 241, .14); }
.producto-card:hover { border-color: rgba(99, 102, 241, .32); }
.barra-pedido { color: #fff; background: linear-gradient(90deg, #6366f1, #7c3aed); box-shadow: 0 20px 40px -14px rgba(99, 102, 241, .8); }

/* Selecciones y realces (POS, impresión, roles, formatos, ajustes…) */
.imp-zona:hover, .imp-zona.encima { background: rgba(129, 140, 248, .07); }
.pos-lista-op.foco, .pos-lista-fila.foco .pos-lista-op, .pos-lista-op:hover { background: rgba(129, 140, 248, .1); }
.pos-forma:hover, .pos-forma:focus-visible { background: rgba(129, 140, 248, .1); }
.pos-bloqueo-ico { background: rgba(129, 140, 248, .14); }
.roles-check label:has(input:checked) { background: rgba(129, 140, 248, .08); }
.badge-principal { background: rgba(129, 140, 248, .14); }
.fmt-var { border-color: rgba(129, 140, 248, .3); background: rgba(129, 140, 248, .08); }
.fmt-var:hover, .fmt-var:focus-visible { background: rgba(129, 140, 248, .18); }
.impp-regla:hover { border-color: rgba(129, 140, 248, .45); }
.impp-regla:has(input:checked) { background: rgba(129, 140, 248, .07); box-shadow: 0 0 0 3px rgba(129, 140, 248, .12); }
.impp-regla:has(input:checked) .impp-regla-ico { background: rgba(129, 140, 248, .16); }
.ab-halo { filter: drop-shadow(0 0 3px rgba(129, 140, 248, .9)); }
.ab-yo { background: rgba(129, 140, 248, .14); border-color: rgba(129, 140, 248, .3); }
.ab-tip { background: rgba(129, 140, 248, .1); }
.gym-chip.activo { background: rgba(129, 140, 248, .14); border-color: rgba(129, 140, 248, .5); }
.aj-seccion-ico { background: rgba(79, 70, 229, .14); border-color: rgba(79, 70, 229, .3); }
.act-elegir:hover, .act-elegir:focus-within { background: rgba(79, 70, 229, .07); }
.presup-banner { border-color: rgba(129, 140, 248, .35); background: rgba(129, 140, 248, .08); }
/* .badge-bs (bolívares) queda en ámbar a propósito: el ámbar también es color de la marca */

/* ── Costa Unare 1.12.2-cu3: fotos de productos ── */
.foto-mini { object-fit: contain; border-radius: 9px; background: #fff; display: inline-grid; place-items: center; flex: none; vertical-align: middle; }
.foto-mini.vacia { background: rgba(255, 255, 255, .04); border: 1px dashed var(--borde-fuerte); color: var(--tiza-600); }
.foto-mini.vacia svg.ico { width: 45%; height: 45%; }
.foto-mini.ampliable { cursor: zoom-in; transition: transform .15s var(--ease); }
.foto-mini.ampliable:hover { transform: scale(1.08); }
th.col-foto, td.col-foto { width: 60px; }
.foto-grande img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: 14px; background: #fff; }
.foto-editor { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.foto-editor-img { width: 128px; height: 128px; object-fit: contain; border-radius: 16px; background: #fff; flex: none; }
.foto-editor-img.vacia { display: grid; place-items: center; align-content: center; gap: 4px; background: rgba(255, 255, 255, .04); border: 1px dashed var(--borde-fuerte); color: var(--tiza-500); }
.foto-editor-img.vacia svg.ico { width: 34px; height: 34px; }
.pos-sug-op { align-items: center; }
.pos-sug-op .foto-mini { border: 1px solid #e5e7eb; }
.pos-sug-op .foto-mini.vacia { background: #f8fafc; border: 1px dashed #cbd5e1; color: #94a3b8; }
.pos-sug-nom { flex: 1; min-width: 0; }
.producto-foto { width: 100%; height: 190px; object-fit: contain; background: #fff; border-radius: 12px; cursor: zoom-in; }