@font-face{font-family:"JotWisely Fraunces";src:url("brand/fonts/Fraunces-variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{color-scheme:light;--fondo:#f8f7f3;--lateral:#efeee8;--tarjeta:#fffefa;--texto:#252d29;--suave:#68716a;--borde:#dedfd6;--acento:#245e4e;--acento-hover:#1d4c3f;--acento-texto:#fffefa;--acento-suave:#e3e9dc;--codigo:#efeee8;--error-fondo:#fdecea;--error-texto:#9b1c1c;--sombra:0 4px 14px #2b3a2203}

html[data-theme=dark]{color-scheme:dark;--fondo:#171b19;--lateral:#121614;--tarjeta:#202622;--texto:#eef0e8;--suave:#b1b9af;--borde:#39433c;--acento:#bfd9b4;--acento-hover:#d0e8c6;--acento-texto:#171b19;--acento-suave:#304333;--codigo:#2c352e;--error-fondo:#3b1717;--error-texto:#fca5a5;--sombra:none}

body{font-size:14px}
.shell{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.sidebar{background:var(--lateral);border-right:1px solid var(--borde);padding:30px 20px 24px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:12px;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;color:var(--texto);text-decoration:none;font:600 27px "JotWisely Fraunces",Georgia,serif;letter-spacing:-.7px;font-optical-sizing:none;font-variation-settings:"opsz" 72,"SOFT" 50,"WONK" 1}
.brand img{flex:none}
.tagline{font-size:11px;margin:0 0 20px 46px;color:var(--suave)}
.sidebar .principal{font-size:14px;padding:12px 8px}
.sidebar nav{margin-top:15px;display:grid;gap:5px}
.pestanas{display:grid;border:0;margin:0;gap:5px}
.pestanas button,.sidebar nav>button{font-size:13px;border:0;border-radius:7px;text-align:left;padding:12px 10px;margin:0;background:transparent;white-space:normal}
.pestanas button[aria-selected=true]{background:var(--acento-suave);color:var(--acento);border:0}
.sidebar nav button:hover{background:var(--acento-suave)}
.side-note{margin-top:auto;padding:45px 10px 20px;font:20px/1.5 Georgia,serif;color:var(--suave)}
.side-note>span{color:var(--acento);font-size:30px}
.side-note p{margin:8px 0}
.appearance{border:0;border-top:1px solid var(--borde);padding:12px 0 0;margin:0}
.appearance legend{font-size:11px;color:var(--suave);padding:0 5px}
.theme-switch{display:flex;gap:3px}
.theme-switch button{font-size:11px;padding:7px 9px;border:0;background:transparent;flex:1}
.theme-switch button[aria-pressed=true]{background:var(--tarjeta);color:var(--acento);box-shadow:0 1px 3px #0001}

main{max-width:1220px;width:100%;min-width:0;margin:auto;padding:0 48px 64px}
#cuenta-app{min-height:77px;border-bottom:1px solid var(--borde);margin:0 0 42px;padding:16px 0;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;font-size:12px;gap:12px}
#cuenta-app .boton,#cuenta-app button{font-size:12px;padding:7px 12px}
header.hero{margin-bottom:28px}
header .eyebrow,.eyebrow{font-size:10px;font-weight:650;letter-spacing:.14em;color:var(--acento);margin:0 0 12px}
header h1{font:normal 46px/1.12 Georgia,serif;letter-spacing:-1.8px;display:block}
header h1 em{font-weight:normal;color:var(--acento)}
header p{font-size:13px;margin:14px 0 0}
.tarjeta{border-radius:12px;padding:24px}
.composer{padding:24px}
.fila-url{gap:16px}
#url{background:transparent;border-color:transparent;padding:12px 0;font-size:14px}
.opciones{font-size:12px;gap:12px 22px}
.segmentado label{padding:5px 9px}
.opciones label.titulo{display:inline-block;margin-bottom:6px}
button.principal{font-size:14px}
.encabezado{flex-wrap:wrap}
#resultado{margin-top:32px;padding:32px 36px}
.cabecera h2{font:normal 30px/1.25 Georgia,serif;letter-spacing:-.5px}
.cabecera .datos{font-size:12px}
.resumen{font:16px/1.8 system-ui,sans-serif;margin-top:24px;padding-top:16px}
.resumen h2,.resumen h3{font-family:Georgia,serif}
.resumen h2{font-size:26px}
.resumen h3{font-size:22px}
.acciones{flex-wrap:wrap}
#biblioteca{margin-top:40px;scroll-margin-top:24px}
.historial{margin-top:24px}
.historial h2{font:normal 25px Georgia,serif;color:var(--texto);gap:10px;flex-wrap:wrap;margin-bottom:18px}
.historial h2 button{font:12px system-ui,sans-serif}
.historial ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.historial li.summary-card{position:relative;display:grid;grid-template-columns:1fr auto;gap:10px;padding:0 18px 16px;background:var(--tarjeta);border:1px solid var(--borde);border-radius:11px;overflow:hidden;align-items:start;min-width:0;cursor:default}
.summary-card:before{content:"";grid-column:1/-1;height:115px;margin:0 -18px 5px;background:radial-gradient(circle at 63% 47%,#c4ac70 0 19px,transparent 20px),repeating-radial-gradient(ellipse at 47% 55%,transparent 0 22px,#819b7666 23px 24px,transparent 25px 39px),#dae4cd}
.summary-card.card-web:before{background:linear-gradient(135deg,transparent 44%,#879d9b 45% 47%,transparent 48%),linear-gradient(45deg,transparent 42%,#adc0bc 43% 62%,transparent 63%),#dbe5e1}
html[data-theme=dark] .summary-card:before{background:radial-gradient(circle at 63% 47%,#cfb57b 0 19px,transparent 20px),repeating-radial-gradient(ellipse at 47% 55%,transparent 0 22px,#9eb69a88 23px 24px,transparent 25px 39px),#344b3c}
html[data-theme=dark] .summary-card.card-web:before{background:linear-gradient(135deg,transparent 44%,#879d9b 45% 47%,transparent 48%),linear-gradient(45deg,transparent 42%,#607c78 43% 62%,transparent 63%),#334448}
.historial .h-titulo{grid-column:1/-1;grid-row:3;white-space:normal;overflow-wrap:anywhere;font:normal 21px/1.3 Georgia,serif;min-height:60px;width:100%}
.historial .insignia{justify-self:start;font-size:10px;margin:0}
.historial .h-idioma{justify-self:end;font-size:11px}
.historial .h-fecha{font-size:11px;align-self:center}
.historial .h-borrar{justify-self:end;padding:5px 8px}
.historial .h-abrir:hover{text-decoration:underline;color:var(--acento)}
.summary-card:hover{box-shadow:0 6px 20px #00000008}
.skip{position:fixed;left:12px;top:-100px;z-index:20;background:var(--tarjeta);padding:12px}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
::selection{background:var(--acento-suave);color:var(--texto)}

@media(max-width:1000px){main{padding-left:28px;padding-right:28px}
.shell{grid-template-columns:215px minmax(0,1fr)}
.sidebar{padding-left:14px;padding-right:14px}
.brand{font-size:25px}
.opciones{gap:12px}
.cabecera{flex-wrap:wrap}
}

@media(max-width:700px){.shell{display:block}
.sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--borde);padding:16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}
.brand{font-size:25px}
.tagline,.side-note{display:none}
.sidebar nav{grid-column:1/-1;margin:0;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.pestanas{display:flex;flex:1;gap:3px}
.pestanas button{flex:1;padding:10px 8px;font-size:12px}
.sidebar nav>button{font-size:12px;padding:10px 8px}
.appearance{grid-column:1/-1;padding:8px 0 0}
.appearance legend{font-size:10px}
.theme-switch{max-width:240px}
.sidebar .principal{font-size:12px;padding:9px}
main{padding:0 18px 40px}
#cuenta-app{min-height:64px;margin-bottom:30px;padding:12px 0;justify-content:flex-start}
header h1{font-size:38px;letter-spacing:-1px}
.tarjeta,.composer{padding:18px}
.fila-url{flex-direction:column;gap:10px}
#url{padding:10px 0}
.opciones{margin-top:16px;gap:12px}
.segmentado label{padding:5px 8px}
#resultado{padding:22px 18px}
.cabecera h2{font-size:27px}
.historial ul{grid-template-columns:1fr}
.summary-card:before{height:135px}
.historial h2{font-size:23px}
.rejilla{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}


/* Keep short workspaces at the top, matching the populated layout. */
main{margin:0 auto;align-self:start}
.nav-icon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sidebar nav button,.sidebar #nuevo-resumen{display:flex;align-items:center;gap:10px}
.sidebar #nuevo-resumen{justify-content:center}