/* ============================================================================
   mixbot — hoja de estilo única de la aplicación.

   La cargan **todas** las páginas: las propias (`maestro/base.html`) y las del
   admin de Django, incluida la de inicio de sesión (`admin/base_site.html`).
   Una sola hoja es lo que hace que las dos mitades se vean como un solo
   producto; si algo se ve distinto en el admin, se arregla aquí y no con un
   estilo suelto en una plantilla.

   Tema **Kibble**: la paleta sale del logo de Extruder S.A. —naranjo de marca—
   sobre neutros cálidos de bolsa de alimento, con verde y rojo reservados para
   lo semántico (dentro / fuera de rango). Nada decorativo compite con los
   números: las tablas son el contenido, todo lo demás es marco.

   Cambia solo la presentación. Ninguna regla de aquí altera cálculos, campos
   de formulario ni flujos (constitución, principio 1: eso vive en las specs).
   ========================================================================= */

/* ---------------------------------------------------------------- 1. Tokens */

:root,
[data-theme="light"],
[data-theme="dark"] {
  /* Marca. `--marca` es la que lleva texto blanco encima y cumple contraste;
     `--marca-viva` es decorativa (huella, detalles grandes). */
  --marca: #c24a14;
  --marca-viva: #e2571e;
  --marca-oscura: #9b3a0e;
  --marca-suave: #fdf0e8;

  /* Neutros cálidos */
  --carbon: #2b211a;
  --arena: #f8f4ee;
  --superficie: #ffffff;
  --superficie-2: #fbf8f4;
  --borde: #e7ddd1;
  --borde-fuerte: #d5c7b6;
  --texto: #2b211a;
  --suave: #7a6b5d;

  /* Semánticos */
  --verde: #2e7d4f;
  --verde-suave: #e7f3eb;
  --rojo: #b3261e;
  --rojo-suave: #fbeae8;
  --ambar: #b7791f;
  --ambar-suave: #fdf2e0;

  --radio: 10px;
  --radio-chico: 6px;
  --sombra: 0 1px 2px rgba(43, 33, 26, .06), 0 4px 12px rgba(43, 33, 26, .05);
  --sombra-alta: 0 8px 28px rgba(43, 33, 26, .12);
  --tipografia: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* --- Variables del admin de Django -------------------------------------
     El admin de Django 5 se pinta con estas variables. Redefinirlas aquí
     —esta hoja carga después de `admin/css/base.css`— tiñe el admin completo
     y la pantalla de login sin tocar una sola plantilla suya.

     Van también bajo `[data-theme="dark"]` a propósito: la aplicación no tiene
     modo oscuro, y un admin oscuro junto a un sitio claro es exactamente la
     mezcla que este trabajo vino a eliminar. Por eso el interruptor de tema
     del admin queda oculto (sección 8). */
  --primary: var(--marca);
  --secondary: var(--carbon);
  --accent: var(--marca-viva);
  --primary-fg: #fff;

  --body-fg: var(--texto);
  --body-bg: var(--arena);
  --body-quiet-color: var(--suave);
  --body-medium-color: #5c5045;
  --body-loud-color: var(--carbon);

  --header-color: #f3e7dc;
  --header-branding-color: #fff;
  --header-bg: var(--carbon);
  --header-link-color: #fff;

  --breadcrumbs-fg: #e8d9c9;
  --breadcrumbs-link-fg: #fff;
  --breadcrumbs-bg: #4a382c;

  --link-fg: var(--marca);
  --link-hover-color: var(--marca-oscura);
  --link-selected-fg: var(--marca-oscura);

  --hairline-color: var(--borde);
  --border-color: var(--borde);

  --error-fg: var(--rojo);

  --message-success-bg: var(--verde-suave);
  --message-warning-bg: var(--ambar-suave);
  --message-error-bg: var(--rojo-suave);

  --darkened-bg: var(--superficie-2);
  --selected-bg: var(--marca-suave);
  --selected-row: var(--ambar-suave);

  --button-fg: #fff;
  --button-bg: var(--marca);
  --button-hover-bg: var(--marca-oscura);
  --default-button-bg: var(--marca);
  --default-button-hover-bg: var(--marca-oscura);
  --close-button-bg: #7a6b5d;
  --close-button-hover-bg: var(--carbon);
  --delete-button-bg: var(--rojo);
  --delete-button-hover-bg: #8f1e17;

  --object-tools-fg: #fff;
  --object-tools-bg: var(--carbon);
  --object-tools-hover-bg: #43342a;

  --font-family-primary: var(--tipografia);
}

