/* 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á. Los íconos (iconos.svg) son copia de Sprite.astro.
 *
 * 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. Lo propio del panel
 * (tablero, tarjetas, grilla de productos) usa las variables --gi-*.
 *
 * Tema oscuro: Django lo decide por la preferencia del sistema o por su botón
 * de tema (html[data-theme]). Se cubren las dos formas.
 */

: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;

  /* superficies del panel (claro) */
  --gi-fondo: var(--gi-paper);
  --gi-carta: var(--gi-plane);
  --gi-borde: var(--gi-rule-2);
  --gi-borde-suave: #E4E3DF;
  --gi-tinta: var(--gi-text);
  --gi-tinta-2: var(--gi-text-2);
  --gi-sombra: 0 1px 2px rgba(29, 29, 27, .06), 0 2px 8px rgba(29, 29, 27, .04);
  --gi-sombra-alta: 0 4px 18px rgba(29, 29, 27, .12);
  --gi-teal-suave: #EEF6F6;
  --gi-coral-suave: #FFF3EE;
  --gi-gold-suave: #FDF7E9;
  --gi-acento: var(--gi-teal-d);

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

  /* 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: transparent;
  --breadcrumbs-fg: var(--gi-text-2);
  --breadcrumbs-link-fg: var(--gi-teal-d);

  --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-fg: #fff;
  --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);
}

/* Oscuro: por preferencia del sistema (si el botón no fijó claro) o por el
   botón de tema de Django. El mismo teal se apaga demasiado: se usa el claro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gi-fondo: #181816; --gi-carta: var(--gi-ink-80); --gi-borde: var(--gi-rule);
    --gi-borde-suave: #34342F; --gi-tinta: var(--gi-on-ink); --gi-tinta-2: var(--gi-on-ink-2);
    --gi-sombra: none; --gi-sombra-alta: 0 4px 18px rgba(0, 0, 0, .5);
    --gi-teal-suave: #21312f; --gi-coral-suave: #33211c; --gi-gold-suave: #33301f;
    --gi-acento: var(--gi-teal); --darkened-bg: #20201E;
    --primary: var(--gi-teal); --link-fg: var(--gi-teal); --link-hover-color: #6ec6c9;
    --link-selected-fg: var(--gi-coral); --breadcrumbs-link-fg: var(--gi-teal);
    --selected-bg: #21312f; --selected-row: #33301f;
  }
}
:root[data-theme="dark"] {
  --gi-fondo: #181816; --gi-carta: var(--gi-ink-80); --gi-borde: var(--gi-rule);
  --gi-borde-suave: #34342F; --gi-tinta: var(--gi-on-ink); --gi-tinta-2: var(--gi-on-ink-2);
  --gi-sombra: none; --gi-sombra-alta: 0 4px 18px rgba(0, 0, 0, .5);
  --gi-teal-suave: #21312f; --gi-coral-suave: #33211c; --gi-gold-suave: #33301f;
  --gi-acento: var(--gi-teal); --darkened-bg: #20201E;
  --primary: var(--gi-teal); --link-fg: var(--gi-teal); --link-hover-color: #6ec6c9;
  --link-selected-fg: var(--gi-coral); --breadcrumbs-link-fg: var(--gi-teal);
  --selected-bg: #21312f; --selected-row: #33301f;
}

body { background: var(--gi-fondo); }

/* Íconos del sprite: heredan el color del texto. */
.gi-ico { width: 18px; height: 18px; flex: none; vertical-align: -4px; }

/* ── 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: 10px 32px;
  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;
}
#user-tools { color: var(--gi-text-2); }
#user-tools a { color: var(--gi-teal-d); border-bottom-color: var(--gi-teal); }
/* El encabezado es blanco también en oscuro (por el logo): los textos del
   encabezado no cambian con el tema. */
#header #user-tools, #header #user-tools a { color: var(--gi-text-2); }
#header .theme-toggle svg { color: var(--gi-text-2); fill: var(--gi-text-2); }

/* Migas: texto chico sobre el fondo, no una franja oscura. */
div.breadcrumbs {
  padding: 18px 32px 0;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--gi-tinta-2);
}
div.breadcrumbs a { color: var(--gi-acento); }

