/* Auditoria de Sostenibilidad Laboral Real - Scoped Styles */
/* All selectors scoped under .al-wrap to avoid theme conflicts */

/*
  Auditoría de Sostenibilidad Laboral Real
  Greentech · Yel Martínez · yel-martinez-portfolio.com
  Paleta: Marina Vibrante v3.3 — consistente con suite de herramientas ESG
  -----------------------------------------------------------------------
  #122633  Navy hero / fondo principal header
  #0D1B2A  Deep navy / footer
  #155C8E  Blue / acento
  #6B1A1A  Burgundy / alertas y denuncias
  #C9A84C  Gold / acento amarillo cálido
  #F8EFD5  Cream / fondo secciones claras
  #EDE4C8  Cream alt
  #FFFFFF  Blanco / tarjetas
  -----------------------------------------------------------------------
*/

/* ── Reset mínimo ─────────────────────────────────────────────────────── */
.al-wrap *, .al-wrap *::before, .al-wrap *::after { box-sizing: border-box; margin: 0; padding: 0; }


/* ── Variables ────────────────────────────────────────────────────────── */
:root {
  --navy:       #122633;
  --navy-deep:  #0D1B2A;
  --blue:       #155C8E;
  --blue-light: #1e7ab8;
  --burgundy:   #6B1A1A;
  --gold:       #C9A84C;
  --gold-light: #EDB82A;
  --cream:      #F8EFD5;
  --cream-alt:  #EDE4C8;
  --white:      #FFFFFF;
  --text-dark:  #0D1B2A;
  --text-mid:   #2c4a5e;
  --text-muted: #5a7a8e;

  /* ODS colores oficiales ONU */
  --ods-8:  #A21942;
  --ods-10: #DD1367;
  --ods-16: #02689C;

  /* ESG dimensiones */
  --esg-e:  #2d6a2d;
  --esg-s:  #155C8E;
  --esg-g:  #5a3e8a;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-card: 0 2px 12px rgba(18,38,51,0.10);
  --shadow-hover: 0 6px 24px rgba(18,38,51,0.16);
  --transition: 0.2s ease;
}


/* ── Base ─────────────────────────────────────────────────────────────── */
.al-wrap html { scroll-behavior: smooth; }
.al-wrap {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--cream);
  color: var(--text-dark);
  line-height: 1.65;
  font-size: 16px;
}


/* ── Contenedor central ───────────────────────────────────────────────── */
.al-wrap .gt-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}


/* ═══════════════════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════════════════ */
.al-wrap .gt-header {
  background: var(--navy);
  border-bottom: 3px solid var(--gold);
  position: sticky;
  top: 0;
  z-index: 100;
}
.al-wrap .gt-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.85rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.al-wrap .gt-brand { display: flex; align-items: center; gap: 0.5rem; }
.al-wrap .gt-brand-logo {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.al-wrap .gt-brand-sep { color: var(--gold); opacity: 0.5; }
.al-wrap .gt-brand-autor {
  font-size: 0.9rem;
  color: rgba(248,239,213,0.75);
  font-weight: 400;
}
.al-wrap .gt-header-nav { display: flex; gap: 1.5rem; }
.al-wrap .gt-header-nav a {
  font-size: 0.85rem;
  color: rgba(248,239,213,0.8);
  text-decoration: none;
  transition: color var(--transition);
}
.al-wrap .gt-header-nav a:hover { color: var(--gold); }


/* ═══════════════════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════════════════ */
.al-wrap .gt-hero {
  background: var(--navy);
  padding: 4rem 0 3.5rem;
  position: relative;
  overflow: hidden;
}
.al-wrap .gt-hero::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(135deg, transparent, rgba(21,92,142,0.15));
  pointer-events: none;
}
.al-wrap .gt-hero h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--cream);
  line-height: 1.2;
  margin-bottom: 1rem;
  max-width: 820px;
}
.al-wrap .gt-hero-sub {
  color: rgba(248,239,213,0.82);
  font-size: 1.05rem;
  max-width: 720px;
  margin-bottom: 2rem;
  line-height: 1.7;
}
.al-wrap .gt-hero-sub strong { color: var(--gold); font-weight: 600; }


