/* Agenda de Visitas Técnicas — Grupo Duhau
   Sistema de diseño corporativo, unidad `grupo`.

   Modo claro únicamente, a propósito. La guía de la unidad `grupo` recomienda light, y
   la audiencia son los gerentes de unidad, no una pantalla de operaciones. Un tema oscuro
   acá lo volvía visualmente indistinguible de la consola de SGS, que sí es grafito oscuro
   por diseño. Este es un documento; aquél es un tablero. */

:root {
  --bg: #f5f7f1;
  --bg-surface: #ffffff;
  --bg-subtle: #f0ede8;
  --bg-warm: #faf9f5;

  --text-primary: #1a3a2a;
  --text-body: #4a5568;
  --text-muted: #6b7280;
  --text-disabled: #a8b0ba;

  --border: #d8dcd4;
  --border-subtle: #e8eae4;
  --border-hair: #eef0ea;

  --accent-gold: #c49a1a;
  --accent-gold-l: #e8b82a;
  --accent-gold-d: #a07c10;
  --accent-gold-wash: #faf6e8;

  --unit-primary: #1a3a2a;

  --state-positive: #1a6b3a;
  --state-warning: #92680a;
  --state-negative: #b91c1c;
  --state-neutral: #6b7280;
  --state-positive-bg: #e8f5ec;
  --state-warning-bg: #fbf3d9;
  --state-negative-bg: #fdeaea;
  --state-neutral-bg: #f1f2f4;

  --shadow-card: 0 1px 2px rgba(26, 58, 42, .04);
  --shadow-raised: 0 4px 16px rgba(26, 58, 42, .08);

  --serif: 'Libre Baskerville', Georgia, Cambria, 'Times New Roman', serif;
  --sans: 'Work Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); color: var(--text-primary); margin: 0; }
h1 { font-size: 32px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
h2 { font-size: 23px; font-weight: 700; line-height: 1.25; }
h3 { font-size: 18px; font-weight: 400; }
a { color: var(--accent-gold-d); }

/* ---------- Masthead ----------
   La franja oscura con la regla dorada es la firma de marca del grupo; se mantiene.
   El contraste contra el cuerpo claro es lo que le da el carácter editorial. */

.header {
  background: #14201a;
  border-bottom: 3px solid var(--accent-gold);
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  min-height: 72px;
}
.header .marca { display: flex; align-items: center; gap: 22px; }
.header .eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: rgba(255, 255, 255, .5);
}
.header .titulo { font-family: var(--serif); font-size: 16px; color: #fff; }
.header .divisor { width: 1px; height: 34px; background: rgba(255, 255, 255, .18); }

nav.tabs { display: flex; gap: 2px; }
nav.tabs a {
  color: rgba(255, 255, 255, .62);
  text-decoration: none;
  font-size: 13px; font-weight: 500;
  padding: 25px 15px;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
  transition: color .12s;
}
nav.tabs a:hover { color: #fff; }
nav.tabs a.activo { color: #fff; border-bottom-color: var(--accent-gold); }

/* ---------- Layout ---------- */

main { max-width: 1120px; margin: 0 auto; padding: 48px 40px 64px; }
.seccion { margin-bottom: 56px; }
.seccion:last-child { margin-bottom: 0; }

/* Firma visual del grupo: regla dorada + label espaciado. */
.eyebrow-seccion { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.eyebrow-seccion::before {
  content: ''; width: 26px; height: 2px;
  background: var(--accent-gold); flex-shrink: 0;
}
.eyebrow-seccion span {
  font-size: 10px; font-weight: 800; letter-spacing: 3px;
  text-transform: uppercase; color: var(--accent-gold-d);
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  main { padding: 28px 18px 40px; }
  .header { padding: 0 18px; }
  h1 { font-size: 26px; }
}

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-top: 2px solid var(--accent-gold);
  border-radius: 0;
  padding: 28px;
  box-shadow: var(--shadow-card);
}
.card.plana { border-top: 1px solid var(--border-subtle); }

/* ---------- KPI ---------- */

.kpi-label {
  font-size: 10px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px;
}
.kpi-numero {
  font-family: var(--serif); font-size: 46px; font-weight: 700;
  color: var(--text-primary); line-height: .92;
}
.kpi-unidad { font-size: 13px; font-weight: 500; color: var(--text-muted); margin-top: 6px; }

/* ---------- Tablas ---------- */

table { width: 100%; border-collapse: collapse; }
thead th {
  font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1.6px; color: var(--text-muted);
  border-bottom: 1.5px solid var(--text-primary);
  padding: 11px 16px; text-align: right;
}
thead th:first-child { text-align: left; }
tbody td {
  padding: 15px 16px; text-align: right;
  border-bottom: 1px solid var(--border-hair);
  color: var(--text-body);
}
tbody td:first-child { text-align: left; color: var(--text-primary); }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--bg-warm); }
tfoot td {
  padding: 14px 16px; text-align: right; font-weight: 700;
  color: var(--text-primary);
  background: var(--accent-gold-wash);
  border-top: 1.5px solid var(--accent-gold);
}
tfoot td:first-child { text-align: left; }

/* ---------- Badges ---------- */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase; padding: 4px 10px; border-radius: 2px;
  background: var(--state-neutral-bg); color: var(--state-neutral);
  white-space: nowrap;
}
.badge::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.badge.ok { background: var(--state-positive-bg); color: var(--state-positive); }
.badge.warn { background: var(--state-warning-bg); color: var(--state-warning); }
.badge.alerta { background: var(--state-negative-bg); color: var(--state-negative); }

/* ---------- Barra de ocupación ----------
   Componente central: hace visible que la capacidad de una visita es finita. */

.ocupacion { margin: 20px 0 4px; }
.ocupacion .barra {
  display: flex; height: 28px; overflow: hidden;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
}
.ocupacion .tramo {
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  color: rgba(255, 255, 255, .95);
  min-width: 0; overflow: hidden; white-space: nowrap;
}
.tramo.supervisor { background: var(--unit-primary); }
.tramo.gerente { background: var(--accent-gold); color: #241c00; }
.tramo.en_sitio { background: var(--state-negative); }
.ocupacion .leyenda {
  display: flex; gap: 20px; flex-wrap: wrap; align-items: center;
  margin-top: 10px; font-size: 11.5px; color: var(--text-muted);
}
.ocupacion .leyenda i {
  width: 9px; height: 9px; display: inline-block; margin-right: 6px;
}

/* ---------- Calendario ----------
   Tratamiento de agenda impresa: líneas finas, números en serif, mucho aire. */

.cal {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  background: var(--bg-surface);
}
.cal th {
  font-size: 10px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; color: var(--text-muted);
  padding: 12px 6px; text-align: center;
  border-bottom: 1.5px solid var(--text-primary);
}
.cal td {
  vertical-align: top; height: 116px; width: 14.28%;
  border: 1px solid var(--border-hair);
  padding: 8px; text-align: left;
}
.cal td.fuera { background: var(--bg); }
.cal td.fuera .num { color: var(--text-disabled); }
.cal td.finde { background: var(--bg-warm); }
.cal td.hoy { box-shadow: inset 0 0 0 2px var(--accent-gold); }
.cal .num {
  font-family: var(--serif); font-size: 15px; font-weight: 400;
  color: var(--text-muted); display: block; margin-bottom: 6px;
}
.cal td.hoy .num { color: var(--accent-gold-d); font-weight: 700; }
.cal .evento {
  display: block; text-decoration: none;
  font-size: 11px; font-weight: 600; line-height: 1.35;
  padding: 5px 7px; margin-bottom: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal .evento.cancelada { opacity: .4; text-decoration: line-through; }

.cal-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.cal-nav h2 { flex: 1; min-width: 220px; }

/* ---------- Formularios ---------- */

label {
  display: block; font-size: 10px; font-weight: 800;
  letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 6px;
}
input[type=text], input[type=date], input[type=time], input[type=number],
input[type=password], input[type=email], select, textarea {
  width: 100%; padding: 10px 12px; font-family: var(--sans); font-size: 14px;
  color: var(--text-primary); background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: 2px;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent-gold); outline-offset: -1px; border-color: transparent;
}
textarea { min-height: 82px; resize: vertical; }
.campo { margin-bottom: 16px; }
.fila { display: flex; gap: 16px; flex-wrap: wrap; }
.fila > * { flex: 1; min-width: 140px; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  padding: 10px 18px; border-radius: 2px; cursor: pointer;
  border: 1px solid var(--text-primary);
  background: var(--text-primary); color: #fff;
  text-decoration: none;
}
.btn:hover { background: #24503a; border-color: #24503a; }
.btn.secundario {
  background: transparent; color: var(--text-primary); border-color: var(--border);
}
.btn.secundario:hover { background: var(--bg-warm); border-color: var(--text-primary); }
.btn.gold {
  background: var(--accent-gold); border-color: var(--accent-gold); color: #241c00;
}
.btn.gold:hover { background: var(--accent-gold-l); border-color: var(--accent-gold-l); }
.btn.peligro {
  background: transparent; color: var(--state-negative); border-color: #e6c4c4;
}
.btn.peligro:hover { background: var(--state-negative-bg); border-color: var(--state-negative); }
.btn.chico { font-size: 11px; padding: 6px 11px; }

/* ---------- Avisos ---------- */

.aviso {
  padding: 14px 18px; margin-bottom: 24px; border-radius: 0;
  font-size: 14px; border-left: 3px solid;
}
.aviso.ok { background: var(--state-positive-bg); color: var(--state-positive); border-color: var(--state-positive); }
.aviso.error { background: var(--state-negative-bg); color: var(--state-negative); border-color: var(--state-negative); }
.aviso.info { background: var(--accent-gold-wash); color: var(--accent-gold-d); border-color: var(--accent-gold); }

.vacio {
  padding: 40px 32px; text-align: center; color: var(--text-muted);
  font-size: 14px; border: 1px dashed var(--border); background: var(--bg-warm);
}

.nota { font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }
.mono {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 12px; background: var(--bg-subtle); color: var(--text-primary);
  padding: 9px 12px; border-radius: 2px; word-break: break-all;
  border: 1px solid var(--border-subtle);
}

details.bloque {
  border: 1px solid var(--border-subtle); border-radius: 0;
  margin-top: 18px; background: var(--bg-surface);
}
details.bloque > summary {
  padding: 14px 18px; cursor: pointer; font-size: 13px; font-weight: 600;
  color: var(--text-primary); background: var(--bg-warm);
  list-style: none;
}
details.bloque > summary::-webkit-details-marker { display: none; }
details.bloque > summary::before {
  content: '+'; display: inline-block; width: 16px;
  color: var(--accent-gold-d); font-weight: 700;
}
details.bloque[open] > summary::before { content: '\2013'; }
details.bloque > div { padding: 24px 18px; border-top: 1px solid var(--border-hair); }

footer.pie {
  border-top: 1px solid var(--border); margin-top: 64px;
  padding: 22px 40px; display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 12px;
  background: var(--bg-surface); font-size: 11px; color: var(--text-muted);
}
footer.pie .confidencial {
  font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--state-negative); border: 1px solid #efd4d4; padding: 4px 11px;
}

@media print {
  .header, nav.tabs, .btn, footer.pie, form { display: none !important; }
  body { background: #fff; }
  main { padding: 0; max-width: none; }
}