/* Sistema de gestión de rodeo y alimentación — hoja de estilos única.
   Sin frameworks: lo que se ve acá se puede cambiar sin compilar nada. */

:root {
  color-scheme: light;
  --surface-0: #f4f4f1;
  --surface-1: #fcfcfb;
  --surface-2: #eeeeea;
  --borde: #dcdcd6;
  --borde-fuerte: #c6c6bd;
  --texto: #0b0b0b;
  --texto-2: #52514e;
  --texto-3: #7a7973;
  --acento: #1f3a5f;
  --acento-claro: #e8eef6;

  --ok: #008300;
  --warning: #eda100;
  --danger: #e34948;
  --info: #2a78d6;

  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;
  --s5: #e87ba4; --s6: #008300; --s7: #4a3aa7; --s8: #e34948;

  /* Protagonismo, no aprobación: marca el número que hay que mirar. El rojo y
     el ámbar quedan reservados para alertas. */
  --nav-mirar: #e4ecf7;
  --nav-mirar-texto: #1f3a5f;

  --destacar: #2f7a52;
  --destacar-fondo: #e7f4ec;
  --destacar-borde: #bcdfcb;

  --radio: 8px;
  --sombra: 0 1px 2px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-0: #141413;
    --surface-1: #1a1a19;
    --surface-2: #242423;
    --borde: #35352f;
    --borde-fuerte: #4a4a42;
    --texto: #ffffff;
    --texto-2: #c3c2b7;
    --texto-3: #8f8e84;
    --acento: #9cc0ea;
    --nav-mirar: #1e2a3a;
    --nav-mirar-texto: #cfe0f5;

    --destacar: #7fd1a3;
    --destacar-fondo: #16281f;
    --destacar-borde: #2c5440;
    --acento-claro: #1e2a3a;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
    --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-0: #141413; --surface-1: #1a1a19; --surface-2: #242423;
  --borde: #35352f; --borde-fuerte: #4a4a42;
  --texto: #ffffff; --texto-2: #c3c2b7; --texto-3: #8f8e84;
  --acento: #9cc0ea; --acento-claro: #1e2a3a;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500;
  --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--texto);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acento); }

