/* ==========================================================================
   Panel de scraping — sistema visual heredado de la guía
   Crema / tinta / naranja. Serif para leer, mono para datos y código.
   ========================================================================== */

:root{
  --ink:#1B1512;
  --ink-2:#241C18;
  --cream:#F3ECE3;
  --card:#FFFFFF;
  --orange:#D9633B;
  --orange-dark:#B94F2C;
  --teal:#3E9C8F;
  --text:#2A211C;
  --muted:#7A6E65;
  --rule:#DCD1C2;
  --rule-soft:#EBE2D6;
  --ok-bg:#EAF3F1;
  --err-bg:#FBEAE4;
  --radius:8px;
  --shadow:0 1px 2px rgba(27,21,18,.06), 0 8px 24px -18px rgba(27,21,18,.35);
  --mono:'DejaVu Sans Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif:'Lora', Georgia, 'Times New Roman', serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--serif); color:var(--text); background:var(--cream);
  font-size:15px; line-height:1.55;
}
a{color:var(--orange-dark); text-decoration:none}
a:hover{text-decoration:underline}

/* ------------------------------------------------------------------ layout */
.barra{
  background:var(--ink); color:var(--cream);
  border-bottom:1px solid #000;
}
.barra .interior{
  max-width:1180px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
}
.marca{
  font-family:var(--mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:700; color:var(--cream);
}
.marca .punto{width:7px;height:7px;border-radius:50%;background:var(--orange);display:inline-block;margin-right:8px}
.barra nav{display:flex; gap:20px; flex-wrap:wrap}
.barra nav a{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:#A79A8F; padding:4px 0; border-bottom:1.5px solid transparent;
}
.barra nav a:hover, .barra nav a.activo{color:var(--cream); border-color:var(--orange); text-decoration:none}
.barra .derecha{margin-left:auto; display:flex; align-items:center; gap:14px}

main{max-width:1180px; margin:0 auto; padding:32px 24px 80px}

/* -------------------------------------------------------------- tipografía */
h1{font-family:var(--sans); font-weight:800; font-size:30px; line-height:1.12; letter-spacing:-.02em}
h2{font-family:var(--sans); font-weight:700; font-size:19px; letter-spacing:-.01em; margin-bottom:12px}
h3{font-family:var(--sans); font-weight:600; font-size:14px; margin-bottom:6px}
.eyebrow{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--orange); margin-bottom:10px;
}
.sub{color:var(--muted); font-size:14.5px; max-width:70ch}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.mini{font-size:12.5px}
.cabecera{display:flex; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:26px}
.cabecera .acciones{margin-left:auto; display:flex; gap:10px; flex-wrap:wrap; align-items:center}

