/* NeoKeys — una columna en el celu, dos en la compu. Tinta verde profunda + bronce de llave. */
:root{
  --bg:#f2f3ef; --paper:#ffffff; --ink:#16201b; --muted:#5b665f; --line:#dbe0d9; --soft:#e9eee8;
  --brand:#0f4c45; --brand-2:#0a3631; --on-brand:#ffffff; --key:#b9842a; --key-soft:#f5ead2;
  --ok:#2c7a4b; --ok-soft:#e1f1e6; --warn:#a96410; --warn-soft:#fbefd9; --crit:#ad3a3a; --crit-soft:#f8e3e1;
  --display:"Bricolage Grotesque",system-ui,sans-serif; --body:"Figtree",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --r:12px; --shadow:0 1px 2px rgba(16,32,27,.06),0 4px 14px rgba(16,32,27,.05);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f1412; --paper:#171e1b; --ink:#e8ede9; --muted:#9aa69f; --line:#29332e; --soft:#1e2723;
  --brand:#4bb3a6; --brand-2:#82d4c9; --on-brand:#0b1512; --key:#d9ab55; --key-soft:#372a12;
  --ok:#6cc58f; --ok-soft:#173125; --warn:#e3a55a; --warn-soft:#352813; --crit:#e48080; --crit-soft:#3a1c1c;
  --shadow:none; color-scheme:dark}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--brand)}
h1,h2,h3{font-family:var(--display);line-height:1.15;margin:0;text-wrap:balance}
h1{font-size:1.7rem;font-weight:700;letter-spacing:-.01em}
h2{font-size:1.2rem;font-weight:650}
h3{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
p{margin:0}
:focus-visible{outline:3px solid var(--key);outline-offset:2px;border-radius:6px}

/* barra superior */
.top{position:sticky;top:0;z-index:10;background:var(--brand-2);color:var(--on-brand)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .top{background:#0b1210;color:var(--ink);border-bottom:1px solid var(--line)}}
.top-in{max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;font-size:1.2rem;color:inherit;text-decoration:none}
.marca svg{width:26px;height:26px}
.cliente-actual{font-size:.85rem;opacity:.8;padding-left:10px;border-left:1px solid currentColor}
.nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto;align-items:center}
.nav a,.nav button{color:inherit;text-decoration:none;font:600 .9rem var(--body);padding:7px 10px;border-radius:8px;background:none;border:0;cursor:pointer}
.nav a:hover,.nav button:hover,.nav a.on{background:rgba(255,255,255,.14)}
.nav form{margin:0}

main{max-width:1100px;margin:0 auto;padding:24px 16px 64px;display:grid;gap:22px}
.cabecera{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cabecera p{color:var(--muted)}
.sub{color:var(--muted);font-size:.92rem}

/* bloques */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;display:grid;gap:12px;min-width:0}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:18px;align-items:start}
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.cifra{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.cifra b{display:block;font:700 1.8rem var(--display);font-variant-numeric:tabular-nums}
.cifra span{color:var(--muted);font-size:.88rem}

/* cerraduras */
.prop{display:grid;gap:10px}
.prop-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.cerraduras{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:12px}
.lock{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);color:inherit;text-decoration:none;box-shadow:var(--shadow);transition:border-color .15s,transform .15s}
.lock:hover{border-color:var(--brand);transform:translateY(-1px)}
.lock .ico{grid-row:span 2;width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:var(--soft);color:var(--brand)}
.lock .ico svg{width:22px;height:22px}
.lock b{font-weight:650}
.lock .meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:.82rem;color:var(--muted)}

.chip{display:inline-flex;align-items:center;gap:5px;font:700 .72rem var(--body);letter-spacing:.02em;padding:3px 8px;border-radius:99px;white-space:nowrap;background:var(--soft);color:var(--muted)}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.crit{background:var(--crit-soft);color:var(--crit)}
.chip.key{background:var(--key-soft);color:var(--key)}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor}

.bat{display:inline-flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums}
.bat i{display:inline-block;width:22px;height:10px;border:1.5px solid currentColor;border-radius:2px;position:relative}
.bat i::after{content:"";position:absolute;inset:1px auto 1px 1px;width:0;background:currentColor;border-radius:1px}
.bat i.n10::after{width:1.7px}.bat i.n20::after{width:3.4px}.bat i.n30::after{width:5.1px}.bat i.n40::after{width:6.8px}.bat i.n50::after{width:8.5px}.bat i.n60::after{width:10.2px}.bat i.n70::after{width:11.9px}.bat i.n80::after{width:13.6px}.bat i.n90::after{width:15.3px}.bat i.n100::after{width:17.0px}
.angosto{max-width:640px}
.centrado{max-width:600px;justify-self:center;width:100%}
.pila{display:grid;gap:10px}
.crece{flex:1}
.corto{max-width:220px}
h3 small.normal{text-transform:none;letter-spacing:0;font-weight:400}

/* tablas */
.tabla{overflow-x:auto;min-width:0}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:700 .72rem var(--body);text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
tr.apagado td{color:var(--muted)}
.vacio{color:var(--muted);padding:12px 0}

/* formularios */
form.grid{display:grid;gap:12px}
.fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px}
label{display:grid;gap:5px;font-weight:600;font-size:.9rem}
label small{font-weight:400;color:var(--muted)}
input,select,textarea{font:inherit;color:inherit;background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:10px 12px;width:100%;min-width:0}
input:focus,select:focus,textarea:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 .95rem var(--body);padding:11px 16px;border-radius:10px;border:1px solid transparent;cursor:pointer;text-decoration:none;background:var(--brand);color:var(--on-brand)}
.btn:hover{filter:brightness(1.08)}
.btn.sec{background:var(--paper);color:var(--ink);border-color:var(--line)}
.btn.peligro{background:var(--paper);color:var(--crit);border-color:var(--crit-soft)}
.btn.chico{padding:6px 10px;font-size:.82rem;border-radius:8px}
.btn.grande{padding:16px 22px;font-size:1.05rem}
.btn svg{width:18px;height:18px}
.acciones{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.inline{display:inline}

/* avisos */
.avisos{display:grid;gap:8px}
.aviso{padding:11px 14px;border-radius:10px;font-weight:600;font-size:.93rem}
.aviso.ok{background:var(--ok-soft);color:var(--ok)}
.aviso.error{background:var(--crit-soft);color:var(--crit)}
.nota{background:var(--key-soft);color:var(--ink);border-radius:10px;padding:12px 14px;font-size:.92rem}

/* ingreso */
.entrada{min-height:100%;display:grid;place-items:center;padding:24px 16px}
.entrada .card{width:min(100%,400px);padding:26px}
.entrada .marca{color:var(--brand-2);font-size:1.5rem;justify-content:center}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .entrada .marca{color:var(--brand)}}
.qr{display:grid;place-items:center;background:#fff;border-radius:10px;padding:10px;justify-self:center}
.qr img{width:200px;height:200px;image-rendering:pixelated}
.secreto{font-family:var(--mono);font-size:.85rem;word-break:break-all;background:var(--soft);padding:8px 10px;border-radius:8px}

/* código mostrado una vez */
.codigo-grande{font:700 clamp(2.4rem,9vw,3.6rem) var(--mono);letter-spacing:.18em;text-align:center;padding:18px;border-radius:14px;background:var(--key-soft);color:var(--ink);font-variant-numeric:tabular-nums}
.cod{font-family:var(--mono);font-variant-numeric:tabular-nums}

.pie{max-width:1100px;margin:0 auto;padding:0 16px 28px;color:var(--muted);font-size:.8rem}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}

/* portada con las tres puertas */
.portada{min-height:100%;display:grid;place-items:center;padding-block:40px;padding-inline:16px;
  background:radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--brand) 14%,transparent),transparent 70%),var(--bg)}
.portada-in{width:min(100%,520px);display:grid;gap:16px}
.portada-marca{display:flex;align-items:center;gap:10px;font:700 1.35rem var(--display);color:var(--brand-2)}
.portada-marca svg{width:34px;height:34px}
.portada h1{font-size:clamp(1.9rem,6vw,2.6rem);line-height:1.05}
.puertas{display:grid;gap:12px;margin-top:6px}
.puerta{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:18px;border-radius:14px;
  background:var(--paper);border:1px solid var(--line);color:inherit;text-decoration:none;box-shadow:var(--shadow);transition:border-color .15s,transform .15s}
.puerta:hover{border-color:var(--brand);transform:translateY(-1px)}
.puerta .ico{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--soft);color:var(--brand)}
.puerta .ico svg{width:26px;height:26px}
.puerta b{display:block;font:650 1.08rem var(--display)}
.puerta .flecha{color:var(--brand);font-size:1.3rem}
.pie-entrada{text-align:center;font-size:.88rem}
.pie-entrada a{color:var(--muted)}
.puerta-elegida{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;background:var(--soft)}
.puerta-elegida h2{font-size:1.05rem}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .portada-marca{color:var(--brand)}}

/* identidad por tipo de cuenta: cambia el color principal */
.p-airbnb{--brand:#b4531a;--brand-2:#7a3510;--soft:#f6ebe2}
.p-hotel{--brand:#2d4f9e;--brand-2:#1b3270;--soft:#e6ebf6}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .p-airbnb{--brand:#ec9a62;--brand-2:#f3b98f;--soft:#2c2018}
  :root:not([data-theme="light"]) .p-hotel{--brand:#86a6ec;--brand-2:#adc3f3;--soft:#1b2233}}
.p-airbnb .top{background:var(--brand-2)}
.p-hotel .top{background:var(--brand-2)}
/* oficina: look interno */
.modo-oficina .top{background:#1b1f24;color:#e9ecef;border-bottom:3px solid #c9952f}
.modo-oficina .cliente-actual{color:#e3b45a;opacity:1;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.75rem}

/* portada: un color por puerta */
.puerta.d-individual .ico{background:#e2efec;color:#0f4c45}
.puerta.d-airbnb .ico{background:#f6e6da;color:#b4531a}
.puerta.d-hotel .ico{background:#e2e8f6;color:#2d4f9e}
.puerta.d-airbnb:hover{border-color:#b4531a}.puerta.d-hotel:hover{border-color:#2d4f9e}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .puerta.d-individual .ico{background:#183029;color:#6cc5b8}
  :root:not([data-theme="light"]) .puerta.d-airbnb .ico{background:#33241a;color:#ec9a62}
  :root:not([data-theme="light"]) .puerta.d-hotel .ico{background:#1c2438;color:#86a6ec}}
.modo-oficina.entrada-oficina,.modo-oficina .entrada{background:#15181c}
.modo-oficina .entrada .card{border-top:4px solid #c9952f}

/* particular: puertas grandes */
.puertas-casa{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:14px}
.puerta-casa{display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--paper);box-shadow:var(--shadow)}
.pc-info{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;color:inherit;text-decoration:none}
.pc-info .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--soft);color:var(--brand)}
.pc-info .ico svg{width:24px;height:24px}
.pc-info b{display:block;font-weight:650}
.pc-info .meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:.82rem;color:var(--muted);margin-top:4px}
.btn.ancho{width:100%}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.lista-accesos{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lista-accesos li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.lista-accesos .sub{grid-column:1 / -1;font-size:.85rem}

/* alquiler temporario */
.lock.depto{display:grid;gap:10px;grid-template-columns:1fr}

/* hotel: grilla de habitaciones */
.habitaciones{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:12px}
.hab{display:grid;gap:10px;align-content:start;padding:14px;border-radius:14px;background:var(--paper);border:1px solid var(--line);border-top:5px solid var(--line);box-shadow:var(--shadow);min-width:0}
.hab-libre{border-top-color:var(--ok)}.hab-ocupada{border-top-color:var(--key)}.hab-limpiar{border-top-color:var(--warn)}.hab-mantenimiento{border-top-color:var(--crit)}
.hab-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.hab-head a{color:inherit;text-decoration:none;font-size:1.1rem}
details.checkin summary{list-style:none}
details.checkin summary::-webkit-details-marker{display:none}
details.checkin[open] summary{margin-bottom:10px;background:var(--paper);color:var(--ink);border-color:var(--line)}
.enlace-form{margin:0}
.enlace{background:none;border:0;padding:0;color:var(--muted);font:600 .82rem var(--body);text-decoration:underline;cursor:pointer}

/* planes */
.plan{display:grid;gap:8px;padding:14px 16px;border:1px dashed var(--line);border-radius:12px;background:var(--paper)}
.plan.premium{border-style:solid;border-color:var(--key-soft);display:flex;gap:10px;align-items:center}
.plan-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.plan summary{cursor:pointer;font-weight:700;color:var(--brand)}
.candados{margin:8px 0;padding-left:0;list-style:none;display:grid;gap:4px}
.candados li::before{content:"🔒 ";filter:grayscale(.3)}
.premium-teaser{border-color:var(--key-soft);background:linear-gradient(0deg,var(--paper),var(--paper)),var(--key-soft)}
.premium-teaser h2{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
label.check{display:flex;align-items:center;gap:8px;font-weight:600}
label.check input{width:auto}

/* avisos */
.globo{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#d9423a;color:#fff;font:700 .7rem var(--body);margin-left:2px}
.lista-avisos{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lista-avisos li{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:start;padding-bottom:10px;border-bottom:1px solid var(--line)}
.lista-avisos li .sub{grid-column:2;font-size:.82rem}
.lista-avisos li.nuevo span:nth-child(2){font-weight:700}
.tg{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:12px}
label.check.apagado{color:var(--muted)}
/* horario del personal */
.dias{display:flex;flex-wrap:wrap;gap:6px}
.dia input{position:absolute;opacity:0;pointer-events:none}
.dia span{display:inline-block;padding:7px 11px;border-radius:9px;border:1px solid var(--line);font-weight:700;font-size:.85rem;cursor:pointer;background:var(--paper)}
.dia input:checked + span{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.dia input:focus-visible + span{outline:3px solid var(--key);outline-offset:2px}

/* aviso de instalar la app */
.instalar{display:grid;grid-template-columns:auto 1fr;gap:10px 12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow)}
.instalar img{border-radius:10px}
.instalar b{display:block}
.instalar .acciones{grid-column:1 / -1}
@media (min-width:640px){.instalar{grid-template-columns:auto 1fr auto}.instalar .acciones{grid-column:auto}}
/* en modo app (instalada), respetar la muesca del celular */
@media (display-mode: standalone){.top{padding-top:env(safe-area-inset-top)}}