/* Badges ODS/ESG/Open Source */
.al-wrap .gt-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.al-wrap .gt-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  white-space: nowrap;
}
.al-wrap .gt-badge-ods { color: #fff; }
.al-wrap .ods-8 { background: var(--ods-8); }
.al-wrap .ods-10 { background: var(--ods-10); }
.al-wrap .ods-16 { background: var(--ods-16); }
.al-wrap .gt-badge-esg {
  background: rgba(21,92,142,0.35);
  color: var(--cream);
  border: 1px solid rgba(201,168,76,0.4);
}
.al-wrap .gt-badge-open {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
}


/* Fuentes de datos */
.al-wrap .gt-hero-fuentes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: rgba(248,239,213,0.55);
}
.al-wrap .gt-fuente {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  color: rgba(248,239,213,0.7);
}


/* ═══════════════════════════════════════════════════════════════════════
   STRIP ODS
═══════════════════════════════════════════════════════════════════════ */
.al-wrap .gt-ods-strip {
  background: var(--navy-deep);
  padding: 2.5rem 0;
  border-bottom: 2px solid rgba(201,168,76,0.2);
}
.al-wrap .gt-ods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.al-wrap .gt-ods-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  border-left: 4px solid;
  transition: background var(--transition);
}
.al-wrap .gt-ods-card:hover { background: rgba(255,255,255,0.08); }
.al-wrap .ods-card-8 { border-color: var(--ods-8); }
.al-wrap .ods-card-10 { border-color: var(--ods-10); }
.al-wrap .ods-card-16 { border-color: var(--ods-16); }
.al-wrap .gt-ods-num {
  font-family: Georgia, serif;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  min-width: 2.8rem;
  color: var(--gold);
}
.al-wrap .gt-ods-info strong {
  display: block;
  color: var(--cream);
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  line-height: 1.3;
}
.al-wrap .gt-ods-info p {
  font-size: 0.8rem;
  color: rgba(248,239,213,0.6);
  line-height: 1.55;
  margin-bottom: 0.75rem;
}
.al-wrap .gt-esg-pill {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(201,168,76,0.15);
  border: 1px solid rgba(201,168,76,0.3);
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
}


/* ═══════════════════════════════════════════════════════════════════════
   MAIN
═══════════════════════════════════════════════════════════════════════ */
.al-wrap .gt-main {
  padding: 3rem 0 5rem;
}


/* ── Step (cada bloque) ───────────────────────────────────────────────── */
.al-wrap .gt-step {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2rem 2rem 2.5rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(18,38,51,0.08);
}
.al-wrap .gt-step-hidden { display: none; }
.al-wrap .gt-step-header {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--cream-alt);
}
.al-wrap .gt-step-num {
  font-family: Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
  color: #7a5f1a;
  line-height: 1;
  min-width: 2.5rem;
  padding-top: 0.1rem;
}
.al-wrap .gt-step-header h2 {
  font-family: Georgia, serif;
  font-size: 1.35rem;
  color: var(--navy);
  margin-bottom: 0.3rem;
}
.al-wrap .gt-step-header p {
  font-size: 0.9rem;
  color: var(--text-muted);
}


