/*
 * EL ASPECTO DEL ERP.
 *
 * Casi todo esto NO son reglas: son las variables de color del admin de
 * Django redefinidas. Django pinta toda su interfaz con ellas, asi que
 * cambiarlas de valor cambia el admin entero —botones, enlaces, cabeceras
 * de tabla, filtros— sin tocar una sola regla de las suyas y sin pelear
 * con su especificidad.
 *
 * La paleta es la de HardenWare, la misma de los comprobantes impresos:
 * gris neutro #2b2b2b y bronce. El bronce tiene dos tonos porque un solo
 * valor no sirve para los dos temas: el del logo (#86674b) se lee sobre
 * blanco y desaparece sobre negro; el claro (#ca9e73) al reves.
 *
 * El resto son correcciones de aire y de tamanos. El admin de Django esta
 * dibujado con una densidad de 2010: letra de 11px, filas pegadas y
 * mayusculas por todos lados.
 */

:root {
  /* La cabecera y los acentos. */
  --hw-gris: #2b2b2b;
  --hw-bronce: #7a5c42;        /* sobre fondo claro */
  --hw-bronce-claro: #ca9e73;  /* sobre fondo oscuro */

  /* Lo que dicen los informes: verde = a favor, naranja = mirar esto.
     Cada uno con su tono para cada tema; sobre negro el verde oscuro no
     se lee. El rojo sale de --error-fg, que Django ya da vuelta solo. */
  --hw-bien: #2e7d32;
  --hw-aviso: #b4660f;

  --primary: var(--hw-gris);
  --secondary: var(--hw-gris);
  --accent: var(--hw-bronce-claro);

  --header-bg: var(--hw-gris);
  --header-color: #e9e4de;
  --header-branding-color: #ffffff;
  --header-link-color: #ffffff;

  --breadcrumbs-bg: #f2f0ee;
  --breadcrumbs-fg: #6b6054;
  --breadcrumbs-link-fg: var(--hw-bronce);

  --link-fg: var(--hw-bronce);
  --link-hover-color: #5d4531;
  --link-selected-fg: var(--hw-bronce);

  --button-bg: var(--hw-bronce);
  --button-hover-bg: #5d4531;
  --default-button-bg: var(--hw-gris);
  --default-button-hover-bg: #141414;

  --object-tools-bg: var(--hw-gris);
  --object-tools-hover-bg: #141414;

  --hairline-color: #e6e3e0;
  --border-color: #d3cec9;
  --darkened-bg: #f7f5f3;
  --selected-bg: #efeae4;
  --selected-row: #fbf3e9;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: var(--hw-bronce-claro);
    --primary-fg: #1a1a1a;
    --accent: var(--hw-bronce-claro);

    --header-bg: #1c1c1c;
    --header-color: #cfc7bd;

    --breadcrumbs-bg: #1c1c1c;
    --breadcrumbs-fg: #9d9289;
    --breadcrumbs-link-fg: var(--hw-bronce-claro);

    --link-fg: var(--hw-bronce-claro);
    --link-hover-color: #e2bf9c;
    --link-selected-fg: var(--hw-bronce-claro);

    --button-bg: var(--hw-bronce);
    --button-hover-bg: #8f6d4e;
    --default-button-bg: #3a3a3a;
    --default-button-hover-bg: #474747;

    --object-tools-bg: #3a3a3a;
    --object-tools-hover-bg: #474747;

    --hairline-color: #2a2724;
    --border-color: #3a3632;
    --darkened-bg: #1f1d1b;
    --selected-bg: #262320;
    --selected-row: #2e2518;

    --hw-bien: #6fbf73;
    --hw-aviso: #e0a05a;
  }
}

