/* engalicia — panel del negocio. Design language from ui_mocks/02. */
:root{
  --paper:#EFF2EF; --paper-2:#E5EAE6; --white:#FBFCFB;
  --ink:#16201E; --ink-soft:#5C6A66; --ink-faint:#8A938E;
  --sea:#0E4A4C; --sea-deep:#072F31; --sea-tint:#D9E5E3;
  --toxo:#E8B44C; --toxo-bg:#FDF7E9; --toxo-deep:#B4801C;
  --line:#C7D1CB; --line-soft:#DCE3DE;
  --ok:#2F7D5C; --ok-bg:#E4F0EA; --bad:#9E3B2F; --bad-bg:#F7E7E5;
  --r:3px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.55; font-variant-numeric:tabular-nums}
h1,h2,h3{font-weight:700; margin:0; line-height:1.18; letter-spacing:-.01em}
a{color:var(--sea)} button{font:inherit}
:focus-visible{outline:2px solid var(--sea); outline-offset:2px}
.hidden{display:none !important}
.eyebrow{font-weight:700; text-transform:uppercase; letter-spacing:.14em;
  font-size:10.5px; color:var(--ink-faint)}

/* login */
.login-bg{display:grid; place-items:center; min-height:100vh; padding:20px; background:var(--sea-deep)}
.login-box{background:var(--paper); border-radius:var(--r); border:1px solid var(--line);
  width:min(420px,100%); padding:30px 28px}
.brand-line{display:flex; align-items:baseline; gap:8px; margin:0 0 14px}
.brand-line b{text-transform:uppercase; letter-spacing:.12em; font-size:14px; color:var(--sea-deep)}
.brand-line span{font-size:10.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.1em}
.login-box h1{font-size:23px; margin-bottom:8px}
.login-box .sub{color:var(--ink-soft); font-size:14px; margin:0 0 16px}
.foot-hint{font-size:13px; color:var(--ink-soft); margin:18px 0 0}
.linklike{background:none; border:0; color:var(--sea); text-decoration:underline;
  cursor:pointer; padding:8px 0; font-size:13.5px; display:block; margin:6px auto 0}

/* app shell */
.app{display:grid; grid-template-columns:224px 1fr; min-height:100vh}
.side{background:var(--sea-deep); color:#CFE0DE; padding:20px 14px; position:sticky; top:0;
  height:100vh; display:flex; flex-direction:column; gap:20px}
