/* Ocasella · Herramientas gratis (checklist, mesas, QR) */
.tool{max-width:1060px;margin:0 auto;padding:36px 20px 80px}
.tool__intro{max-width:640px;margin-bottom:28px}
.tool__intro h1{font-size:clamp(38px,5.4vw,60px);margin-bottom:10px}
.tool__intro p{color:var(--ink-soft);font-size:18px;margin:0}
.tool__free{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:6px 12px;border-radius:999px;background:#E9F2E4;color:#3F6B3A;font-size:13.5px;font-weight:500}
.tool__free .ico{width:16px;height:16px}
.tool__grid{display:grid;grid-template-columns:380px minmax(0,1fr);gap:32px;align-items:start}
.tool__form{position:sticky;top:90px;padding:22px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--line),0 30px 60px -44px rgba(43,35,32,.5)}
.tool__form label{display:grid;gap:6px;margin:0 0 14px;font-size:14px;font-weight:500}
.tool__form input,.tool__form select,.tool__form textarea{width:100%;min-height:46px;padding:10px 12px;border:1px solid #D8CCBF;border-radius:10px;background:var(--ivory);color:var(--ink);font:400 16px var(--sans)}
.tool__form textarea{min-height:120px;resize:vertical;line-height:1.45}
.tool__form small{font-weight:400;color:var(--ink-soft);font-size:13px}
.tool__form .btn{width:100%;justify-content:center;margin-top:4px}
.kinds{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:14px}
.kinds button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:500 13px var(--sans);cursor:pointer}
.kinds button[aria-pressed=true]{border-color:var(--lacre);color:var(--lacre);box-shadow:0 0 0 1px var(--lacre) inset}
.kinds .ico{width:22px;height:22px}
.tool__out{min-height:300px}
.tool__empty{padding:40px 24px;border-radius:20px;border:1.5px dashed var(--line);text-align:center;color:var(--ink-soft)}
.tool__empty .ico{width:40px;height:40px;color:var(--champ);margin:0 auto 10px}
.tool__msg{min-height:1.4em;margin:8px 0 0;font-size:14px;color:var(--lacre-dark)}
.tool__bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 16px}
.tool__bar .btn{min-height:44px;padding:0 18px;font-size:15px}
.tool__bar .muted{margin-left:auto}
.ia-tag{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-soft)}
.ia-tag .ico{width:15px;height:15px;color:var(--lacre)}
/* Checklist */
.ck-block{margin:0 0 22px;padding:18px 20px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.ck-block h2{display:flex;align-items:baseline;gap:10px;font-size:24px;margin:0 0 10px}
.ck-block h2 small{font:400 13px var(--sans);color:var(--ink-soft)}
.ck-block ul{list-style:none;margin:0;padding:0}
.ck{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.ck input{width:22px;height:22px;min-height:0;margin:2px 0 0;padding:0;border:0;border-radius:4px;background:none;accent-color:var(--lacre);flex:none}
.ck span{flex:1;font-size:16px;line-height:1.4}
.ck small{display:block;color:var(--ink-soft);font-size:13.5px;margin-top:2px}
.ck.done span{color:var(--ink-soft);text-decoration:line-through}
.ck i{font-style:normal;font-size:11px;padding:2px 7px;border-radius:999px;background:#FBF4E8;color:var(--lacre-dark);margin-left:6px;vertical-align:middle}
.ck-add{display:flex;gap:8px;margin-top:10px}
.ck-add input{flex:1;min-height:42px;padding:8px 12px;border:1px solid #D8CCBF;border-radius:10px;font:400 15px var(--sans)}
.ck-add button{min-height:42px;padding:0 14px;border:0;border-radius:10px;background:var(--linen);color:var(--ink);font:500 14px var(--sans);cursor:pointer}
.ck-prog{height:8px;border-radius:8px;background:var(--linen);overflow:hidden;margin:0 0 20px}
.ck-prog i{display:block;height:100%;width:0;background:var(--lacre);transition:width .4s}
/* Mesas */
.ms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.ms{padding:16px 14px 14px;border-radius:50% 50% 18px 18px / 30% 30% 18px 18px;background:#fff;box-shadow:0 0 0 1px var(--line);text-align:center}
.ms b{display:block;font:600 21px/1.1 var(--serif)}
.ms small{display:block;color:var(--ink-soft);font-size:12.5px;margin:2px 0 10px}
.ms ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.ms li{font-size:13px;padding:4px 10px;border-radius:999px;background:var(--ivory);box-shadow:0 0 0 1px var(--line)}
/* QR */
.qr-wrap{display:grid;place-items:center}
.qr-sheet{width:min(100%,420px);aspect-ratio:105/148.5;--u:1.3mm}
.qr-sheet .card{height:100%}
.qr-note{margin:14px 0 0;font-size:14px;color:var(--ink-soft);text-align:center}
/* Cierre */
.tool__cta{margin:36px 0 0;padding:28px;border-radius:22px;background:var(--linen);display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
.tool__cta h2{font-size:28px;margin:0 0 6px}
.tool__cta p{margin:0;color:var(--ink-soft)}
.hub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:8px}
.hub a{display:flex;flex-direction:column;padding:26px 22px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px var(--line);color:inherit;text-decoration:none;transition:box-shadow .2s,transform .2s}
.hub a:hover{box-shadow:0 0 0 1.5px var(--lacre);transform:translateY(-2px)}
.hub .ico{width:40px;height:40px;padding:9px;border-radius:12px;background:var(--linen);color:var(--lacre);margin-bottom:14px}
.hub h2{font-size:26px;margin:0 0 6px}
.hub p{margin:0 0 14px;color:var(--ink-soft);font-size:15.5px;flex:1}
.hub span{color:var(--lacre);font-weight:500;font-size:15px}
@media print{.top,.foot,.tool__form,.tool__bar,.tool__cta,.tool__intro p,.tool__free,.ck-add{display:none!important}.tool{padding:0}.tool__grid{grid-template-columns:1fr}.ck-block{box-shadow:none;border:1px solid #ccc;break-inside:avoid}}
@media (max-width:900px){.tool__grid{grid-template-columns:1fr}.tool__form{position:static}.hub{grid-template-columns:1fr}.tool__cta{grid-template-columns:1fr}}
@media (max-width:560px){.kinds{grid-template-columns:repeat(2,1fr)}.tool{padding:24px 16px 70px}}

/* Desplegables con la marca: flecha en lacre, mismo borde que los campos */
select{-webkit-appearance:none;appearance:none;padding-right:38px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%239E3A2F%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M6 9l6 6 6-6%27/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 12px center!important;background-size:16px 16px!important;cursor:pointer;color:var(--ink,#2B2320);transition:border-color .2s,box-shadow .2s}
select:hover{border-color:var(--lacre,#9E3A2F)!important}
select:focus{outline:none;border-color:var(--lacre,#9E3A2F)!important;box-shadow:0 0 0 3px rgba(232,201,154,.55)}
select:focus-visible{outline:none}
select option{background:#fff;color:#2B2320}
select:disabled{opacity:.6;cursor:default}