/* ====== Design tokens (RexCargo) ====== */
:root{
  /* Base */
  --bg:#f6f8fc;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#5a6b85;
  --outline:#e6ebf3;

  /* Brand */
  --brand-navy:#0b2a6f;      /* azul profundo del isotipo */
  --brand-navy-2:#1e3a8a;    /* azul más claro para degradé */
  --brand-cyan:#0ea5a4;      /* acento cian sutil */
  --ring: rgba(14,165,164,.28);

  /* Shadows */
  --shadow-sm:0 8px 20px -10px rgba(0,0,0,.12);
  --shadow-lg:0 24px 48px -28px rgba(0,0,0,.25);
  --shadow-card:0 28px 60px -32px rgba(0,0,0,.28);

  /* States */
  --danger:#d93939;
}

/* ====== Resets / base ====== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:400 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1000px 500px at 90% -20%, #c7efee55, transparent 60%),
    radial-gradient(800px 400px at -10% -10%, #f2faff, transparent 55%),
    var(--bg);
}

/* ====== Common layout (index.html y uso general) ====== */
.container{max-width:1100px;margin:0 auto;padding:24px}
header{display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:48px;height:48px;transition:transform .2s ease, filter .2s ease}
.brand span{font-weight:800;letter-spacing:.3px}
.brand:hover img{transform:scale(1.03);filter:saturate(1.05)}

/* (opcional) Título/subtítulo apilados junto al logo */
.brand-title{display:flex;flex-direction:column}
.brand-sub{color:var(--muted);font-size:.9rem}

/* Pill de país (formulario) */
.country-pill{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,#eef2ff,#e0e7ff);
  color:#122042;border:1px solid #dbe3ff;
  padding:8px 12px;border-radius:999px;
  box-shadow:var(--shadow-sm);font-weight:700;font-size:.9rem;
}
.country-dot{width:8px;height:8px;border-radius:50%;background:var(--brand-navy-2)}

/* Hero / headings (index.html) */
.hero{min-height:calc(100vh - 180px);display:flex;align-items:center;justify-content:center;text-align:center;padding:24px 0}
.title{font-size:clamp(34px,5.2vw,52px);line-height:1.1;margin:0 0 10px}
.lead{font-size:clamp(16px,1.9vw,19px);color:var(--muted);max-width:60ch;margin:0 auto 12px}

/* —— Mejora de legibilidad del hero —— */
.hero .card-elev{max-width:860px}
.hero .card-elev p{
  text-align:left;
  max-width:72ch;
  margin:0 auto 14px;
  line-height:1.65;
}
.hero .card-elev p:first-child{margin-top:0}
.hero .card-elev p:last-child{margin-bottom:0}

/* Botón proporcional al ancho de la tarjeta */
.hero .btn{
  width:clamp(260px,56%,520px);
}