.brand{display:flex; align-items:baseline; gap:7px; padding:0 8px; text-decoration:none; color:var(--white)}
.brand b{text-transform:uppercase; letter-spacing:.12em; font-size:14px}
.brand span{font-size:10px; color:#7FA3A1; text-transform:uppercase; letter-spacing:.1em}
.menu{display:grid; gap:1px; flex:1; align-content:start}
.menu a{display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:8px 10px; border-radius:var(--r); color:#B7CFCD; text-decoration:none; font-size:14px}
.menu a:hover{background:#0D3F41; color:var(--white)}
.menu a.on{background:var(--sea); color:var(--white); font-weight:600; box-shadow:inset 2px 0 0 var(--toxo)}
.menu .sep{height:1px; background:#16494B; margin:9px 4px}
/* El rótulo del grupo. 11px es el suelo absoluto de la casa y aquí se usa
   entero: es una etiqueta, no un enlace, y no tiene que competir con lo que
   rotula. */
.menu .grp{display:block; font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:#7FA3A1; padding:14px 12px 5px; font-weight:700}
.menu .grp:first-child{padding-top:4px}
.pill{background:var(--toxo); color:var(--sea-deep); font-size:11px; font-weight:700;
  border-radius:100px; padding:1px 7px; min-width:20px; text-align:center}
.pill:empty{display:none}
.side-ft{border-top:1px solid #16494B; padding-top:14px; font-size:12px; color:#7FA3A1}
.side-ft button{background:none;border:0;color:#BFD8D6;cursor:pointer;padding:4px 0;display:block;text-decoration:underline}

.main{min-width:0; display:flex; flex-direction:column}
.top{display:flex; align-items:center; gap:14px; padding:12px 26px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); background:var(--paper); position:sticky; top:0; z-index:9}
.biz{display:flex; align-items:center; gap:9px; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); padding:6px 11px; font-size:14px; font-weight:600}
.host{font-size:13px; color:var(--ink-soft); margin-left:auto}
.host a{text-decoration:none; border-bottom:1px solid var(--line)}
.dirty{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--toxo-deep);
  background:var(--toxo-bg); border:1px solid var(--toxo); border-radius:var(--r); padding:5px 10px}
.avatar{width:30px; height:30px; border-radius:50%; background:var(--sea-tint); color:var(--sea);
  display:grid; place-items:center; font-weight:700; font-size:12.5px; border:1px solid var(--line)}

.btn{border:1px solid var(--sea); background:var(--sea); color:var(--white); border-radius:var(--r);
  padding:8px 16px; font-size:14px; font-weight:600; cursor:pointer}
.btn:hover{background:var(--sea-deep)}
.btn.sec{background:transparent; color:var(--sea)}
.btn.sec:hover{background:var(--sea-tint)}
.btn.sm{padding:5px 11px; font-size:13px}
.btn.danger{border-color:var(--bad); background:var(--bad)}
.btn.block{width:100%}
.btn[disabled]{opacity:.4; cursor:not-allowed}

.wrap{padding:26px; max-width:1180px; width:100%}
.view{display:none} .view.on{display:block}
.page-hd{margin-bottom:22px}
.page-hd h1{font-size:26px; margin:6px 0 6px}
.page-hd p{margin:0; color:var(--ink-soft); font-size:14.5px; max-width:62ch}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr)); gap:14px; margin-bottom:24px}
.card{background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:16px}
.stat .n{font-size:32px; font-weight:700; line-height:1; margin:8px 0 4px; letter-spacing:-.02em}
.stat .d{font-size:12.5px; color:var(--ink-soft)}
.stat.hero{background:var(--sea); border-color:var(--sea); color:var(--white)}
.stat.hero .eyebrow{color:#9CC3C1} .stat.hero .d{color:#BFD8D6}

.panelbox{background:var(--white); border:1px solid var(--line); border-radius:var(--r); margin-bottom:18px}
.panelbox>header{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:13px 16px; border-bottom:1px solid var(--line-soft); flex-wrap:wrap}
.panelbox>header h2{font-size:16px}
.panelbox .body{padding:16px}
.panelbox .body.flush{padding:0}

.rows{display:grid}
.row{display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center;
  padding:12px 16px; border-bottom:1px solid var(--line-soft); font-size:14px}
.row:last-child{border-bottom:0}
.row .t{font-weight:600} .row .s{font-size:12.5px; color:var(--ink-soft); margin-top:1px}
.row.clickable{cursor:pointer} .row.clickable:hover{background:var(--paper)}

.tag{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  border-radius:2px; padding:2px 7px; white-space:nowrap}
.tag.new{background:var(--toxo-bg); color:var(--toxo-deep); border:1px solid var(--toxo)}
.tag.ok{background:var(--ok-bg); color:var(--ok); border:1px solid #A9CFBE}
.tag.off{background:var(--paper-2); color:var(--ink-soft); border:1px solid var(--line)}
.tag.bad{background:var(--bad-bg); color:var(--bad); border:1px solid #E0B6AF}

table{width:100%; border-collapse:collapse; font-size:14px}
th{text-align:left; text-transform:uppercase; letter-spacing:.09em; font-size:10.5px;
  color:var(--ink-faint); padding:10px 16px; border-bottom:1px solid var(--line); white-space:nowrap}
td{padding:11px 16px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
tbody tr:hover{background:var(--paper)}
tbody tr.clickable{cursor:pointer}
td .t{font-weight:600}
td .s{font-size:12.5px; color:var(--ink-soft)}
.num{text-align:right; white-space:nowrap}

/* forms */
.f{display:flex; flex-direction:column; gap:5px; min-width:0; margin-bottom:13px}
.f label{font-size:13px; font-weight:700}
.f label .o{font-weight:400; color:var(--ink-faint)}
input[type=text],input[type=tel],input[type=email],input[type=number],input[type=time],select,textarea{
  font:inherit; font-size:15px; padding:9px 11px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--white); color:var(--ink); width:100%}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--sea);
  box-shadow:0 0 0 3px rgba(14,74,76,.14)}
input[aria-invalid=true]{border-color:var(--bad)}
textarea{resize:vertical; min-height:74px}
.err{font-size:12.5px; color:var(--bad); display:none}
.err.on{display:block}
.hint{font-size:12.5px; color:var(--ink-soft)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 15px}
.grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 15px}

/* switches */
.sw{position:relative; width:36px; height:20px; flex:none; display:inline-block}
.sw input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.sw i{position:absolute; inset:0; background:var(--line); border-radius:100px; transition:.18s}
.sw i::after{content:""; position:absolute; width:16px; height:16px; background:var(--white);
  border-radius:50%; top:2px; left:2px; transition:.18s}
.sw input:checked+i{background:var(--sea)}
.sw input:checked+i::after{transform:translateX(16px)}
.sw input:disabled+i{opacity:.45}
.swrow{display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 0; border-bottom:1px solid var(--line-soft)}
.swrow:last-child{border-bottom:0}
.swrow .t{font-weight:600; font-size:14px}
.swrow .s{font-size:12.5px; color:var(--ink-soft)}

/* orders board */
.tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px}
.tabs button{border:1px solid var(--line); background:var(--white); border-radius:100px;
  padding:6px 14px; font-size:13.5px; cursor:pointer; color:var(--ink-soft)}
