/* =========================================================================== Ecollibres — hoja de estilos Organización por capas (sin @layer, por orden físico): 1) TOKENS PRIMITIVOS escalas crudas, no las usan los componentes 2) TOKENS SEMÁNTICOS roles (--surface, --text, --accent...) que SÍ usan 3) OVERRIDES theme/skin/... bloques [data-theme]/[data-skin]/[data-accent]/[data-density] 4) BASE + RESET 5) COMPONENTES solo consumen tokens semánticos 6) UTILIDADES + A11Y + RESPONSIVE Theming ortogonal por data-* en : data-theme(light|dark) · data-skin · data-accent · data-density. El modo "auto" lo resuelve el JS a light/dark. Contraste: los pares texto/superficie se fijan por skin×theme; el ACENTO solo se usa en botones/foco/precio (con --on-accent), nunca como texto de cuerpo. =========================================================================== */ /* ---- 1) TOKENS PRIMITIVOS -------------------------------------------------- */ :root{ --r-xs:8px; --r-sm:14px; --r-md:20px; --r-pill:999px; --topbar-h:64px; --z-topbar:50; --z-fab:80; --z-toast:90; --z-drawer:100; /* densidad (cozy por defecto) */ --fs:1; --sp:1; --content-max:1280px; --space-1:calc(.4rem*var(--sp)); --space-2:calc(.7rem*var(--sp)); --space-3:calc(1rem*var(--sp)); --space-4:calc(1.5rem*var(--sp)); --space-5:calc(2.4rem*var(--sp)); --space-6:calc(4rem*var(--sp)); } /* ---- 2) TOKENS SEMÁNTICOS (defecto = skin Paper, tema claro) --------------- */ :root, :root[data-skin="paper"]{ --font-head:Georgia,"Iowan Old Style","Times New Roman",serif; --font-body:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --app-bg:radial-gradient(circle at top left,#e4f6ec,transparent 34rem), linear-gradient(135deg,#fffaf1,#f7efe0 55%,#ecf6ef); --surface:#ffffff; --surface-2:#f3ead7; --surface-elev:#ffffff; --text:#172026; --text-muted:#55636c; --border:#e7dcc6; --border-strong:#cdbf a3; --focus:#0b6bcb; --shadow-1:0 1px 2px rgba(31,38,45,.06); --shadow-2:0 12px 30px rgba(31,38,45,.08); --shadow-3:0 24px 70px rgba(31,38,45,.14); --card-blur:14px; } /* corrige el valor con espacio accidental */ :root,:root[data-skin="paper"]{--border-strong:#cdbfa3} /* acento por defecto (verde libro) */ :root,:root[data-accent="verde"]{--accent:#1f6f55;--on-accent:#ffffff} /* ---- 3) OVERRIDES ---------------------------------------------------------- */ /* Paper — oscuro */ [data-skin="paper"][data-theme="dark"]{ --app-bg:radial-gradient(circle at top left,#16312a,transparent 34rem), linear-gradient(135deg,#15191c,#171a16 55%,#141a17); --surface:#1b211f; --surface-2:#232a26; --surface-elev:#212825; --text:#eef2ee; --text-muted:#a7b2ab; --border:#323b35; --border-strong:#475149; --focus:#7fb6ff; --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 12px 30px rgba(0,0,0,.45); --shadow-3:0 24px 70px rgba(0,0,0,.55); --card-blur:14px; } /* Pipeline — funcional profesional (SaaS frío, radio pequeño, nítido). Ref: executesql-approval-pipeline */ [data-skin="pipeline"]{ --font-head:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --font-body:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --r-xs:6px;--r-sm:8px;--r-md:10px; --app-bg:radial-gradient(circle at 18% -8%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 36%),#f7f8fb; --surface:#ffffff;--surface-2:#f1f5f9;--surface-elev:#ffffff; --text:#172033;--text-muted:#5b6677;--border:#d8dee9;--border-strong:#b9c2d0; --focus:#2563eb; --shadow-1:0 1px 2px rgba(23,32,51,.06);--shadow-2:0 10px 28px rgba(23,32,51,.09);--shadow-3:0 18px 44px rgba(23,32,51,.12); --card-blur:0px; } [data-skin="pipeline"][data-theme="dark"]{ --app-bg:radial-gradient(circle at 18% -8%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 38%),#0b1220; --surface:#111a2b;--surface-2:#16213a;--surface-elev:#131d31; --text:#e6ecf5;--text-muted:#9aa7bd;--border:#243149;--border-strong:#33425f; --focus:#7fb6ff; --shadow-1:0 1px 2px rgba(0,0,0,.4);--shadow-2:0 10px 28px rgba(0,0,0,.45);--shadow-3:0 18px 44px rgba(0,0,0,.55); } /* Presentación — deck cálido (radio grande, glows de acento, sombras suaves). Ref: fase-3-resumen-ejecutivo */ [data-skin="present"]{ --font-head:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --font-body:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --r-xs:12px;--r-sm:18px;--r-md:28px; --app-bg:radial-gradient(900px 500px at 12% -10%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%),radial-gradient(700px 420px at 90% 6%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 62%),#f7f6f3; --surface:#ffffff;--surface-2:#fbfaf8;--surface-elev:#ffffff; --text:#1f2937;--text-muted:#5f6775;--border:#e8e5df;--border-strong:#d6d2c9; --focus:#7c3aed; --shadow-1:0 6px 18px rgba(31,41,55,.06);--shadow-2:0 18px 48px rgba(31,41,55,.12);--shadow-3:0 28px 70px rgba(31,41,55,.16); --card-blur:6px; } [data-skin="present"][data-theme="dark"]{ --app-bg:radial-gradient(900px 500px at 12% -10%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 60%),radial-gradient(700px 420px at 90% 6%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 62%),#101014; --surface:#17171d;--surface-2:#1e1e26;--surface-elev:#1b1b22; --text:#f5f6fb;--text-muted:#a8acba;--border:#2a2a35;--border-strong:#3a3a47; --focus:#c4b5fd; --shadow-1:0 6px 18px rgba(0,0,0,.3);--shadow-2:0 18px 48px rgba(0,0,0,.45);--shadow-3:0 28px 70px rgba(0,0,0,.55); } /* Dashboard — técnico/negociación (slate denso, nítido). Ref: dashboard-v2-negociacion */ [data-skin="dashboard"]{ --font-head:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --font-body:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --r-xs:6px;--r-sm:8px;--r-md:12px; --app-bg:#f1f5f9; --surface:#ffffff;--surface-2:#f1f5f9;--surface-elev:#ffffff; --text:#0f172a;--text-muted:#566275;--border:#e2e8f0;--border-strong:#cbd5e1; --focus:#4f46e5; --shadow-1:0 1px 2px rgba(15,23,42,.06);--shadow-2:0 8px 22px rgba(15,23,42,.08);--shadow-3:0 16px 40px rgba(15,23,42,.12); --card-blur:0px; } [data-skin="dashboard"][data-theme="dark"]{ --app-bg:#0f172a; --surface:#1e293b;--surface-2:#334155;--surface-elev:#1e293b; --text:#f1f5f9;--text-muted:#a3b0c2;--border:#334155;--border-strong:#475569; --focus:#a5b4fc; --shadow-1:0 1px 2px rgba(0,0,0,.4);--shadow-2:0 8px 22px rgba(0,0,0,.45);--shadow-3:0 16px 40px rgba(0,0,0,.55); } /* Contraste — claro (alto contraste, bordes marcados) */ [data-skin="contrast"]{ --font-head:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --font-body:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --app-bg:#ffffff; --surface:#ffffff; --surface-2:#f1f1f1; --surface-elev:#ffffff; --text:#000000; --text-muted:#2b2b2b; --border:#000000; --border-strong:#000000; --focus:#0b3d91; --shadow-1:none; --shadow-2:none; --shadow-3:none; --card-blur:0px; } /* Contraste — oscuro */ [data-skin="contrast"][data-theme="dark"]{ --app-bg:#000000; --surface:#000000; --surface-2:#141414; --surface-elev:#0a0a0a; --text:#ffffff; --text-muted:#e6e6e6; --border:#ffffff; --border-strong:#ffffff; --focus:#9ec5ff; --shadow-1:none; --shadow-2:none; --shadow-3:none; --card-blur:0px; } /* acentos (par texto/acento verificado; on-accent = blanco) */ [data-accent="terracota"]{--accent:#c2562f;--on-accent:#fff} [data-accent="indigo"]{--accent:#3b4fb0;--on-accent:#fff} [data-accent="ciruela"]{--accent:#7a3b8f;--on-accent:#fff} [data-accent="teal"]{--accent:#0f766e;--on-accent:#fff} [data-accent="ambar"]{--accent:#b45309;--on-accent:#fff} /* densidades */ [data-density="compact"]{--fs:.94;--sp:.82;--content-max:1100px} [data-density="roomy"]{--fs:1.06;--sp:1.16;--content-max:1480px} /* ---- 4) BASE + RESET ------------------------------------------------------- */ *{box-sizing:border-box} html{scroll-behavior:smooth;color-scheme:light} html[data-theme="dark"]{color-scheme:dark} body{ margin:0; background:var(--app-bg); min-height:100vh; color:var(--text); font-family:var(--font-body); font-size:calc(1rem*var(--fs)); line-height:1.55; -webkit-font-smoothing:antialiased; } h1,h2,h3{font-family:var(--font-head);line-height:1.08;margin:0} a{color:inherit} img{max-width:100%} [hidden]{display:none!important} ::selection{background:var(--accent);color:var(--on-accent)} /* ---- 5) COMPONENTES -------------------------------------------------------- */ /* Topbar / navegación */ .topbar{position:sticky;top:0;z-index:var(--z-topbar);display:flex;align-items:center; gap:var(--space-3);justify-content:space-between;min-height:var(--topbar-h); padding:.6rem clamp(1rem,3vw,2rem); background:color-mix(in srgb,var(--surface) 82%,transparent); backdrop-filter:blur(var(--card-blur));border-bottom:1px solid var(--border)} .brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--text)} .brand-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:12px; background:var(--accent);color:var(--on-accent);font-weight:900;font-family:var(--font-head)} .brand strong{font-size:1.02rem} .brand small{display:block;color:var(--text-muted);font-size:.76rem} .topbar-actions{display:flex;align-items:center;gap:.5rem} .nav{display:flex;gap:.4rem;flex-wrap:wrap} .nav a{color:var(--text);text-decoration:none;font-weight:650;font-size:.92rem; padding:.5rem .7rem;border-radius:var(--r-pill);min-height:40px;display:inline-flex;align-items:center} .nav a:hover{background:var(--surface-2)} .nav a[aria-current="true"]{background:var(--accent);color:var(--on-accent)} .nav a[hidden]{display:none!important} /* Toggle de modo (Familias / Consola AFA) */ .mode-toggle{display:inline-flex;background:var(--surface-2);border:1px solid var(--border); border-radius:var(--r-pill);padding:3px;gap:2px} .mode-toggle button{border:0;background:transparent;color:var(--text-muted);font-weight:800; font-size:.85rem;padding:.45rem .8rem;border-radius:var(--r-pill);cursor:pointer;min-height:38px} .mode-toggle button[aria-pressed="true"]{background:var(--surface);color:var(--text);box-shadow:var(--shadow-1)} /* Botón icono (apariencia, hamburguesa) */ .icon-btn{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--border); background:var(--surface);color:var(--text);border-radius:var(--r-pill); padding:.5rem .8rem;min-height:40px;min-width:40px;justify-content:center;cursor:pointer;font-weight:750} .icon-btn:hover{background:var(--surface-2)} .nav-toggle{display:none} /* Botones */ .btn{border:1px solid transparent;border-radius:var(--r-pill);padding:.78rem 1.15rem; font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;justify-content:center; align-items:center;min-height:44px;font-family:var(--font-body)} .btn.primary{background:var(--accent);color:var(--on-accent)} .btn.secondary{background:var(--surface);color:var(--text);border-color:var(--border)} @media (prefers-reduced-motion:no-preference){.btn{transition:transform .12s,background .15s}.btn:hover{transform:translateY(-1px)}} .btn:hover{background:color-mix(in srgb,var(--accent) 88%,#000)} .btn.secondary:hover{background:var(--surface-2)} /* Tarjetas / superficies */ .card,.glass{background:color-mix(in srgb,var(--surface-elev) 88%,transparent); border:1px solid var(--border);box-shadow:var(--shadow-2); backdrop-filter:blur(var(--card-blur));border-radius:var(--r-md)} .eyebrow{text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:800;font-size:.76rem} .badge,.tag{display:inline-flex;align-items:center;border-radius:var(--r-pill); background:var(--surface-2);color:var(--text);padding:.32rem .7rem;font-weight:700;font-size:.78rem; border:1px solid var(--border)} .muted,.lead{color:var(--text-muted)} /* Layout de secciones */ .section{padding:clamp(2rem,5vw,4rem) clamp(1rem,5vw,4rem);max-width:var(--content-max);margin:auto; scroll-margin-top:calc(var(--topbar-h) + 1rem)} .section-title{max-width:64ch;margin-bottom:var(--space-4)} .section-title h2{font-size:clamp(1.7rem,3.4vw,2.6rem);margin:.2rem 0} .row-title{display:flex;justify-content:space-between;gap:1rem;align-items:end;max-width:none} /* Hero (más contenido, menos alto) */ .hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:2rem; align-items:center;min-height:clamp(26rem,62vh,42rem)} .hero h1{font-size:clamp(2.1rem,4.6vw,3.7rem);margin:.6rem 0} .hero h1 .mark{background:linear-gradient(transparent 70%,color-mix(in srgb,var(--accent) 22%,transparent) 0);padding:0 .05em} .lead{font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:60ch} .hero-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.1rem} .hero-card{padding:1.6rem} .metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:1.2rem 0} .metric-row div,.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm); padding:.9rem;text-align:center;box-shadow:var(--shadow-1)} .metric-row strong,.stat strong{display:block;font-size:1.8rem;font-family:var(--font-head)} .metric-row span,.stat span{color:var(--text-muted);font-size:.85rem} /* Grids de tarjetas */ .flow-grid,.catalog-grid,.admin-grid,.negotiation-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem} .flow-step,.book-card,.negotiation-card{background:var(--surface);border:1px solid var(--border); border-radius:var(--r-md);padding:1.2rem;box-shadow:var(--shadow-1)} .flow-step span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px; background:var(--accent);color:var(--on-accent);font-weight:900} .flow-step h3{margin:.6rem 0 .3rem;font-size:1.1rem} /* Catálogo */ .filters{padding:1rem;display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:.7rem;margin-bottom:1rem} .book-card h3{margin:.7rem 0 .35rem;font-size:1.15rem} .book-meta{color:var(--text-muted);line-height:1.55;font-size:.92rem} .book-footer{display:flex;justify-content:space-between;gap:.8rem;align-items:center;margin-top:1rem} .price{font-size:1.2rem;font-weight:900;color:var(--accent);font-family:var(--font-head)} /* Dos columnas */ .two-col{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start} .two-col.reverse>.intro{order:2} /* Formularios */ .form-card,.feedback-panel,.negotiation-form,.compact-form{padding:1.1rem;display:grid;gap:.8rem} .form-card label,.feedback-panel label,.negotiation-form label{display:grid;gap:.3rem;font-weight:700;font-size:.92rem} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem} input,select,textarea{border:1px solid var(--border);background:var(--surface);color:var(--text); border-radius:var(--r-sm);padding:.75rem .85rem;font:inherit;min-height:44px;width:100%} textarea{resize:vertical;min-height:5rem} .form-card label.check,.feedback-panel label.check,.negotiation-form label.check{display:flex;align-items:flex-start;gap:.55rem;font-weight:600} .check input{width:auto;min-height:auto;margin-top:.2rem} label.check{min-height:44px;padding:.2rem 0;display:flex;align-items:flex-start;gap:.55rem}/* WCAG 2.1: target táctil ≥44px (la label sencera és clicable) */ .pricing-banner{margin:0 0 .85rem;padding:.55rem .9rem;border:1px solid var(--border,#c9cdc7);border-radius:.55rem;font-weight:600;font-size:.92rem;line-height:1.45} .pricing-banner:empty{display:none} .info-box,.agreement-box,.selected-list{background:var(--surface-2);border:1px solid var(--border); border-radius:var(--r-sm);padding:1rem} .info-box code,code{background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:.12rem .35rem} .selected-item{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px dashed var(--border-strong)} .form-result{font-weight:700;color:var(--accent);min-height:1.2rem} .file-label{border:1px dashed var(--border-strong);border-radius:var(--r-sm);padding:.9rem; background:var(--surface);display:grid;gap:.4rem;font-weight:700} output{font-weight:800;color:var(--accent)} /* Asistente / chat */ .prompt-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem} .prompt-chips button{border:1px solid var(--border);background:var(--surface);color:var(--text); border-radius:var(--r-pill);padding:.55rem .85rem;cursor:pointer;min-height:40px} .prompt-chips button:hover{background:var(--surface-2)} .chat-card{padding:1rem} .chat-log{height:min(50vh,360px);overflow:auto;display:grid;gap:.7rem;align-content:start} .msg{padding:.8rem 1rem;border-radius:var(--r-md);max-width:85%} .msg.user{justify-self:end;background:var(--accent);color:var(--on-accent)} .msg.ai{justify-self:start;background:var(--surface-2);border:1px solid var(--border)} .msg small{display:block;margin-top:.35rem;color:var(--text-muted);font-weight:700} .chat-form{display:flex;gap:.6rem;margin-top:.8rem} .chat-form input{flex:1} /* Encabezado + contador de condiciones de reserva */ .agree-head{display:flex;justify-content:space-between;align-items:center;font-weight:600;margin:.3rem 0 .45rem} .agree-count{font-variant-numeric:tabular-nums;color:var(--text-muted);border:1px solid var(--border);border-radius:999px;padding:.05rem .55rem;font-size:.82rem} .agree-count.done{color:var(--accent);border-color:var(--accent)} .legal-link{text-decoration:none;color:var(--accent);font-weight:700} .site-footer{max-width:1100px;margin:var(--space-5) auto 0;padding:var(--space-3) var(--space-4);border-top:1px solid var(--border);text-align:center;font-size:.86rem} .site-footer nav a{color:var(--text-muted);text-decoration:none;margin:0 .15rem} .site-footer nav a:hover{color:var(--accent)} .site-footer .muted{margin:.4rem 0 0} /* Panel de cálculo del dashboard AFA */ .admin-calc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:1rem;margin:0 0 1.2rem;box-shadow:var(--shadow-1)} .admin-calc h3{margin:0 0 .6rem;font-size:1rem;font-family:var(--font-head)} .admin-calc .prog{height:12px;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;overflow:hidden} .admin-calc .prog span{display:block;height:100%;background:var(--accent);transition:width .4s} .admin-calc .prog-cap{margin:.45rem 0 .85rem;font-size:.9rem;color:var(--text-muted)} .admin-calc .prog-cap strong{color:var(--text)} .admin-calc .calc-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.6rem} .admin-calc .calc-row div{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:.6rem;text-align:center} .admin-calc .calc-row strong{display:block;font-size:1.2rem;font-family:var(--font-head)} .admin-calc .calc-row span{font-size:.8rem;color:var(--text-muted)} ::placeholder{color:var(--text-muted);opacity:1} /* Chat flotante arrastrable (FAB + panel) */ .chat-fab{position:fixed;inset-inline-end:1rem;inset-block-end:1rem;z-index:var(--z-fab);width:56px;height:56px;border:0;border-radius:50%;background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-2);cursor:grab;font-size:1.45rem;line-height:1;display:flex;align-items:center;justify-content:center;touch-action:none;-webkit-user-select:none;user-select:none} .chat-fab:active{cursor:grabbing} .chat-fab:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .chat-panel{position:fixed;inset-block-end:5.2rem;inset-inline-end:1rem;z-index:var(--z-fab);width:min(360px,calc(100vw - 2rem));background:var(--surface-elev);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-3);display:flex;flex-direction:column;overflow:hidden} .chat-panel[hidden]{display:none} .chat-panel-head{display:flex;align-items:center;justify-content:space-between;padding:.7rem .9rem;border-bottom:1px solid var(--border);background:var(--surface-2)} .chat-panel-head strong{font-family:var(--font-head)} .chat-panel-actions{display:flex;gap:.35rem} .chat-icon{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:8px;width:30px;height:30px;cursor:pointer;font-size:.95rem;line-height:1} .chat-icon:hover{background:var(--surface-2)} .chat-panel .chat-log{height:min(46vh,340px);padding:.8rem;margin:0} .chat-panel .chat-form{padding:.7rem;margin:0;border-top:1px solid var(--border)} .chat-panel .chat-form button{min-width:46px} .chat-panel[data-size="small"]{width:min(300px,calc(100vw - 2rem))} .chat-panel[data-size="small"] .chat-log{height:min(38vh,260px)} .chat-panel[data-size="large"]{width:min(560px,calc(100vw - 2rem))} .chat-panel[data-size="large"] .chat-log{height:min(72vh,620px)} .chat-consent{display:flex;align-items:center;gap:.4rem;padding:.1rem .7rem .6rem;font-size:.73rem;color:var(--text-muted);line-height:1.3} .chat-consent a{color:var(--accent);text-decoration:none;font-weight:700} @media (max-width:480px){.chat-panel{inset-inline:.5rem;width:auto}} /* Negociación */ .negotiation-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem} .rec{font-size:.76rem;color:var(--text-muted);font-weight:800} /* Panel AFA */ .admin-panels{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0} .compact-form{display:flex;flex-wrap:wrap;gap:.6rem;padding:0} .compact-form input,.compact-form select{flex:1;min-width:8rem} .table-card{padding:1rem;margin-top:1rem} .table-wrap{overflow:auto} table{width:100%;border-collapse:collapse} th,td{text-align:start;border-bottom:1px solid var(--border);padding:.7rem;vertical-align:top} th{color:var(--text-muted);font-size:.82rem} /* Widget de feedback */ .feedback-widget{position:fixed;inset-inline-end:1rem;inset-block-end:1rem;z-index:var(--z-fab); width:min(24rem,calc(100vw - 2rem))} .feedback-toggle{width:100%;border:0;border-radius:var(--r-sm) var(--r-sm) 0 0;background:var(--text); color:var(--surface);padding:.85rem;font-weight:900;cursor:pointer;min-height:44px} .feedback-panel{background:var(--surface);border-radius:0 0 var(--r-sm) var(--r-sm); border:1px solid var(--border);box-shadow:var(--shadow-3)} .feedback-widget.collapsed .feedback-panel{display:none} /* Feedback por pantalla (D3) */ .screen-fb-fab{position:fixed;inset-inline-start:1rem;inset-block-end:1rem;z-index:var(--z-fab);display:inline-flex;align-items:center;gap:.45rem;padding:.6rem .95rem;border:0;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-2);cursor:pointer;font:600 .9rem/1 var(--font-body)} .screen-fb-fab:hover{filter:brightness(1.06)} .screen-fb-fab:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .screen-fb-body{display:flex;flex-direction:column;gap:var(--space-2);padding:1rem var(--space-3) var(--space-3)} .screen-fb-body label{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;color:var(--text-muted)} .screen-fb-body select,.screen-fb-body textarea{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xs);padding:.5rem;width:100%} /* Banner demo */ .demo-banner{display:flex;align-items:center;gap:.75rem;justify-content:center;background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--text);border:1px solid var(--border);border-radius:var(--r-sm);padding:.5rem .9rem;margin:0 0 var(--space-3);font-size:.9rem} .demo-banner span{flex:1;text-align:center} .demo-banner-x{border:0;background:transparent;color:var(--text-muted);cursor:pointer;font-size:1rem;line-height:1;padding:.2rem .4rem;border-radius:var(--r-xs)} .demo-banner-x:hover{color:var(--text)} .demo-banner-x:focus-visible{outline:2px solid var(--focus);outline-offset:2px} /* Toast */ .toast{position:fixed;left:50%;inset-block-end:1rem;transform:translateX(-50%) translateY(220%); background:var(--text);color:var(--surface);border-radius:var(--r-pill);padding:.8rem 1.1rem;z-index:var(--z-toast)} @media (prefers-reduced-motion:no-preference){.toast{transition:transform .25s}} .toast.show{transform:translateX(-50%) translateY(0)} /* Panel de apariencia (dialog drawer) */ dialog.appearance{margin:0 0 0 auto;height:100dvh;max-height:100dvh;width:min(24rem,100vw); border:0;border-inline-start:1px solid var(--border);background:var(--surface);color:var(--text); box-shadow:var(--shadow-3);padding:0;z-index:var(--z-drawer)} dialog.appearance::backdrop{background:rgba(0,0,0,.4)} .appearance-head{display:flex;justify-content:space-between;align-items:center;gap:1rem; padding:1rem 1.2rem;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface)} .appearance-head h2{font-size:1.2rem} .appearance-body{padding:1.2rem;display:grid;gap:1.4rem;overflow:auto} .appearance fieldset{border:0;padding:0;margin:0;display:grid;gap:.6rem} .appearance legend{font-weight:800;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);padding:0} .segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem} .segmented button,.chips button{border:1px solid var(--border);background:var(--surface);color:var(--text); border-radius:var(--r-sm);padding:.6rem;cursor:pointer;font-weight:700;min-height:44px} .segmented button[aria-pressed="true"],.chips button[aria-pressed="true"]{ background:var(--accent);color:var(--on-accent);border-color:transparent} .chips{display:flex;gap:.4rem;flex-wrap:wrap} .skin-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem} .skin-card{border:1px solid var(--border);border-radius:var(--r-sm);padding:.5rem;cursor:pointer; background:var(--surface);text-align:center;display:grid;gap:.4rem;min-height:64px;font-weight:700;font-size:.82rem} .skin-card[aria-pressed="true"]{outline:2px solid var(--accent);outline-offset:1px} .skin-prev{height:26px;border-radius:6px;border:1px solid var(--border)} .swatches{display:flex;gap:.5rem;flex-wrap:wrap} .swatch{width:40px;height:40px;border-radius:50%;border:2px solid var(--border);cursor:pointer;padding:0} .swatch[aria-pressed="true"]{outline:2px solid var(--text);outline-offset:2px} /* ---- 6) UTILIDADES + A11Y + RESPONSIVE ------------------------------------ */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip-link{position:absolute;left:.5rem;top:-3rem;z-index:200;background:var(--accent);color:var(--on-accent); padding:.6rem 1rem;border-radius:var(--r-sm);transition:top .15s} .skip-link:focus{top:.5rem} :focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px} :focus:not(:focus-visible){outline:none} .overdue{display:inline-block;background:var(--warn,#d8a200);color:#1a1a1a;border-radius:var(--r-pill,999px);padding:.05rem .5rem;font-size:.72rem;font-weight:800;white-space:nowrap} .field-help{display:block;font-size:.78rem;color:var(--text-muted);margin-top:.25rem} .next-steps{margin:.4rem 0;padding-inline-start:1.2rem;font-size:.9rem}.next-steps li{margin:.2rem 0} .delivered{display:inline-block;background:var(--ok,#1f9d55);color:#fff;border-radius:var(--r-pill,999px);padding:.05rem .5rem;font-size:.72rem;font-weight:800} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } /* RTL: con propiedades lógicas casi todo funciona solo; ajustes puntuales */ [dir="rtl"] .skip-link{left:auto;right:.5rem} [dir="rtl"] .toast{left:auto;right:50%;transform:translateX(50%) translateY(220%)} [dir="rtl"] .toast.show{transform:translateX(50%) translateY(0)} @media (max-width:850px){ .hero,.two-col,.admin-panels{grid-template-columns:1fr} .two-col.reverse>.intro{order:0} .filters{grid-template-columns:1fr} .nav{display:none;position:absolute;top:var(--topbar-h);inset-inline:0;flex-direction:column; background:var(--surface);border-bottom:1px solid var(--border);padding:.6rem 1rem;gap:.2rem; box-shadow:var(--shadow-3)} .nav.open{display:flex} .nav a{width:100%} .nav-toggle{display:inline-flex} .mode-toggle{order:3} .mode-toggle button{font-size:.78rem;padding:.4rem .6rem} .brand small{display:none} #appearanceBtn span[data-i18n]{display:none} .topbar{gap:.45rem} .chat-form,.compact-form{flex-direction:column} .check input{width:22px;height:22px;min-width:22px;flex-shrink:0;margin-top:1px} .agreement-box{padding:.75rem} }