/* Gestionado por Ansible — marca de NapNodes sobre Paymenter.
 *
 * Mismo sistema visual que la web (web/app/globals.css, «un corte del mundo»):
 * formas RECTAS, relieve con bisel de 3 px y sombra dura, Jersey 10 (píxel)
 * para titulares y botones, IBM Plex para lo que se lee, grises de roca y
 * diamante. Nada de radios ni degradados.
 *
 * Los COLORES no están aquí: son ajustes del tema (paymenter_ajustes →
 * theme_default_*), iguales en claro y en oscuro para que la tienda se vea
 * igual elija lo que elija el visitante. Aquí va lo que los ajustes no alcanzan.
 */
@font-face { font-family: "Jersey"; src: url("/fuentes/Jersey10.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Plex"; src: url("/fuentes/IBMPlexSans-var.woff2") format("woff2"); font-weight: 100 700; font-display: swap; }

:root {
  --nap-diamante: #4dd8e0; --nap-diamante-luz: #a9f1f5; --nap-diamante-sombra: #249aa3; --nap-sobre-diamante: #05262a;
  --nap-filo-claro: #4a4a55; --nap-filo-oscuro: #0a0a0c;
  --nap-texto: #ececf1; --nap-texto-dim: #b9b9c4; --nap-oro: #f5c542;
}

html, body, input, select, textarea {
  font-family: "Plex", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
h1, h2, h3 {
  font-family: "Jersey", ui-monospace, monospace !important;
  font-weight: 400 !important; letter-spacing: .01em; line-height: 1 !important;
}
h1 { font-size: 2.6rem !important; } h2 { font-size: 2.1rem !important; } h3 { font-size: 1.7rem !important; }

/* Formas rectas: fuera todos los radios del tema */
[class*="rounded"] { border-radius: 0 !important; }

/* Paneles: bisel y sombra dura, como en la web */
.bg-background-secondary.border, .bg-background-secondary.rounded-lg, .bg-background-secondary.rounded-md {
  border: 3px solid var(--nap-filo-oscuro) !important;
  box-shadow: inset 3px 3px 0 var(--nap-filo-claro), inset -3px -3px 0 var(--nap-filo-oscuro), 6px 6px 0 rgb(0 0 0 / 35%);
}

/* Botón principal: un bloque de diamante que se pulsa. (El tema le pone texto
   BLANCO fijo, que sobre el cian no se lee.) */
.bg-primary, .bg-primary.text-white, a.bg-primary, button.bg-primary {
  color: var(--nap-sobre-diamante) !important;
  font-family: "Jersey", ui-monospace, monospace !important; font-weight: 400 !important;
  font-size: 1.35rem !important; line-height: 1 !important; letter-spacing: .02em;
  border: 3px solid var(--nap-filo-oscuro) !important;
  box-shadow: inset 3px 3px 0 var(--nap-diamante-luz), inset -3px -3px 0 var(--nap-diamante-sombra), 0 4px 0 var(--nap-filo-oscuro) !important;
}
.bg-primary:hover { background-color: #6fe4ea !important; }
.bg-primary:active { transform: translateY(3px); box-shadow: inset 3px 3px 0 var(--nap-diamante-sombra), inset -3px -3px 0 var(--nap-diamante-luz), 0 1px 0 var(--nap-filo-oscuro) !important; }
.bg-primary svg { color: var(--nap-sobre-diamante) !important; }

/* Campos: huecos hundidos */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  border: 3px solid var(--nap-filo-oscuro) !important;
  box-shadow: inset 3px 3px 0 var(--nap-filo-oscuro), inset -3px -3px 0 var(--nap-filo-claro) !important;
  background-color: #15151a !important;
}
input:focus, select:focus, textarea:focus { outline: 3px solid var(--nap-oro) !important; outline-offset: 0 !important; }

/* Textos largos (portada, descripciones de producto): el tema los oscurece
   en modo claro, y aquí el fondo es oscuro siempre. */
.prose, .prose p, .prose li { color: var(--nap-texto-dim) !important; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose strong { color: var(--nap-texto) !important; }
.prose a { color: var(--nap-diamante) !important; }

::selection { background: var(--nap-diamante); color: var(--nap-sobre-diamante); }
:focus-visible { outline-color: var(--nap-oro); }