/* ---------------------------------------------------------------- layout */
header.barra {
  background: var(--surface-1);
  border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 30;
}
.barra-interna {
  max-width: 1400px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.marca { font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.marca small { display: block; font-weight: 400; color: var(--texto-3); font-size: 11px; }
nav.menu { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; }
nav.menu a {
  padding: 7px 11px; border-radius: 6px; text-decoration: none;
  color: var(--texto-2); font-weight: 500; white-space: nowrap;
}
nav.menu a:hover { background: var(--surface-2); color: var(--texto); }
nav.menu a.activa { background: var(--acento-claro); color: var(--acento); font-weight: 600; }
.usuario-box { display: flex; align-items: center; gap: 10px; color: var(--texto-3); font-size: 13px; }

main { max-width: 1400px; margin: 0 auto; padding: 20px 16px 60px; }

h1 { font-size: 20px; margin: 0 0 4px; letter-spacing: -.01em; }
h2 { font-size: 15px; margin: 0 0 12px; letter-spacing: -.005em; }
h3 { font-size: 13px; margin: 0 0 8px; color: var(--texto-2); text-transform: uppercase;
     letter-spacing: .04em; }
.subtitulo { color: var(--texto-3); margin: 0 0 18px; }

.panel {
  background: var(--surface-1); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 16px; margin-bottom: 16px; box-shadow: var(--sombra);
}
.panel > h2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.grilla { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ----------------------------------------------------------------- KPIs */
.kpi {
  background: var(--surface-1); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 14px 16px;
}
.kpi .etiqueta { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
                 color: var(--texto-3); margin-bottom: 6px; }
.kpi .valor { font-size: 24px; font-weight: 650; letter-spacing: -.02em;
              font-variant-numeric: tabular-nums; }
.kpi .detalle { font-size: 12px; color: var(--texto-3); margin-top: 3px; }
.kpi.destacado { border-color: var(--acento); background: var(--acento-claro); }
.delta-pos { color: var(--danger); font-weight: 600; }
.delta-neg { color: var(--ok); font-weight: 600; }

/* --------------------------------------------------------------- tablas */
.tabla-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left; font-weight: 600; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--texto-3); padding: 8px 10px;
  border-bottom: 1px solid var(--borde-fuerte); white-space: nowrap; background: var(--surface-1);
}
tbody td { padding: 7px 10px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tfoot td { padding: 9px 10px; font-weight: 650; border-top: 2px solid var(--borde-fuerte);
           font-variant-numeric: tabular-nums; }
tr.fila-categoria td { background: var(--surface-2); font-weight: 600; }
.sin-dato { color: var(--texto-3); font-style: italic; }

/* ------------------------------------------------------------ formulario */
label { display: block; font-size: 12px; color: var(--texto-2); margin-bottom: 4px; font-weight: 500; }
input, select, textarea {
  font: inherit; color: var(--texto); background: var(--surface-1);
  border: 1px solid var(--borde-fuerte); border-radius: 6px; padding: 7px 9px; width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--acento); outline-offset: -1px; }
input.num { text-align: right; font-variant-numeric: tabular-nums; }
input[readonly] { background: var(--surface-2); color: var(--texto-3); }
.campo { margin-bottom: 12px; }
.fila-campos { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.fila-campos .campo { margin-bottom: 0; min-width: 130px; }

button, .boton {
  font: inherit; font-weight: 600; cursor: pointer; border-radius: 6px;
  border: 1px solid var(--borde-fuerte); background: var(--surface-1); color: var(--texto);
  padding: 8px 14px; text-decoration: none; display: inline-block; white-space: nowrap;
}
button:hover, .boton:hover { background: var(--surface-2); }
button.primario, .boton.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
button.primario:hover { filter: brightness(1.1); }
button.chico { padding: 4px 9px; font-size: 12px; font-weight: 500; }
button:disabled { opacity: .5; cursor: not-allowed; }

/* -------------------------------------------------------------- avisos */
.aviso {
  border-radius: 6px; padding: 9px 12px; margin-bottom: 8px; font-size: 13px;
  border-left: 3px solid var(--info); background: var(--surface-2); color: var(--texto-2);
}
.aviso.warning { border-left-color: var(--warning); }
.aviso.danger { border-left-color: var(--danger); }
.aviso.ok { border-left-color: var(--ok); }
.aviso strong { color: var(--texto); }

.chip {
  display: inline-block; padding: 1px 7px; border-radius: 99px; font-size: 11px;
  font-weight: 600; border: 1px solid var(--borde-fuerte); color: var(--texto-2);
}
.chip.alerta { border-color: var(--warning); color: var(--warning); }
.chip.critico { border-color: var(--danger); color: var(--danger); }
.chip.ok { border-color: var(--ok); color: var(--ok); }
.chip.info { border-color: var(--info); color: var(--info); }

/* -------------------------------------------------------------- gráficos */
.graf { position: relative; height: 280px; }
.graf.alto { height: 340px; }
.leyenda { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 12px;
           color: var(--texto-2); }
.leyenda span { display: flex; align-items: center; gap: 5px; }
.leyenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ---------------------------------------------------------------- varios */
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin-bottom: 16px;
            overflow-x: auto; }
.pestanas button {
  border: none; background: none; border-bottom: 2px solid transparent; border-radius: 0;
  color: var(--texto-2); padding: 8px 12px; font-weight: 500;
}
.pestanas button.activa { color: var(--acento); border-bottom-color: var(--acento); font-weight: 650; }
.oculto { display: none !important; }
.cargando { color: var(--texto-3); padding: 18px; text-align: center; }
.pie-nota { font-size: 12px; color: var(--texto-3); margin-top: 10px; line-height: 1.5; }

/* ------------------------------------------------------------ login ------ */
.login-caja {
  max-width: 340px; margin: 12vh auto; background: var(--surface-1);
  border: 1px solid var(--borde); border-radius: var(--radio); padding: 28px; box-shadow: var(--sombra);
}

@media (max-width: 640px) {
  .barra-interna { padding: 8px 12px; }
  nav.menu a { padding: 6px 8px; font-size: 13px; }
  main { padding: 14px 12px 50px; }
  .kpi .valor { font-size: 20px; }
}

/* Bloques de configuración y pasos (pantalla de Respaldo) */
pre.codigo {
  background: var(--surface-2);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 10px 0;
  font-size: 13px;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
}
ol.lista-pasos { margin: 8px 0 0 20px; line-height: 1.8; }
ol.lista-pasos code { font-size: 13px; }

/* ======================================================================
   Costos: jerarquía visual del dinero

   Criterio: el color señala ESTADO, no decora. Un costo completo se lee
   distinto de uno incompleto y de uno desconocido, y el $/litro —que es el
   número con el que se decide— se lee antes que todo lo demás.
   Nunca se usa color solo: cada estado lleva además texto o un ícono.
   ====================================================================== */

/* Cifras de dinero: siempre tabulares, para que las columnas se puedan
   comparar de un vistazo sin que bailen los dígitos. */
.costo, td.costo, .kpi .valor.costo {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--texto);
}
.costo.fuerte { font-weight: 700; }
/* Un costo que no se pudo valorizar no es cero: se ve distinto, y dice por qué. */
.costo.incompleto { color: var(--warning); }
.costo.desconocido { color: var(--texto-3); font-style: italic; font-weight: 500; }