html[data-theme="dark"] {
  --primary: var(--hw-bronce-claro);
  --primary-fg: #1a1a1a;
  --accent: var(--hw-bronce-claro);

  --header-bg: #1c1c1c;
  --header-color: #cfc7bd;

  --breadcrumbs-bg: #1c1c1c;
  --breadcrumbs-fg: #9d9289;
  --breadcrumbs-link-fg: var(--hw-bronce-claro);

  --link-fg: var(--hw-bronce-claro);
  --link-hover-color: #e2bf9c;
  --link-selected-fg: var(--hw-bronce-claro);

  --button-bg: var(--hw-bronce);
  --button-hover-bg: #8f6d4e;
  --default-button-bg: #3a3a3a;
  --default-button-hover-bg: #474747;

  --object-tools-bg: #3a3a3a;
  --object-tools-hover-bg: #474747;

  --hairline-color: #2a2724;
  --border-color: #3a3632;
  --darkened-bg: #1f1d1b;
  --selected-bg: #262320;
  --selected-row: #2e2518;

  --hw-bien: #6fbf73;
  --hw-aviso: #e0a05a;
}

/* ================================================================= */
/* LA CABECERA                                                        */
/* ================================================================= */

#header {
  padding: 13px 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
#branding h1, #site-name {
  margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.3px;
}
#branding h1 a, #site-name a { color: #fff; text-decoration: none; }

/* El saludo venia TODO EN MAYUSCULAS y apretado contra los enlaces. */
#user-tools {
  font-size: 12.5px; text-transform: none; letter-spacing: 0;
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 0; margin: 0;
}
#user-tools a, #user-tools .theme-toggle {
  border: 0; padding: 4px 9px; border-radius: 6px;
  text-decoration: none; opacity: .88;
}
#user-tools a:hover { background: rgba(255, 255, 255, .11); opacity: 1; }
#user-tools strong { font-weight: 600; }

/* ================================================================= */
/* MIGAS Y TITULOS                                                    */
/* ================================================================= */

div.breadcrumbs {
  padding: 9px 22px; font-size: 12.5px; letter-spacing: .1px;
  border-bottom: 1px solid var(--hairline-color);
}

#content h1, .colM h1 {
  font-size: 22px; font-weight: 600; letter-spacing: -.3px;
  margin-bottom: 16px;
}
#content h2 { font-size: 15px; }

/* ================================================================= */
/* LISTADOS                                                           */
/* ================================================================= */

#changelist-search {
  padding: 11px 13px; border-radius: 9px;
  background: var(--darkened-bg); border: 1px solid var(--hairline-color);
}
#changelist-search input[type="text"],
input[type="text"], input[type="number"], input[type="email"], input[type="url"],
input[type="password"], input[type="search"], input[type="date"], textarea, select {
  border: 1px solid var(--border-color); border-radius: 6px;
  padding: 6px 9px; font-size: 13.5px;
  background: var(--body-bg); color: var(--body-fg);
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary);
}

#result_list { border: 1px solid var(--hairline-color); border-radius: 9px; overflow: hidden; }
#result_list thead th {
  font-size: 11.5px; letter-spacing: .5px; padding: 10px 11px;
  background: var(--darkened-bg); border-bottom: 1px solid var(--border-color);
}
#result_list tbody td, #result_list tbody th { padding: 9px 11px; font-size: 13.5px; }
#result_list tbody tr:hover > * { background: var(--selected-row); }

#changelist-filter { border-radius: 9px; }
.paginator { padding: 12px 2px; font-size: 13px; border-top: 1px solid var(--hairline-color); }

.object-tools a {
  border-radius: 7px; font-size: 12px; letter-spacing: .2px;
  text-transform: none; padding: 7px 13px;
}

/* ================================================================= */
/* FORMULARIOS                                                        */
/* ================================================================= */

.module { border-radius: 9px; overflow: hidden; border: 1px solid var(--hairline-color); }

/* Los titulos de seccion salian en NEGRO SOLIDO: el admin los pinta con
   --header-bg, el mismo gris de la cabecera, y una ficha con cinco
   secciones quedaba con cinco barras negras. Van con el gris suave.

   El `#content` no es decorativo: forms.css se carga DESPUES de esta
   hoja —el change_form lo agrega sobre nuestro extrastyle— asi que con
   el mismo selector gana el. Hace falta pesar mas. */