/* ── Estructura ─────────────────────────────────────────────────────── */
#content { padding: 18px 32px 40px; }
#content > h1, #content-main > h1 {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--gi-tinta);
  margin: 4px 0 18px;
}
#content h2 { color: var(--gi-tinta); }

/* Barra lateral de navegación: limpia, con la sección actual marcada. */
#nav-sidebar { background: var(--gi-carta); border-right: 1px solid var(--gi-borde); }
#nav-sidebar .module caption,
#nav-sidebar .module h2,
#nav-sidebar .app-catalogo caption, #nav-sidebar .app-solicitudes caption,
#nav-sidebar .app-auth caption {
  background: transparent;
  color: var(--gi-tinta-2);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 16px 16px 6px;
}
#nav-sidebar .module caption a { color: var(--gi-tinta-2); }
#nav-sidebar th, #nav-sidebar td { border: 0; padding: 7px 16px; }
#nav-sidebar th a { font-weight: 500; color: var(--gi-tinta); }
#nav-sidebar tr.current-model { background: var(--gi-teal-suave); }
#nav-sidebar tr.current-model th { box-shadow: inset 3px 0 0 var(--gi-acento); }
#nav-sidebar tr.current-model th a { color: var(--gi-acento); font-weight: 600; }
.toggle-nav-sidebar { background: var(--gi-carta); border-color: var(--gi-borde); color: var(--gi-tinta-2); }
#nav-filter { border-color: var(--gi-borde); }

/* Módulos y formularios: tarjetas blancas con borde fino. */
.module {
  background: var(--gi-carta);
  border: 1px solid var(--gi-borde);
  box-shadow: var(--gi-sombra);
  border-radius: 6px;
  overflow: hidden;
}
#nav-sidebar .module { border: 0; box-shadow: none; border-radius: 0; background: transparent; }
.module h2, .module caption, .inline-group h2 {
  background: transparent;
  color: var(--gi-tinta);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gi-borde-suave);
}
fieldset.module h2 { background: transparent; }
.module.collapse h2, fieldset.collapsed h2 { border-bottom: 0; }
.form-row { border-bottom-color: var(--gi-borde-suave); padding: 12px 16px; }
.aligned label { color: var(--gi-tinta-2); font-weight: 500; }
fieldset .fieldset-heading, details summary { color: var(--gi-tinta); }

/* Un riel de color por sección del producto, como las tarjetas del catálogo. */
.inline-group { border: 1px solid var(--gi-borde); border-left: 3px solid var(--gi-teal-d); border-radius: 6px; overflow: hidden; background: var(--gi-carta); box-shadow: var(--gi-sombra); }
.inline-group .module { border: 0; box-shadow: none; border-radius: 0; }
.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); }

/* Campos de texto un poco más cómodos. */
input[type=text], input[type=search], input[type=email], input[type=number],
input[type=url], input[type=password], textarea, select, .vTextField {
  border: 1px solid var(--gi-borde);
  border-radius: 4px;
  padding: 7px 9px;
  background: var(--gi-carta);
  color: var(--gi-tinta);
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--gi-teal);
  outline-offset: 0;
  border-color: var(--gi-teal-d);
}