/* ---- El número con el que se decide: $ por litro ---- */
.hero-litro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.hero {
  position: relative;
  border-radius: var(--radio);
  padding: 18px 20px;
  border: 1px solid var(--borde);
  background: var(--surface-1);
}
.hero.principal {
  border-color: var(--acento);
  background: var(--acento-claro);
}
.hero .etiqueta {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-2); font-weight: 600; margin-bottom: 8px;
}
.hero .cifra {
  font-size: 38px; line-height: 1.05; font-weight: 700; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--texto);
}
.hero.principal .cifra { color: var(--acento); }
.hero .unidad { font-size: 15px; font-weight: 600; color: var(--texto-2); margin-left: 4px; }
.hero .detalle { font-size: 12px; color: var(--texto-2); margin-top: 8px; line-height: 1.45; }
.hero .cifra.desconocido {
  font-size: 22px; font-style: italic; font-weight: 500; color: var(--texto-3);
  letter-spacing: 0;
}
.hero.incompleto { border-color: var(--warning); }
.hero.incompleto .cifra { color: var(--warning); }

/* Barra de certeza: qué parte del costo viene de datos reales. */
.certeza { margin-top: 10px; }
.certeza .barra {
  height: 6px; border-radius: 99px; overflow: hidden; display: flex;
  background: var(--surface-2); border: 1px solid var(--borde);
}
.certeza .real { background: var(--ok); }
.certeza .estimado {
  background: repeating-linear-gradient(135deg,
    var(--warning) 0 4px, transparent 4px 8px);
  background-color: var(--surface-2);
}
.certeza .leyenda { font-size: 11px; color: var(--texto-3); margin-top: 5px; }

/* ---- Composición del costo: una fila por bloque ---- */
.bloques { display: flex; flex-direction: column; gap: 2px; }
.bloque-fila {
  display: grid; grid-template-columns: 26px 1fr auto 86px; gap: 10px;
  align-items: center; padding: 8px 10px; border-radius: 6px;
}
.bloque-fila:hover { background: var(--surface-2); }
.bloque-fila .letra {
  width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: #fff;
}
.bloque-fila .nombre { font-size: 13px; color: var(--texto); }
.bloque-fila .nombre small { display: block; color: var(--texto-3); font-size: 11px; }
.bloque-fila .importe { font-variant-numeric: tabular-nums; font-weight: 600; }
.bloque-fila .parte {
  font-size: 12px; color: var(--texto-3); text-align: right;
  font-variant-numeric: tabular-nums;
}
.bloque-fila.total {
  border-top: 2px solid var(--borde-fuerte); border-radius: 0; margin-top: 4px;
  padding-top: 11px; font-weight: 700;
}
.bloque-fila.total .nombre, .bloque-fila.total .importe { font-size: 15px; }

