/* 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;
  /* Las cuatro que pide `tratos.css`, que se reparte a los dos paneles sin
     un solo color escrito dentro. Aquí son las de esta casa. */
  --tr-acento:#0E4A4C; --tr-acento-suave:#D9E5E3;
  --tr-aviso:#B4801C;  --tr-aviso-suave:#FDF7E9;
}
*,*::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. Ahora es el tirador de un cajón, así que además de
   rotular tiene que parecer pulsable: cursor, hover y una flecha que gira.

   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:flex; align-items:center; gap:6px; font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:#7FA3A1; padding:12px 12px 5px; font-weight:700;
  cursor:pointer; list-style:none; user-select:none}
.menu .grp::-webkit-details-marker{display:none}
.menu .grupo:first-child .grp{padding-top:4px}
.menu .grp:hover{color:var(--white)}
/* La flecha, dibujada con borde para no depender de ninguna fuente ni de
   ningún fichero: gira al abrir y no carga nada. */
.menu .grp::before{content:""; width:0; height:0; flex:0 0 auto;
  border-left:4px solid currentColor; border-top:3.5px solid transparent;
  border-bottom:3.5px solid transparent; transition:transform .15s ease}
.menu .grupo[open] > .grp::before{transform:rotate(90deg)}
/* Un grupo cerrado con algo que atender lo dice con un punto. Sin esto, plegar
   el menú escondería justo lo que existe para que no se pase por alto. */
.menu .grp.con-aviso::after{content:""; width:6px; height:6px; border-radius:50%;
  background:var(--toxo); margin-left:auto}
.menu .grupo[open] > .grp.con-aviso::after{display:none}
.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)}
/* El coste y el margen, en la ficha de producto.
   `.etq` es la etiqueta de algo que se lee y no se escribe: se ve igual que un
   `label` pero no apunta a ningún campo, porque el margen es un resultado.
   El coste de un producto de Dropi va bloqueado —lo pone Dropi— y tiene que
   PARECERLO: un campo que no responde y se ve igual que los demás se lee como
   una avería. */