.tabs button.on{background:var(--sea); border-color:var(--sea); color:var(--white); font-weight:600}
.tabs .pill{margin-left:5px}

/* hours editor */
.day{display:grid; grid-template-columns:110px 1fr auto; gap:12px; align-items:start;
  padding:12px 0; border-bottom:1px solid var(--line-soft)}
.day:last-child{border-bottom:0}
.day .dname{font-weight:700; font-size:14px; padding-top:7px}
.day .closed-note{color:var(--ink-faint); font-size:13.5px; padding-top:7px}
.ranges{display:grid; gap:7px}
.range{display:flex; align-items:center; gap:7px}
.range input[type=time]{width:106px}
.range .rm{background:none; border:0; color:var(--ink-faint); cursor:pointer; font-size:16px; padding:2px 6px}
.range .rm:hover{color:var(--bad)}
.addrange{background:none; border:1px dashed var(--line); border-radius:var(--r);
  color:var(--sea); cursor:pointer; padding:5px 10px; font-size:13px; justify-self:start}
.copyday{background:none; border:0; color:var(--ink-faint); font-size:12px; cursor:pointer;
  text-decoration:underline; padding-top:8px}

/* social editor */
.social-row{display:grid; grid-template-columns:150px 1fr auto; gap:10px; align-items:center; margin-bottom:10px}

/* mail */
.mail-body{white-space:pre-wrap; font-size:14.5px; line-height:1.6; padding:14px 0}

/* modal + toast */
.scrim{position:fixed; inset:0; background:rgba(7,47,49,.42); display:none; place-items:center; z-index:50; padding:20px}
.scrim.on{display:grid}
.modal{background:var(--paper); border-radius:var(--r); width:min(560px,100%); border:1px solid var(--line);
  max-height:92vh; overflow:auto}
.modal>header{padding:18px 20px 0}
.modal h2{font-size:19px; margin:6px 0 8px}
.modal .mbody{padding:8px 20px 18px; font-size:14.5px}
.modal>footer{display:flex; gap:9px; justify-content:flex-end; padding:14px 20px;
  border-top:1px solid var(--line); position:sticky; bottom:0; background:var(--paper)}
.toast{position:fixed; right:22px; bottom:22px; background:var(--sea-deep); color:var(--white);
  border-radius:var(--r); padding:13px 17px; font-size:14px; max-width:340px; z-index:60;
  box-shadow:0 8px 26px rgba(7,47,49,.28); transform:translateY(14px); opacity:0; pointer-events:none; transition:.25s}