/* ---- Alertas: rojo y visibles, no una nota al pie ---- */
.alertas-panel { border-left-width: 4px; }
.aviso.danger {
  background: color-mix(in srgb, var(--danger) 9%, var(--surface-1));
  border-left-width: 4px; color: var(--texto);
}
.aviso.danger strong { color: var(--danger); }
.aviso.warning {
  background: color-mix(in srgb, var(--warning) 11%, var(--surface-1));
  border-left-width: 4px;
}
.contador-alertas {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 99px; font-size: 11px; font-weight: 700;
  background: var(--danger); color: #fff; margin-left: 6px;
}

/* ---- Carga de gastos: la grilla del mes ---- */
tr.propuesta td { background: color-mix(in srgb, var(--warning) 7%, transparent); }
tr.propuesta td:first-child { border-left: 3px solid var(--warning); }
.origen-real { color: var(--ok); font-weight: 600; font-size: 11px; }
.origen-estimado { color: var(--warning); font-weight: 600; font-size: 11px; }

@media (max-width: 720px) {
  .hero .cifra { font-size: 30px; }
  .bloque-fila { grid-template-columns: 24px 1fr auto; }
  .bloque-fila .parte { display: none; }
}

/* Carga repetida: mismo concepto, mismo importe, mismo centro en el mes.
   No se bloquea (puede haber dos facturas iguales) pero se ve. */
