/* Tema del panel, con la identidad del sitio.
 *
 * Los colores salen tal cual de frontend/src/estilos/tokens.css: si el sitio
 * cambia de paleta, hay que copiarlos de nuevo desde ahí y no inventar valores
 * parecidos acá.
 *
 * Django define su propia paleta con variables CSS, así que basta redefinirlas
 * para que todo el panel —botones, enlaces, encabezados, filtros— siga la
 * identidad, sin pelear con los estilos de cada pantalla.
 */

:root {
  /* tokens del sitio */
  --gi-ink: #1D1D1B;
  --gi-ink-80: #262623;
  --gi-ink-70: #3F3F3A;
  --gi-on-ink: #F4F4F2;
  --gi-on-ink-2: #B4B3B0;
  --gi-rule: #2E2E2B;
  --gi-teal: #4AB0B3;
  --gi-teal-d: #2A7B7E;
  --gi-teal-dd: #1B5A5C;
  --gi-coral: #FF7244;
  --gi-coral-d: #C0451F;
  --gi-gold: #E8C167;
  --gi-gold-d: #8A6A1C;
  --gi-silver: #A5A4A5;
  --gi-plane: #FFFFFF;
  --gi-paper: #F1F1EF;
  --gi-rule-2: #D2D1CC;
  --gi-text: #1D1D1B;
  --gi-text-2: #54534E;
  --gi-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --gi-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── la paleta de Django, reasignada ── */
  --primary: var(--gi-teal-d);
  --primary-fg: #fff;
  --secondary: var(--gi-ink);
  --accent: var(--gi-coral);

  /* Encabezado blanco, no oscuro: decisión de la clienta del 14-09-2026. El
     header oscuro invertía el logo a blanco y se perdía el dorado y el marrón
     de la marca. Ver el comentario en frontend/src/estilos/componentes.css. */
  --header-bg: var(--gi-plane);
  --header-color: var(--gi-text-2);
  --header-branding-color: var(--gi-text);
  --header-link-color: var(--gi-teal-d);

  --breadcrumbs-bg: var(--gi-ink-80);
  --breadcrumbs-fg: var(--gi-on-ink-2);
  --breadcrumbs-link-fg: var(--gi-teal);

  --link-fg: var(--gi-teal-d);
  --link-hover-color: var(--gi-teal-dd);
  --link-selected-fg: var(--gi-coral-d);

  --button-bg: var(--gi-teal-d);
  --button-fg: #fff;
  --button-hover-bg: var(--gi-teal-dd);
  --default-button-bg: var(--gi-coral);
  --default-button-hover-bg: var(--gi-coral-d);
  --close-button-bg: var(--gi-ink-70);
  --close-button-hover-bg: var(--gi-ink);
  --delete-button-bg: var(--gi-coral-d);
  --delete-button-hover-bg: #9c3718;

  --object-tools-bg: var(--gi-ink-70);
  --object-tools-hover-bg: var(--gi-ink);

  --selected-bg: #eef6f6;
  --selected-row: #fdf4e6;

  --font-family-primary: var(--gi-sans);
  --font-family-monospace: var(--gi-mono);
}

/* En oscuro, el mismo teal se apaga demasiado: se usa el claro. */
@media (prefers-color-scheme: dark) {
  :root {
    --primary: var(--gi-teal);
    --link-fg: var(--gi-teal);
    --link-hover-color: #6ec6c9;
    --link-selected-fg: var(--gi-coral);
    --button-bg: var(--gi-teal-d);
    --selected-bg: #21312f;
    --selected-row: #33301f;
  }
}

/* ── Encabezado ────────────────────────────────────────────────────── */
/* Blanco, como el del sitio, para que el logo salga en sus colores. Debajo va
   la franja de estratos de la marca: seis bandas en el mismo orden que están
   quemadas en los banners (.strata de componentes.css). */
#header {
  background: var(--gi-plane);
  border-bottom: 1px solid var(--gi-rule-2);
  padding: 9px 40px;
  position: relative;
}

#header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 4px;
  background: linear-gradient(to right,
    #F4F4F2 0 16.66%, var(--gi-gold) 16.66% 33.33%, var(--gi-silver) 33.33% 50%,
    var(--gi-coral) 50% 66.66%, var(--gi-teal) 66.66% 83.33%, var(--gi-ink) 83.33% 100%);
}

#branding h1 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

#branding h1 a:link,
#branding h1 a:visited { color: var(--gi-text); }

/* El logo mide 500×298: se le da alto fijo y ancho automático, como en el
   sitio, para no deformarlo ni recortarlo. */
#branding h1::before {
  content: "";
  width: 52px;
  height: 31px;
  flex: none;
  background: url("logo-geoinsumos.png") left center / contain no-repeat;
}

/* El nombre en texto queda: el logo solo no dice dónde estás. */
#user-tools { color: var(--gi-text-2); }
#user-tools a { color: var(--gi-teal-d); border-bottom-color: var(--gi-teal); }

/* ── Detalles ──────────────────────────────────────────────────────── */
.module h2,
.module caption,
.inline-group h2 {
  background: var(--gi-ink-70);
  color: var(--gi-on-ink);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Un riel de color por sección, como las tarjetas del catálogo. */
.inline-group { border-left: 3px solid var(--gi-teal-d); }
.inline-group:nth-of-type(2n) { border-left-color: var(--gi-gold-d); }
.inline-group:nth-of-type(3n) { border-left-color: var(--gi-coral-d); }

/* Los SKU y folios son códigos: se leen mejor en monoespaciada. */
.field-sku, .field-folio, .field-referencia,
td.field-sku, th.field-folio { font-family: var(--gi-mono); font-size: .92em; }

#login-form .submit-row input {
  background: var(--gi-coral);
  text-transform: none;
  letter-spacing: .02em;
}
#login-form .submit-row input:hover { background: var(--gi-coral-d); }

.login #branding h1 { justify-content: center; }

/* Aviso de que algo no salió: el mismo coral de alerta del sitio. */
.errornote, .messagelist .error { border-left: 4px solid var(--gi-coral-d); }

/* ── Resumen del inicio ─────────────────────────────────────────────
   Tarjetas de trabajo: cada una es un enlace al listado ya filtrado.
   La jerarquía la da el color, no el tamaño: alerta (coral) para lo que
   está roto, acción (teal) para lo que hay que hacer, dato (gris) para
   lo que sólo se mira. */

.gi-resumen { margin: 0 0 30px; }
.gi-bloque { margin: 0 0 26px; }

.gi-titulo {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gi-text-2);
  margin: 0 0 11px;
  padding: 0 0 7px;
  border-bottom: 1px solid var(--gi-rule-2);
}
.gi-titulo-solo { margin-top: 34px; }

.gi-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 12px;
}

.gi-tarjeta {
  display: block;
  padding: 15px 17px 16px;
  background: var(--gi-plane);
  border: 1px solid var(--gi-rule-2);
  border-left: 3px solid var(--gi-silver);
  text-decoration: none;
  transition: border-color .12s linear, transform .12s linear;
}
.gi-tarjeta:hover { transform: translateY(-1px); border-color: var(--gi-text-2); }
.gi-tarjeta:focus-visible { outline: 2px solid var(--gi-teal-d); outline-offset: 2px; }

.gi-cifra {
  display: block;
  font-size: 30px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--gi-text);
  font-variant-numeric: tabular-nums;
}
.gi-rotulo {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gi-text-2);
}
.gi-nota {
  display: block;
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--gi-text-2);
}

.gi-alerta { border-left-color: var(--gi-coral-d); background: #fff6f3; }
.gi-alerta .gi-cifra { color: var(--gi-coral-d); }
.gi-accion { border-left-color: var(--gi-teal-d); }
.gi-accion .gi-cifra { color: var(--gi-teal-dd); }
.gi-calma  { border-left-color: var(--gi-rule-2); }
.gi-calma  .gi-cifra { color: var(--gi-silver); }
.gi-dato   { border-left-color: var(--gi-gold-d); }

/* ── Tabla de últimas solicitudes ── */
.gi-tabla {
  width: 100%;
  border-collapse: collapse;
  background: var(--gi-plane);
  border: 1px solid var(--gi-rule-2);
}
.gi-tabla th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gi-text-2);
  padding: 9px 13px;
  border-bottom: 1px solid var(--gi-rule-2);
  background: var(--gi-paper);
}
.gi-tabla td { padding: 10px 13px; border-bottom: 1px solid #ecebe8; font-size: 13px; }
.gi-tabla tr:last-child td { border-bottom: 0; }
.gi-codigo { font-family: var(--gi-mono); font-size: 12.5px; }

.gi-pildora {
  display: inline-block;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  border: 1px solid;
  border-radius: 2px;
}
.gi-p-alerta     { color: #fff; background: var(--gi-coral-d); border-color: var(--gi-coral-d); }
.gi-p-recibida   { color: var(--gi-teal-dd); border-color: var(--gi-teal); background: #eef6f6; }
.gi-p-respondida { color: var(--gi-gold-d); border-color: var(--gi-gold); background: #fdf7e9; }
.gi-p-cerrada    { color: var(--gi-text-2); border-color: var(--gi-rule-2); background: var(--gi-paper); }
.gi-p-descartada { color: var(--gi-silver); border-color: var(--gi-rule-2); }

@media (prefers-color-scheme: dark) {
  .gi-tarjeta, .gi-tabla { background: var(--gi-ink-80); border-color: var(--gi-rule); }
  .gi-tabla th { background: var(--gi-ink); color: var(--gi-on-ink-2); border-color: var(--gi-rule); }
  .gi-tabla td { border-color: var(--gi-rule); }
  .gi-cifra { color: var(--gi-on-ink); }
  .gi-rotulo, .gi-nota, .gi-titulo { color: var(--gi-on-ink-2); }
  .gi-titulo { border-color: var(--gi-rule); }
  .gi-alerta { background: #33211c; }
  .gi-alerta .gi-cifra { color: var(--gi-coral); }
  .gi-accion .gi-cifra { color: var(--gi-teal); }
  .gi-p-recibida { background: #21312f; }
  .gi-p-respondida { background: #33301f; }
  .gi-p-cerrada { background: var(--gi-ink); }
}