/* ===== canal-denuncias ===== */
/* ==========================================================================
   Página CANAL DE DENUNCIAS — canal confidencial de compliance (ISO 37301)
   Prefijo de clases: cden-  ·  Usa tokens de css/tokens.css.
   Grises neutros de UI (page bg, labels, bordes) y verdes/rojos de estado del
   formulario no cubiertos por los tokens de marca → variables locales --cden-*.
   ========================================================================== */
.cden{
  /* Paleta local (neutros UI + estados del form, iguales al componente React) */
  --cden-page-bg:var(--sx-gris-fondo);
  --cden-ink:var(--sx-text);
  --cden-gray:var(--sx-text-muted);
  --cden-label:#374151;
  --cden-border:var(--sx-input-border);
  --cden-hair:#F3F4F6;
  --cden-req:var(--sx-rojo);
  --cden-ok-1:#10B981;
  --cden-ok-2:#059669;
  --cden-err-bg:#FEF2F2;
  --cden-err-border:#FECACA;
  --cden-err-ink:#B91C1C;
  --cden-info-bg:var(--sx-fondo-card-azul);
  --cden-info-border:var(--sx-azul-fondo);
  --cden-info-ink:#1E3A8A;

  display:block;
  background:var(--cden-page-bg);
  min-height:100vh;
}

/* ---- Encabezado ---- */
/* Contenedor estándar del sitio (1200 + padding clamp) alineado a la izquierda. */
.cden-head{
  max-width:1200px;margin-inline:auto;
  padding-block:clamp(96px,12vh,128px) 24px;
  padding-inline:clamp(20px,4vw,24px);
}
.cden-eyebrow{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.cden-eyebrow-tag{
  font-family:var(--sx-font-body);
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sx-blue-texto);
}
.cden-eyebrow-dot{
  width:4px;height:4px;border-radius:var(--sx-r-pill);background:var(--sx-gris-0);
}
.cden-eyebrow-meta{
  font-family:var(--sx-font-body);
  font-size:11px;font-weight:500;color:var(--cden-gray);
}
.cden-title{
  font-family:var(--sx-font-title);
  font-weight:800;font-size:clamp(2.1rem,4.2vw,3.4rem);line-height:1.05;letter-spacing:-.01em;
  color:var(--cden-ink);margin:0 0 14px;
}
.cden-lede{
  font-family:var(--sx-font-body);
  font-size:clamp(15px,1.6vw,18px);font-weight:400;line-height:1.55;
  color:#4B5563;margin:0;max-width:62ch;
}

/* ---- Cuerpo (banners + tarjeta del form) ---- */
.cden-body{
  max-width:1200px;margin-inline:auto;
  padding-block:16px 64px;
  padding-inline:clamp(20px,4vw,24px);
}
/* La columna del formulario se limita en ancho pero queda alineada a la izquierda
   (no centrada) para que su borde coincida con el título. */
.cden-card,.cden-banner{max-width:760px}

/* Banners de estado */
.cden-banner[hidden]{display:none}
.cden-banner{animation:cden-drop .32s var(--sx-ease-smooth)}
@keyframes cden-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.cden-banner--ok{
  background:linear-gradient(135deg,var(--cden-ok-1),var(--cden-ok-2));
  color:var(--sx-white);
  border-radius:20px;
  padding:28px 32px;margin-bottom:20px;
  box-shadow:0 8px 24px rgba(16,185,129,.28);
}
.cden-banner-title{
  font-family:var(--sx-font-title);
  font-weight:700;font-size:24px;letter-spacing:-.02em;color:var(--sx-white);
  margin:0 0 6px;
}
.cden-banner-code{
  font-family:var(--sx-font-body);
  font-size:15px;margin:0 0 10px;opacity:.95;line-height:1.55;
}
.cden-banner-code strong{font-weight:700}
.cden-banner-code strong span{font-size:18px;letter-spacing:.02em}
.cden-banner-note{
  font-family:var(--sx-font-body);
  font-size:13px;margin:0;opacity:.88;line-height:1.5;
}