.toast.on{transform:none; opacity:1}
.toast b{display:block; margin-bottom:3px}
.toast small{color:#9CC3C1}

.empty{text-align:center; padding:44px 20px; color:var(--ink-soft)}
.empty b{display:block; font-size:17px; color:var(--ink); margin-bottom:5px}

.notice{display:flex; gap:11px; border:1px solid var(--toxo); background:var(--toxo-bg);
  border-radius:var(--r); padding:11px 13px; font-size:13.5px; margin-top:14px; align-items:flex-start}

@media (max-width:960px){
  .app{grid-template-columns:1fr}
  .side{position:static; height:auto; flex-direction:row; align-items:center; overflow:auto; padding:12px}
  .menu{grid-auto-flow:column; flex:1} .menu .sep,.menu .grp,.side-ft,.brand span{display:none}
  .host{display:none}
  .grid2,.grid3{grid-template-columns:1fr}
  .day{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------------------------------------------------------- guía de Google */
.guide-steps{list-style:none; margin:0 0 20px; padding:0; display:grid; gap:10px}
.gstep{display:grid; grid-template-columns:34px 1fr; gap:14px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r); padding:16px 18px}
.gstep.now{border-color:var(--sea); box-shadow:inset 3px 0 0 var(--sea)}
.gstep.done{opacity:.62}
.gs-n{width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--paper-2); font-weight:700; font-size:13px}
.gstep.now .gs-n{background:var(--sea); color:#fff}
.gstep.done .gs-n::after{content:"¹3"; font-size:14px}
.gstep.done .gs-n{color:transparent; background:var(--ok); position:relative}
.gstep.done .gs-n::after{position:absolute; color:#fff}
.gs-b h3{font-size:16px; margin:0 0 5px}
.gs-b p{margin:0; font-size:14.5px; color:var(--ink-soft); line-height:1.55}
.gs-a{display:flex; align-items:center; gap:14px; margin-top:11px; flex-wrap:wrap}
.btn.sm{padding:7px 13px; font-size:13.5px}

.guide-nap .hint,.guide-finish .hint{font-size:13.5px; color:var(--ink-soft); margin:0 0 14px}
.nap{margin:0; display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.nap-row{display:grid; grid-template-columns:130px 1fr; gap:0; background:#fff}
.nap dt{padding:11px 14px; font-size:13px; font-weight:650; color:var(--ink-soft);
  background:var(--paper-2)}
.nap dd{margin:0; padding:11px 14px; display:flex; align-items:center; gap:12px;
  justify-content:space-between; font-size:14.5px}
.nap dd span{word-break:break-word}
.guide-finish .row{display:flex; gap:10px; flex-wrap:wrap}
.guide-finish input{flex:1; min-width:260px; font:inherit; font-size:15px; padding:10px 13px;
  border:1px solid var(--line); border-radius:var(--r)}
.guide-done h2{margin-top:0}
.msg{margin:12px 0 0; font-size:14px}
.msg.ok{color:var(--ok)} .msg.bad{color:var(--bad)}

@media (max-width:700px){ .nap-row{grid-template-columns:1fr} .nap dt{padding-bottom:0} }

/* --------------------------------------------------- diseño de la portada */
.designs{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.design{border:1px solid var(--line); border-radius:var(--r); background:#fff;
  padding:18px; display:flex; flex-direction:column; gap:10px}
.design.on{border-color:var(--sea); box-shadow:inset 3px 0 0 var(--sea)}
.design header{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:0; border:0}
.design h3{font-size:17px; margin:0}
.design p{margin:0; font-size:14.5px; color:var(--ink-soft); line-height:1.55}
.design .tag{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 8px; border-radius:100px}
.design .tag.now{background:var(--sea); color:#fff}
.design .tag.rec{background:var(--toxo, #E8B44C); color:#3A2A00}
.blocks-lbl{font-size:12.5px; font-weight:650; color:var(--ink-soft); margin-top:4px}
/* La receta ES la vista previa: los bloques en su orden, no una imagen falsa */
.blocks{list-style:none; counter-reset:b; margin:0; padding:0; display:grid; gap:3px}
.blocks li{counter-increment:b; font-size:13px; color:var(--ink-soft);
  background:var(--paper-2); border-radius:3px; padding:5px 9px 5px 26px; position:relative}
.blocks li::before{content:counter(b); position:absolute; left:9px; font-weight:700;
  color:var(--ink-faint); font-size:11px}
.design .btn{margin-top:auto; justify-content:center}
.panelbox header .hint{font-size:12.5px; color:var(--ink-soft); font-weight:400}

@media (max-width:1000px){ .designs{grid-template-columns:1fr} }

/* ── Plantillas ─────────────────────────────────────────────────────────
   Aquí sí hay imagen y no receta: son capturas REALES de cada plantilla,
   servidas desde el catálogo público. Con dieciocho diseños, una lista de
   bloques ya no distingue nada — lo que cambia es cómo se ve. */
.tplfam + .tplfam{margin-top:26px; padding-top:22px; border-top:1px solid var(--line)}
.tplfam h3{font-size:15px; margin:0 0 2px}
.tplhint{margin:0 0 14px; font-size:12.5px; color:var(--ink-soft)}
.tpls{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.tpl{border:1px solid var(--line); border-radius:var(--r); background:#fff;
  display:flex; flex-direction:column; overflow:hidden}
.tpl.on{border-color:var(--sea); box-shadow:inset 0 3px 0 var(--sea)}
.tpl img{width:100%; height:auto; aspect-ratio:9/4; object-fit:cover;
  border-bottom:1px solid var(--line); background:var(--paper-2)}
.tplcuerpo{padding:16px; display:flex; flex-direction:column; gap:9px; flex:1}
.tpl header{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:0; border:0}
.tpl h4{font-size:16px; margin:0}
.tpl p{margin:0; font-size:14px; color:var(--ink-soft); line-height:1.55}
.tpl .tag{font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 8px; border-radius:100px}
.tpl .tag.now{background:var(--sea); color:#fff}
.tpl .tag.rec{background:var(--toxo, #E8B44C); color:#3A2A00}
.tplpuntos{list-style:none; margin:0; padding:0; display:grid; gap:3px}
.tplpuntos li{font-size:12.5px; color:var(--ink-soft); background:var(--paper-2);
  border-radius:3px; padding:5px 9px}
.tplacc{margin-top:auto !important; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.tplver{font-size:13px; font-weight:650; color:var(--sea); text-decoration:none;
  border-bottom:1px solid transparent}
.tplver:hover{border-color:var(--sea)}
.tplvacio{margin:0; font-size:14px; color:var(--ink-soft)}

@media (max-width:1000px){ .tpls{grid-template-columns:1fr 1fr} }
@media (max-width:680px){ .tpls{grid-template-columns:1fr} }

/* La página de vuelta de Stripe */
.pasos{margin:18px 0 22px; padding-left:20px; font-size:14.5px; line-height:1.75; color:var(--ink-soft)}
.pasos li{margin-bottom:6px}
.pie{margin-top:16px; font-size:13px; color:var(--ink-faint); text-align:center}

/* Facturación */
.bil-estado{padding:14px 16px; border-radius:10px; background:var(--paper-2,#EEF1EE);
  border-left:4px solid var(--line,#C7D1CB); margin-bottom:16px}
.bil-estado.ok{background:#E9F3EE; border-left-color:#2F7D5C}
.bil-estado.wait{background:#FDF6E7; border-left-color:#B4801C}
.bil-estado.bad{background:#F9EAE7; border-left-color:#9E3B2F}
.bil-estado p{margin:8px 0 0; font-size:14px; line-height:1.6}

.bil-ciclos{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px}
.bil-ciclo{flex:1 1 180px; position:relative; cursor:pointer; padding:16px 18px;
  border:1.5px solid var(--line,#C7D1CB); border-radius:12px; background:#fff;
  display:flex; flex-direction:column; gap:2px}
.bil-ciclo input{position:absolute; opacity:0; pointer-events:none}
.bil-ciclo.on{border-color:var(--sea,#0E4A4C); box-shadow:0 0 0 3px rgba(14,74,76,.10)}
.bil-ciclo b{font-size:26px; font-variant-numeric:tabular-nums; line-height:1.1}
.bil-ciclo span{font-size:13px; color:var(--ink-soft,#5C6A66)}
.bil-ciclo em{position:absolute; top:12px; right:14px; font-style:normal; font-size:12px;
  font-weight:700; color:#2F7D5C}


/* ═══════════════════ Clientes · Caja · Promociones ═══════════════════
   Las tres pantallas nuevas comparten forma con las que ya había: `.row` pone
   la rejilla de dos columnas y `.row-main`/`.row-side` sólo caen en ellas. Lo
   de aquí abajo es lo que no existía todavía. */

.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:0 0 4px}
.toolbar input[type=search], .toolbar input[type=month], .toolbar select{
  padding:9px 12px; border:1px solid var(--line,#DDE5E3); border-radius:8px;
  font:inherit; font-size:15px; background:var(--white,#fff)}
/* El buscador se queda con el hueco que sobre y los filtros con lo justo: sin
   una anchura fija, un `select` vacío ocupa lo mismo que el buscador y los tres
   caen en tres líneas. */
.toolbar input[type=search]{flex:1 1 240px; min-width:0}
.toolbar select{flex:0 0 auto; max-width:220px}
.toolbar input[type=month]{flex:0 0 auto}
.hd-btns{display:flex; gap:8px}

.row-main{display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0}
.row-side{display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end}
.row.cli, .row.caja, .row.promo{cursor:default}
.row.cli{cursor:pointer}

/* La pastilla de estado. Neutra por defecto: el color se reserva para cuando
   dice algo, y si todo va de color nada destaca. */
.chip{display:inline-block; padding:3px 9px; border-radius:999px; font-size:12px;
  font-weight:600; white-space:nowrap; background:#EEF2F1; color:var(--ink-soft,#5C6A66)}
.chip.ok{background:var(--ok-bg,#E9F3EE); color:var(--ok,#2F7D5C)}
.chip.off{background:#EEF2F1; color:var(--ink-soft,#5C6A66)}
.chip.bad{background:#FBEAE7; color:var(--bad,#B4472E)}

.muted{color:var(--ink-soft,#5C6A66); font-size:14px}
.row-main b.ok{color:var(--ok,#2F7D5C)}

.pager{display:flex; align-items:center; gap:12px; justify-content:center;
  margin:18px 0 4px; font-size:14px; color:var(--ink-soft,#5C6A66)}

.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px; margin:0 0 18px}
.kpi{background:var(--white,#fff); border:1px solid var(--line,#DDE5E3);
  border-radius:12px; padding:14px 16px; display:grid; gap:2px}
.kpi span{font-size:13px; color:var(--ink-soft,#5C6A66)}
.kpi b{font-size:24px; font-variant-numeric:tabular-nums; line-height:1.2}
.kpi.ok b{color:var(--ok,#2F7D5C)}
.kpi.bad b{color:var(--bad,#B4472E)}
.kpi .hint{font-size:12px}

.catbars{display:grid; gap:6px; margin:0 0 18px}
.catbar{display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center;
  padding:8px 14px; background:var(--white,#fff); border:1px solid var(--line,#DDE5E3);
  border-radius:8px; font-size:14px}
.catbar b{font-variant-numeric:tabular-nums}
.catbar b.ok{color:var(--ok,#2F7D5C)}

.mini{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:8px 0;
  border-bottom:1px solid var(--line,#DDE5E3); font-size:14px}
.mini:last-child{border-bottom:0}
.note-row span:first-child{flex:1; min-width:0}

.note{background:#F4F7F6; border-radius:10px; padding:12px 14px; margin:0 0 14px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:14px}
.note.ok{background:var(--ok-bg,#E9F3EE)}

.tagpick{display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 16px}
.tag.pick{border:1px solid var(--line,#DDE5E3); background:#fff; cursor:pointer;
  color:var(--ink-soft,#5C6A66); font:inherit; font-size:12px; font-weight:600;
  padding:4px 10px; border-radius:999px}
.tag.pick.on{color:#fff; border-color:transparent}
.tag.pick.add{border-style:dashed}

/* La zona de borrado, abajo del todo y con su propio marco. No puede estar al
   lado del botón de guardar: es irreversible. */
.danger-zone{border:1px solid #E7C3BA; background:#FDF6F4; border-radius:10px;
  padding:14px 16px; margin:22px 0 0}
.danger-zone b{color:var(--bad,#B4472E); display:block; margin-bottom:4px}
.danger-zone p{font-size:13px; color:var(--ink-soft,#5C6A66); margin:0 0 10px}
.btn.danger{background:var(--bad,#B4472E); border-color:var(--bad,#B4472E); color:#fff}

.modal.wide{max-width:680px}

@media (max-width:700px){
  .row-side{justify-content:flex-start}
  .toolbar input[type=search]{min-width:0}
}


/* Reseñas: el texto va debajo, en su propia línea, porque una reseña es un
   párrafo y no cabe en una fila junto al nombre. */
.row.resena{ align-items:flex-start }
.row.resena .row-main{ display:block }
.resbody{ margin:7px 0 0; color:var(--ink,#17302C); font-size:14.5px; line-height:1.55;
  max-width:70ch }
.stars{ color:#C8912A; letter-spacing:1px; font-size:13px }


/* Un evento que ya pasó se ve sin leer la fecha. */
.row.evento.pasado b{ color:var(--ink-soft,#5C6A66) }
.row.evento.pasado{ background:#FAFCFB }
label.chk{ display:flex; align-items:center; gap:8px; font-weight:500 }
label.chk input{ width:auto; margin:0 }

/* pestanas del editor de textos: una por pagina, y una por idioma cuando el
   sitio sirve mas de uno */
.tabs{display:flex; flex-wrap:wrap; gap:6px}
.tabs + .tabs{margin-top:9px}
.tabs button{font:inherit; font-size:13.5px; border:1px solid var(--line);
  background:var(--white); border-radius:100px; padding:6px 13px; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; color:var(--ink-soft)}
.tabs button:hover{border-color:var(--ink-soft); color:var(--ink)}
.tabs button[aria-pressed=true]{background:var(--sea); border-color:var(--sea); color:#fff}
.tabs .cuenta{font-size:11px; opacity:.7}
.tabs .apagada{font-style:normal; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.08em; opacity:.65}
.tabs.langs button{font-size:12.5px; padding:4px 11px}
.rows .s i.aviso{font-style:normal; color:#8A6A12; background:#FBF3DF;
  border:1px solid #E6D3A2; border-radius:3px; padding:1px 6px; font-size:12px}
.rows .s i.mio{font-style:normal; color:var(--ok); font-size:12px}
.cerradas{margin:0; font-size:12.5px; color:var(--ink-faint); line-height:1.6}
.cerradas span{border-bottom:1px dotted var(--line-2); cursor:help}

/* como se ve en Google: la vista previa y sus dos campos */
.seocaja{border-top:1px solid var(--line)}
.seo-hd{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:12px}
.seo-hd h3{margin:0; font-size:15px}
.serp{display:block; background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--r); padding:12px 14px; margin-bottom:14px; max-width:600px}
.serp-url{display:block; font-size:12.5px; color:#3C7A55; margin-bottom:2px}
.serp-t{display:block; font-size:18px; color:#1a0dab; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.serp-d{display:block; font-size:13px; color:var(--ink-soft); margin-top:3px}
.serp-t:not(.propio), .serp-d:not(.propio){opacity:.62; font-style:italic}
.cuenta{font-style:normal; font-size:11.5px; color:var(--ink-faint); font-weight:400}
.cuenta.cerca{color:#8A6A12; font-weight:600}
.f textarea{width:100%; font:inherit; font-size:15px; padding:9px 11px;
  border:1px solid var(--line); border-radius:var(--r); background:#fff; resize:vertical}
hr.mini{border:0; border-top:1px dashed var(--line); margin:8px 0}
.f.check label{display:flex; align-items:center; gap:8px; font-weight:400}


/* ══════════════════ EL CARTEL DEL QR ══════════════════
   En pantalla, una previsualización grande — el dueño tiene que poder
   comprobar que el código se lee ANTES de gastar tinta. Al imprimir se
   queda sólo el cartel y ocupa la hoja entera, para pegarlo tal cual en
   la puerta o junto a la caja sin recortar nada alrededor. */
.qr-cartel{
  display:flex; align-items:center; gap:32px; margin-top:18px;
  padding:26px; border:1px solid var(--eg-border); border-radius:10px;
  background:#fff; flex-wrap:wrap;
}
.qr-img{flex:0 0 auto; width:280px}
.qr-img svg{width:100%; height:auto; display:block}
.qr-txt{min-width:0; flex:1 1 16rem}
.qr-tienda{margin:0 0 6px; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:700; color:var(--eg-primary)}
.qr-titular{margin:0 0 8px; font-size:30px; font-weight:700; line-height:1.15}
.qr-lead{margin:0 0 12px; font-size:16px; line-height:1.5; color:var(--eg-ink-muted)}
.qr-url{margin:0; font-size:13.5px; color:var(--eg-ink-muted); word-break:break-all}

@media print{
  /* `size:auto` y NADA medido en centímetros. El mismo fichero se imprime en
     Letter (Colombia, México) y en A4 (España) sin recortar ni dejar media
     hoja en blanco, porque todo va en porcentaje de la página. Fijar `letter`
     dejaría el cartel corto arriba en A4, y fijar A4 lo recortaría en Letter. */
  @page{size:auto; margin:14mm}

  /* Todo fuera menos el cartel. `visibility` y no `display` para no rehacer la
     maquetación al imprimir: con `display:none` el cartel se recolocaría. */
  body *{visibility:hidden}
  #qrCartel, #qrCartel *{visibility:visible}
  #qrCartel{
    /* `fixed` y no `absolute`: al imprimir, el bloque de posición fija es la
       PÁGINA, que es justo lo que se quiere para un cartel de una hoja. Con
       `absolute` se posiciona contra el documento entero — que en el panel
       mide varias pantallas — y el cartel se va a donde nadie lo ve. */
    position:fixed; inset:0; margin:0; padding:0; border:0; border-radius:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:0; text-align:center;
  }
  /* Grande de verdad: esto se lee desde el otro lado del mostrador, y un
     móvil viejo con la cámara sucia necesita módulos gordos.
     Se limita por ANCHO y por ALTO a la vez. Sólo por ancho, una hoja
     apaisada o una impresora con márgenes grandes deja el código fuera de
     la página y el texto sin sitio. */
  .qr-img{width:min(66%, 58vh); max-width:none; margin:0 0 6%}
  .qr-txt{flex:0 0 auto; width:100%}
  .qr-tienda{font-size:13pt; margin-bottom:4mm}
  .qr-titular{font-size:38pt; line-height:1.1; margin-bottom:4mm}
  .qr-lead{font-size:15pt; margin-bottom:6mm; color:#000}
  .qr-url{font-size:12pt; color:#000}
  /* Un QR con fondo gris o con una trama detrás no lo lee ningún móvil. */
  .qr-img svg{background:#fff}
}


/* ══════════════════ LA LIBRETA ══════════════════
   Los importes en columna y tabulares: una libreta se lee de arriba
   abajo comparando cifras, y con dígitos de ancho variable no cuadran.
   El que debe en rojo apagado, no en alarma — es un vecino, no una
   incidencia. */
.lib-debe{color:var(--eg-bad, #9E3B2F); font-weight:700}
.lib-favor{color:var(--eg-ok, #2F7D5C); font-weight:700}
.rows .num{font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
/* Un apunte anulado sigue ahí y se ve que lo está. Esconderlo dejaría un
   saldo que no cuadra con su historia, que es justo lo que la libreta
   viene a evitar. */
.lib-anulado{opacity:.55}
.lib-anulado b{text-decoration:line-through}
.chk{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:500}