:root {
  --verde: #046547;
  --verde-hondo: #023b2a;
  --verde-claro: #e3efe8;
  --naranja: #fc8106;
  --naranja-claro: #fff0de;
  --fondo: #f2f5f1;
  --panel: #ffffff;
  --tinta: #142b22;
  --gris: #5f7068;
  --linea: #d9e2da;
  --rojo: #b3261e;
  --rojo-claro: #fbe6e4;
  --azul-claro: #e6eef6;
  --display: "Baloo 2", "Nunito Sans", system-ui, sans-serif;
  --texto: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--texto); line-height: 1.45; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; border-radius: 6px; }

/* ---------- barra superior ---------- */
.barra {
  background: #fff; border-bottom: 1px solid var(--linea);
  display: flex; align-items: center; gap: 18px; padding: 10px 28px; position: sticky; top: 0; z-index: 10;
}
.barra .logo img { height: 34px; display: block; }
.barra .producto { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
  color: var(--verde); background: #e3efe8; padding: 6px 10px; border-radius: 6px; cursor: default; user-select: none; white-space: nowrap; }
.barra nav { display: flex; gap: 2px; margin-left: 12px; flex-wrap: wrap; }
.barra nav a { text-decoration: none; color: var(--gris); font-weight: 600; padding: 8px 12px; border-radius: 8px; }
.barra nav a:hover { color: var(--verde); background: var(--verde-claro); }
.barra nav a.activo { color: var(--verde); box-shadow: inset 0 -3px 0 var(--naranja); border-radius: 0; }
.barra .prueba { margin-left: auto; background: var(--naranja-claro); color: #8a4300; font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 20px; }

main { padding: 28px; max-width: 1440px; margin: 0 auto; }
main.portada { padding-top: 0; max-width: none; }
.pie { color: var(--gris); font-size: 12.5px; text-align: center; padding: 24px 16px 32px; }

/* ---------- portada: hero con el ciclo del mes ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(160deg, var(--verde) 0%, var(--verde-hondo) 70%);
  margin: 0 -28px; padding: 44px 56px 48px;
}
.hero .marca-agua {
  position: absolute; right: -60px; top: -40px; width: 460px; opacity: .09; filter: brightness(0) invert(1);
  pointer-events: none;
}
.hero-in { position: relative; max-width: 1330px; margin: 0 auto; }
.hero .saludo { margin: 0; color: #ffd6a6; font-weight: 700; font-size: 15px; }
.hero h1 { color: #fff; font-family: var(--display); font-weight: 700; font-size: clamp(40px, 6vw, 68px); line-height: 1; margin: 6px 0 22px; letter-spacing: -.01em; }
.datos { display: flex; flex-wrap: wrap; gap: 10px 40px; margin: 0; }
.datos dt { font-size: 13px; color: #b9d6c8; }
.datos dd { margin: 2px 0 0; font-size: 19px; font-weight: 700; }
.datos dd.cuadra::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #5fd38d; margin-right: 8px; vertical-align: 2px; }
.datos dd.no-cuadra { color: #ffb4a9; }

.ciclo {
  position: relative; list-style: none; margin: 40px auto 0; padding: 0; max-width: 1330px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.ciclo::before { /* el hilo naranja que une los tres pasos */
  content: ""; position: absolute; left: 24px; right: 24px; top: 23px; height: 3px;
  background: repeating-linear-gradient(90deg, var(--naranja) 0 14px, transparent 14px 22px); opacity: .9;
}
.paso { position: relative; }
.paso .num {
  position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  font-family: var(--display); font-weight: 700; font-size: 24px;
  background: var(--verde-hondo); color: #fff; border: 3px solid var(--naranja);
}
.paso.actual .num { background: var(--naranja); color: var(--verde-hondo); box-shadow: 0 0 0 6px rgba(252,129,6,.25); }
.paso h2 { font-family: var(--display); font-weight: 600; font-size: 24px; margin: 12px 0 10px; }
.paso.actual:not(.publicada-paso) h2::after { content: "Ahora"; font-family: var(--texto); font-size: 12px; font-weight: 700; color: var(--verde-hondo); background: var(--naranja); padding: 2px 9px; border-radius: 12px; margin-left: 10px; vertical-align: 4px; }
.hero .accion { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); color: #fff; }
.hero .accion small { color: #c3dccf; }
.hero a.accion:hover { background: #fff; color: var(--verde-hondo); }
.hero a.accion:hover small { color: var(--gris); }
.hero a.accion:hover .ico { stroke: var(--naranja); }
.hero .accion .ico { stroke: #ffd6a6; }
.hero .accion.pronto { background: transparent; border-style: dashed; }
.hero .accion.pronto em { background: rgba(255,255,255,.12); color: #c3dccf; }

/* ---------- acciones (en todo el menú) ---------- */
.accion {
  display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--tinta);
  padding: 12px 14px; border: 1px solid var(--linea); border-radius: 12px; margin-bottom: 10px; background: #fff;
  transition: background-color .15s, border-color .15s, color .15s;
}
.accion .ico { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--verde); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.accion .txt { display: flex; flex-direction: column; min-width: 0; }
.accion b { font-weight: 700; font-size: 15px; }
.accion small { color: var(--gris); font-size: 13px; }
a.accion:hover { border-color: var(--verde); background: var(--verde-claro); }
.accion.pronto { opacity: .62; }
.accion.pronto em { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--gris); background: var(--fondo); padding: 2px 8px; border-radius: 10px; white-space: nowrap; }

/* ---------- consultar / configuración ---------- */
.avisos { max-width: 1330px; margin: 22px auto 0; }
.secundario { max-width: 1330px; margin: 34px auto 0; display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; }
.bloque h2, .pruebas h2 { font-family: var(--display); font-weight: 600; font-size: 24px; margin: 0 0 12px; color: var(--verde); }
.bloque .lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 12px; }
.pruebas {
  max-width: 1330px; margin: 26px auto 0; padding: 20px 24px; border-radius: 14px;
  background: var(--naranja-claro); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.pruebas h2 { color: #8a4300; font-size: 21px; margin-bottom: 2px; }
.pruebas p { margin: 0; color: #6b4a26; max-width: 60ch; }
.pruebas .botones { display: flex; gap: 10px; flex-wrap: wrap; }

.boton {
  display: inline-flex; align-items: center; gap: 8px; background: var(--naranja); color: var(--verde-hondo);
  font-weight: 700; text-decoration: none; border: 0; border-radius: 10px; padding: 11px 18px; font-size: 15px; cursor: pointer;
}
.boton .ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.boton.claro { background: #fff; color: #8a4300; border: 1px solid #f2c48e; }
.boton.claro:hover { border-color: var(--naranja); }

/* ---------- páginas de tarifa / comparación ---------- */
h1 { font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1.1; margin: 0 0 6px; color: var(--verde); }
.sub { color: var(--gris); margin: 0 0 20px; }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.tarjeta { background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; padding: 16px 18px; }
.tarjeta .et { color: var(--gris); font-size: 13px; }
.tarjeta .val { font-family: var(--display); font-size: 26px; font-weight: 600; margin-top: 2px; }
.tarjeta.ok .val { color: var(--verde); }
.tarjeta.mal .val { color: var(--rojo); }
.btn { display: inline-block; background: var(--verde); color: #fff; border: 0; border-radius: 10px; padding: 10px 16px; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; }
.btn.sec { background: #fff; color: var(--verde); border: 1px solid var(--verde); }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0 24px; }
.aviso { display: flex; gap: 10px; align-items: flex-start; background: var(--naranja-claro); border-left: 4px solid var(--naranja); padding: 10px 14px; border-radius: 8px; margin: 0 0 12px; }
.aviso .ico { width: 20px; height: 20px; flex: none; fill: none; stroke: #8a4300; stroke-width: 1.8; }
.error { background: var(--rojo-claro); border-left: 4px solid var(--rojo); padding: 10px 14px; border-radius: 8px; margin: 0 0 16px; }
.info { background: var(--azul-claro); padding: 10px 14px; border-radius: 8px; margin: 0 0 16px; }
.tabla-wrap { background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td { padding: 7px 10px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
th { background: #f7faf7; text-align: left; font-weight: 700; color: #3b5047; position: sticky; top: 0; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
tr.familia td { background: var(--verde-claro); font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--verde); }
td.precio { font-weight: 700; }
td.ajustado { background: var(--naranja-claro); color: #7a3c0c; }
td.bajo { color: var(--rojo); font-weight: 700; }
td.cumple { color: var(--verde); }
.chip { display: inline-block; background: var(--naranja-claro); color: #7a3c0c; font-size: 11.5px; padding: 1px 7px; border-radius: 10px; margin-left: 4px; }
.sube { color: var(--rojo); }
.baja { color: var(--verde); }
.muted { color: var(--gris); }
.leyenda { color: var(--gris); font-size: 13px; margin: 10px 2px; display: flex; gap: 18px; flex-wrap: wrap; }
.leyenda span::before { content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.leyenda .l-aj::before { background: var(--naranja-claro); border: 1px solid var(--naranja); }
.leyenda .l-bajo::before { background: var(--rojo-claro); border: 1px solid var(--rojo); }
.estado-ok { color: var(--verde); font-weight: 700; }
.estado-dif { color: var(--rojo); font-weight: 700; }
.estado-con { color: #b85d00; font-weight: 700; }
form.subir { background: var(--panel); border: 1px solid var(--linea); border-radius: 12px; padding: 20px; max-width: 640px; }
form.subir input[type=file] { display: block; margin: 12px 0 18px; font-size: 15px; }

/* ---------- móvil ---------- */
@media (max-width: 980px) {
  .ciclo { grid-template-columns: 1fr; }
  .ciclo::before { left: 23px; right: auto; top: 24px; bottom: 24px; width: 3px; height: auto;
    background: repeating-linear-gradient(180deg, var(--naranja) 0 14px, transparent 14px 22px); }
  .paso { padding-left: 64px; }
  .paso .num { position: absolute; left: 0; top: 0; }
  .paso h2 { margin-top: 8px; }
  .secundario { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .barra { flex-wrap: wrap; padding: 10px 16px; gap: 10px; }
  .barra .producto { display: none; }
  .barra nav { margin-left: 0; order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  main { padding: 16px; }
  .hero { margin: 0 -16px; padding: 28px 16px 32px; }
  .hero .marca-agua { width: 280px; right: -80px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- edición ---------- */
input.ed, select.ed {
  font: inherit; font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--tinta);
  border: 1px solid #f0c48f; background: #fffaf3; border-radius: 6px; padding: 4px 7px;
}
input.ed { width: 84px; text-align: right; }
input.ed.corto { width: 64px; }
input.ed.lleno { background: var(--naranja-claro); border-color: var(--naranja); font-weight: 700; }
input.ed:hover, select.ed:hover { border-color: var(--naranja); }
input.ed:focus, select.ed:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(4,101,71,.18); background: #fff; }
input.ed.guardando, select.ed.guardando { opacity: .55; }
input.ed.error, select.ed.error { border-color: var(--rojo); background: var(--rojo-claro); }
input.ed:disabled { opacity: .35; }
th.ed-col { background: #fff4e6; color: #8a4300; }
.panel-todos {
  display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-end; background: #fff; border: 1px solid var(--linea);
  border-radius: 12px; padding: 14px 18px; margin: 0 0 18px;
}
.panel-todos h3 { font-family: var(--display); font-weight: 600; font-size: 18px; margin: 0; color: var(--verde); width: 100%; }
.panel-todos label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--gris); }
.panel-todos .grupo { display: flex; gap: 10px; align-items: flex-end; padding-right: 22px; border-right: 1px solid var(--linea); }
.panel-todos .grupo:last-child { border-right: 0; }
.panel-todos .nota { font-size: 12.5px; color: var(--gris); width: 100%; margin: 0; }
tr.familia td .fam-ed { display: inline-flex; gap: 6px; align-items: center; font-family: var(--texto); font-size: 12.5px; font-weight: 600; color: var(--gris); margin-left: 18px; }
tr.familia td .fam-ed input.ed { width: 60px; }
.origen { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: var(--fondo); color: var(--gris); }
.origen.Manual { background: var(--naranja-claro); color: #8a4300; }
.origen.Contrato { background: var(--verde-claro); color: var(--verde); }
.origen.DK { background: var(--azul-claro); color: #2d5578; }
.origen.SIN { background: var(--rojo-claro); color: var(--rojo); }
td.sin-precio { color: var(--rojo); font-weight: 700; }
h2.seccion { font-family: var(--display); font-weight: 600; font-size: 22px; color: var(--verde); margin: 28px 0 10px; }
.ayuda { color: var(--gris); font-size: 13.5px; margin: -4px 0 12px; max-width: 90ch; }
.regla-celda { display: flex; gap: 6px; align-items: center; }
.regla-celda select.ed { padding: 3px 4px; }
.regla-celda .res { font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; color: var(--gris); }
.regla-celda .res.ajustado { color: #7a3c0c; font-weight: 700; }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0;
  background: var(--verde-hondo); color: #fff; padding: 10px 18px; border-radius: 10px; font-weight: 700;
  transition: opacity .2s, transform .2s; pointer-events: none; z-index: 50; max-width: 90vw;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.toast.mal { background: var(--rojo); }
.lista-control li { margin: 4px 0; }

/* ---------- tablas anchas (márgenes y precios) ---------- */
main.ancho { max-width: none; }
.tabla-wrap.alto { max-height: calc(100vh - 150px); overflow: auto; }
table.compacta { font-size: 13px; }
table.compacta th, table.compacta td { padding: 5px 7px; }
table.compacta th { z-index: 2; white-space: normal; line-height: 1.2; vertical-align: bottom; }
table.compacta input.ed { width: 70px; padding: 3px 6px; }
table.compacta input.ed.corto { width: 50px; }
table.compacta small.var { display: block; font-size: 11px; font-weight: 600; line-height: 1.1; color: var(--gris); }
table.compacta small.var.sube { color: var(--rojo); }
table.compacta small.var.baja { color: var(--verde); }
table.compacta .fijo { position: sticky; background: #fff; z-index: 1; }
table.compacta th.fijo { z-index: 3; background: #f7faf7; }
table.compacta .c1 { position: static; background: transparent; }
table.compacta th.c1 { background: #f7faf7; }
table.compacta .c2 { left: 0; box-shadow: 1px 0 0 var(--linea); }
table.compacta tr.familia .fam-nombre { position: sticky; left: 8px; }

/* ---------- v0.3: ciclo del mes ---------- */
.bloqueo { background: var(--verde-hondo); color: #fff; padding: 10px 28px; font-size: 14px; }
.bloqueo a { color: #ffd6a6; font-weight: 700; }
form.subir label { display: block; margin: 0 0 14px; }
form.subir label.check { display: flex; gap: 8px; align-items: center; font-weight: 600; margin-top: 10px; }
.campo-fecha { display: block; margin-top: 6px; font: inherit; padding: 8px 10px; border: 1px solid var(--linea); border-radius: 8px; }
form.revision { max-width: 820px; }
form.revision ul { margin: 6px 0; padding-left: 20px; }
.btn[disabled], button[disabled] { opacity: .45; cursor: not-allowed; }
.btn.rojo { background: var(--rojo); }
.publicada {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(160deg, var(--verde) 0%, var(--verde-hondo) 80%); color: #fff; border-radius: 14px; padding: 22px 26px;
}
.publicada h2 { font-family: var(--display); font-size: 34px; margin: 0; line-height: 1.1; }
.publicada p { margin: 4px 0 0; color: #c3dccf; }
.publicada .saludo { color: #ffd6a6; font-weight: 700; margin: 0; }
.publicada .pdfs { display: flex; gap: 10px; flex-wrap: wrap; }
.deshacer { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 16px 0 0; }
table.contratos th.mes-actual { background: var(--naranja-claro); color: #8a4300; }
.paso.publicada-paso .num { background: #5fd38d; color: var(--verde-hondo); border-color: #5fd38d; }

/* ---------- v0.4: consultas y fórmulas ---------- */
select.sel-grande { font: inherit; font-size: 15px; padding: 7px 10px; border: 1px solid var(--linea); border-radius: 8px; min-width: 340px; max-width: 100%; background: #fff; }
.panel-todos .cifra { font-family: var(--display); font-size: 24px; color: var(--tinta); }
.panel-todos .cifra.ok { color: var(--verde); }
.panel-todos .cifra.mal { color: var(--rojo); }
.barra-peso { display: inline-block; width: 90px; height: 8px; background: var(--fondo); border-radius: 4px; vertical-align: middle; overflow: hidden; margin-right: 6px; }
.barra-peso i { display: block; height: 100%; background: var(--verde); border-radius: 4px; }
tr.total td { background: #f7faf7; font-weight: 700; }
.grafica { background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 16px 18px 8px; }
.leyenda-graf { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--tinta); margin-bottom: 4px; }
.leyenda-graf i, .tip i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.graf-wrap { position: relative; }
.graf-wrap svg { width: 100%; height: auto; display: block; }
.graf-wrap .rejilla { stroke: #e8ede8; stroke-width: 1; }
.graf-wrap .base { stroke: #b9c5bc; stroke-width: 1; }
.graf-wrap .eje { font-size: 11px; fill: var(--gris); font-family: var(--texto); }
.graf-wrap .etq { font-size: 12px; fill: var(--tinta); font-weight: 700; font-family: var(--texto); }
.graf-wrap .cursor { stroke: #9aa8a0; stroke-width: 1; stroke-dasharray: 3 3; }
.graf-wrap .tip { position: absolute; top: 8px; background: #fff; border: 1px solid var(--linea); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; box-shadow: 0 4px 14px rgba(20,43,34,.12); pointer-events: none; min-width: 150px; }
.graf-wrap .tip b, .graf-wrap .tip span { display: block; }

/* ---------- mercado ---------- */
.tend { font-weight: 700; font-size: 12.5px; text-decoration: none; white-space: nowrap; }
.tend.sube { color: var(--rojo); }
.tend.baja { color: var(--verde); }
.tend.estable, .tend.neutro { color: var(--gris); }
.tend.mini { font-size: 9px; margin-right: 6px; cursor: help; display: inline-block; padding: 2px 5px 1px; border-radius: 4px;
  line-height: 1.2; vertical-align: 1px; letter-spacing: .02em; }
.tend.mini::before { content: "MERC "; font-size: 8px; font-weight: 800; opacity: .8; }
.tend.mini.sube { background: #fde8e6; }
.tend.mini.baja { background: #e3efe8; }
td.sube { color: var(--rojo); } td.baja { color: var(--verde); } td.estable { color: var(--gris); }
tr.fila-sel td { background: var(--naranja-claro); }
.leyenda-graf i.discontinua { height: 0; border-top: 2px dashed; background: none !important; width: 14px; }
.enlaces { margin-top: 14px; border-top: 1px solid var(--linea); padding-top: 12px; font-size: 14px; }
.enlaces .checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 14px; margin: 10px 0 12px; }
.enlaces label { display: flex; gap: 6px; align-items: center; font-size: 13.5px; }

/* ---------- usuarios y acceso ---------- */
.barra .yo { font-weight: 700; color: var(--tinta); font-size: 14px; margin-left: 10px; }
.barra .yo small { display: block; font-weight: 600; color: var(--gris); font-size: 11.5px; }
.barra .salir { color: var(--gris); font-weight: 600; text-decoration: none; padding: 6px 8px; border-radius: 6px; font-size: 14px; }
.barra .salir:hover { background: var(--verde-claro); color: var(--verde); }
.bloqueo.consulta { background: #2d5578; }
body.pagina-entrar { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(160deg, var(--verde) 0%, var(--verde-hondo) 75%); }
main.entrar { background: #fff; border-radius: 16px; padding: 32px 34px; width: min(380px, 92vw); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.logo-entrar { width: 190px; display: block; margin-bottom: 8px; }
main.entrar h1 { margin: 0 0 18px; }
main.entrar label { display: block; font-size: 13.5px; color: var(--gris); margin-bottom: 14px; }
main.entrar input { display: block; width: 100%; margin-top: 5px; font: inherit; font-size: 15px; padding: 9px 11px; border: 1px solid var(--linea); border-radius: 8px; }
main.entrar .btn { width: 100%; padding: 12px; margin-top: 4px; }
form.en-linea { display: flex; gap: 6px; align-items: center; margin: 0; }
.campo-corto, .sel-corto { font: inherit; font-size: 14px; padding: 6px 9px; border: 1px solid var(--linea); border-radius: 8px; }
tr.inactivo td { opacity: .5; }
.barra { gap: 12px; }
.barra nav a { padding: 8px 9px; }
.barra .prueba, .barra .yo, .barra .salir { white-space: nowrap; }
@media (max-width: 1480px) { .barra .producto { display: none; } .barra nav { margin-left: 4px; } }
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; align-items: start; }
.dos-col .panel-todos { margin: 0; }
.campo-corto.ancho { width: 260px; }
button.quitar { font: inherit; font-size: 12.5px; font-weight: 700; color: var(--rojo); background: none; border: 1px solid #f0c4c0; border-radius: 6px; padding: 3px 9px; cursor: pointer; }
button.quitar:hover { background: var(--rojo-claro); }
@media (max-width: 1100px) { .dos-col { grid-template-columns: 1fr; } }
.bloque-contrato { margin-bottom: 18px; }
.cab-bloque { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.cab-bloque h2 { margin-bottom: 6px; }
.mas-contrato { margin-top: 8px; font-size: 13.5px; padding: 6px 12px; }
.anios .nuevo { border-style: dashed; }
table.registro td { white-space: normal; vertical-align: top; }
table.registro td.antes { color: var(--gris); text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }
table.registro td.despues { font-weight: 700; }
table.registro td.detalle { max-width: 420px; font-size: 12px; }
table.registro tr.t-acceso td { background: #fafbf9; }

/* última actualización de contratos */
.ultima-act { margin: -4px 0 14px; padding: 8px 12px; background: #eef6f1; border-left: 3px solid #1f6b46;
  border-radius: 6px; font-size: .92rem; color: #33443b; }
.ultima-act b { font-weight: 600; }

/* marca del desarrollador */
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--gris);
  font-size: 12px; }
.marca:hover span { color: var(--verde); }
.marca img { height: 36px; width: auto; display: block; image-rendering: auto; }
.pie .marca { margin-bottom: 6px; }
.pie p { margin: 0; }
main.entrar .marca { margin-top: 26px; justify-content: center; width: 100%; }
a.yo { text-decoration: none; color: inherit; }
a.yo:hover small { text-decoration: underline; }

/* ojo para ver la contraseña */
.clave-caja { position: relative; display: block; }
.clave-caja input { width: 100%; padding-right: 42px; box-sizing: border-box; }
.clave-caja:has(input.campo-corto) { display: inline-block; width: auto; }
.ver-clave { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0;
  padding: 4px; cursor: pointer; color: var(--gris); line-height: 0; border-radius: 6px; }
.ver-clave:hover, .ver-clave:focus-visible { color: var(--verde, #046547); background: rgba(0,0,0,.05); }
.ver-clave svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
form.subir label { display: block; margin-bottom: 12px; }
form.subir .clave-caja input, form.subir input[type=password] { display: block; margin-top: 5px; font: inherit; font-size: 15px;
  padding: 9px 42px 9px 11px; border: 1px solid var(--linea); border-radius: 8px; background: #fff; }
form.subir .clave-caja input:focus, main.entrar input:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px rgba(4,101,71,.18); }
table.contratos input.ed { width: 70px; padding: 3px 5px; font-size: 13px; }
table.contratos input.ed.corto { width: 58px; }
table.contratos td, table.contratos th { padding-left: 3px; padding-right: 3px; }
table.contratos .borrar-contrato { padding: 4px 8px; font-size: 12px; }

/* pantalla: crear año de contratos */
.nuevo-anio-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.nuevo-anio-cab .marcar { display: flex; gap: 8px; flex-wrap: wrap; }
table.pasan td.c, table.pasan th.c { width: 44px; text-align: center; }
table.pasan input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--verde); cursor: pointer; }
table.pasan tr.sin-datos td { color: var(--gris); }
table.pasan label { display: block; cursor: pointer; }
.pie-acciones { display: flex; gap: 10px; align-items: center; margin-top: 18px; flex-wrap: wrap; }

/* cambiar el enlace contrato -> materia prima */
.enlace-cambiar { margin-left: 8px; font: inherit; font-size: 12px; font-weight: 700; color: var(--verde); background: none;
  border: 1px solid var(--linea); border-radius: 999px; padding: 2px 10px; cursor: pointer; }
.enlace-cambiar:hover { border-color: var(--verde); }
dialog.dialogo { border: 0; border-radius: 14px; padding: 22px 24px; width: min(560px, calc(100vw - 32px));
  box-shadow: 0 24px 60px rgba(0,0,0,.25); }
dialog.dialogo::backdrop { background: rgba(10, 30, 20, .45); }
dialog.dialogo h3 { margin: 0 0 6px; color: var(--verde); font-family: var(--display); font-size: 20px; }
dialog.dialogo label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--gris); margin: 12px 0; }
dialog.dialogo .efecto { background: #fff7ec; border-left: 3px solid #e07000; border-radius: 6px; padding: 10px 12px; font-size: 14px; }
dialog.dialogo .efecto ul { margin: 6px 0; padding-left: 18px; }
dialog.dialogo .efecto p { margin: 6px 0 0; }
dialog.dialogo .acciones { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
[hidden] { display: none !important; }

/* piensos activos */
.resumen-activos { display: flex; gap: 10px 24px; flex-wrap: wrap; margin: 4px 0 14px; font-size: 15px; color: var(--gris); }
.resumen-activos b { color: var(--verde); font-size: 18px; }
.resumen-activos .inact b { color: var(--gris); }
.filtros-activos { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.segmentos { display: inline-flex; border: 1px solid var(--linea); border-radius: 999px; overflow: hidden; background: #fff; }
.segmentos .seg { font: inherit; font-size: 14px; font-weight: 600; border: 0; background: none; padding: 7px 14px; cursor: pointer; color: var(--gris); }
.segmentos .seg + .seg { border-left: 1px solid var(--linea); }
.segmentos .seg.activo { background: var(--verde); color: #fff; }
table.activos .chip.si { background: #e3efe8; color: var(--verde); }
table.activos .chip-inactivo { display: none; background: #eceeed; color: var(--gris); }
table.activos tr.inactivo td { color: #8c968f; }
table.activos tr.inactivo td b { font-weight: 600; }
table.activos tr.inactivo .chip-inactivo { display: inline-block; }
.marca-portada { display: flex; justify-content: center; margin: 26px 0 18px; }
.marca-portada .marca img { height: 44px; }
table.compacta .linea-var { display: block; line-height: 1.05; white-space: nowrap; }
table.compacta .linea-var small.ant { display: block; font-size: 10.5px; color: var(--gris); }
table.compacta .linea-var small.ant::before { content: "ant. "; }
table.compacta small.var.en-linea { display: block; }

/* ---- tabla de precios: vistas, grupos y menos ruido ---- */
.barra-vista { display: flex; gap: 14px 22px; align-items: center; flex-wrap: wrap; margin: 4px 0 10px; }
.interruptor { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--gris); cursor: pointer; }
.interruptor input { width: 16px; height: 16px; accent-color: var(--verde); }
table.precios { --h-grupo: 26px; }
table.precios tr.grupos th { top: 0; height: var(--h-grupo); padding-top: 4px; padding-bottom: 4px; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gris); background: #f0f4f1; border-bottom: 0; vertical-align: middle; }
table.precios tr.grupos th.g { text-align: center; border-left: 2px solid #fff; }
table.precios tr.grupos th.g-t1 { background: #e6f0ea; color: var(--verde); }
table.precios tr.grupos th.g-t3 { background: #e8eef4; color: #2f5d86; }
table.precios tr.cols th { top: var(--h-grupo); }
table.precios .g-ini { border-left: 2px solid #e2e9e4; }
.tabla-wrap:not(.vista-simple) table.precios tr.solo-simple, .tabla-wrap.vista-simple table.precios tr.solo-completa { display: none; }
.tabla-wrap.vista-simple table.precios .c-x { display: none; }
.tabla-wrap.vista-simple table.precios td, .tabla-wrap.vista-simple table.precios th { padding-left: 12px; padding-right: 12px; }
/* ajustes a 0: discretos */
table.precios input.ed.corto:not(.lleno):not(:focus) { background: transparent; border-color: #e7ece8; color: #b0b9b3; }
/* margen final: gris si cumple, rojo si no */
table.precios td.mfin.cumple { color: #9aa59f; font-weight: 400; }
table.precios td.mfin.bajo { color: var(--rojo); font-weight: 700; background: var(--rojo-claro); }
/* aviso de margen bajo junto al precio (se ve sobre todo en la vista simple) */
table.precios .alerta-min { display: none; color: var(--rojo); font-size: 10px; margin-right: 4px; vertical-align: 1px; }
table.precios .alerta-min.si { display: inline; }
/* sin comparar: solo una flecha */
.tabla-wrap.sin-comparar table.precios .linea-var { display: inline; }
.tabla-wrap.sin-comparar table.precios .linea-var small.ant { display: none; }
.tabla-wrap.sin-comparar table.precios small.var.en-linea { display: inline; font-size: 0; margin-left: 4px; }
.tabla-wrap.sin-comparar table.precios small.var.en-linea.sube::before { content: "↑"; font-size: 12px; font-weight: 700; color: var(--rojo); }
.tabla-wrap.sin-comparar table.precios small.var.en-linea.baja::before { content: "↓"; font-size: 12px; font-weight: 700; color: var(--verde); }
.fecha-anterior { font-size: 13px; color: var(--gris); background: #f0f4f1; padding: 4px 10px; border-radius: 999px; }
.fecha-anterior b { color: #1d2b24; }

/* copias de seguridad */
.resumen-copias { display: flex; gap: 14px; flex-wrap: wrap; align-items: stretch; margin: 6px 0 16px; }
.resumen-copias > div { background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 12px 16px; min-width: 200px;
  display: flex; flex-direction: column; gap: 2px; }
.resumen-copias > div span { font-size: 12px; color: var(--gris); text-transform: uppercase; letter-spacing: .06em; }
.resumen-copias > div b { font-size: 18px; color: #1d2b24; }
.resumen-copias > div small { color: var(--gris); }
.resumen-copias > div.ok { border-left: 4px solid var(--verde); }
.resumen-copias > div.mal { border-left: 4px solid var(--rojo); }
.resumen-copias form { display: flex; align-items: center; }
.pasos-restaurar { line-height: 1.7; }
.leyenda span.sin-caja::before { display: none; }
.leyenda em.tend { font-style: normal; }
/* piensos subcontratados */
form.en-linea { display: inline; margin: 0; }
.btn.peq { padding: 4px 10px; font-size: 12.5px; }
.fila-anadir { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 12px 0 8px; }
.fila-anadir label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--gris); }
.fila-anadir select { min-width: 280px; max-width: 100%; padding: 7px 8px; border: 1px solid #c9d2cc; border-radius: 6px; font: inherit; }
.chip.sub { background: #e8eefc; color: #2b4a9b; }
/* precio retocado a mano (ajuste individual) */
td.precio.retocado { background: #efe7fb; color: #4b2a86; box-shadow: inset 3px 0 0 #7b4fc9; }
td.precio .retoque { display: block; font-size: 10.5px; font-weight: 600; color: #6a45b0; line-height: 1.1; white-space: nowrap; }
.leyenda .l-ret::before { background: #efe7fb; border: 1px solid #7b4fc9; }
/* casilla cambiada a mano en esta tarifa */
input.ed.cambiado { border-color: #7b4fc9 !important; box-shadow: 0 0 0 2px #e4d8fa; color: #4b2a86; background: #f6f1fe; }
small.antes-cambio { display: block; font-size: 10.5px; font-weight: 600; color: #6a45b0; text-align: right; line-height: 1.1; margin-top: 2px; white-space: nowrap; }
.leyenda .l-camb::before { background: #f6f1fe; border: 2px solid #7b4fc9; }