:root { --ink:#302d25;--muted:#6e675a;--cream:#f8f6f0;--gold:#bca377;--gold-osc:#80663f;--line:#e8e2d6;--card:#fffdf8;--sombra:0 8px 30px #30261506;--field:#f1ede3;--nav:#faf7efef; color-scheme:light; }
:root[data-tema="oscuro"] { --ink:#f5efe0;--muted:#c0b6a1;--cream:#211f19;--gold:#c4aa7a;--gold-osc:#d8bd8d;--line:#454035;--card:#2b2821;--sombra:0 8px 24px #0001;--field:#343026;--nav:#302c23f5; color-scheme:dark; }
body { background:var(--cream);padding-bottom:110px;line-height:1.5; }
#app { width:min(100%,760px);padding:22px 20px 32px; }
#app [hidden] { display:none!important; }
button,input,select { font-family:inherit; }
button,a,input,summary,select { touch-action:manipulation; }
button { color:var(--ink); }
.ui-icon { width:21px;height:21px;flex-shrink:0;vertical-align:middle; }
.catalogo-top { display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 30px; }
.update-banner { display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--field);border-radius:14px;padding:12px;font-size:12px;margin-bottom:20px; }
.marca-premium { display:flex;gap:8px;align-items:center;color:var(--gold-osc);font-size:23px; }
.marca-premium span { font:600 15px 'DM Sans',sans-serif;letter-spacing:-.4px;color:var(--ink); }
.perfil-mini,.icon-button { width:42px;height:42px;border-radius:50%;background:var(--field);display:grid;place-items:center;border:0;cursor:pointer; }
.perfil-mini .ui-icon { width:18px;height:18px; }
.catalogo-intro { margin:0 0 22px; }
.eyebrow { font-size:9px;font-weight:700;letter-spacing:2.4px;color:var(--gold-osc);margin:0 0 9px; }
.catalogo-intro h1 { font-size:38px;letter-spacing:-1.2px;font-weight:500;display:flex;align-items:center;gap:12px; }
.titulo-flor { font-size:29px;color:var(--gold);font-weight:400; }
.catalogo-intro>p:last-child { font-size:13px;color:var(--muted);margin:10px 0 0; }
.busqueda-premium { display:flex;align-items:center;gap:11px;background:var(--field);border:1px solid transparent;border-radius:13px;padding:0 14px; }
.busqueda-premium:focus-within { border-color:var(--gold-osc); }
.busqueda-premium>.ui-icon { width:18px;color:var(--muted); }
.busqueda-premium input { width:100%;min-width:0;background:transparent;border:0;padding:15px 0;color:var(--ink);font-size:14px;outline:none; }
input::placeholder { color:var(--muted);opacity:1; }
.catalogo-toolbar { display:flex;align-items:center;gap:14px;margin:13px 0 19px; }
.btn-filtros { display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:25px;padding:10px 14px;cursor:pointer;font-size:12px;font-weight:600;white-space:nowrap;min-height:44px; }
.btn-filtros .ui-icon { width:17px;height:17px; }
.catalogo-toolbar>span { font-size:11px;line-height:1.5;color:var(--muted); }
.chips-activos { display:flex;flex-wrap:wrap;gap:8px; }
.chips-activos:has(button) { margin-bottom:23px; }
.chips-activos button { background:var(--field);border:1px solid var(--line);padding:8px 10px;border-radius:24px;font-size:11px;cursor:pointer;min-height:36px; }
.chips-activos .ui-icon { width:12px;height:12px;margin-left:5px; }
.section-heading { display:flex;align-items:center;justify-content:space-between;gap:12px;margin:25px 0 15px; }
.section-heading h2 { display:flex;align-items:center;gap:8px;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:650;letter-spacing:-.3px; }
.section-heading h2 .ui-icon { width:17px;height:17px;color:var(--gold-osc); }
.section-heading>span,.section-heading>a { font-size:10px;color:var(--muted);white-space:nowrap; }
.lista-patrones { grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 13px; }
.card-patron { position:relative;display:block;background:transparent;border:0;box-shadow:none;border-radius:0;overflow:visible;padding:0; }
.card-patron:hover { transform:none;box-shadow:none; }
.card-enlace { display:block;min-width:0; }
.card-pieza { aspect-ratio:1/1.06;width:100%;height:auto;border-radius:17px;overflow:hidden;background:var(--field);display:block; }
.card-pieza .foto-miniatura,.card-pieza>svg { display:block;width:100%;height:100%;object-fit:cover;border-radius:0; }
.card-pieza .foto-miniatura { transition:transform .3s; }
@media(hover:hover) { .card-enlace:hover .foto-miniatura { transform:scale(1.035); } }
.card-texto { padding:11px 2px 0;min-width:0; }
.card-texto h3 { font-family:'DM Sans',sans-serif;font-size:14px;font-weight:650;line-height:1.4;letter-spacing:-.25px;margin:0 0 7px; }
.card-meta { gap:5px 8px;align-items:center;flex-wrap:wrap; }
.chip-nivel { background:var(--field);color:var(--muted);font-size:11px;line-height:1.4;font-weight:500;padding:4px 7px;border-radius:5px; }
.meta-tiempo { font-size:11px;color:var(--muted);white-space:normal; }
.meta-tiempo .ui-icon { width:11px;height:11px; }
.favorito { position:absolute;top:9px;right:9px;border:0;border-radius:50%;width:44px;height:44px;display:grid;place-items:center;background:#fffdf4ee;color:#716754;box-shadow:0 2px 8px #00000008;cursor:pointer; }
.favorito .ui-icon { width:19px;height:19px; }
.favorito.guardado { color:#a5684b;background:#fffaf0; }
.favorito.guardado .ui-icon { fill:currentColor; }
.cargar-mas { display:flex;align-items:center;justify-content:center;gap:14px;margin:28px auto 8px;min-width:190px; }
.catalogo-pie,.firma-catalogo { text-align:center;font-size:11px;color:var(--muted); }
.firma-catalogo { margin:35px 0 8px;padding-top:23px;border-top:1px solid var(--line); }
.firma-catalogo span { display:block;color:var(--gold);margin-top:8px;font-size:22px; }
.empty-state { padding:42px 15px;text-align:center;background:var(--card);border-radius:20px; }
.empty-state>.ui-icon { width:32px;height:32px;color:var(--gold-osc);margin-bottom:16px; }
.empty-state h2 { font-size:23px; }
.empty-state p { color:var(--muted);font-size:13px;margin:12px auto 20px;max-width:280px; }
.en-curso { margin-bottom:26px; }
.carrusel-proyectos { display:flex;gap:14px;overflow:auto;scroll-snap-type:x proximity;padding-bottom:8px; }
.proyecto-foto { flex:0 0 158px;scroll-snap-align:start; }
.proyecto-foto>div { aspect-ratio:1;position:relative;overflow:hidden;border-radius:17px;background:var(--field); }
.proyecto-foto img,.proyecto-foto svg:not(.ui-icon) { width:100%;height:100%;object-fit:cover; }
.proyecto-foto>div>span { position:absolute;left:10px;top:10px;background:#c8b084;color:#211b11;font-size:10px;font-weight:700;border-radius:20px;padding:4px 9px;letter-spacing:.7px; }
.proyecto-foto b { display:block;font-size:12px;font-weight:650;margin-top:8px; }
.proyecto-foto small { display:block;font-size:10px;color:var(--muted);margin-top:3px; }
.proyecto-foto small svg { width:13px;height:13px; }
#tabs .tabs { position:fixed;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(calc(100% - 28px),560px);border:1px solid var(--line);background:var(--nav);backdrop-filter:blur(18px);border-radius:40px;padding:7px 8px;box-shadow:0 5px 30px #1f180f13;z-index:30; }
.tab { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:7px 1px;border-radius:30px;color:var(--muted);min-height:51px; }
.tab>span { font-size:0; }
.tab .ui-icon { width:20px;height:20px; }
.tab small { font-size:10px;font-weight:500; }
.tab.activa { color:var(--ink);background:var(--field); }
.topbar { gap:10px;padding:0 0 20px;margin-bottom:6px;border:0; }
.topbar h1 { font-size:24px;font-weight:500; }
.volver { display:grid;place-items:center;width:40px;height:40px;background:var(--field);border-radius:50%;color:var(--ink); }
.logo-mini { color:var(--gold-osc);background:var(--field); }
.patron-hero { position:relative;aspect-ratio:1.12;width:100%;height:auto;border-radius:22px;padding:0;overflow:hidden;background:var(--field); }
.patron-hero .foto-patron { width:100%;height:100%;max-height:none;object-fit:cover;border-radius:0; }
.patron-hero>svg { width:100%;height:100%; }
.patron-hero .favorito { width:44px;height:44px;top:14px;right:14px; }
.referencia-ilustrada { font-size:10px;color:var(--muted);text-align:center;margin:8px 0 20px; }
.patron-cab h2 { font-size:30px;font-weight:500; }
.patron-resumen { font-size:13px;color:var(--muted); }
.patron-meta { font-size:11px;gap:9px; }
.patron-meta span:not(.chip-nivel) { background:var(--card); }
.btn-primario { background:var(--gold);color:#211b11;border:0;border-radius:30px;box-shadow:none;font-size:13px;font-weight:650;min-height:46px; }
.btn-primario:hover { background:var(--gold);filter:brightness(.96); }
.iniciar-pasos { display:flex;align-items:center;justify-content:center;gap:10px;margin:23px 0; }
.btn-secundario { color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:25px;font-size:12px;min-height:44px; }
.caja,.contador,.respaldo,.pwa-info,.form-calc,.resultado { background:var(--card);border-color:var(--line);border-radius:18px;box-shadow:none; }
.caja { padding:21px; }
.caja h3 { font-size:19px;font-weight:500; }
.materiales,.consejos,.vueltas,.guia-visual p { font-size:13px; }
.punto-chip { color:var(--ink);background:var(--field);border-color:var(--line); }
.seccion { border-color:var(--line); }
.seccion summary { color:var(--ink);font-size:15px; }
.vueltas .paso-actual { background:var(--field); }
.btn-marcar-paso { color:var(--gold-osc);background:var(--field); }
.vueltas li { border-color:var(--line); }
.leyenda-item { background:var(--field);color:var(--ink); }
#paso-a-paso,#paso-a-paso .paso-actual { scroll-margin-top:20px; }
.barra-patron { position:static;background:transparent;border:0;padding:0;margin:25px 0;max-width:none; }
.barra-patron button { display:flex;align-items:center;justify-content:center;gap:9px;width:100%;font-size:13px;padding:13px 19px;box-shadow:none; }
.tool-segments { display:flex;gap:4px;border-radius:25px;background:var(--field);padding:5px;margin:5px 0 23px; }
.tool-segments a { flex:1;text-align:center;font-size:12px;padding:10px 5px;border-radius:24px;color:var(--muted); }
.tool-segments a[aria-current] { color:#211b11;background:var(--gold);font-weight:650; }
.tool-cards { display:grid;gap:15px;margin:27px 0; }
.tool-card { display:flex;align-items:center;gap:16px;padding:22px 18px;border:1px solid var(--line);background:var(--card);border-radius:20px; }
.tool-icon { padding:13px;background:var(--field);border-radius:15px;color:var(--gold-osc); }
.tool-card>div { flex:1; }
.tool-card h2 { font-size:20px;font-weight:500; }
.tool-card p { margin:7px 0 0;font-size:12px;color:var(--muted); }
.tool-card>.ui-icon { width:17px;color:var(--muted); }
.intro-herramienta { font-size:13px;color:var(--muted); }
.perfil-welcome { padding:24px 12px 32px;text-align:center; }
.perfil-welcome>span { display:block;color:var(--gold);font-size:40px;margin-bottom:12px; }
.perfil-welcome h2 { font-size:30px;font-weight:500; }
.perfil-welcome p { color:var(--muted);font-size:13px; }
.theme-options { display:flex;gap:8px;margin-top:18px; }
.theme-options button { display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:14px 5px;background:var(--field);font-size:11px;cursor:pointer; }
.theme-options button[aria-pressed="true"] { border-color:var(--gold-osc);background:var(--gold);color:#211b11; }
.pwa-info h2,.respaldo h2 { font-size:20px;font-weight:500; }
.filter-sheet { margin:auto auto 0;max-height:90dvh;width:min(100%,560px);max-width:100%;padding:0;border:1px solid var(--line);border-bottom:0;border-radius:26px 26px 0 0;color:var(--ink);background:var(--card);box-shadow:0 -12px 70px #0002; }
.filter-sheet::backdrop { background:#17150f66;backdrop-filter:blur(3px); }
.filter-sheet form { display:flex;flex-direction:column;max-height:90dvh; }
.sheet-handle { width:35px;height:4px;background:var(--line);border-radius:5px;margin:10px auto 0;flex-shrink:0; }
.filter-sheet header { display:flex;align-items:center;justify-content:space-between;padding:15px 23px 17px;flex-shrink:0; }
.filter-sheet h2 { font-size:24px;font-weight:500; }
.sheet-content { overflow:auto;padding:0 23px 20px; }
.sheet-content fieldset { padding:0;margin:5px 0 27px;border:0; }
.sheet-content legend { font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:650;margin-bottom:12px; }
.pill-options { display:flex;flex-wrap:wrap;gap:8px; }
.pill-options label { position:relative; }
.pill-options input { position:absolute;opacity:0;width:1px;height:1px; }
.pill-options span { display:block;border-radius:24px;padding:11px 13px;font-size:12px;background:var(--field);border:1px solid transparent;cursor:pointer; }
.pill-options input:checked+span { background:var(--gold);color:#211b11; }
.pill-options input:focus-visible+span { outline:2px solid var(--gold-osc);outline-offset:3px; }
.sheet-selects { display:flex;gap:14px; }
.sheet-selects label { display:flex;flex-direction:column;flex:1;min-width:0;gap:7px;font-size:12px; }
.sheet-selects select { width:100%;padding:12px 6px;background:var(--field);border:1px solid var(--line);border-radius:10px;color:var(--ink); }
.filter-sheet footer { display:flex;align-items:center;gap:18px;padding:16px 23px max(19px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--card); }
.filter-sheet footer .btn-primario { flex:1; }
.text-button { border:0;background:transparent;color:var(--muted);font-size:13px;cursor:pointer;min-height:44px;padding:0 8px; }
html:has(dialog[open]) { overflow:hidden; }
[data-tema="oscuro"] .form-calc input:not([type="range"]),[data-tema="oscuro"] .form-calc select,[data-tema="oscuro"] .form-nuevo input,[data-tema="oscuro"] .contador-extra input { background:var(--field);color:var(--ink);border-color:var(--line); }
[data-tema="oscuro"] .form-calc label,[data-tema="oscuro"] .contador-num,[data-tema="oscuro"] .resultado-numero,[data-tema="oscuro"] .resultado-label { color:var(--ink); }
[data-tema="oscuro"] .resultado-nota,[data-tema="oscuro"] .aviso,[data-tema="oscuro"] .form-calc small,[data-tema="oscuro"] .respaldo p,[data-tema="oscuro"] .pwa-info p { color:var(--muted); }
[data-tema="oscuro"] .btn-menos,[data-tema="oscuro"] .precio-extra,[data-tema="oscuro"] .desglose-total,[data-tema="oscuro"] .caja-consejos { background:var(--field);color:var(--ink); }
[data-tema="oscuro"] .btn-mas { background:var(--gold);color:#211b11; }
[data-tema="oscuro"] .sugerencias-precio div { background:var(--field); }
[data-tema="oscuro"] .desglose-gana { color:#93c29e; }
[data-tema="oscuro"] .instalacion-entrada { background:var(--card);border-color:var(--line); }
[data-tema="oscuro"] .grafico { background:#fffaf2;border-radius:12px; }
[data-tema="oscuro"] .contador.meta-lista { background:#26382a;color:var(--ink); }
[data-tema="oscuro"] .ob-opcion,[data-tema="oscuro"] .onboarding { color:var(--ink); }
@media(min-width:650px) { #app { padding:32px 30px; }.lista-patrones { grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 18px; }.patron-hero { max-height:570px; }.catalogo-intro h1 { font-size:44px; }.catalogo-top { margin-bottom:36px; }.filter-sheet { margin:auto;border-radius:26px;border-bottom:1px solid var(--line);max-height:85dvh; }.filter-sheet form { max-height:85dvh; } }
@media(max-width:370px) { #app { padding-left:16px;padding-right:16px; }.catalogo-toolbar { gap:9px; }.section-heading h2 { font-size:13px; }.section-heading>span { font-size:10px; }.card-texto h3 { font-size:13px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important;transition:none!important;animation:none!important; } }
/* Editorial status is visible without implying a physically tested pattern. */
.estado-receta{display:inline-block;font-size:.69rem;line-height:1.35;color:#754c29;background:#fff1d9;border:1px solid #e2c494;border-radius:7px;padding:4px 6px;margin:5px 0;max-width:100%;}
.estado-receta.reconstruida{color:#315c51;background:#e8f2ed;border-color:#b8d2c7;}
.aviso-revision{border:1px solid #ddbf8d;background:#fff5e5;color:#513d28;}
.aviso-revision p,.muestra-receta p,.esquema-reconstruido p{font-size:.9rem;line-height:1.65;}
.aviso-revision button{white-space:normal;height:auto;min-height:44px;line-height:1.4;}
.aviso-catalogo{margin:0 0 20px;padding:15px 18px;border:1px solid #d8c4a5;border-radius:14px;background:#fff7e9;color:#604b31;font-size:.84rem;line-height:1.5;}
.aviso-catalogo p{margin:6px 0;}.aviso-catalogo a{font-weight:700;text-underline-offset:3px;}
.esquema-reconstruido svg{display:block;width:100%;max-width:320px;margin:auto;}
[data-tema="oscuro"] .aviso-catalogo,[data-tema="oscuro"] .aviso-revision{background:#342e25;color:#f4e3c9;border-color:#776044;}