/* ── Formulario ───────────────────────────────────────────────────────── */
.al-wrap .gt-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-bottom: 0.5rem;
}
.al-wrap .gt-field { display: flex; flex-direction: column; gap: 0.4rem; }
.al-wrap .gt-field label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-mid);
  line-height: 1.3;
}
.al-wrap .gt-field input, .al-wrap .gt-field select {
  padding: 0.65rem 0.85rem;
  border: 1.5px solid var(--cream-alt);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  color: var(--text-dark);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none;
}
.al-wrap .gt-field input:focus, .al-wrap .gt-field select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(21,92,142,0.12);
}
.al-wrap .gt-field input::placeholder { color: #b0bec5; }


/* ── Grupos de indicadores ────────────────────────────────────────────── */
.al-wrap .gt-indicator-group {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--cream-alt);
}
.al-wrap .gt-indicator-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1.25rem;
}
.al-wrap .gt-indicator-tag {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
  font-family: -apple-system, sans-serif;
}
.al-wrap .ods-tag-8 { background: var(--ods-8);  color: #fff; }
.al-wrap .ods-tag-10 { background: var(--ods-10); color: #fff; }
.al-wrap .ods-tag-16 { background: var(--ods-16); color: #fff; }
.al-wrap .esg-tag-s { background: rgba(21,92,142,0.12); color: var(--blue); border: 1px solid rgba(21,92,142,0.3); }
.al-wrap .esg-tag-g { background: rgba(90,62,138,0.10); color: var(--esg-g); border: 1px solid rgba(90,62,138,0.3); }
.al-wrap .esg-tag-e { background: rgba(45,106,45,0.10); color: var(--esg-e); border: 1px solid rgba(45,106,45,0.3); }


/* ── Botones ──────────────────────────────────────────────────────────── */
.al-wrap .gt-btn-primary, .al-wrap .gt-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.85rem 1.75rem;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
}
.al-wrap .gt-btn-primary {
  background: var(--navy);
  color: var(--gold);
  border: 2px solid var(--navy);
  margin-top: 2rem;
}
.al-wrap .gt-btn-primary:hover {
  background: var(--navy-deep);
  box-shadow: 0 4px 16px rgba(18,38,51,0.3);
  transform: translateY(-1px);
}
.al-wrap .gt-btn-secondary {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
  margin-top: 2rem;
}
.al-wrap .gt-btn-secondary:hover {
  background: var(--cream);
}


/* ═══════════════════════════════════════════════════════════════════════
   RESULTADOS
═══════════════════════════════════════════════════════════════════════ */
.al-wrap .gt-resultado-hero {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 2rem 2.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.al-wrap .gt-score-ring-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}
.al-wrap .gt-score-ring { width: 100%; height: 100%; }
.al-wrap .gt-score-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 1;
}
.al-wrap #score-valor {
  font-family: Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold);
  display: block;
}
.al-wrap .gt-score-label {
  font-size: 0.7rem;
  color: rgba(248,239,213,0.5);
}
.al-wrap .gt-resultado-meta { flex: 1; min-width: 200px; }
.al-wrap .gt-resultado-nivel {
  font-family: Georgia, serif;
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.al-wrap #resultado-desc {
  font-size: 0.9rem;
  color: rgba(248,239,213,0.75);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.al-wrap .gt-ods-resultado {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}


/* Semáforo */
.al-wrap .gt-semaforo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.al-wrap .gt-semaforo-card {
  background: var(--cream);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  border-left: 4px solid;
}
.al-wrap .gt-semaforo-card.nivel-ok { border-color: #2d6a2d; background: #f0f7f0; }
.al-wrap .gt-semaforo-card.nivel-medio { border-color: #b5820a; background: #fef9ec; }
.al-wrap .gt-semaforo-card.nivel-alto { border-color: #b01e1e; background: #fdf0f0; }
.al-wrap .gt-semaforo-titulo {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-mid);
  margin-bottom: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.al-wrap .gt-semaforo-valor {
  font-family: Georgia, serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.25rem;
}
.al-wrap .gt-semaforo-card.nivel-ok    .gt-semaforo-valor { color: #2d6a2d; }
.al-wrap .gt-semaforo-card.nivel-medio .gt-semaforo-valor { color: #b5820a; }
.al-wrap .gt-semaforo-card.nivel-alto  .gt-semaforo-valor { color: var(--burgundy); }
.al-wrap .gt-semaforo-desc { font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; }


/* Patrones */
.al-wrap .gt-patrones-wrap { margin-bottom: 2rem; }
.al-wrap .gt-patrones-wrap h3 {
  font-family: Georgia, serif;
  font-size: 1.1rem;
  color: var(--navy);
  margin-bottom: 1rem;
}
.al-wrap .gt-patron-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  margin-bottom: 0.75rem;
  border-left: 4px solid;
}
.al-wrap .gt-patron-item.patron-critico { background: #fdf0f0; border-color: var(--burgundy); }
.al-wrap .gt-patron-item.patron-medio { background: #fef9ec; border-color: #b5820a; }
.al-wrap .gt-patron-item.patron-positivo { background: #f0f7f0; border-color: #2d6a2d; }
.al-wrap .gt-patron-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: 0.1rem; }
.al-wrap .gt-patron-titulo {
  font-weight: 700;
  color: var(--text-dark);
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}
.al-wrap .gt-patron-desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; }
.al-wrap .gt-patron-tags { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.5rem; }


/* Benchmark */
.al-wrap .gt-benchmark-wrap { margin-bottom: 2rem; }
.al-wrap .gt-benchmark-wrap h3 {
  font-family: Georgia, serif;
  font-size: 1.1rem;
  color: var(--navy);
  margin-bottom: 1rem;
}
.al-wrap #benchmark-chart-wrap {
  position: relative;
  width: 100%;
  height: 320px;
}


/* Normativa */
.al-wrap .gt-normativa-wrap { margin-bottom: 2rem; }
.al-wrap .gt-normativa-wrap h3 {
  font-family: Georgia, serif;
  font-size: 1.1rem;
  color: var(--navy);
  margin-bottom: 1rem;
}
.al-wrap .gt-normativa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
.al-wrap .gt-normativa-card {
  border: 1px solid var(--cream-alt);
  border-radius: var(--radius-md);
  padding: 1.1rem;
}
.al-wrap .gt-normativa-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.al-wrap .gt-normativa-tipo {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 100px;
}
.al-wrap .tipo-ods { background: var(--navy); color: var(--gold); }
.al-wrap .tipo-gri { background: #1a5c2e; color: #d4f5e2; }
.al-wrap .tipo-ue { background: #00358e; color: #d0e0ff; }
.al-wrap .tipo-esp { background: var(--burgundy); color: #fddede; }
.al-wrap .gt-normativa-nombre {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--navy);
  margin-bottom: 0.25rem;
}
.al-wrap .gt-normativa-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
}


/* Acciones */
.al-wrap .gt-acciones {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}


/* Nota metodológica */
.al-wrap .gt-nota-metodologica {
  background: var(--cream);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.7;
  border: 1px solid var(--cream-alt);
}
.al-wrap .gt-nota-metodologica strong {
  color: var(--text-mid);
}


/* ═══════════════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════════════ */
.al-wrap .gt-footer {
  background: var(--navy-deep);
  border-top: 3px solid var(--gold);
  padding: 3rem 0 0;
}
.al-wrap .gt-footer-inner {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 2rem;
  align-items: start;
  padding-bottom: 2rem;
}
.al-wrap .gt-footer-brand .gt-brand-logo { font-size: 1.2rem; display: block; margin-bottom: 0.75rem; }
.al-wrap .gt-footer-brand p {
  font-size: 0.82rem;
  color: rgba(248,239,213,0.6);
  line-height: 1.7;
}
.al-wrap .gt-footer-brand a {
  color: var(--gold);
  text-decoration: none;
}
.al-wrap .gt-footer-brand a:hover { text-decoration: underline; }
.al-wrap .gt-footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.al-wrap .gt-footer-links a {
  font-size: 0.82rem;
  color: rgba(248,239,213,0.65);
  text-decoration: none;
  transition: color var(--transition);
}
.al-wrap .gt-footer-links a:hover { color: var(--gold); }
.al-wrap .gt-footer-badges {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-end;
}
.al-wrap .gt-footer-copy {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 1rem 2rem;
  text-align: center;
}
.al-wrap .gt-footer-copy p {
  font-size: 0.75rem;
  color: rgba(248,239,213,0.35);
}


/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {.al-wrap .gt-container { padding: 0 1rem; }
.al-wrap .gt-hero { padding: 2.5rem 0 2rem; }
.al-wrap .gt-hero h1 { font-size: 1.6rem; }
.al-wrap .gt-header-nav { display: none; }
.al-wrap .gt-step { padding: 1.5rem 1rem 2rem; }
.al-wrap .gt-form-grid { grid-template-columns: 1fr; }
.al-wrap .gt-resultado-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
  }
.al-wrap .gt-footer-inner {
    grid-template-columns: 1fr;
  }
.al-wrap .gt-footer-badges {
    flex-direction: row;
    align-items: center;
  }

}