/* ------------------------------------------------------------ 2. Cimientos */

* { box-sizing: border-box; }

body {
  font-family: var(--tipografia);
  margin: 0;
  background: var(--arena);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--carbon); letter-spacing: -.01em; }
h1 { font-size: 1.4rem; margin: 0 0 .9rem; }
h2 { font-size: 1.05rem; }

a { color: var(--marca); text-decoration-color: color-mix(in srgb, var(--marca) 35%, transparent); }
a:hover { color: var(--marca-oscura); }

:focus-visible { outline: 2px solid var(--marca-viva); outline-offset: 2px; border-radius: 3px; }

/* -------------------------------------------------------------- 3. Cabecera */

.cabecera {
  background: var(--carbon);
  /* Textura de "bolsa": dos huellas muy tenues, decorativas y sin peso. */
  background-image:
    radial-gradient(circle at 12% 140%, rgba(226, 87, 30, .22), transparent 45%),
    radial-gradient(circle at 92% -40%, rgba(226, 87, 30, .14), transparent 50%);
  color: #fff;
  padding: 0 1.2rem;
  display: flex;
  gap: 1.6rem;
  align-items: center;
  min-height: 3.25rem;
  box-shadow: 0 1px 0 rgba(43, 33, 26, .18);
}

.cabecera .marca {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .2px;
  color: #fff;
  text-decoration: none;
}
.cabecera .marca .huella { width: 1.35rem; height: 1.35rem; flex: none; color: var(--marca-viva); }
.cabecera .marca .sufijo { font-weight: 500; color: #c9b8a8; font-size: .8rem; letter-spacing: .3px; }

.cabecera nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.cabecera nav a {
  color: #e8dcd0;
  text-decoration: none;
  padding: .4rem .7rem;
  border-radius: 999px;
  font-size: .92rem;
  line-height: 1.2;
}
.cabecera nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.cabecera nav a[aria-current="page"] { background: var(--marca); color: #fff; font-weight: 600; }
.cabecera .derecha { margin-left: auto; display: flex; align-items: center; gap: .3rem; }

/* Entrada al back office. Lleva marco en vez de fondo lleno para que se lea
   como "otra zona" y no como una cuarta sección del sistema. */
.cabecera .ir-admin {
  border: 1px solid rgba(255, 255, 255, .28);
  color: #f0e4d8;
  padding: .35rem .8rem;
}
.cabecera .ir-admin:hover { background: var(--marca); border-color: var(--marca); color: #fff; }

main { width: 100%; margin: 1.4rem 0 3rem; padding: 0 1.2rem; }

/* --------------------------------------------------------------- 4. Bloques */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1rem 1.15rem;
  margin-bottom: 1rem;
  box-shadow: var(--sombra);
}

/* Tablas: el contenido real del sistema. Números tabulares, cabecera pegada
   al hacer scroll, y filas que se distinguen sin rayar la lectura. */
table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: var(--superficie);
  font-size: .9rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
}
th, td { border-bottom: 1px solid var(--borde); padding: .32rem .6rem; text-align: left; line-height: 1.4; }
tbody tr:last-child td { border-bottom: 0; }

/* Dentro de una tabla el enlace no se pinta de marca: con una fila por
   material serían cientos de líneas naranjas compitiendo entre sí. El color
   queda para el hover, que es cuando el enlace importa. */
tbody td a { color: var(--texto); text-decoration: none; }
tbody td a:hover { color: var(--marca); text-decoration: underline; }
th {
  background: var(--superficie-2);
  color: var(--carbon);
  font-weight: 650;
  font-size: .82rem;
  letter-spacing: .02em;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 1px solid var(--borde-fuerte);
}
tbody tr:hover { background: var(--superficie-2); }
tbody tr.fila-actual { background: var(--marca-suave); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td { font-variant-numeric: tabular-nums; }
.tabla-scroll { overflow-x: auto; border-radius: var(--radio); }
.acciones { white-space: nowrap; }

/* --------------------------------------------------------------- 5. Botones */

.btn {
  display: inline-block;
  padding: .38rem .8rem;
  border-radius: var(--radio-chico);
  border: 1px solid transparent;
  font-size: .85rem;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.35;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease, transform .06s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primario { background: var(--marca); color: #fff; }
.btn-primario:hover { background: var(--marca-oscura); color: #fff; }
.btn-secundario { background: var(--superficie); color: var(--marca); border-color: var(--borde-fuerte); }
.btn-secundario:hover { background: var(--marca-suave); border-color: var(--marca); color: var(--marca-oscura); }
.btn-peligro { background: var(--superficie); color: var(--rojo); border-color: color-mix(in srgb, var(--rojo) 40%, var(--borde)); }
.btn-peligro:hover { background: var(--rojo-suave); border-color: var(--rojo); }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; }

/* --------------------------------------------------------------- 6. Menudeo */

.mensajes { list-style: none; padding: 0; margin: 0 0 1rem; }
.mensajes li {
  padding: .6rem .9rem;
  border-radius: var(--radio-chico);
  margin-bottom: .5rem;
  font-size: .9rem;
  border-left: 3px solid transparent;
}
.mensajes .success { background: var(--verde-suave); color: #1d5c39; border-left-color: var(--verde); }
.mensajes .error { background: var(--rojo-suave); color: var(--rojo); border-left-color: var(--rojo); }
.mensajes .warning { background: var(--ambar-suave); color: #8a5a12; border-left-color: var(--ambar); }
.mensajes .info, .mensajes .debug { background: var(--marca-suave); color: var(--marca-oscura); border-left-color: var(--marca); }

form.inline { display: inline; }

.campo { margin-bottom: .85rem; }
.campo label { display: block; font-size: .84rem; font-weight: 650; margin-bottom: .25rem; color: var(--carbon); }
.campo input, .campo select, .campo textarea {
  padding: .45rem .6rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  width: 100%;
  max-width: 26rem;
  font-family: inherit;
  font-size: .9rem;
  background: var(--superficie);
  color: var(--texto);
}
.campo input:focus, .campo select:focus { border-color: var(--marca); }
.errores { color: var(--rojo); font-size: .82rem; margin: .2rem 0 0; }

input.celda, select.celda {
  width: 5.5rem;
  padding: .3rem .4rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-chico);
  font-family: inherit;
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
  background: var(--superficie);
  color: var(--texto);
}
input.celda:focus, select.celda:focus { border-color: var(--marca); }
input.celda-fecha { width: 8.5rem; }
input.celda-observacion { width: 22rem; max-width: 100%; }
select.celda { width: auto; }

/* La propuesta del optimizador todavía no está guardada: ámbar de "por
   confirmar", nunca verde de "listo" (D17: el botón no guarda). */
input.celda-propuesta {
  border-color: var(--ambar);
  background: var(--ambar-suave);
  font-weight: 700;
  color: #7a4d0c;
}

.solo-lectura { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .35rem 1.2rem; }
.solo-lectura dt { font-weight: 650; font-size: .76rem; color: var(--suave); text-transform: uppercase; letter-spacing: .04em; }
.solo-lectura dd { margin: 0 0 .7rem; font-size: .95rem; }

.pill {
  display: inline-block;
  padding: .18rem .6rem;
  border-radius: 999px;
  font-size: .78rem;
  line-height: 1.45;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  color: #5c5045;
}
.pill-ok { background: var(--verde-suave); border-color: color-mix(in srgb, var(--verde) 30%, transparent); color: #1d5c39; }
.pill-mal { background: var(--rojo-suave); border-color: color-mix(in srgb, var(--rojo) 30%, transparent); color: var(--rojo); }
.pill-info { background: var(--marca-suave); border-color: color-mix(in srgb, var(--marca) 25%, transparent); color: var(--marca-oscura); }

.ok { color: var(--verde); font-weight: 600; }
.mal { color: var(--rojo); font-weight: 600; }

.etiqueta-inline { font-size: .82rem; color: var(--suave); margin-right: .3rem; }
.barra-seccion { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: .2rem 0 .6rem; }
.barra-seccion .faltas { font-size: .82rem; color: var(--rojo); }
.desglose { list-style: none; margin: .3rem 0; padding: 0; font-size: .85rem; }
.desglose li { padding: .08rem 0; }

/* Registro de valores: tres líneas por registro (generales / medidos / calculados) */
.registro { padding: .6rem .85rem; margin-bottom: .6rem; }
.registro-nuevo { border-color: var(--marca); border-width: 2px; background: linear-gradient(var(--marca-suave), var(--superficie) 60%); }
.registro-linea { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .3rem 1.1rem; padding: .4rem 0; }
.registro-linea + .registro-linea { border-top: 1px dashed var(--borde); }
.registro-etiqueta {
  flex: 0 0 6.5rem; font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--suave); align-self: center;
}
.registro .dato { display: flex; flex-direction: column; gap: .1rem; font-size: .88rem; font-variant-numeric: tabular-nums; }
.registro .dato label { font-size: .7rem; color: var(--suave); white-space: nowrap; }
.registro .dato-accion { margin-left: auto; flex-direction: row; align-items: center; gap: .5rem; }
.registro .vacio { font-size: .85rem; color: var(--suave); font-style: italic; }
.registro .nota { margin: .35rem 0 0 7.6rem; font-size: .76rem; color: var(--suave); }

/* ------------------------------------------------------- 7. Estados vacíos */

/* Una tabla sin filas trae una sola celda con el texto de "sin datos aún".
   La huella de fondo la vuelve una pausa amable en vez de un hueco. */
tbody tr td[colspan] {
  text-align: center;
  color: var(--suave);
  padding: 2.2rem 1rem;
  font-size: .95rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23e7ddd1'%3E%3Cellipse cx='20' cy='18' rx='7' ry='9'/%3E%3Cellipse cx='38' cy='14' rx='7' ry='9.5'/%3E%3Cellipse cx='53' cy='25' rx='6.5' ry='8'/%3E%3Cpath d='M34 30c9 0 17 7 17 15 0 6-5 9-11 9-4 0-6-2-10-2s-6 2-10 2c-6 0-11-3-11-9 0-8 8-15 17-15z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center 12%;
  background-size: 2.6rem;
}

/* --------------------------------------------------- 8. Admin de Django */

/* El admin se tiñe solo con las variables de la sección 1. Aquí van únicamente
   los ajustes de forma que las variables no alcanzan a cubrir, para que el
   admin se sienta la misma aplicación y no un anexo. */

body.admin #header,
#header {
  background-image:
    radial-gradient(circle at 12% 140%, rgba(226, 87, 30, .22), transparent 45%),
    radial-gradient(circle at 92% -40%, rgba(226, 87, 30, .14), transparent 50%);
  box-shadow: 0 1px 0 rgba(43, 33, 26, .18);
}
/* Marca idéntica a la de la aplicación: huella naranja, nombre en blanco. */
#site-name { display: flex; align-items: center; }
#site-name a:link, #site-name a:visited {
  display: inline-flex; align-items: center; gap: .5rem;
  color: #fff; font-weight: 800; font-size: 1.05rem; letter-spacing: .2px;
}
#site-name .huella { width: 1.35rem; height: 1.35rem; flex: none; color: var(--marca-viva); }
#site-name .sufijo { font-weight: 500; color: #c9b8a8; font-size: .8rem; letter-spacing: .3px; }

/* Vuelta a la aplicación desde el admin: las dos mitades son un solo sistema. */
.volver-app {
  display: inline-flex; align-items: center; gap: .4rem;
  color: #e8dcd0; text-decoration: none; font-size: .85rem;
  padding: .3rem .75rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22);
}
.volver-app:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* Los encabezados de módulo en negro pesan demasiado sobre fondo claro. */
.module caption, .inline-group h2, .module h2 {
  background: #4a382c;
  color: #fff;
}

/* El interruptor de tema del admin queda fuera: la aplicación es de tema claro
   y un admin oscuro rompería la unidad visual que se pidió. */
.theme-toggle { display: none !important; }

#container { background: var(--arena); }
.module, #content-main .module, .inline-group { border-radius: var(--radio); border: 1px solid var(--borde); overflow: hidden; box-shadow: var(--sombra); }
.module caption, .inline-group h2 { border-radius: 0; letter-spacing: .02em; }
div.breadcrumbs { border-bottom: 1px solid rgba(0, 0, 0, .12); }
.button, input[type="submit"], input[type="button"], .submit-row input, a.button {
  border-radius: var(--radio-chico); font-weight: 600; border: 1px solid transparent;
}
.object-tools a { border-radius: 999px; }
#changelist-filter { border-radius: var(--radio); }
.paginator { border-radius: 0 0 var(--radio) var(--radio); }
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="url"], textarea, select, .vTextField {
  border-radius: var(--radio-chico); border-color: var(--borde-fuerte);
}

/* ------------------------------------------------------ 9. Inicio de sesión */

/* Primera pantalla del sistema: es la que fija la expectativa de todo lo
   demás, así que lleva la marca completa y no el formulario desnudo. */
body.login {
  background:
    radial-gradient(circle at 15% 12%, rgba(226, 87, 30, .10), transparent 42%),
    radial-gradient(circle at 85% 88%, rgba(226, 87, 30, .08), transparent 45%),
    var(--arena);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem;
}
body.login #container {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 16px;
  box-shadow: var(--sombra-alta);
  width: 100%;
  max-width: 25rem;
  min-width: 0;
  margin: 0;
  overflow: hidden;
}
body.login #header {
  background: var(--carbon);
  padding: 1.4rem 1.5rem 1.2rem;
  justify-content: center;
  text-align: center;
  height: auto;
  line-height: 1.3;
}
body.login #content { padding: 1.5rem; }
body.login #content-main { width: 100%; }
body.login .marca-login { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
body.login .marca-login .huella { width: 2.4rem; height: 2.4rem; color: var(--marca-viva); }
body.login .marca-login .nombre { font-size: 1.35rem; font-weight: 800; color: #fff; letter-spacing: .3px; }
body.login .marca-login .lema { font-size: .8rem; color: #c9b8a8; font-weight: 500; }
body.login .form-row { padding: 0 0 .9rem; border: 0; }
body.login .form-row label { display: block; font-size: .84rem; font-weight: 650; margin-bottom: .3rem; color: var(--carbon); }
body.login .form-row input {
  width: 100%; padding: .55rem .7rem; font-size: .95rem;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico); background: var(--superficie);
}
body.login .form-row input:focus { border-color: var(--marca); outline: 2px solid color-mix(in srgb, var(--marca-viva) 35%, transparent); outline-offset: 1px; }
body.login .submit-row { padding: .4rem 0 0; margin: 0; border: 0; background: none; text-align: center; }
body.login .submit-row input[type="submit"] {
  width: 100%; margin: 0; padding: .6rem 1rem; font-size: .95rem; font-weight: 700;
  background: var(--marca); color: #fff; border-radius: var(--radio-chico); border: 0; cursor: pointer;
}
body.login .submit-row input[type="submit"]:hover { background: var(--marca-oscura); }
body.login .errornote, body.login .errorlist {
  background: var(--rojo-suave); color: var(--rojo); border: 1px solid color-mix(in srgb, var(--rojo) 30%, transparent);
  border-radius: var(--radio-chico); padding: .55rem .8rem; font-size: .85rem; margin: 0 0 .9rem; list-style: none;
}
body.login .password-reset-link { text-align: center; font-size: .85rem; margin-top: .9rem; }
body.login #footer { display: none; }

/* --------------------------------------------------------- 10. Adaptación */

@media (max-width: 640px) {
  .cabecera { flex-wrap: wrap; padding: .6rem .9rem; gap: .5rem 1rem; }
  .cabecera .derecha { margin-left: 0; }
  main { padding: 0 .8rem; }
  .registro-etiqueta { flex-basis: 100%; }
  .registro .nota { margin-left: 0; }
  .registro .dato-accion { margin-left: 0; }
  h1 { font-size: 1.2rem; }
}

@media print {
  .cabecera, .btn, .acciones { display: none !important; }
  body { background: #fff; }
  .tarjeta, table { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}