.f .etq{font-size:13px; font-weight:700; display:block}
.margen{margin:9px 0 0; font-size:19px; font-weight:700;
  font-variant-numeric:tabular-nums; color:var(--eg-ok, #2F7D5C)}
.margen.malo{color:var(--eg-bad, #9E3B2F)}
input.bloqueado{background:var(--eg-surface-2, #F4F5F3); color:var(--ink-soft);
  cursor:default}
input.bloqueado:focus{box-shadow:none; border-color:var(--eg-border)}

/* Avisos dentro de la ficha de un pedido: cómo le fue en Dropi.
   Tres estados y tres colores, porque «se mandó», «falló» y «va en camino» piden
   reacciones distintas del comerciante y el color es lo primero que se lee. */
.aviso{margin:14px 0 0; padding:11px 13px; border-radius:4px; font-size:14px;
  background:var(--eg-surface-2, #F4F5F3); border-left:3px solid var(--line-soft)}
.aviso.ok{background:#EEF6F1; border-left-color:var(--eg-ok, #2F7D5C)}
.aviso.malo{background:#FBEFED; border-left-color:var(--eg-bad, #9E3B2F)}
.aviso .s{margin-top:4px; color:var(--ink-soft); line-height:1.45}

.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}}

/* ------------------------------------------------- líneas de una compra
   Una tabla de seis columnas no cabe en un modal de 560px, y en un móvil
   menos: la descripción salía como «Ha…» y el artículo como «Sin». Cada línea
   es un bloque, con lo que se escribe arriba y los tres números en fila. */
.lin{border:1px solid var(--line-soft); border-radius:var(--r); padding:11px 12px;
  margin-bottom:9px; display:grid; gap:10px; background:var(--white,#fff)}
.lin .lin-nums{display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:10px; align-items:end}
.lin .f{margin-bottom:0}
.lin .f label{font-size:12px; font-weight:600; color:var(--ink-soft)}
@media (max-width:560px){ .lin .lin-nums{grid-template-columns:1fr 1fr} }

/* --------------------------------------------------------- botón de cerrar
   Los ocho botones `×` de los modales no tenían ni una regla: salían como un
   botón corriente, con su recuadro gris, encima del título. */
.x{background:none; border:0; color:var(--ink-soft); font-size:20px; line-height:1;
  padding:2px 6px; cursor:pointer; border-radius:var(--r)}
.x:hover{background:var(--line-soft); color:var(--ink)}
.x.sm{font-size:16px}

/* ------------------------------------------------------ la foto de la factura
   Un cuadro grande y vacío que dice «toca aquí». En el móvil, `accept` con
   `image/*` abre la cámara directamente, que es el camino que importa: el
   dueño está de pie en el local con el papel en la mano. */
.factura{border:1px dashed var(--line); border-radius:var(--r); min-height:92px;
  display:grid; place-items:center; text-align:center; padding:14px; cursor:pointer;
  color:var(--ink-soft); font-size:13.5px; background:var(--surface-2,#F4F5F3)}
.factura:hover{border-color:var(--sea); color:var(--ink)}
.factura img{max-height:190px; max-width:100%; border-radius:var(--r)}
.factura .pdf{font-size:15px; font-weight:600; color:var(--ink)}

/* ------------------------------------------------- el modal ancho y sus sumas
   Un presupuesto se arma mirando la cifra: se sube una línea, se baja otra, y
   hay que ver el efecto al momento. En 560px no caben las cinco columnas de
   una línea, así que este modal es más ancho que los demás. */
.modal.ancho{width:min(820px,100%)}
.sumas{display:grid; grid-template-columns:auto auto; gap:4px 14px; justify-content:end;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line-soft);
  align-items:baseline}
.sumas span{color:var(--ink-soft); font-size:13px; text-align:right}
.sumas b{font-variant-numeric:tabular-nums; text-align:right}
.sumas b.grande{font-size:20px}

/* ─────────────────────────────────────────── qué publicar esta semana
   Cada propuesta es una ficha que se lee entera de un vistazo: el motivo
   arriba, el texto tal cual se va a publicar, y los botones abajo. Nada de
   pestañas ni de desplegables: quien mira esto está de pie en el mostrador. */
.idea{background:var(--white,#fff); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 20px; margin-bottom:14px}
.idea-por{margin:0 0 4px; font-size:12px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--sea)}
.idea h3{margin:0 0 12px; font-size:17px}
.idea-tipo{display:inline-block; margin:0 0 8px; padding:2px 10px; border-radius:999px;
  font-size:12px; font-weight:600; background:var(--surface-2,#F4F5F3); color:var(--ink)}
.idea-tipo-alcance{background:#E6F0FA; color:#1B4F7A}
.idea-tipo-confianza{background:#EAF5EC; color:#1F5F32}
.idea-tipo-venta{background:#FBEFE3; color:#8A4513}
.idea-img{display:block; max-width:100%; max-height:260px; border-radius:var(--r);
  margin-bottom:12px}
.idea-sinfoto{background:var(--surface-2,#F4F5F3); border-radius:var(--r);
  padding:14px 16px; margin-bottom:12px}
.idea-sinfoto p{margin:0 0 10px; font-size:13.5px; color:var(--ink-soft)}
.idea-txt{margin:0 0 10px; line-height:1.55; white-space:pre-line}
.idea-tags{margin:0 0 12px; font-size:13.5px; color:var(--sea)}
.idea-pies{display:flex; gap:8px; flex-wrap:wrap}

/* ---------------------------------------------------------- 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}
/* Dos o tres controles en una línea: botones de una cabecera, o un desplegable
   con su botón (redes sociales, idiomas de la web). */
.fila-botones{display:flex; gap:8px; align-items:center}
.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}

/* El enlace de /opina/: se lee entero y se puede seleccionar para copiarlo a mano. */
.op-enlace{margin:4px 0 12px; overflow-wrap:anywhere}
.op-botones{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 16px}

@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}
  /* El cartel que se imprime lleva la clase `imprimir` (hay dos: avisos y
     opiniones), y sólo ése sale en el papel. */
  .qr-cartel.imprimir, .qr-cartel.imprimir *{visibility:visible}
  .qr-cartel.imprimir{
    /* `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}

/* ─────────────────────────── el editor de texto con formato ───────────────
   Quill trae su propio tema (`vendor/quill/quill.snow.css`). Aquí sólo se le
   dan las medidas y los colores del panel, para que no parezca una isla
   pegada dentro de un formulario que sí lo es. */
/* Quill convierte el PROPIO contenedor en `.ql-container` y le inserta la
   barra como hermana JUSTO ENCIMA, no dentro. Por eso la barra se busca con
   `:has(+ .editor-rico)` y no como descendiente: escrito al revés, el editor
   se queda con dos líneas de alto y sin bordes, que es como salió la primera
   vez que se abrió en el navegador. */
.ql-toolbar.ql-snow:has(+ .editor-rico){border-color:var(--line);
  border-radius:6px 6px 0 0; background:#fff}
.editor-rico.ql-container.ql-snow{background:#fff; border-color:var(--line);
  border-radius:0 0 6px 6px}
.editor-rico .ql-editor{min-height:200px; font-size:15px; line-height:1.65;
  font-family:inherit; color:var(--ink)}
.editor-rico .ql-editor.ql-blank::before{color:var(--ink-faint); font-style:normal}
.editor-rico .ql-editor h2{font-size:20px; margin:16px 0 8px}
.editor-rico .ql-editor h3{font-size:17px; margin:14px 0 6px}
.editor-rico .ql-editor h4{font-size:15px; margin:12px 0 6px}
.editor-rico .ql-editor p{margin:0 0 10px}
.editor-rico .ql-editor blockquote{border-left:3px solid var(--line); padding-left:12px;
  color:var(--ink-soft)}

/* ─────────────────────────────── Dropi ────────────────────────────────────
   El catálogo de un mayorista dentro del panel. Las fichas son una rejilla
   porque lo que decide una compra aquí es la FOTO y el precio, y una tabla de
   texto no deja comparar dos productos de un vistazo. */
.dr-valor{font-size:14px; color:var(--ink-soft); text-align:right}
.dr-valor .estado{font-weight:600}
.estado.ok{color:#1E7A4B} .estado.mal{color:#A32B2B}

.dr-filtros{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.dr-filtros input[type=search]{flex:1 1 260px; min-width:200px}
.dr-filtros select{flex:0 1 220px}
.dr-casillas{display:flex; gap:18px; flex-wrap:wrap; margin-top:12px;
  font-size:13.5px; color:var(--ink-soft)}
.dr-casillas label{display:flex; gap:6px; align-items:center; cursor:pointer}

.dr-rejilla{display:grid; gap:14px; padding:16px;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr))}
.dr-ficha{display:flex; flex-direction:column; border:1px solid var(--line-soft);
  border-radius:8px; overflow:hidden; background:#fff}
.dr-ficha.elegida{border-color:var(--ink); box-shadow:0 0 0 1px var(--ink)}
/* Lo ya traído no se esconde: se apaga. Esconderlo haría que la misma búsqueda
   diera resultados distintos según lo que ya tengas, que desconcierta. */
.dr-ficha.ya{opacity:.62}

.dr-foto{aspect-ratio:1; background:var(--paper); display:grid; place-items:center}
.dr-foto img{width:100%; height:100%; object-fit:cover}
.dr-sinfoto{font-size:12px; color:var(--ink-faint)}

.dr-cuerpo{padding:10px 12px; flex:1}
.dr-cuerpo h3{margin:0 0 3px; font-size:14.5px; line-height:1.35}
.dr-prov{margin:0 0 8px; font-size:12px; color:var(--ink-faint)}
.dr-precios{display:grid; grid-template-columns:auto 1fr; gap:2px 10px; margin:0;
  font-size:13px}
.dr-precios dt{color:var(--ink-faint)}
.dr-precios dd{margin:0; text-align:right; font-variant-numeric:tabular-nums}
.dr-aviso{margin:8px 0 0; font-size:12px; color:#A32B2B; line-height:1.4}

.dr-pie-ficha{padding:8px 12px; border-top:1px solid var(--line-soft);
  font-size:13px; min-height:37px; display:flex; align-items:center}
.dr-elegir{display:flex; gap:7px; align-items:center; cursor:pointer}
.dr-ya{color:var(--ink-faint)}

.dr-vacio{padding:26px 16px; text-align:center; color:var(--ink-soft)}
.dr-pie{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.dr-elegidos{font-size:13.5px; color:var(--ink-soft); margin-left:auto}
.dr-sinmargen{color:var(--ink-faint)}
td.vacio, .vacio{padding:22px 16px; text-align:center; color:var(--ink-soft)}

/* ─────────────────────────────── el logo ─────────────────────────────────
   La muestra tiene FONDO A CUADROS a propósito. Casi todos los logos llegan
   en PNG con transparencia, y sobre blanco no se distingue un logo con fondo
   blanco de uno transparente: se ven igual en el panel y distinto en la web.
   Con el cuadriculado se ve de un vistazo cuál es cuál. */
.logo-caja{display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap}
.logo-muestra{width:200px; height:110px; flex:0 0 auto; border:1px solid var(--line);
  border-radius:6px; display:grid; place-items:center; padding:10px;
  background-color:#fff;
  background-image:linear-gradient(45deg,#eef1ef 25%,transparent 25%,transparent 75%,#eef1ef 75%),
                   linear-gradient(45deg,#eef1ef 25%,transparent 25%,transparent 75%,#eef1ef 75%);
  background-size:16px 16px; background-position:0 0,8px 8px}
.logo-muestra img{max-width:100%; max-height:100%; object-fit:contain}
.logo-vacio{font-size:13px; color:var(--ink-faint)}
.logo-lado{flex:1 1 260px; display:flex; flex-direction:column; gap:10px}
.logo-botones{display:flex; gap:8px; flex-wrap:wrap}

/* Importar CSV: emparejar columnas. Sencillo, una fila por campo. */
.imp-nota{font-size:13px; color:var(--ink-soft); margin:0 0 12px}
.imp-consent{margin-top:12px; padding:8px 10px; background:var(--toxo-bg);
  border-left:3px solid var(--toxo); border-radius:0 3px 3px 0; font-size:12.5px}
.imp-fila{display:flex; align-items:center; gap:12px; margin-bottom:8px}
.imp-fila label{flex:0 0 90px; font-size:13px; font-weight:600}
.imp-fila select{flex:1 1 auto; min-width:0; padding:7px 9px; font:inherit}

/* Campañas propuestas (ola 276): cada propuesta, con su texto plegado. */
.mkt-props-intro{margin:14px 18px 4px}
.mkt-prop{align-items:flex-start; gap:14px}
.mkt-prop-txt{min-width:0; flex:1}
.mkt-prop-txt .tag{margin-right:8px}
.mkt-prop-txt details{margin-top:8px}
.mkt-prop-txt summary{cursor:pointer; font-size:13px; color:var(--ink-soft)}
.mkt-prop-cuerpo{margin-top:8px; padding:12px 14px; border-radius:6px; background:var(--paper);
  font-size:14px; line-height:1.55; white-space:normal}
.mkt-prop-btns{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
@media (max-width:640px){
  .mkt-prop{flex-direction:column}
  .mkt-prop-btns{justify-content:flex-start}
}

/* ── Citas (reservas, 2026-10-20) ─────────────────────────────────────────
   La agenda de la semana por días. Cada cita en tres columnas: la hora, quién
   y qué, y lo que se puede hacer con ella. En el móvil las acciones bajan. */
.chip.warn{background:var(--toxo-bg); color:var(--toxo-deep)}
.cit-nav{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.cit-rango{margin-left:6px; font-weight:700}
.cit-dia{padding:14px 20px; border-top:1px solid var(--line-soft)}
.cit-dia.hoy{background:#F4F8F7}
.cit-dia h3{display:flex; align-items:center; gap:8px; margin:0 0 6px; font-size:14px}
.cit-vacio{margin:0; color:var(--ink-faint); font-size:13.5px}
.cit-cita{display:grid; grid-template-columns:64px 1fr auto; gap:12px; align-items:start;
  padding:10px 0; border-top:1px dashed var(--line-soft)}
.cit-dia h3 + .cit-cita{border-top:0}
.cit-hora{font-weight:700; font-size:15px; font-variant-numeric:tabular-nums}
.cit-hora span{display:block; font-weight:400; font-size:12.5px; color:var(--ink-faint)}
.cit-que{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; min-width:0}
.cit-que .muted, .cit-contacto, .cit-nota{flex-basis:100%; font-size:13px}
.cit-nota{padding:4px 8px; border-radius:var(--r); background:var(--toxo-bg)}
.cit-acciones{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px}
.cit-cita.cancelada b, .cit-cita.no_show b{text-decoration:line-through; color:var(--ink-soft)}
.cit-cita.bloqueo{padding:10px 8px; border-radius:var(--r); border-top:0; margin-top:4px;
  background:repeating-linear-gradient(45deg, transparent 0 6px, var(--paper) 6px 12px)}
.cit-pasos{margin:0; padding-left:20px}
.cit-pasos li{margin:0 0 6px}
.cit-horario{display:grid; gap:6px; margin:0 0 14px}
.cit-hdia{display:grid; grid-template-columns:130px repeat(4, 1fr); gap:6px; align-items:center}
.cit-hdia .chk{text-transform:capitalize}
@media (max-width:640px){
  .cit-cita{grid-template-columns:56px 1fr}
  .cit-acciones{grid-column:2; justify-content:flex-start}
  .cit-hdia{grid-template-columns:1fr 1fr}
  .cit-hdia label{grid-column:1 / -1}
}

/* ── Ayuda: el hilo de un caso de soporte (ola 314) ─────────────────────── */
.ay-hilo{display:flex; flex-direction:column; gap:10px; max-height:46vh; overflow-y:auto;
  margin:0 0 14px; padding-right:4px}
.ay-msg{background:var(--white); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:10px 12px}
.ay-msg.nuestro{background:var(--sea-tint); border-color:var(--sea-tint)}
.ay-quien{margin:0 0 4px; font-size:13px}
.ay-texto{margin:0; font-size:15px; line-height:1.55; white-space:pre-line; overflow-wrap:anywhere}
.ay-capturas{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.ay-capturas img{width:96px; height:72px; object-fit:cover; border:1px solid var(--line);
  border-radius:var(--r); display:block}
#ayNuevo .modal>header, #ayCaso .modal>header{position:relative; padding-right:48px}
#ayNuevo .modal>header .x, #ayCaso .modal>header .x{position:absolute; top:16px; right:16px}