/* Botones: menos de «formulario de 2005», más de sitio. */
.button, input[type=submit], input[type=button], .submit-row input, a.button {
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 9px 16px;
}
.submit-row {
  background: var(--gi-carta);
  border: 1px solid var(--gi-borde);
  border-radius: 6px;
  box-shadow: var(--gi-sombra);
  padding: 12px 16px;
}
.object-tools a:link, .object-tools a:visited {
  border-radius: 4px;
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: .04em;
}
/* El addlink lleva su ícono «+» como fondo a la derecha: necesita ese espacio. */
.object-tools a.addlink { background-color: var(--gi-coral-d); padding-right: 30px; background-position: right 10px center; }
.object-tools a.addlink:hover { background-color: #9c3718; }

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

/* ── Listados ───────────────────────────────────────────────────────── */
#changelist { background: transparent; }
#changelist .changelist-form-container { gap: 20px; }
#changelist #toolbar {
  background: var(--gi-carta);
  border: 1px solid var(--gi-borde);
  border-radius: 6px;
  box-shadow: var(--gi-sombra);
  padding: 12px 14px;
  margin-bottom: 14px;
}
#changelist #toolbar form input[type="text"] { min-width: 280px; }
#changelist .actions {
  background: var(--gi-carta);
  border: 1px solid var(--gi-borde);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 14px;
  color: var(--gi-tinta-2);
}
#changelist table thead th {
  background: var(--gi-carta);
  color: var(--gi-tinta-2);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--gi-borde);
}
#changelist .results {
  background: var(--gi-carta);
  border: 1px solid var(--gi-borde);
  border-radius: 6px;
  box-shadow: var(--gi-sombra);
  overflow: hidden;
}
#result_list td, #result_list th { vertical-align: middle; border-bottom-color: var(--gi-borde-suave); padding: 10px 12px; }
#result_list tbody tr:hover { background: var(--gi-teal-suave); }
.paginator {
  background: transparent;
  border: 0;
  color: var(--gi-tinta-2);
  padding: 14px 4px;
}
.paginator a:link, .paginator a:visited, .paginator .this-page {
  border-radius: 4px;
  padding: 4px 9px;
}

/* Filtros a la derecha: una tarjeta, con la opción elegida marcada. */
#changelist-filter {
  background: var(--gi-carta);
  border: 1px solid var(--gi-borde);
  border-radius: 6px;
  box-shadow: var(--gi-sombra);
  overflow: hidden;
}
#changelist-filter h2 {
  background: transparent;
  color: var(--gi-tinta);
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid var(--gi-borde-suave);
}
#changelist-filter h3, #changelist-filter summary {
  color: var(--gi-tinta-2);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#changelist-filter li a { border-radius: 3px; padding: 3px 6px; margin-left: -6px; }
#changelist-filter li.selected a {
  color: var(--gi-acento);
  background: var(--gi-teal-suave);
  border-left: 0;
  font-weight: 600;
}

/* Miniaturas en tablas y en el bloque de fotos de la ficha. */
.gi-mini {
  display: block;
  width: 56px;
  height: 42px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--gi-borde-suave);
  border-radius: 4px;
}
.gi-mini-vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--gi-tinta-2);
  background: var(--gi-fondo);
}
td.field-miniatura { width: 60px; }