/* Cards (index.html / bloques destacados) */
.cta-card{
  background:var(--card);border:1px solid var(--outline);border-radius:20px;
  padding:26px;display:inline-flex;flex-direction:column;gap:14px;margin:14px auto 0;
  box-shadow:var(--shadow-lg);
}
.card-elev{
  position:relative;max-width:640px;width:100%;margin:0 auto;
  padding:34px 28px 28px;border-radius:24px;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(180deg,#eef2ff,#e0e7ff) border-box;
  border:1px solid transparent;box-shadow:var(--shadow-card);
}

/* Buttons (unificados .btn y .btn-primary) */
.btn-primary,
.btn{
  appearance:none;border:0;border-radius:14px;cursor:pointer;
  padding:16px 34px;font-weight:800;font-size:18px;letter-spacing:.2px;
  color:#ffffff;background:linear-gradient(180deg,var(--brand-navy-2),var(--brand-navy));
  box-shadow:0 16px 30px -16px var(--ring), inset 0 -2px 0 0 rgba(0,0,0,.12);
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary:hover,
.btn:hover{transform:translateY(-2px);box-shadow:0 22px 32px -14px var(--ring), inset 0 -2px 0 0 rgba(0,0,0,.12);filter:saturate(1.03)}
.btn-primary svg,
.btn svg{transition:transform .2s ease}
.btn-primary:hover svg,
.btn:hover svg{transform:translateX(3px)}
.btn-primary:focus,
.btn:focus{outline:3px solid var(--ring);outline-offset:2px}

/* Footer (index.html) */
footer{background:#f1f5f9;border-top:1px solid #e5e7eb;padding:20px;color:var(--muted);font-size:.9rem;text-align:center;margin-top:20px}

/* Divider (index.html) */
.divider{height:1px;background:var(--outline);margin:28px 0}

/* Privacy (index.html) */
section[aria-labelledby="t-priv"]{text-align:center}
section[aria-labelledby="t-priv"] p{margin-left:auto;margin-right:auto}

/* ====== Confirmation page specifics (confirmacion.html) ====== */
.success-icon{
  width:80px;height:80px;margin:0 auto 14px;display:block;color:#10b981;
  filter:drop-shadow(0 6px 14px rgba(16,185,129,.25));
}

/* ====== Unified form styles (proveedores-unificado.html) ====== */
.wrap{max-width:1000px;margin:32px auto;padding:0 16px}
.card{background:var(--card);border:1px solid var(--outline);border-radius:16px;box-shadow:0 6px 24px rgba(0,0,0,.06);overflow:hidden}
.header{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid var(--outline)}
.brand-logo{width:56px;height:56px;object-fit:contain}
.subtitle{margin:2px 0 0;color:var(--muted);font-size:.95rem}
.body{padding:20px}

/* Grid base */
.grid{display:grid;gap:16px}
@media(min-width:860px){.grid-2{grid-template-columns:1fr 1fr}}

/* Ajuste fino para 2 columnas en el formulario */
.grid.grid-2{gap:22px 28px;align-items:start}

/* Campos */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:600;line-height:1.35}
.field label.long{font-size:.98rem}
.hint{color:var(--muted);font-size:.85rem}

/* Inputs */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="file"], select, textarea{
  width:100%;padding:12px;border-radius:10px;border:1px solid #dbe1ea;background:#fff;color:var(--text);
  outline:none;transition:border .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus{border-color:var(--brand-navy-2);box-shadow:0 0 0 4px var(--ring)}

/* Secciones */
.section{
  margin:6px 0 2px;padding-top:8px;border-top:1px dashed #e3e8f2;
  color:var(--muted);text-transform:uppercase;font-size:.8rem;letter-spacing:.04em;font-weight:700
}

/* Acciones */
.actions{display:flex;gap:12px;align-items:center;margin-top:10px;flex-wrap:wrap}
.note{color:var(--muted);font-size:.85rem}

/* Utilidades */
.req{color:var(--danger)}
.hidden{display:none !important}
.modebar{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 14px}
.modebar .field{min-width:220px}

/* ★ Asterisco automático en campos requeridos */
.field:has(> input[required]) > label::after,
.field:has(> select[required]) > label::after,
.field:has(> textarea[required]) > label::after{
  content:" *";
  color: var(--danger);
  margin-left:.15rem;
}
.field label .req{ display:none; }

/* Callouts (mensajes condicionales de certificación) */
.callout{
  margin-top:6px;padding:10px 12px;border:1px solid #e5e9f5;border-left:4px solid var(--brand-navy-2);
  border-radius:10px;background:linear-gradient(180deg,#f8fbff,#f4f7ff);
  color:#122042;font-size:.92rem;
}
.callout a{font-weight:700;text-decoration:underline}

/* Enlaces de “pendiente” (deshabilitados hasta tener URL) */
.accept-line a[data-pending="true"]{
  pointer-events:none;
  color:#6b7280;
  text-decoration:none;
}
.accept-line a[data-pending="true"]::after{
  content:" (próximamente)";
  font-weight:400;
}

/* ===== Estilo mejorado para el select de Empresa/País (selección única) ===== */
.select-lg{height:48px;line-height:1}
.select-country{
  appearance:none;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(180deg,#eef2ff,#e0e7ff) border-box;
  border:1px solid transparent;
  border-radius:12px;
  box-shadow:var(--shadow-sm);
  padding:12px 44px 12px 12px; /* espacio para el caret */
  font-weight:600;
  color:#0f1d3a;
  position:relative;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='%231e3a8a'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:18px;
}
.select-country:hover{filter:saturate(1.02)}
.select-country:focus{box-shadow:0 0 0 4px var(--ring)}
select::-ms-expand{display:none} /* oculta caret legacy en IE */

/* Responsive helpers */
@media (max-width:520px){
  .cta-card{width:100%;max-width:520px}
  .btn-primary, .btn{width:100%}
  .card-elev{padding:28px 20px}
}
@media (prefers-reduced-motion:reduce){
  .brand img,.btn-primary,.btn-primary svg,.btn,.btn svg{transition:none}
}

/* Legibilidad de etiquetas largas (ISO 9241-112, WCAG 1.4.8) */
.field label,
.field label.long{
  text-align: left;
  line-height: 1.5;
  text-wrap: pretty;
  hyphens: auto;
}
.grid.grid-2 .field label.long{ max-width: 74ch; }
.section{ text-align: left; }