/* Base compartida de las demos avanzadas. Cada demo define sus colores y letras en tema.css. No editar la copia: editar E:\Proyectos\demos-kit\kit.css */
:root{--fondo:#f4f2ec;--papel:#fff;--tinta:#16201e;--gris:#626c69;--linea:#dfdbd0;--pri:#0f5c5c;--pri-o:#0a4545;--pri-c:#dcecea;--ace:#f4c430;--ace-t:#16201e;
  --ok:#1f7a4d;--ok-c:#dff1e6;--ojo:#a86a00;--ojo-c:#fbefd2;--mal:#c13a2a;--mal-c:#f9e2de;--f-tit:system-ui,sans-serif;--f-txt:system-ui,sans-serif;--f-mono:ui-monospace,monospace;--radio:18px;
  --sombra:0 1px 2px rgba(0,0,0,.05),0 10px 28px rgba(0,0,0,.09);--ease:cubic-bezier(0.23,1,0.32,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:74px}
body{background:var(--fondo);color:var(--tinta);font:16.5px/1.5 var(--f-txt);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--f-tit);line-height:1.05;letter-spacing:-.02em}
a{color:inherit}button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ace);outline-offset:2px}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.c{max-width:1140px;margin:0 auto;padding:0 18px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.aviso{background:var(--tinta);color:#fff;font-size:13px;text-align:center;padding:6px 14px}.aviso a{color:var(--ace)}
.barra{position:sticky;top:0;z-index:6;background:color-mix(in srgb,var(--fondo) 94%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.barra .c{display:flex;align-items:center;gap:14px;height:62px}
.marca{display:flex;align-items:center;gap:10px;font:800 19px var(--f-tit);letter-spacing:-.02em;text-decoration:none;white-space:nowrap;min-width:0}.marca span{overflow:hidden;text-overflow:ellipsis}
.marca i{flex:none;width:30px;height:30px;border-radius:9px;background:var(--pri);box-shadow:inset 0 0 0 7px var(--pri),inset 0 0 0 30px var(--ace)}
.barra nav{margin-left:auto;display:flex;gap:20px;font-weight:600;font-size:15px}.barra nav a{text-decoration:none;color:var(--gris)}.barra .btn{margin-left:auto}.barra nav+.btn{margin-left:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:calc(var(--radio) - 6px);background:var(--pri);color:#fff;font-weight:700;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:transform .15s var(--ease),background .15s ease}
.btn:active{transform:scale(.97)}.btn.ace{background:var(--ace);color:var(--ace-t)}.btn.lin{background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 2px var(--tinta)}.btn.chico{min-height:44px;padding:0 14px;font-size:15px}.btn.ancho{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.enlace{background:none;border:0;color:inherit;text-decoration:underline;cursor:pointer;min-height:44px;padding:0 4px;font-weight:600}
@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--pri-o)}.btn.ace:hover{filter:brightness(.95);background:var(--ace)}.btn.lin:hover{background:var(--tinta);color:#fff}.barra nav a:hover{color:var(--tinta)}.fila:hover{border-color:var(--pri)}}
.portada{padding:26px 0 12px}.et{font:600 12.5px var(--f-mono);letter-spacing:1.6px;text-transform:uppercase;color:var(--pri)}
.titular{font-size:clamp(34px,5.6vw,64px);margin:10px 0 12px;max-width:18ch}.portada p{font-size:18px;color:color-mix(in srgb,var(--tinta) 80%,var(--fondo));max-width:52ch}
h2{font-size:clamp(25px,3.4vw,36px);margin:22px 0 6px}.bajada{color:var(--gris);max-width:64ch;margin-bottom:14px}
.caja{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:18px}
.dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}.tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.g2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.campo{margin-bottom:12px}.campo label,.lab{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.campo input:not([type=checkbox]):not([type=range]),.campo select,.campo textarea{width:100%;min-height:48px;border-radius:12px;border:2px solid var(--linea);background:#fff;padding:0 12px;font-weight:600}.campo textarea{padding:10px 12px;min-height:84px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--pri);outline:0}
input[type=range]{width:100%;height:44px;accent-color:var(--pri)}
.ops{display:flex;gap:6px;flex-wrap:wrap}.op{flex:1;min-height:46px;padding:0 12px;border-radius:12px;border:2px solid var(--linea);background:#fff;font-weight:700;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.op[aria-pressed=true]{background:var(--tinta);border-color:var(--tinta);color:#fff}
.tilde{display:flex;align-items:center;gap:10px;min-height:46px;cursor:pointer;font-weight:600}.tilde input{width:22px;height:22px;accent-color:var(--pri)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}.tab{min-height:46px;padding:0 16px;border-radius:999px;border:2px solid var(--linea);background:var(--papel);font-weight:700;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}.tab[aria-selected=true]{background:var(--tinta);border-color:var(--tinta);color:#fff}
.entra{animation:entra .3s var(--ease)}@keyframes entra{from{opacity:0;transform:translateY(8px)}}
.fila{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:2px solid var(--linea);border-radius:14px;margin-bottom:8px;background:var(--papel);transition:border-color .15s ease}
button.fila{width:100%;text-align:left;cursor:pointer}.fila b{display:block;line-height:1.2}.fila small{display:block;color:var(--gris);font-size:13.5px}.fila.activa{border-color:var(--pri);box-shadow:inset 4px 0 0 var(--pri)}
.pill{display:inline-block;font-weight:800;font-size:12.5px;padding:4px 10px;border-radius:999px;white-space:nowrap;background:var(--pri-c);color:var(--pri)}.pill.ok{background:var(--ok-c);color:var(--ok)}.pill.ojo{background:var(--ojo-c);color:var(--ojo)}.pill.mal{background:var(--mal-c);color:var(--mal)}.pill.gris{background:color-mix(in srgb,var(--linea) 60%,#fff);color:var(--gris)}
.kp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}.kp div{background:var(--papel);border:1px solid var(--linea);border-radius:16px;padding:12px 14px}.kp small{color:var(--gris);font-weight:700;font-size:13px}.kp b{display:block;font:700 28px var(--f-mono);letter-spacing:-1px}
.dato{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--linea)}.dato:first-child{border:0}.dato span{color:var(--gris)}.dato b{text-align:right}
.burbuja{background:#dcf5d6;color:#16201e;border-radius:16px 16px 16px 4px;padding:12px 14px;font-size:15.5px;line-height:1.45}.burbuja small{display:block;margin-top:6px;font-size:11.5px;color:#5f7a58;text-align:right}
.nota{background:var(--ojo-c);border-radius:12px;padding:10px 12px;font-size:14.5px;margin:10px 0}.chica{font-size:13.5px;color:var(--gris)}
.vacio{padding:20px;border:2px dashed var(--linea);border-radius:16px;color:var(--gris);text-align:center}
.barra-p{height:12px;border-radius:6px;background:color-mix(in srgb,var(--linea) 70%,#fff);overflow:hidden}.barra-p i{display:block;height:100%;border-radius:6px;background:var(--pri);transition:width .4s var(--ease)}
.cant{display:flex;align-items:center;border:2px solid var(--linea);border-radius:10px;background:#fff}.cant button{width:44px;height:44px;border:0;background:none;font-size:20px;font-weight:700;cursor:pointer}.cant span{min-width:30px;text-align:center;font:600 16px var(--f-mono)}
.qr{border-radius:12px;display:block}.qr-falta{display:grid;place-items:center;background:#eee;border-radius:12px;color:#999}
.x{color:var(--gris);font-style:italic}
.pie-web{padding:20px 0 96px;color:var(--gris);font-size:13.5px}
#tostada{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);background:var(--tinta);color:#fff;padding:12px 18px;border-radius:12px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease);z-index:12;max-width:calc(100vw - 32px);text-align:center}#tostada.ver{opacity:1;transform:translate(-50%,0)}
@media (max-width:860px){.barra nav{display:none}.dos,.tres{grid-template-columns:minmax(0,1fr)}.kp{grid-template-columns:1fr 1fr}.portada{padding:18px 0 8px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
.portada{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:24px;align-items:center}.portada img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radio);display:block}
.es-panel #app{padding-top:6px}.t{width:100%;border-collapse:collapse;font-size:15px}.t th{text-align:left;font-size:13px;color:var(--gris);padding:8px 6px}.t td{padding:8px 6px;border-top:1px solid var(--linea);vertical-align:middle}.t input,.t select{min-height:44px;border-radius:10px;border:2px solid var(--linea);padding:0 8px;font-weight:600;width:100%;min-width:64px;background:#fff}.tabla-s{overflow-x:auto}
h3{font-size:19px;margin-bottom:8px}.sep{margin-top:14px}.fl{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
@media (max-width:860px){.portada{grid-template-columns:minmax(0,1fr);gap:12px}.portada img{aspect-ratio:21/9}}