/* Paleta y componentes de Perzibo App/Box, sin fuentes ni dependencias externas. */
:root { --navy:#1f1c51; --blue:#4089ff; --teal:#14b8a6; --bg:#f6f8fc; --line:#e5eaf2; --muted:#626c80; --text:#252744; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif; min-height:100vh; display:flex; flex-direction:column; }
a { color:var(--navy); text-decoration:none; }
button,input,select { font:inherit; }
button,summary { cursor:pointer; }
h1,h2,p,span,strong,a,li { overflow-wrap:anywhere; }
h1 { color:var(--navy); font-size:clamp(32px,5vw,48px); line-height:1.15; letter-spacing:-.035em; margin:8px 0 18px; }
h2 { color:var(--navy); font-size:22px; line-height:1.35; letter-spacing:-.025em; margin:0 0 16px; }
h3 { font-size:17px; margin:24px 0 10px; }
p { margin:0 0 16px; }
.muted,.micro,small { color:var(--muted); }
.micro,small,.nota { font-size:13px; }
.nota { color:var(--muted); }
.eyebrow { color:#2865c5; font-size:11px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:20px 32px; background:white; border-bottom:1px solid var(--line); }
.marca { display:flex; align-items:center; gap:8px; flex:none; }
.marca img { object-fit:contain; }
.marca span { color:var(--muted); font-size:12px; }
.topbar nav { display:flex; align-items:center; gap:8px; }
.topbar nav a { padding:10px 16px; border-radius:12px; font-size:14px; font-weight:600; }
.topbar nav [aria-current],.topbar nav a:hover { background:#edf4ff; }
main { width:min(1080px,100%); margin:auto; padding:48px 24px 56px; flex:1; }
.cabecera { max-width:740px; margin-bottom:28px; }
.cabecera>.muted { font-size:17px; }
.etiqueta { display:inline-flex; gap:8px; align-items:center; font-size:12px; font-weight:600; padding:5px 12px; border-radius:20px; background:#edf4ff; color:#2865c5; }
.recorrido { display:flex; gap:20px; flex-wrap:wrap; margin:28px 0; color:var(--muted); font-size:13px; }
.card,section { background:white; border:1px solid var(--line); border-radius:22px; min-width:0; box-shadow:0 14px 40px #1f1c510c; }
.seccion,main>section { padding:28px; margin:24px 0; }
.entornos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.entorno { display:grid; justify-items:start; gap:8px; border:1px solid var(--line); border-radius:16px; padding:20px; background:white; color:var(--text); text-align:left; min-width:0; }
.entorno svg { fill:none; stroke:var(--muted); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.entorno[aria-pressed=true] { border-color:var(--blue); background:#f2f7ff; box-shadow:inset 0 0 0 1px var(--blue); }
.entorno[aria-pressed=true] svg { stroke:var(--blue); }
.canales { display:flex; flex-wrap:wrap; gap:12px; border:0; padding:0; margin:24px 0 12px; }
.canales legend { font-size:13px; color:var(--muted); padding:0; margin:0 0 10px; }
.opcion-canal { display:flex; align-items:center; gap:10px; padding:12px 16px; border:1px solid var(--line); border-radius:12px; cursor:pointer; }
.opcion-canal>span { display:grid; gap:3px; }
.opcion-canal strong { font-size:14px; }
.opcion-canal:has(input:checked) { border-color:var(--blue); background:#f2f7ff; }
.opcion-canal:has(input:disabled) { opacity:.65; cursor:default; }
input[type=radio] { accent-color:var(--navy); width:18px; height:18px; margin:0; flex:none; }
.btn,button[data-copiar] { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px; min-height:44px; border:1px solid transparent; border-radius:12px; line-height:1.4; font-size:14px; font-weight:650; text-align:center; }
.primario,button[data-copiar]:not(.secundario) { background:var(--navy); color:white; }
.secundario { background:white; border-color:var(--line)!important; color:var(--navy); }
button:disabled { opacity:.55; cursor:not-allowed; }
.btn:hover,button[data-copiar]:hover { filter:brightness(.96); }
.enlace { display:inline-flex; align-items:center; min-height:44px; font-size:14px; font-weight:650; }
.acciones { display:flex; gap:12px; align-items:stretch; flex-wrap:wrap; }
.titulo-paso { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.titulo-paso h2 { margin-bottom:12px; }
.titulo-paso>span { text-align:right; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; background:#f1f5fa; border:1px solid var(--line); border-radius:12px; padding:18px; margin:16px 0; font:13px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace; }
code { font:13px/1.7 ui-monospace,Consolas,monospace; overflow-wrap:anywhere; }
label { display:block; margin:0 0 8px; }
select { width:100%; min-width:0; min-height:48px; padding:12px 14px; border:1px solid #cbd5e5; border-radius:12px; background:white; color:var(--text); }
.campos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:20px 0; }
.separacion { margin-top:18px; }
.aviso { padding:16px 18px; background:#edf4ff; border-radius:12px; margin:18px 0; }
.aviso p:last-child { margin-bottom:0; }
.error { background:#fff0f3; color:#a52345; }
details { margin-top:20px; border-top:1px solid var(--line); padding-top:18px; min-width:0; }
summary { font-weight:650; color:var(--navy); min-height:44px; padding:8px 0; }
details[open]>summary { margin-bottom:14px; }
.resumen-inferior { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.resumen-inferior .seccion { margin:0; }
.cambios { margin:0 0 16px; padding-left:20px; }
.cambios li { padding-left:3px; margin-bottom:8px; }
.historial { padding:8px 28px; margin-bottom:24px; }
.nota-version { margin:0; padding:18px 0; }
.nota-version:first-child { border:0; }
.nota-version summary>span { display:block; }
.nota-version summary>span:first-child { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
.nota-version summary>span>strong { font-size:18px; }
.nota-version summary small { font-weight:400; }
.nota-version summary>span:last-child { margin:0 0 0 20px; }
footer { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; border-top:1px solid var(--line); padding:24px 32px; color:var(--muted); font-size:12px; }
footer div { display:flex; gap:20px; }
.notificacion { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:20; background:var(--navy); color:white; border-radius:12px; padding:12px 18px; width:max-content; max-width:calc(100% - 32px); margin:0; box-shadow:0 10px 30px #1f1c5126; }
.notificacion:empty { display:none; }
:focus-visible { outline:3px solid var(--blue); outline-offset:4px; }
[hidden] { display:none!important; }
.saltar:not(:focus) { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); }
.saltar:focus { position:fixed; z-index:30; background:white; padding:14px; }
@media(max-width:760px) { .topbar { padding:16px 20px; gap:16px; } .topbar nav a { padding:10px 12px; } .entornos { gap:10px; } .entorno { padding:16px; } .resumen-inferior { grid-template-columns:1fr; } }
@media(max-width:560px) {
  .topbar { flex-wrap:wrap; padding:16px; }
  .topbar nav { width:100%; gap:4px; }
  .topbar nav a { flex:1; padding:10px 8px; font-size:13px; text-align:center; }
  main { padding:28px 16px 40px; }
  .cabecera>.muted { font-size:15px; }
  .recorrido { gap:8px; flex-direction:column; margin:22px 0; }
  .seccion,main>section { padding:24px 20px; }
  .entornos { grid-template-columns:1fr; }
  .entorno { grid-template-columns:24px minmax(0,1fr); align-items:center; gap:5px 12px; }
  .entorno svg { grid-row:1/3; }
  .entorno small { grid-column:2; }
  .canales { flex-direction:column; }
  .opcion-canal { width:100%; }
  .campos { grid-template-columns:1fr; }
  .titulo-paso { align-items:flex-start; flex-direction:column; gap:0; }
  .titulo-paso>span { text-align:left; margin-bottom:12px; }
  .acciones { flex-direction:column; }
  .btn,button[data-copiar] { width:100%; }
  pre { padding:14px; font-size:12px; }
  .historial { padding:8px 20px; }
  footer { padding:24px 16px; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }