/* Paleta tomada de "Paginas Web/Pagina Web Carbo": es la identidad del negocio. */
:root {
  --bg: #f0eddf;
  --panel: #fffdf6;
  --wood: #ae8a6e;
  --ink: #35281d;
  --tenue: #7a6a5b;
  --olive: #879673;
  --terracota: #c47a41;
  --borde: #ddd5c2;

  --verde: #4f8a4f;
  --amarillo: #d99b26;
  --rojo: #c2452f;
  --gris: #9a9186;

  --radio: 10px;
  --sombra: 0 1px 3px rgba(53, 40, 29, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1712;
    --panel: #262019;
    --ink: #ede6d8;
    --tenue: #a89a89;
    --borde: #3b322a;
    --sombra: 0 1px 3px rgba(0, 0, 0, 0.4);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}

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

/* ── Estructura ─────────────────────────────────────────────────────────── */

header.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--borde);
}
header.barra h1 {
  margin: 0;
  font-size: 17px;
  letter-spacing: 0.02em;
}
header.barra .crece { flex: 1; }
header.barra .quien { color: var(--tenue); font-size: 13px; }

main { padding: 20px; max-width: 1200px; margin: 0 auto; }

.panel {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--sombra);
}
.panel h2 { margin: 0 0 12px; font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tenue); }

.fila { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.crece { flex: 1; }
.tenue { color: var(--tenue); font-size: 13px; }
.chico { font-size: 13px; }
.derecha { text-align: right; }
.oculto { display: none !important; }

/* ── Controles ──────────────────────────────────────────────────────────── */

button, .boton {
  font: inherit;
  padding: 7px 14px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .boton:hover { border-color: var(--wood); }
button.principal { background: var(--wood); border-color: var(--wood); color: #fff; }
button.principal:hover { background: var(--terracota); border-color: var(--terracota); }
button:disabled { opacity: 0.45; cursor: not-allowed; }

input, select, textarea {
  font: inherit;
  padding: 7px 10px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  width: 100%;
}
label { display: block; font-size: 13px; color: var(--tenue); margin-bottom: 4px; }
.campo { margin-bottom: 12px; }

/* ── Semáforo ───────────────────────────────────────────────────────────── */

.luz {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  flex: none;
}
.luz.verde { background: var(--verde); }
.luz.amarillo { background: var(--amarillo); }
.luz.rojo { background: var(--rojo); }
.luz.gris { background: var(--gris); }

.etiqueta {
  display: inline-block;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--borde);
  color: var(--tenue);
}

/* ── Barra de avance ────────────────────────────────────────────────────── */

.barra-avance {
  height: 6px;
  background: var(--borde);
  border-radius: 999px;
  overflow: hidden;
}
.barra-avance > div { height: 100%; background: var(--olive); }
.barra-avance.sin-plan > div { width: 0; }

/* ── Tablas y listas ────────────────────────────────────────────────────── */

.tabla-envoltura { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tenue); font-weight: 600; }
tbody tr:hover { background: var(--bg); }
td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; }

.tarjeta-actividad {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 12px;
  margin-bottom: 8px;
  background: var(--bg);
}
.tarjeta-actividad.bloqueada { opacity: 0.6; }
.tarjeta-actividad .titulo { font-weight: 600; }

.etapa-fila { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--borde); }
.etapa-fila:last-child { border-bottom: none; }
.etapa-fila .nombre { width: 190px; flex: none; }
.etapa-fila.omitida { opacity: 0.45; }

/* ── Avisos ─────────────────────────────────────────────────────────────── */

.aviso { padding: 10px 12px; border-radius: 8px; margin-bottom: 12px; font-size: 14px; }
.aviso.error { background: rgba(194, 69, 47, 0.12); color: var(--rojo); border: 1px solid rgba(194, 69, 47, 0.3); }
.aviso.ok { background: rgba(79, 138, 79, 0.12); color: var(--verde); border: 1px solid rgba(79, 138, 79, 0.3); }
/* Ni error ni «listo»: se guardó, pero hay algo que alguien tiene que mirar. */
.aviso.ojo { background: rgba(217, 155, 38, 0.14); color: var(--ink); border: 1px solid rgba(217, 155, 38, 0.4); }

/* ── Editor de plantillas ───────────────────────────────────────────────── */
/* Una plantilla larga son 18 filas con 9 campos cada una: los controles van
   compactos o no entran en la pantalla del taller. */
.fila-paso td { padding: 5px 6px; }
.fila-paso input, .fila-paso select, .fila-paso button { padding: 5px 7px; font-size: 13px; }
.fila-paso button { min-width: 30px; }

/* ── Login ──────────────────────────────────────────────────────────────── */

.centrado { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.caja-login { width: 100%; max-width: 340px; }
.caja-login h1 { text-align: center; font-size: 20px; margin: 0 0 4px; }
.caja-login p.sub { text-align: center; color: var(--tenue); margin: 0 0 20px; font-size: 13px; }

/* ── Diálogo ────────────────────────────────────────────────────────────── */

dialog {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--panel);
  color: var(--ink);
  padding: 20px;
  width: min(520px, 92vw);
}
dialog::backdrop { background: rgba(53, 40, 29, 0.45); }

@media (max-width: 640px) {
  main { padding: 12px; }
  .etapa-fila .nombre { width: 120px; }
}