/* Crisportfolio · centro de mando. Inicio y Biblioteca: estudio claro. Vitrina: se viste con la marca de cada proyecto. */
:root{
  --papel:#F4F1EA;--papel-2:#EBE6DB;--tarjeta:#FFFFFF;--tinta:#16151A;--tinta-2:#5B5862;--linea:#E2DCD0;
  --ok:#15803D;--warn:#B45309;--err:#C2410C;--neutro:#8A8792;
  --display:'Bricolage Grotesque',system-ui,sans-serif;--sans:'Figtree',system-ui,sans-serif;
  --side-w:300px;--top-h:72px;
  /* Tema de la vitrina: lo pone el JS con los colores del proyecto. */
  --side:#0B1A2E;--accent:#7DD3FC;--accent-ink:#08111C;--stage-a:#16294A;--stage-b:#070F1E;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 1rem/1.5 var(--sans);-webkit-font-smoothing:antialiased;touch-action:manipulation}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.02em;margin:0}

.mark{width:30px;height:30px;flex:none}
.mark path{fill:var(--tinta)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid transparent;font-weight:600;font-size:1rem;text-decoration:none;transition:background .18s,border-color .18s,transform .18s;white-space:nowrap}
.btn.primary{background:var(--tinta);color:#fff}
.btn.primary:hover{background:#2C2A33}
.btn.primary:disabled{opacity:.7;cursor:progress}
.btn.ghost{background:transparent;border-color:var(--linea);color:var(--tinta)}
.btn.ghost:hover{border-color:var(--tinta)}
.btn.wide{width:100%}
.btn.sm{min-height:44px;padding:0 14px;font-size:.9375rem}

label,.lbl{display:block;font-weight:600;font-size:.875rem;color:var(--tinta-2);margin:14px 0 6px}
input,select,textarea{width:100%;min-height:44px;padding:10px 14px;border-radius:12px;border:1px solid var(--linea);background:#fff;font-size:1rem}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--tinta);outline:none}
@media (pointer:coarse){input,select,textarea{font-size:16px}}

.ibtn{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;border:1px solid var(--linea);background:#fff;color:var(--tinta);text-decoration:none;transition:background .18s,border-color .18s}
.ibtn:hover{border-color:var(--tinta)}

/* Entrada */
.gate{position:fixed;inset:0;display:grid;place-items:center;padding:24px max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));overflow:auto;z-index:50;background:radial-gradient(90% 70% at 50% 0%,#FFFFFF 0%,var(--papel) 60%,var(--papel-2) 100%)}
.gate-in{width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;text-align:center}
.mark.big{width:64px;height:64px}
.wordmark{font-size:2.25rem;line-height:2.75rem;margin-top:16px}
.gate-sub{margin:4px 0 32px;color:var(--tinta-2)}
.gate form{width:100%;text-align:left}
.gate form .btn{margin-top:16px}
#setupCode{text-align:center;letter-spacing:.12em;font-family:var(--display)}
.gate-err{min-height:1.5em;margin:14px 0 0;color:var(--err);font-weight:600}
.gate.go .mk-c{animation:inC .45s ease-out both}
.gate.go .mk-m{animation:inM .5s .25s ease-out both}
.gate.go .wordmark,.gate.go .gate-sub{animation:inW .6s .6s ease-out both}
@keyframes inC{from{opacity:0;transform:translateY(4px)}}
@keyframes inM{from{opacity:0;transform:translateX(6px)}}
@keyframes inW{from{opacity:0}}
.gate.out{opacity:0;transition:opacity .22s;pointer-events:none}

/* Estructura: barra global | contenido (Inicio, Biblioteca o vitrina) */
.app{height:100vh;height:100dvh;display:grid;grid-template-columns:var(--nav-w,248px) minmax(0,1fr);transition:grid-template-columns .25s cubic-bezier(.2,.8,.2,1);padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.app.navc{--nav-w:68px}
.main{min-width:0;min-height:0;display:flex;flex-direction:column}
.nav{display:flex;flex-direction:column;min-height:0;background:var(--tinta);color:#ECE8E0;padding:12px 10px;gap:4px;overflow:hidden}
.nav .mark path{fill:#ECE8E0}
.nav-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 10px}
.nav .brand{color:#fff;min-width:0}
.nav .brand b{white-space:nowrap}
.nbtn{display:grid;place-items:center;width:40px;height:40px;flex:none;border:0;border-radius:10px;background:transparent;color:#A8A4AE}
.nbtn:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-main{display:flex;flex-direction:column;gap:2px}
.nlink{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:12px;background:transparent;color:#CFCBD4;font-weight:600;text-decoration:none;text-align:left;white-space:nowrap}
.nlink svg{flex:none}
.nlink:hover{background:rgba(255,255,255,.07);color:#fff}
.nlink[aria-current="page"]{background:rgba(255,255,255,.1);color:#fff}
.nav-sec{margin:14px 12px 4px;font-size:.875rem;font-weight:600;color:#8D8994;white-space:nowrap}
.nav-projects{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:2px;margin:0 -4px;padding:0 4px}
.nproj{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 10px;border-radius:12px;color:#CFCBD4;text-decoration:none;font-weight:500;white-space:nowrap}
.nproj:hover{background:rgba(255,255,255,.07);color:#fff}
.nproj[aria-current="page"]{background:rgba(255,255,255,.12);color:#fff}
.nproj .dot{flex:none;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;overflow:hidden;background:var(--c,#475569);color:#fff;font-family:var(--display);font-weight:800;font-size:.8125rem}
.nproj .dot img{width:100%;height:100%;object-fit:contain;background:#fff}
.nproj span:last-child{overflow:hidden;text-overflow:ellipsis}
.acct{position:relative;border-top:1px solid rgba(255,255,255,.08);padding-top:8px}
.avatar{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#ECE8E0;color:var(--tinta);font-family:var(--display);font-weight:800;font-size:.875rem}
.menu{position:absolute;left:0;bottom:calc(100% + 6px);min-width:200px;padding:6px;border-radius:16px;background:#fff;color:var(--tinta);border:1px solid var(--linea);box-shadow:0 20px 40px -12px rgba(22,21,26,.35);z-index:30;display:flex;flex-direction:column}
.menu button{min-height:44px;padding:0 12px;border:0;border-radius:10px;background:transparent;text-align:left;font-weight:600}
.menu button:hover{background:var(--papel)}
.menu #logoutBtn{color:var(--err)}
.navc .nav-head{flex-direction:column;padding-inline:0}
.navc .brand b,.navc .nlink span,.navc .nav-sec,.navc .nproj span:last-child{display:none}
.navc .nlink,.navc .nproj{justify-content:center;padding:0}
.navc .nproj .dot{width:30px;height:30px;border-radius:9px}
.mtop{display:none}
.brand{display:flex;align-items:center;gap:10px;color:var(--tinta);text-decoration:none;min-height:44px}
.brand b{font-family:var(--display);font-weight:800;font-size:1.3125rem;letter-spacing:-.03em}

/* Inicio */
.home{flex:1;overflow:auto;padding:32px 40px 56px}
.home-head,.grid,.offline,.chips,.libcount,.icons{max-width:1280px;margin-left:auto;margin-right:auto}
.home-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.home-head h1{font-size:2.5rem;line-height:1.1}
.offline{color:var(--warn);font-weight:600;margin-bottom:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:24px}
.card{display:flex;flex-direction:column;min-width:0;border-radius:22px;background:var(--tarjeta);color:var(--tinta);text-decoration:none;box-shadow:0 1px 2px rgba(22,21,26,.06),0 8px 24px -12px rgba(22,21,26,.18);transition:transform .2s,box-shadow .2s;padding:10px}
.card:hover,.card:focus-visible{transform:translateY(-3px);box-shadow:0 1px 2px rgba(22,21,26,.06),0 18px 36px -14px rgba(22,21,26,.28)}
.shot{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,var(--c-side,#1F2937),var(--c-acc,#475569))}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.shot .ph{position:absolute;inset:0;display:grid;place-items:center}
.shot .ph span{font-family:var(--display);font-weight:800;font-size:3rem;color:rgba(255,255,255,.9)}
.cbody{display:flex;align-items:center;gap:12px;padding:14px 8px 6px}
.chip{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;overflow:hidden;background:var(--c-side,#1F2937);color:#fff;font-family:var(--display);font-weight:800;font-size:1.125rem}
.chip img{width:100%;height:100%;object-fit:contain;background:#fff}
.cinfo{min-width:0;flex:1}
.card h3{font-size:1.1875rem;line-height:1.3;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .dom{display:block;color:var(--tinta-2);font-size:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmeta{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;padding:4px 8px 6px;font-size:.875rem;color:var(--tinta-2)}
.tag{font-weight:600;color:var(--warn)}
.st{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--tinta)}
.st::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--neutro)}
.st.ok::before{background:#22C55E;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.st.warn::before{background:#F59E0B;box-shadow:0 0 0 3px rgba(245,158,11,.2)}
.st.err::before{background:#EF4444;box-shadow:0 0 0 3px rgba(239,68,68,.16)}
.skel{min-height:300px;background:linear-gradient(90deg,#fff 0%,#F7F4EE 50%,#fff 100%);background-size:200% 100%;animation:sk 1.2s linear infinite}
@keyframes sk{to{background-position:-200% 0}}
.empty{grid-column:1/-1;padding:48px 0;text-align:center;color:var(--tinta-2)}

/* Biblioteca */
.search{max-width:340px;border-radius:999px;padding-left:18px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.chips button{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--linea);background:#fff;font-weight:600;color:var(--tinta-2)}
.chips button small{font-size:.875rem;color:var(--neutro);margin-left:4px}
.chips button[aria-pressed="true"]{background:var(--tinta);border-color:var(--tinta);color:#fff}
.chips button[aria-pressed="true"] small{color:#C9C6CF}
.libcount{color:var(--tinta-2);font-size:.875rem;margin-bottom:16px}
.icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px}
.ico{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px 12px;border:1px solid transparent;border-radius:18px;background:#fff;transition:border-color .18s,transform .18s;min-width:0}
.ico:hover,.ico:focus-visible{border-color:var(--tinta);transform:translateY(-2px)}
.ico img{width:64px;height:64px;object-fit:contain}
.ico span{font-size:.875rem;font-weight:500;color:var(--tinta-2);text-align:center;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.ibig{display:grid;place-items:center;height:220px;border-radius:18px;background:radial-gradient(circle at 50% 40%,#fff 0%,var(--papel) 70%);margin-bottom:16px}
.ibig img{width:180px;height:180px;object-fit:contain}
.imeta{color:var(--tinta-2);margin:4px 0 0}
.iused{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:6px}
.iused li{padding:10px 12px;border-radius:12px;background:var(--papel);font-weight:600}
.iused small{display:block;font-weight:400;color:var(--tinta-2);font-size:.875rem;overflow-wrap:anywhere}

/* Vitrina: panel del proyecto (con su marca) | visor. Como Lovable: el visor llena el espacio y
   "Presentación" cambia al mockup con marco de dispositivo. */
.vit{flex:1;min-height:0;display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);transition:grid-template-columns .25s cubic-bezier(.2,.8,.2,1);color:#fff;background:var(--stage-b)}
.vit.noside{--side-w:0px}
.side{position:relative;display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden;background:var(--side);border-right:1px solid rgba(255,255,255,.08);z-index:5}
.vit.noside .side{border-right:0}
.side-head{display:flex;align-items:center;gap:10px;padding:16px 16px 10px;min-width:0}
.plogo{flex:none;width:36px;height:36px;border-radius:10px;overflow:hidden;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font-family:var(--display);font-weight:800}
.plogo img{width:100%;height:100%;object-fit:contain;background:#fff}
.ptitle{font-family:var(--display);font-weight:700;font-size:1.0625rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-width:0}
.list{flex:1;overflow-y:auto;overflow-x:hidden;padding:4px 12px 16px;display:grid;gap:4px;align-content:start;min-width:276px}
.item{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;width:100%;min-height:52px;text-align:left;border:0;background:transparent;border-radius:14px;padding:7px 10px;color:#fff;transition:background .2s}
.item:hover{background:rgba(255,255,255,.07)}
@media (hover:none){.item:hover{background:transparent}}
.item[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.item img,.item .ini{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}
.item .ini{display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.12);font-family:var(--display);font-weight:800;font-size:1.0625rem;filter:none}
.item[aria-pressed="true"] .ini{background:rgba(0,0,0,.12)}
.item .txt{min-width:0}
.item b{display:block;font-weight:600;font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item small{display:block;font-size:.875rem;opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.01em}
.grpb{grid-template-columns:40px minmax(0,1fr) auto;margin-top:6px}
.grpb b{font-size:1.0625rem}
.grpb small{font-family:var(--sans)}
.chev{font-style:normal;font-size:1.4rem;opacity:.7;transition:transform .25s}
.grpb[aria-expanded="true"] .chev{transform:rotate(90deg)}
.item.sub{margin-left:18px;width:calc(100% - 18px);grid-template-columns:34px minmax(0,1fr);min-height:48px;padding:6px 10px;animation:sub-in .3s cubic-bezier(.2,.8,.2,1) both}
.item.sub img,.item.sub .ini{width:34px;height:34px}
@keyframes sub-in{from{opacity:0;transform:translateY(-6px)}}

.stage{container-type:inline-size;display:flex;flex-direction:column;min-width:0;min-height:0;background:radial-gradient(120% 90% at 50% 0%,var(--stage-a) 0%,var(--stage-b) 75%)}
.bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.07)}
.bar-l,.bar-c,.bar-r{display:flex;align-items:center;gap:6px;min-width:0}
.bar-r{justify-content:flex-end}
.stage .ibtn{width:40px;height:40px;border-radius:10px;background:transparent;border:1px solid transparent;color:rgba(255,255,255,.82)}
.stage .ibtn:hover{background:rgba(255,255,255,.1);color:#fff}
.stage .ibtn[aria-pressed="true"]{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.18)}
.stage .ibtn[aria-expanded="false"]{color:rgba(255,255,255,.55)}
.seg{display:inline-flex;background:rgba(255,255,255,.07);border-radius:12px;padding:3px;gap:2px}
.seg button{display:inline-grid;place-items:center;min-width:36px;min-height:34px;border:0;background:transparent;border-radius:9px;padding:0 8px;font-weight:600;font-size:.875rem;color:rgba(255,255,255,.72)}
.seg button span{display:none}
.seg button[aria-pressed="true"]{background:#fff;color:#111}
#zoom button{padding:0 10px;white-space:nowrap}
.pill{display:flex;align-items:center;min-width:0;width:min(340px,32vw);height:40px;border-radius:999px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.1)}
.pill button{display:grid;place-items:center;width:38px;height:38px;flex:none;border:0;border-radius:999px;background:transparent;color:rgba(255,255,255,.8)}
.pill button:hover{color:#fff;background:rgba(255,255,255,.08)}
.pill select{flex:1;min-width:0;min-height:38px;height:38px;border:0;border-radius:999px;background:transparent;color:#fff;font-weight:600;font-size:.9375rem;padding:0 30px 0 4px;text-overflow:ellipsis;appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.pill select:focus{border:0}
.pill select option,.pill select optgroup{background:#1E1D24;color:#fff}
.fs-off{display:none}
.app.focus .fs-on{display:none}
.app.focus .fs-off{display:inline}
.view{flex:1;min-height:0;display:grid;place-items:center;padding:10px;overflow:hidden}
.view.present{padding:8px 12px 12px}
.view.real{place-items:start;overflow:auto}
.view.real .device{margin-inline:auto}
.device{position:relative;flex:none}
.device.bare{border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 24px 60px -30px rgba(0,0,0,.8)}
.device.bare .screen{border-radius:12px}
.device.frame{background:#05080D;box-shadow:0 40px 80px -30px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.08) inset;transition:border-radius .3s}
.device.frame.phone{border-radius:48px;padding:12px}
.device.frame.tablet{border-radius:30px;padding:16px}
.device.frame.desktop{border-radius:12px;padding:30px 10px 10px}
.device.frame.desktop::before{content:"";position:absolute;top:11px;left:14px;width:52px;height:10px;background:radial-gradient(circle at 5px 5px,#FF5F57 4px,transparent 5px),radial-gradient(circle at 23px 5px,#FEBC2E 4px,transparent 5px),radial-gradient(circle at 41px 5px,#28C840 4px,transparent 5px)}
.device.frame.phone::after{content:"";position:absolute;top:calc(12px + 10px * var(--k,1));left:50%;transform:translateX(-50%);width:26%;height:calc(26px * var(--k,1));border-radius:calc(14px * var(--k,1));background:#05080D;z-index:2}
.screen{position:relative;width:100%;height:100%;overflow:hidden;background:#fff}
.device.frame.phone .screen{border-radius:36px}
.device.frame.tablet .screen{border-radius:16px}
.device.frame.desktop .screen{border-radius:4px}
.screen iframe{border:0;display:block;transform-origin:0 0;background:#fff}
.veil{position:absolute;inset:0;overflow:auto;display:grid;place-items:center;align-content:center;gap:14px;padding:24px;text-align:center;background:#101521;color:#fff;font-weight:600;transition:opacity .2s}
.veil.off{opacity:0;pointer-events:none}
.veil p{margin:0;font-size:1.0625rem}
.veil>*{min-width:0;max-width:100%}
.veil>div{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.veil .btn{max-width:100%;white-space:normal;text-align:center}
.veil .btn.primary{background:var(--accent);color:var(--accent-ink)}
.veil .btn.ghost{color:#fff;border-color:rgba(255,255,255,.3)}

/* Con la barra global oculta queda una sola columna; si quedara una de 0 px, el contenido caería en ella. */
.app.focus,.app.focus.navc{grid-template-columns:minmax(0,1fr)}
.app.focus .nav,.app.focus .side{display:none}
.app.focus .vit{grid-template-columns:minmax(0,1fr)}
.app.focus .bar-l{visibility:hidden}
.app.focus #copyUrl{display:none}

/* Diálogos */
dialog{width:min(480px,calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:0;border-radius:24px;border:0;background:#fff;color:var(--tinta);box-shadow:0 40px 80px -20px rgba(22,21,26,.45)}
dialog.wide{width:min(820px,calc(100vw - 24px))}
dialog::backdrop{background:rgba(22,21,26,.45);backdrop-filter:blur(2px)}
dialog form,.dlg-body{padding:28px;overflow:auto;max-height:calc(100dvh - 26px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
dialog h2{font-size:1.625rem;line-height:1.2;margin-bottom:8px}
dialog h3{font-size:1.125rem;font-weight:700;margin:24px 0 10px}
.dlg-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:20px;position:sticky;bottom:-28px;background:#fff;padding:12px 0 0}
.ferr{min-height:1.2em;margin:10px 0 0;color:var(--err);font-weight:600}
.ferr.ok{color:var(--ok)}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.row2>*,.srow>*{min-width:0}
.colors{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cpick{display:inline-flex;align-items:center;gap:8px;margin:0;min-height:44px;padding:0 14px 0 6px;border:1px solid var(--linea);border-radius:999px;color:var(--tinta);cursor:pointer;font-size:.9375rem}
.cpick input{width:32px;height:32px;min-height:0;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}
.cpick input::-webkit-color-swatch-wrapper{padding:0}
.cpick input::-webkit-color-swatch{border:1px solid rgba(0,0,0,.15);border-radius:50%}
.cpick input::-moz-color-swatch{border:1px solid rgba(0,0,0,.15);border-radius:50%}
.screens{display:flex;flex-direction:column;gap:8px}
.srow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) 120px 110px 44px;gap:8px;align-items:center}
.srow button{min-height:44px;border-radius:12px;border:1px solid var(--linea);background:transparent;color:var(--err);font-weight:600}
.keys{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.keys li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-radius:14px;background:var(--papel)}
.keys small{display:block;color:var(--tinta-2);font-size:.875rem}
.keys button{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--linea);background:#fff;color:var(--err);font-weight:600}
.made{font-size:1.0625rem;color:var(--tinta-2)}
.made b{color:var(--tinta);font-family:var(--display)}

/* La barra se acomoda al ancho del visor (no de la ventana): depende de qué columnas estén abiertas. */
@container (max-width:900px){
  .pill{width:260px}
}
@container (max-width:760px){
  .bar{grid-template-columns:auto 1fr;row-gap:8px}
  .bar-c{grid-column:1/-1;grid-row:2;justify-content:center}
  .bar-r{grid-column:2;grid-row:1}
  .pill{width:auto;flex:1;max-width:420px}
}
@container (max-width:420px){
  #copyUrl{display:none}
  .bar-c{justify-content:flex-start}
}
@media (max-width:900px){
  .home{padding:24px 20px 40px}
  .home-head h1{font-size:2rem}
  .grid{gap:16px}
}
@media (max-width:700px){
  .app,.app.navc{grid-template-columns:minmax(0,1fr)}
  .nav{position:fixed;top:0;bottom:0;left:0;width:min(280px,84vw);z-index:40;transform:translateX(-105%);transition:transform .25s ease;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .app.navopen .nav{transform:none;box-shadow:20px 0 40px -10px rgba(0,0,0,.5)}
  #navCompact{display:none}
  .navc .brand b,.navc .nlink span,.navc .nav-sec,.navc .nproj span:last-child{display:revert}
  .navc .nlink,.navc .nproj{justify-content:flex-start;padding:0 12px}
  .navc .nav-head{flex-direction:row}
  #navScrim{position:fixed;inset:0;background:rgba(3,6,10,.55);z-index:35}
  .mtop{display:flex;align-items:center;gap:10px;padding:10px 16px 0}
  .app.in-vit .mtop{display:none}
.brand{display:flex;align-items:center;gap:10px;color:var(--tinta);text-decoration:none;min-height:44px}
.brand b{font-family:var(--display);font-weight:800;font-size:1.3125rem;letter-spacing:-.03em}
  .home{padding:16px 16px 40px}
  .search{max-width:none}
  .vit,.vit.noside{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;top:env(safe-area-inset-top);bottom:env(safe-area-inset-bottom);left:env(safe-area-inset-left);width:min(300px,86vw);transform:translateX(calc(-100% - env(safe-area-inset-left)));transition:transform .25s ease}
  .vit.drawer .side{transform:none;box-shadow:20px 0 40px -10px rgba(0,0,0,.6)}
  .list{min-width:0}
  #scrim{position:fixed;inset:0;background:rgba(3,6,10,.6);z-index:4}
  .bar{padding:8px 10px}
  .pill{max-width:none}
  .view{padding:8px}
  .srow{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"t d" "u u" "g x";padding-bottom:10px;border-bottom:1px solid var(--linea)}
  .srow .s-t{grid-area:t}.srow .s-u{grid-area:u}.srow .s-d{grid-area:d}.srow .s-g{grid-area:g}.srow button{grid-area:x}
  .row2{grid-template-columns:minmax(0,1fr)}
  dialog form,.dlg-body{padding:22px}
}
@media (max-width:560px){
  .home-head .btn{width:100%}
  .icons{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
  .dlg-actions>.btn{flex:1 1 auto}
}
@media (max-height:480px){
  .dlg-actions{position:static}
  .bar{grid-template-columns:auto 1fr auto;padding-top:4px;padding-bottom:4px}
  .bar-c{grid-column:2;grid-row:1}
  .bar-r{grid-column:3}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}