/* ── Selector Grilla / Lista ── */
.object-tools li.gi-selector-vista {
  display: inline-flex;
  border: 1px solid var(--gi-borde);
  border-radius: 4px;
  overflow: hidden;
  background: var(--gi-carta);
  margin-right: 6px;
}
.object-tools .gi-selector-vista a:link, .object-tools .gi-selector-vista a:visited {
  background: transparent;
  color: var(--gi-tinta-2);
  border-radius: 0;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.object-tools .gi-selector-vista a.gi-on { background: var(--gi-ink-70); color: #fff; }
.object-tools .gi-selector-vista .gi-ico { width: 14px; height: 14px; }

/* ── Grilla de productos ─────────────────────────────────────────────
   Una <table> con display de grilla: cada <tr> es una tarjeta. Ver la nota en
   plantillas/admin/catalogo/producto/change_list_results.html. */
#changelist .results:has(.gi-grilla) { background: transparent; border: 0; box-shadow: none; overflow: visible; }
.gi-todos { display: inline-flex; gap: 8px; align-items: center; margin: 0 0 10px; color: var(--gi-tinta-2); font-size: 12px; }
table.gi-grilla, table.gi-grilla tbody { display: block; width: 100%; border: 0; background: transparent; }
table.gi-grilla tbody {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
table.gi-grilla tr.gi-tarjeta-prod {
  display: flex;
  flex-direction: column;
  background: var(--gi-carta);
  border: 1px solid var(--gi-borde);
  border-radius: 6px;
  box-shadow: var(--gi-sombra);
  overflow: hidden;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
table.gi-grilla tr.gi-tarjeta-prod:hover { box-shadow: var(--gi-sombra-alta); transform: translateY(-2px); background: var(--gi-carta); }
table.gi-grilla tr.gi-tarjeta-prod.selected { border-color: var(--gi-teal-d); box-shadow: 0 0 0 2px var(--gi-teal); background: var(--gi-carta); }
table.gi-grilla td { display: block; border: 0; padding: 0; }
.gi-tp-foto { position: relative; aspect-ratio: 4 / 3; background: #fff; border-bottom: 1px solid var(--gi-borde-suave); }
.gi-tp-foto > a { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.gi-tp-foto img { width: 100%; height: 100%; object-fit: contain; padding: 8px; box-sizing: border-box; }
.gi-tp-foto .action-select {
  position: absolute;
  top: 10px; left: 10px;
  width: 18px; height: 18px;
  z-index: 2;
  accent-color: var(--gi-teal-d);
  opacity: .55;
}
.gi-tarjeta-prod:hover .action-select, .gi-tarjeta-prod.selected .action-select { opacity: 1; }
.gi-tp-foto .gi-pildora { position: absolute; top: 9px; right: 9px; }
.gi-tp-sinfoto {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--gi-silver);
  background: var(--gi-paper);
  width: 100%; height: 100%; justify-content: center;
}
.gi-tp-sinfoto .gi-ico { width: 46px; height: 46px; }
.gi-tp-sinfoto small { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.gi-tp-cuerpo { display: flex !important; flex-direction: column; gap: 6px; padding: 12px 14px 14px !important; flex: 1; }
.gi-tp-cat {
  display: inline-flex; gap: 6px; align-items: center;
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gi-tinta-2);
}
.gi-tp-cat .gi-ico { width: 14px; height: 14px; color: var(--gi-acento); }
a.gi-tp-nombre {
  font-size: 14px; line-height: 1.3; font-weight: 600; color: var(--gi-tinta);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
a.gi-tp-nombre:hover { color: var(--gi-acento); }
.gi-tp-meta {
  margin-top: auto;
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  font-size: 11.5px; color: var(--gi-tinta-2);
  padding-top: 8px; border-top: 1px dashed var(--gi-borde-suave);
}
.gi-tp-meta .gi-ico { width: 13px; height: 13px; margin-right: 3px; vertical-align: -2px; }
.gi-inactivo .gi-tp-foto img { opacity: .45; filter: grayscale(.6); }

/* ── Ficha de producto ── */
fieldset.gi-ficha-galeria { border: 0; box-shadow: none; background: transparent; }
fieldset.gi-ficha-galeria .form-row { padding: 0; border: 0; }
fieldset.gi-ficha-galeria label { display: none; }
fieldset.gi-ficha-galeria .readonly { margin: 0 !important; padding: 0; width: 100%; }
.gi-galeria { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; }
.gi-galeria a { flex: none; }
.gi-galeria img {
  display: block;
  height: 170px; width: auto; max-width: 260px;
  object-fit: contain; background: #fff;
  border: 1px solid var(--gi-borde); border-radius: 6px;
  padding: 6px; box-sizing: border-box;
}
.gi-galeria a:first-child img { height: 210px; max-width: 320px; border-color: var(--gi-teal-d); }
.gi-galeria-vacia {
  padding: 22px; border: 1px dashed var(--gi-borde); border-radius: 6px;
  color: var(--gi-tinta-2); background: var(--gi-carta);
}
a.gi-boton-sitio {
  display: inline-block; padding: 6px 12px; border-radius: 4px;
  background: var(--gi-teal-suave); color: var(--gi-acento); font-weight: 600;
}

/* ── Login ── */
#login-form .submit-row { background: transparent; border: 0; box-shadow: none; padding: 0; }
#login-form .submit-row input { background: var(--gi-coral); text-transform: none; letter-spacing: .02em; width: 100%; }
#login-form .submit-row input:hover { background: var(--gi-coral-d); }
.login #container { border-radius: 8px; box-shadow: var(--gi-sombra-alta); border: 1px solid var(--gi-borde); overflow: hidden; }
.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); }
ul.messagelist li { border-radius: 6px; margin-bottom: 8px; }

/* ── Tablero del inicio ───────────────────────────────────────────────
   Tarjetas de trabajo: cada una es un enlace al listado ya filtrado. La
   jerarquía la da el color: alerta (coral) para lo que está roto, acción
   (teal) para lo que hay que hacer, dato (dorado) para lo que sólo se mira. */
/* Django fija el inicio en 600 px para dejar espacio a «Acciones recientes». */
.dashboard.gi-inicio #content { width: auto; max-width: 1280px; }
.gi-resumen { margin: 0 0 30px; color: var(--gi-tinta); }
.gi-bloque { margin: 0 0 30px; }

.gi-saludo {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 18px; margin: 6px 0 26px;
}
.gi-antetitulo {
  margin: 0 0 4px; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gi-tinta-2);
}
.gi-saludo h1 { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: -.02em; color: var(--gi-tinta); }

.gi-accesos { display: flex; flex-wrap: wrap; gap: 8px; }
a.gi-acceso {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 12px;
  background: var(--gi-carta); color: var(--gi-tinta);
  border: 1px solid var(--gi-borde); border-radius: 6px; box-shadow: var(--gi-sombra);
  text-decoration: none; transition: border-color .12s, transform .12s;
}
a.gi-acceso:hover { border-color: var(--gi-teal-d); transform: translateY(-1px); color: var(--gi-tinta); }
a.gi-acceso .gi-ico { width: 20px; height: 20px; color: var(--gi-acento); }
.gi-acceso-txt { display: flex; flex-direction: column; font-size: 12px; line-height: 1.2; color: var(--gi-tinta-2); }
.gi-acceso-txt b { font-size: 16px; color: var(--gi-tinta); font-variant-numeric: tabular-nums; }

/* Solicitudes lleva 2 o 3 tarjetas y catálogo 3: el ancho va en esa razón. */
.gi-columnas { display: grid; grid-template-columns: 2fr 3fr; gap: 0 26px; }
@media (max-width: 1000px) { .gi-columnas { grid-template-columns: 1fr; } }

.gi-titulo {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--gi-tinta-2); margin: 0 0 12px; padding: 0 0 8px;
  border-bottom: 1px solid var(--gi-borde);
}
.gi-titulo span { font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--gi-silver); }
.gi-titulo a { margin-left: auto; letter-spacing: .02em; text-transform: none; font-weight: 500; }

.gi-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.gi-tarjeta {
  position: relative;
  display: block;
  padding: 16px 18px 17px;
  background: var(--gi-carta);
  border: 1px solid var(--gi-borde);
  border-top: 3px solid var(--gi-silver);
  border-radius: 6px;
  box-shadow: var(--gi-sombra);
  text-decoration: none;
  transition: box-shadow .15s, transform .15s;
}
a.gi-tarjeta:hover { transform: translateY(-2px); box-shadow: var(--gi-sombra-alta); }
a.gi-tarjeta:focus-visible { outline: 2px solid var(--gi-teal-d); outline-offset: 2px; }
.gi-tarjeta-ico { position: absolute; top: 15px; right: 15px; width: 22px; height: 22px; color: var(--gi-silver); }
.gi-cifra {
  display: block; font-size: 32px; line-height: 1.05; font-weight: 600;
  letter-spacing: -.02em; color: var(--gi-tinta); font-variant-numeric: tabular-nums;
}
.gi-cifra small { font-size: 18px; margin-left: 1px; }
.gi-rotulo {
  display: block; margin-top: 4px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--gi-tinta-2);
}
.gi-nota { display: block; margin-top: 8px; font-size: 12px; line-height: 1.45; color: var(--gi-tinta-2); }