.cden-banner--err{
  background:var(--cden-err-bg);
  border:1px solid var(--cden-err-border);
  border-radius:14px;
  padding:14px 18px;margin-bottom:18px;
}
.cden-banner-errmsg{
  font-family:var(--sx-font-body);
  font-size:14px;font-weight:500;color:var(--cden-err-ink);margin:0;line-height:1.5;
}

/* ---- Tarjeta del formulario ---- */
.cden-card{
  background:var(--sx-white);
  border:1px solid var(--cden-border);
  border-radius:24px;
  padding:36px;
  box-shadow:0 4px 20px rgba(0,0,0,.04);
  transition:opacity .3s var(--sx-ease);
}
.cden-card.is-done{opacity:.5;pointer-events:none}

.cden-form{display:flex;flex-direction:column;gap:22px}

/* Divisor sobre cada grupo salvo el primero. El selector adyacente es
   estructural: si "contacto" queda [hidden] (anónimo), el grupo de descripción
   sigue siendo el hermano siguiente y conserva su borde superior. */
.cden-form > .cden-group + .cden-group{border-top:1px solid var(--cden-hair);padding-top:22px}
.cden-group--contact[hidden]{display:none}

.cden-group-title{
  font-family:var(--sx-font-title);
  font-weight:700;font-size:18px;color:var(--cden-ink);margin:0 0 18px;
}
.cden-group-title--tight{margin-bottom:4px}
.cden-group-hint{
  font-family:var(--sx-font-body);
  font-size:13px;font-weight:400;color:var(--cden-gray);margin:0 0 18px;
}

.cden-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.cden-field{display:flex;flex-direction:column}
.cden-label{
  font-family:var(--sx-font-body);
  font-size:13px;font-weight:600;color:var(--cden-label);margin-bottom:6px;
}
.cden-req{color:var(--cden-req)}

/* Inputs / select / textarea */
.cden-input{
  width:100%;height:48px;padding:0 14px;
  font-family:var(--sx-font-body);font-size:16px;font-weight:400;
  color:var(--cden-ink);background:var(--sx-white);
  border:1.5px solid var(--cden-border);border-radius:12px;
  outline:none;box-sizing:border-box;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.cden-input:focus{border-color:var(--sx-blue);box-shadow:0 0 0 3px rgba(var(--sx-blue-rgb),.12)}
.cden-input::placeholder{color:var(--sx-text-muted)}

.cden-select-wrap{position:relative}
.cden-select{appearance:none;-webkit-appearance:none;padding-right:36px;cursor:pointer}
.cden-select-caret{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  color:var(--cden-label);pointer-events:none;
}

.cden-textarea{
  height:auto;min-height:160px;padding:14px;line-height:1.55;resize:vertical;
}

/* Nota de confidencialidad */
.cden-note{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--cden-info-bg);
  border:1px solid var(--cden-info-border);
  border-radius:12px;
  padding:14px 16px;
}
.cden-note svg{flex-shrink:0;margin-top:2px}
.cden-note-text{
  font-family:var(--sx-font-body);
  font-size:13px;font-weight:400;color:var(--cden-info-ink);margin:0;line-height:1.55;
}
.cden-note-text a{color:var(--sx-blue-texto);font-weight:600;text-decoration:none}
.cden-note-text a:hover{text-decoration:underline}

/* Botón de envío (reusa .sx-btn--primary, a ancho completo) */
.cden-submit{width:100%;height:54px;font-family:var(--sx-font-title);letter-spacing:.04em}
.cden-submit:disabled{
  background-color:var(--sx-gris-plus);background-image:none;
  box-shadow:none;cursor:wait;transform:none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:900px){
  .cden-body{padding-block:12px 48px}
}
@media (max-width:560px){
  .cden-card{padding:20px;border-radius:20px}
  .cden-banner--ok{padding:22px;border-radius:18px}
  .cden-banner-title{font-size:20px}
  .cden-grid{grid-template-columns:1fr}
}