tr.fila-duplicada > td { background: var(--alerta-fondo, #fff7e6); }
tr.fila-duplicada > td:first-child { box-shadow: inset 3px 0 0 var(--alerta, #b45309); }

/* Bien que no amortiza en el tambo: se ve, pero no compite visualmente con
   los que sí entran al costo. */
tr.fila-apagada > td { color: var(--texto-3, #6b7280); }
tr.fila-apagada > td.costo { font-weight: 400; }

/* ------------------------------------------------------------- toasts --
   Confirmación de guardado. Se ve siempre, esté donde esté el scroll. */
#toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(420px, calc(100vw - 40px));
  pointer-events: none;
}
#toasts .toast {
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.35;
  color: #fff;
  background: #15803d;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  animation: toast-entra .22s ease-out;
}
#toasts .toast.danger { background: #b91c1c; }
#toasts .toast.warning { background: #b45309; }
#toasts .toast.info { background: #1e3a5f; }
#toasts .toast-icono { font-weight: 700; flex: 0 0 auto; }
#toasts .toast.yendose { opacity: 0; transform: translateY(6px); transition: .38s ease-in; }
@keyframes toast-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
  #toasts { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}

/* ------------------------------------------------- número protagonista --
   La tarjeta que hay que mirar primero. El color solo es una señal débil
   —se pierde al imprimir y en una pantalla con poco brillo—, así que además
   crece: barra a la izquierda, número más grande y más aire. */
.kpi.destacado,
.hero.destacado {
  background: var(--destacar-fondo);
  border-color: var(--destacar-borde);
  border-left: 4px solid var(--destacar);
  padding-left: 14px;
}
.kpi.destacado .valor,
.hero.destacado .cifra { color: var(--destacar); }
.kpi.destacado .valor { font-size: 28px; }
.hero.destacado .cifra { font-size: 34px; }
.hero.destacado .etiqueta { color: var(--destacar); font-weight: 650; }

/* Grado de certeza: cuánto del número se apoya en comprobantes. En un mes
   donde la mitad es estimación por arrastre, es lo primero que preguntan. */
.certeza-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--borde);
  background: var(--surface-2); color: var(--texto-2);
}
.certeza-chip.alto { background: var(--destacar-fondo); border-color: var(--destacar-borde);
                     color: var(--destacar); }
.certeza-chip.medio { background: #fdf3dd; border-color: #e9d5a1; color: #8a6400; }
.certeza-chip.bajo { background: #fdeceb; border-color: #f3c3c1; color: #a32e2d; }

/* ------------------------------------------------------ menú agrupado --
   Once ítems en una fila no tienen jerarquía: mirar y cargar se parecen.
   Los grupos se separan con una línea y el de carga lleva fondo propio,
   porque son acciones y no vistas. */
nav.menu { align-items: center; }
nav.menu .grupo { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; }
nav.menu .separador {
  width: 1px; align-self: stretch; min-height: 20px;
  background: var(--borde-fuerte); margin: 0 8px; flex: 0 0 auto;
}
/* Cada familia con su fondo. El activo lleva además un anillo, así se
   distingue esté en el grupo que esté y no depende sólo del color. */
nav.menu .grupo a { border: 1px solid transparent; }
nav.menu .grupo.mirar a { background: var(--nav-mirar); color: var(--nav-mirar-texto); }
nav.menu .grupo.mirar a:hover { border-color: var(--acento); }
nav.menu .grupo.cargar a { background: var(--surface-2); border-color: var(--borde); }
nav.menu .grupo.cargar a:hover { border-color: var(--borde-fuerte); }
nav.menu .grupo.configurar a { color: var(--texto-3); }
/* Control: perfiles y auditoría. No son del día a día de la empresa y no
   tienen que parecerlo; el borde punteado las separa sin gritar. */
nav.menu .grupo.controlar a {
  color: var(--texto-3); border-style: dashed; border-color: var(--borde-fuerte);
}
nav.menu .grupo.controlar a:hover { color: var(--texto-2); border-style: solid; }
nav.menu a.activa {
  background: var(--acento-claro); color: var(--acento); font-weight: 650;
  border-color: var(--acento);
  box-shadow: inset 0 0 0 1px var(--acento);
}
@media (max-width: 900px) {
  nav.menu .separador { display: none; }
  nav.menu .grupo { width: 100%; }
}

/* ------------------------------------------------------------ impresión --
   Estas pantallas se presentan. Impresas tienen que entrar limpias en una
   carilla: sin menú, sin botones, sin fondos comidos. */
@media print {
  @page { margin: 12mm; }
  body { background: #fff; color: #000; }
  .barra, .usuario-box, #toasts, .pestanas, .no-imprimir,
  button, .boton, input, select, textarea { display: none !important; }
  main { max-width: none; padding: 0; }
  a { color: #000; text-decoration: none; }
  .panel {
    box-shadow: none; border: 1px solid #bbb; break-inside: avoid;
    page-break-inside: avoid; margin-bottom: 10px; padding: 10px;
  }
  .kpi, .hero { break-inside: avoid; border: 1px solid #bbb; }
  .kpi.destacado, .hero.destacado {
    background: #fff; border-left: 3px solid #000;
  }
  .kpi.destacado .valor, .hero.destacado .cifra { color: #000; }
  .graf { max-height: 70mm; }
  table { font-size: 11px; }
  thead { display: table-header-group; }
}

/* Lo que falta o está vencido no es protagonista: es una advertencia. El
   verde marca "mirá esto", el ámbar marca "revisá esto". */
.kpi.pendiente {
  background: #fdf3dd; border-color: #e9d5a1; border-left: 4px solid var(--warning);
  padding-left: 14px;
}
.kpi.pendiente .valor { color: #8a6400; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .kpi.pendiente {
    background: #2a2211; border-color: #5a4a22;
  }
  :root:not([data-theme="light"]) .kpi.pendiente .valor { color: var(--warning); }
}
@media print {
  .kpi.pendiente { background: #fff; border-left: 3px dashed #000; }
  .kpi.pendiente .valor { color: #000; }
}