/* ------------------------------------------------------------------ piezas */
.tarjeta{
  background:var(--card); border:1px solid var(--rule); border-radius:var(--radius);
  padding:20px 22px; box-shadow:var(--shadow); margin-bottom:20px;
}
.tarjeta.plana{box-shadow:none}
.rejilla{display:grid; gap:18px}
.rejilla.dos{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.rejilla.tres{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.rejilla.cuatro{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

.cifra{
  background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); padding:16px 18px;
}
.cifra .etiqueta{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px;
}
.cifra .valor{font-family:var(--sans); font-weight:700; font-size:26px; line-height:1; letter-spacing:-.02em}
.cifra .pie{font-size:12.5px; color:var(--muted); margin-top:6px}
.cifra.acento .valor{color:var(--orange-dark)}

/* ------------------------------------------------------------------ tablas */
table{width:100%; border-collapse:collapse; font-size:14px}
th{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); text-align:left; font-weight:400;
  padding:0 12px 8px 0; border-bottom:1px solid var(--rule); white-space:nowrap;
}
td{padding:10px 12px 10px 0; border-bottom:1px solid var(--rule-soft); vertical-align:top}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:#FAF6F0}
td.num, th.num{text-align:right; font-family:var(--mono); font-size:13px; white-space:nowrap}
.tabla-scroll{overflow-x:auto; margin:0 -22px; padding:0 22px}
.celda-larga{max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block}

/* --------------------------------------------------------------- etiquetas */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 10px; border-radius:99px; border:1px solid var(--rule); color:var(--muted);
  background:var(--card); white-space:nowrap;
}
.chip.ok{background:var(--ok-bg); border-color:#BCD9D3; color:#20655B}
.chip.error{background:var(--err-bg); border-color:#EFC4B4; color:#9C3B1B}
.chip.curso{background:#FBF0D9; border-color:#E7D2A0; color:#8A6A16}
.chip.espera{background:#F1EDE7; color:var(--muted)}
.chip.acento{background:var(--orange); border-color:var(--orange); color:#fff}
.punto-estado{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}

/* ----------------------------------------------------------------- botones */
.btn{
  font-family:var(--sans); font-size:13.5px; font-weight:600;
  padding:9px 16px; border-radius:6px; border:1px solid var(--rule);
  background:var(--card); color:var(--text); cursor:pointer; display:inline-flex;
  align-items:center; gap:8px; text-decoration:none; line-height:1.2;
}
.btn:hover{border-color:var(--muted); text-decoration:none}
.btn.principal{background:var(--orange); border-color:var(--orange); color:#fff}
.btn.principal:hover{background:var(--orange-dark); border-color:var(--orange-dark)}
.btn.oscuro{background:var(--ink); border-color:var(--ink); color:var(--cream)}
.btn.peligro{color:#9C3B1B}
.btn.peligro:hover{background:var(--err-bg); border-color:#EFC4B4}
.btn.pequeno{padding:6px 11px; font-size:12.5px}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* ---------------------------------------------------------------- formularios */
.campo{margin-bottom:18px}
.campo label{
  display:block; font-family:var(--sans); font-weight:600; font-size:13px; margin-bottom:6px;
}
.campo .ayuda{font-size:12.5px; color:var(--muted); margin-top:6px; line-height:1.45}
/* Por tipo, no por elemento: un `input` a secas también pillaría los
   checkbox y los dejaría gigantes. La lista incluye password y email porque
   olvidarlos deja el campo estrecho y descolocado — pasó con el login. */
input[type=text], input[type=number], input[type=url], input[type=password],
input[type=email], input[type=search], input[type=date], select, textarea{
  width:100%; font-family:var(--serif); font-size:14.5px; color:var(--text);
  padding:9px 11px; border:1px solid var(--rule); border-radius:6px; background:var(--card);
}
textarea{font-family:var(--mono); font-size:13px; line-height:1.55; resize:vertical}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(217,99,59,.13);
}
.fila{display:flex; gap:16px; flex-wrap:wrap}
.fila > *{flex:1 1 160px}
.check{display:flex; align-items:flex-start; gap:9px; margin-bottom:10px}
.check input{margin-top:3px; width:16px; height:16px; accent-color:var(--orange)}
.check label{font-weight:400; font-family:var(--serif); font-size:14px; margin:0}
fieldset{border:1px solid var(--rule); border-radius:var(--radius); padding:16px 18px; margin-bottom:20px}
legend{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); padding:0 8px;
}

/* --------------------------------------------------------------- progreso */
.barra-progreso{
  height:8px; background:var(--rule-soft); border-radius:99px; overflow:hidden; margin:14px 0 10px;
}
.barra-progreso .relleno{
  height:100%; background:var(--orange); border-radius:99px; transition:width .4s ease;
}
.consola{
  background:var(--ink); color:#E4D9CC; font-family:var(--mono); font-size:12px; line-height:1.65;
  padding:14px 16px; border-radius:var(--radius); max-height:280px; overflow-y:auto;
}
.consola .l-err{color:#F0A183}
.consola .l-avi{color:#E7C77A}
.consola .l-ok{color:#9FCFC5}

/* ----------------------------------------------------------------- avisos */
.aviso{
  border-left:3px solid var(--teal); background:var(--card); padding:14px 18px;
  border-radius:0 var(--radius) var(--radius) 0; font-size:14px; margin-bottom:20px;
}
.aviso.alerta{border-left-color:var(--orange); background:var(--err-bg)}
.aviso h3{margin-bottom:4px}
.vacio{
  color:var(--muted); font-size:14px; text-align:center; padding:30px 20px;
  border:1px dashed var(--rule); border-radius:var(--radius);
}

/* --------------------------------------------------------------- gráfico */
.grafico{display:block; max-width:100%; height:auto}
.grafico circle{cursor:crosshair}

/* --------------------------------------------------------------- cambios */
.cambio-sube{color:#9C3B1B; font-weight:600}
.cambio-baja{color:#20655B; font-weight:600}
.flecha{font-family:var(--mono); margin-right:4px}

/* -------------------------------------------------- editor de esquemas */
.campo-fila{
  display:grid; grid-template-columns:1.1fr .9fr 1.6fr auto auto; gap:10px; align-items:center;
  padding:10px 0; border-bottom:1px solid var(--rule-soft);
}
.campo-fila input, .campo-fila select{margin:0}
.campo-fila .quitar{
  background:none; border:none; color:var(--muted); cursor:pointer; font-size:18px; line-height:1;
  padding:4px 8px; border-radius:5px;
}
.campo-fila .quitar:hover{background:var(--err-bg); color:#9C3B1B}
@media (max-width:760px){
  .campo-fila{grid-template-columns:1fr 1fr; }
  .barra .interior{gap:14px}
  main{padding:22px 16px 60px}
  h1{font-size:24px}
}

/* ------------------------------------------------------------------- pie */
footer{
  max-width:1180px; margin:0 auto; padding:24px; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}