/* ═══════════════════════════════════════════════════════════════
   SOPORTE REMOTO · NexoSoft — sistema visual compartido
   ═══════════════════════════════════════════════════════════════ */

:root{
  --oceano:#0B3C49;
  --marea:#0E7C86;
  --marea-osc:#0A5E66;
  --espuma:#F0F6F6;
  --tinta:#16262C;
  --bruma:#5B7078;
  --arena:#F5C563;
  --blanco:#FFFFFF;
  --borde:rgba(11,60,73,.1);
  --wa:#1FAF54;
  --wa-osc:#178A42;
  --alerta:#A32020;
  --alerta-suave:#FDECEC;
  --bien:#14663C;
  --bien-suave:#DFF3E7;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  font-family:'Instrument Sans',system-ui,-apple-system,sans-serif;
  background:var(--espuma);
  color:var(--tinta);
  line-height:1.55;
}

.contenedor{max-width:860px;margin:0 auto;padding:0 24px}
.contenedor-ancho{max-width:1120px;margin:0 auto;padding:0 24px}

/* ── Marca ────────────────────────────────────────────────── */
.marca{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800;font-size:23px;color:var(--oceano);
  letter-spacing:-.02em;text-decoration:none;display:inline-block;
}
.marca span{color:var(--marea)}
.marca-clara{color:var(--blanco)}
.marca-clara span{color:#6FD3DB}

/* ── Titulares ────────────────────────────────────────────── */
h1,h2,h3{font-family:'Bricolage Grotesque',sans-serif;color:var(--oceano);letter-spacing:-.02em}
h1{font-weight:800}
h2,h3{font-weight:700}

.antetitulo{
  display:inline-block;
  font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--marea);border:1.5px solid var(--marea);
  border-radius:999px;padding:5px 14px;
}

/* ── Botones ──────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:inherit;font-weight:600;font-size:16px;
  padding:13px 22px;border:none;border-radius:12px;
  cursor:pointer;text-decoration:none;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.btn:focus-visible{outline:3px solid var(--oceano);outline-offset:3px}

.btn-principal{background:var(--marea);color:var(--blanco);box-shadow:0 4px 0 var(--marea-osc)}
.btn-principal:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--marea-osc)}

.btn-secundario{background:var(--espuma);color:var(--oceano)}
.btn-secundario:hover{background:#E2EEEF}

.btn-wa{background:var(--wa);color:var(--blanco);box-shadow:0 4px 0 var(--wa-osc)}
.btn-wa:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--wa-osc)}

.btn-grande{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  font-size:22px;padding:20px 34px;border-radius:16px;
  box-shadow:0 6px 0 var(--marea-osc);
}
.btn-grande:hover{box-shadow:0 4px 0 var(--marea-osc)}

.btn-peligro{background:none;color:var(--alerta);font-weight:600;padding:13px 16px}
.btn-peligro:hover{background:var(--alerta-suave)}

/* ── Campos ───────────────────────────────────────────────── */
input,textarea,select{
  font-family:inherit;font-size:16px;
  padding:13px 15px;
  border:2px solid var(--borde);border-radius:12px;
  background:var(--blanco);color:var(--tinta);width:100%;
}
input:focus,textarea:focus{outline:3px solid var(--marea);outline-offset:1px;border-color:var(--marea)}
textarea{min-height:76px;resize:vertical}
label{display:block;font-size:14px;font-weight:600;color:var(--oceano);margin:14px 0 6px}
.ayuda{font-size:13px;color:var(--bruma);margin-top:5px}

.campo-id{
  font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;
  font-size:24px;letter-spacing:.08em;text-align:center;
  color:var(--oceano);background:var(--espuma);
  border:2px solid rgba(11,60,73,.15);padding:14px 16px;
}
.campo-id::placeholder{color:#9FB3B9;letter-spacing:.06em}

/* ── Tarjetas y avisos ────────────────────────────────────── */
.tarjeta{
  background:var(--blanco);
  border:1px solid var(--borde);
  border-radius:20px;padding:26px;
}
.aviso{padding:12px 16px;border-radius:12px;margin-bottom:18px;font-size:15px}
.aviso-bien{background:var(--bien-suave);color:var(--bien)}
.aviso-mal{background:var(--alerta-suave);color:var(--alerta)}

.identificador{
  font-family:ui-monospace,Consolas,monospace;
  font-size:21px;color:var(--oceano);background:var(--espuma);
  padding:9px 14px;border-radius:10px;letter-spacing:.06em;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.copiar{
  background:none;border:none;cursor:pointer;color:var(--bruma);
  font-size:13px;font-family:inherit;font-weight:600;padding:4px 8px;border-radius:7px;
}
.copiar:hover{background:var(--blanco);color:var(--marea)}

/* ── Ventana modal ────────────────────────────────────────── */
dialog{
  border:none;border-radius:20px;padding:0;
  max-width:520px;width:calc(100% - 32px);
  box-shadow:0 20px 60px rgba(11,60,73,.25);
}
dialog::backdrop{background:rgba(11,60,73,.5)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
}