.gi-alerta { border-top-color: var(--gi-coral-d); background: var(--gi-coral-suave); }
.gi-alerta .gi-cifra, .gi-alerta .gi-tarjeta-ico { color: var(--gi-coral-d); }
.gi-accion { border-top-color: var(--gi-teal-d); }
.gi-accion .gi-cifra, .gi-accion .gi-tarjeta-ico { color: var(--gi-acento); }
.gi-calma  { border-top-color: var(--gi-borde); }
.gi-calma  .gi-cifra { color: var(--gi-silver); }
.gi-dato   { border-top-color: var(--gi-gold); }
.gi-dato .gi-tarjeta-ico { color: var(--gi-gold-d); }

/* Barra de avance: cuánto del catálogo tiene foto. */
.gi-barra {
  display: block; height: 6px; margin-top: 12px;
  background: var(--gi-borde-suave); border-radius: 3px; overflow: hidden;
}
.gi-barra i { display: block; height: 100%; background: var(--gi-teal-d); border-radius: 3px; }
.gi-barra-celda { display: inline-block; width: 90px; margin: 0 6px 0 0; vertical-align: middle; }

/* Categorías: como el índice de categorías del sitio. */
.gi-categorias { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
a.gi-cat {
  display: grid;
  grid-template-columns: 42px 1fr;
  grid-template-areas: "ico nombre" "ico cifra" "barra barra" "pie pie";
  column-gap: 12px;
  padding: 14px 16px 13px;
  background: var(--gi-carta);
  border: 1px solid var(--gi-borde);
  border-radius: 6px;
  box-shadow: var(--gi-sombra);
  text-decoration: none;
  color: var(--gi-tinta);
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
a.gi-cat:hover { transform: translateY(-2px); box-shadow: var(--gi-sombra-alta); border-color: var(--gi-teal-d); color: var(--gi-tinta); }
.gi-cat .gi-cat-ico { grid-area: ico; }
.gi-cat-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 8px;
  background: var(--gi-teal-suave); color: var(--gi-acento);
}
.gi-cat-ico .gi-ico { width: 22px; height: 22px; }
.gi-cat-nombre { grid-area: nombre; font-weight: 600; font-size: 13.5px; line-height: 1.25; align-self: end; }
.gi-cat-cifra { grid-area: cifra; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gi-cat-cifra small { font-size: 11.5px; font-weight: 400; color: var(--gi-tinta-2); margin-left: 4px; }
.gi-cat .gi-barra { grid-area: barra; }
.gi-cat-pie { grid-area: pie; margin-top: 6px; font-size: 11px; color: var(--gi-tinta-2); }
.gi-cat-vacia { opacity: .6; }
.gi-cat-vacia .gi-cat-ico { background: var(--gi-paper); color: var(--gi-silver); }
#result_list .gi-cat-ico { width: 34px; height: 34px; }

/* Últimas solicitudes: tarjetas en vez de tabla. */
.gi-solicitudes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
a.gi-sol {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px;
  background: var(--gi-carta); border: 1px solid var(--gi-borde); border-radius: 6px;
  box-shadow: var(--gi-sombra); text-decoration: none; color: var(--gi-tinta);
  transition: box-shadow .15s, transform .15s;
}
a.gi-sol:hover { transform: translateY(-2px); box-shadow: var(--gi-sombra-alta); color: var(--gi-tinta); }
.gi-sol-folio { font-family: var(--gi-mono); font-size: 12px; color: var(--gi-acento); }
.gi-sol-quien { font-weight: 600; font-size: 14px; }
.gi-sol-meta { font-size: 12px; color: var(--gi-tinta-2); margin-bottom: 6px; }
.gi-sol .gi-pildora { align-self: flex-start; }

.gi-vacio {
  display: flex; align-items: center; gap: 14px;
  padding: 22px; border: 1px dashed var(--gi-borde); border-radius: 6px;
  color: var(--gi-tinta-2); background: var(--gi-carta);
}
.gi-vacio .gi-ico { width: 30px; height: 30px; color: var(--gi-silver); }
.gi-vacio p { margin: 0; }

/* Pastillas de estado. */
.gi-pildora {
  display: inline-block; padding: 2px 9px;
  font-size: 11px; font-weight: 600; letter-spacing: .03em;
  border: 1px solid; border-radius: 999px; white-space: nowrap;
}
.gi-p-alerta     { color: #fff; background: var(--gi-coral-d); border-color: var(--gi-coral-d); }
.gi-p-ok         { color: var(--gi-teal-dd); border-color: var(--gi-teal); background: var(--gi-teal-suave); }
.gi-p-recibida   { color: var(--gi-teal-dd); border-color: var(--gi-teal); background: var(--gi-teal-suave); }
.gi-p-respondida { color: var(--gi-gold-d); border-color: var(--gi-gold); background: var(--gi-gold-suave); }
.gi-p-cerrada    { color: var(--gi-tinta-2); border-color: var(--gi-borde); background: var(--gi-fondo); }
.gi-p-descartada { color: var(--gi-silver); border-color: var(--gi-borde); background: transparent; }
.gi-p-oculto     { color: #fff; background: var(--gi-ink-70); border-color: var(--gi-ink-70); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gi-p-ok, :root:not([data-theme="light"]) .gi-p-recibida { color: var(--gi-teal); }
  :root:not([data-theme="light"]) .gi-p-respondida { color: var(--gi-gold); }
}
:root[data-theme="dark"] .gi-p-ok, :root[data-theme="dark"] .gi-p-recibida { color: var(--gi-teal); }
:root[data-theme="dark"] .gi-p-respondida { color: var(--gi-gold); }

/* ── Publicar el sitio ───────────────────────────────────────────────
   Franja del tablero y de la pantalla de publicaciones. Coral si hay cambios
   sin publicar o si la última falló; si no, neutra. */
.gi-publicar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 18px; margin: 0 0 26px;
  background: var(--gi-carta); border: 1px solid var(--gi-borde);
  border-left: 4px solid var(--gi-teal-d); border-radius: 6px; box-shadow: var(--gi-sombra);
}
.gi-publicar-pendiente { border-left-color: var(--gi-gold); background: var(--gi-gold-suave); }
.gi-publicar-fallo { border-left-color: var(--gi-coral-d); background: var(--gi-coral-suave); }
.gi-publicar-txt { display: flex; align-items: center; gap: 14px; color: var(--gi-tinta); }
.gi-publicar-txt b { display: block; font-size: 14px; }
.gi-publicar-txt span { font-size: 12.5px; color: var(--gi-tinta-2); }
.gi-publicar-ico { width: 30px; height: 30px; color: var(--gi-acento); flex: none; }
.gi-publicar form { display: flex; align-items: center; gap: 12px; margin: 0; }
.gi-publicar form small { color: var(--gi-tinta-2); max-width: 340px; }
button.gi-boton-publicar {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border: 0; border-radius: 4px; cursor: pointer;
  background: var(--gi-coral-d); color: #fff; font: 600 13px var(--gi-sans); letter-spacing: .02em;
}
button.gi-boton-publicar:hover { background: #9c3718; }
button.gi-boton-publicar:disabled { background: var(--gi-silver); cursor: not-allowed; }
button.gi-boton-publicar .gi-ico { width: 16px; height: 16px; }
.gi-publicar-hist { font-size: 12px; }

.gi-bitacora {
  margin: 0; padding: 12px 14px; max-height: 420px; overflow: auto;
  background: var(--gi-ink); color: var(--gi-on-ink); border-radius: 6px;
  font: 12px/1.55 var(--gi-mono); white-space: pre-wrap;
}
.gi-p-pub-pendiente { color: var(--gi-gold-d); border-color: var(--gi-gold); background: var(--gi-gold-suave); }
.gi-p-pub-en_curso  { color: var(--gi-teal-dd); border-color: var(--gi-teal); background: var(--gi-teal-suave); }
.gi-p-pub-ok        { color: #fff; border-color: var(--gi-teal-d); background: var(--gi-teal-d); }
.gi-p-pub-error     { color: #fff; border-color: var(--gi-coral-d); background: var(--gi-coral-d); }

/* Aviso arriba de la biblioteca de imágenes. */
a.gi-aviso {
  display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 16px;
  background: var(--gi-gold-suave); border: 1px solid var(--gi-gold); border-radius: 6px;
  color: var(--gi-tinta); text-decoration: none;
}
a.gi-aviso:hover { border-color: var(--gi-gold-d); color: var(--gi-tinta); }
a.gi-aviso .gi-ico { width: 22px; height: 22px; color: var(--gi-gold-d); }
table.gi-grilla-fotos tbody { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.gi-cifras-li { white-space: nowrap; color: var(--gi-tinta-2); }

/* Pantallas angostas. */
@media (max-width: 767px) {
  #header, div.breadcrumbs, #content { padding-left: 16px; padding-right: 16px; }
  .gi-saludo h1 { font-size: 24px; }
  #changelist #toolbar form input[type="text"] { min-width: 0; width: 100%; }
  table.gi-grilla tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}