#content .module > h2,
#content .module caption,
#content .inline-group > h2,
#content fieldset .fieldset-heading,
#content fieldset .inline-heading {
  font-size: 12px; letter-spacing: .9px; padding: 10px 13px;
  background: var(--darkened-bg); color: var(--body-quiet-color);
  border-bottom: 1px solid var(--hairline-color);
}
fieldset.module { margin-bottom: 18px; }
.form-row { padding: 11px 13px; border-bottom: 1px solid var(--hairline-color); }
.aligned label { font-size: 13px; font-weight: 600; color: var(--body-fg); }
.help, .helptext, div.help {
  font-size: 12px; line-height: 1.55; color: var(--body-quiet-color);
}

.submit-row {
  border-radius: 9px; padding: 12px 14px; gap: 9px;
  background: var(--darkened-bg); border: 1px solid var(--hairline-color);
}
.button, input[type="submit"], input[type="button"], .submit-row input, a.button {
  border-radius: 7px; padding: 8px 15px; font-size: 13.5px; font-weight: 500;
  letter-spacing: .1px; border: 0;
}

/* ================================================================= */
/* AVISOS                                                             */
/* ================================================================= */

ul.messagelist li {
  border-radius: 8px; font-size: 13.5px; padding: 11px 14px 11px 40px;
  margin-bottom: 7px;
}

/* ================================================================= */
/* LAS PANTALLAS PROPIAS                                              */
/* ================================================================= */
/* Los saldos, la conciliacion, los importadores: no son el alta de un
   modelo, asi que el admin no les da ningun estilo. Dibujan sus tablas
   a mano y quedaban con los renglones pegados y sin lineas. */

#content .module table { width: 100%; border-collapse: collapse; }
#content .module table td, #content .module table th { padding: 7px 4px; }
#content .module table tr + tr > td { border-top: 1px solid var(--hairline-color); }

/* Un numero se lee comparandolo con el de arriba, y para eso las cifras
   tienen que ocupar todas lo mismo. */
#content .module table td[style*="right"],
#content .module table th[style*="right"],
#content td.num, #content .num {
  font-variant-numeric: tabular-nums;
}

/* Los avisos de estas pantallas son un `.module` con una barra de color
   al costado. Se les da el aire y el redondeo del resto. */
#content .module[style*="border-left"] { padding: 15px 18px; }
#content .module[style*="border-left"] > h2 {
  background: none; border: 0; padding: 0 0 6px;
  font-size: 14px; letter-spacing: 0; text-transform: none;
}

@media (max-width: 767px) {
  #header { padding: 11px 15px; }
  #content h1, .colM h1 { font-size: 19px; }
}

/* EL NOMBRE DE CADA RENGLÓN GUARDADO, EN TODAS LAS PANTALLAS. Django lo
   pone en letra chica arriba de la fila de un inline («1 x HW-LicFab»,
   «Cheque de terceros — 1070218.00»): repite lo que dicen las columnas,
   sin formato, y se monta sobre el primer casillero. */
.inline-group .tabular td.original p {
  display: none;
}

/* «Eliminar … seleccionados», debajo de cada grilla de líneas:
   ver empresas/eliminar_seleccionados.py. */
.eliminar-seleccionados { margin: -10px 0 20px; }
.eliminar-seleccionados button {
  padding: 8px 15px; border: 0; border-radius: 4px; cursor: pointer;
  background: var(--delete-button-bg); color: var(--button-fg);
  font-size: 0.8125rem;
}
.eliminar-seleccionados button:hover { background: var(--delete-button-hover-bg); }


/* El aviso de pedidos de borrado en la portada: ver
   empresas/pedidos_de_borrado.py. */
.aviso-borrados { margin: 0 0 20px; padding: 10px 14px; border-radius: 4px;
  background: var(--message-warning-bg); }
.aviso-borrados a { font-weight: 600; }