/* ============================================================
   MINTUS ERP · interfaz
   Paleta heredada de la marca: menta, crema y gris cálido.
   Diseño denso pero legible, pensado para uso diario.
   ============================================================ */

:root{
  --menta:#B8E7D7; --menta-claro:#DCF1E9; --menta-medio:#8FD5C2; --menta-fuerte:#2E7D6B;
  --crema:#F8F4EB; --crema-tono:#F1EBDF; --papel:#fff;
  --tinta:#35362F; --tinta-suave:#5D5E59; --tinta-tenue:#8B877E;
  --linea:#E4DED1; --oro:#B08A46;
  --ok:#2E7D6B; --ok-bg:#DCF1E9;
  --aviso:#9A6B15; --aviso-bg:#FBF3E0;
  --malo:#A8443C; --malo-bg:#FBEDEC;
  --info:#3F6E97; --info-bg:#E7EFF6;
  --r:10px; --r-sm:7px; --r-full:999px;
  --sombra:0 1px 2px rgba(53,54,47,.05), 0 4px 14px rgba(53,54,47,.06);
  --sombra-lg:0 4px 12px rgba(53,54,47,.08), 0 20px 50px rgba(53,54,47,.12);
  --mono:ui-monospace,'Cascadia Code',Consolas,monospace;
  --barra-h:56px; --lateral-w:212px;
}
@media (prefers-color-scheme:dark){
  :root{
    --crema:#1A1B18; --crema-tono:#222420; --papel:#212320;
    --tinta:#EFEBE2; --tinta-suave:#B6B2A7; --tinta-tenue:#8A867C; --linea:#33352F;
    --menta-claro:#1B2E28; --menta:#2A4A41; --menta-fuerte:#7FD5BE;
    --ok-bg:#16302A; --aviso-bg:#2E2513; --malo-bg:#2E1A18; --info-bg:#182530;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
    --sombra-lg:0 4px 12px rgba(0,0,0,.5), 0 20px 50px rgba(0,0,0,.5);
  }
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--crema); color:var(--tinta); font-size:15px; line-height:1.6;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--menta-fuerte); outline-offset:2px; border-radius:4px}
h1{font-size:1.6rem; margin:0; letter-spacing:-.02em}
h2{font-size:1.08rem; margin:0 0 .9rem; letter-spacing:-.01em}
h3{font-size:.98rem; margin:0 0 .5rem}
code{font-family:var(--mono); font-size:.86em; background:var(--crema-tono); padding:1px 5px; border-radius:4px}
.saltar{position:absolute;left:-9999px}
.saltar:focus{left:8px;top:8px;z-index:200;background:var(--papel);padding:8px 14px;border-radius:6px}

/* ---------------- BARRA ---------------- */
.barra{
  position:sticky; top:0; z-index:60; height:var(--barra-h);
  display:flex; align-items:center; gap:12px; padding:0 16px;
  background:var(--papel); border-bottom:1px solid var(--linea);
}
.marca{display:flex; align-items:center; gap:9px; font-size:1.02rem}
.marca img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.marca b{color:var(--menta-fuerte); font-weight:700}
.barra-der{margin-left:auto; display:flex; align-items:center; gap:10px}
.chip-perfil{
  display:flex; flex-direction:column; line-height:1.15; padding:5px 12px;
  background:var(--crema-tono); border-radius:var(--r-full); font-size:.85rem; font-weight:600;
}
.chip-perfil small{font-size:.72rem; color:var(--tinta-tenue); font-weight:500}
.menu-btn{display:none; padding:6px; border-radius:6px}
.menu-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round}

/* ---------------- ESTRUCTURA ---------------- */
.cuerpo{display:grid; grid-template-columns:var(--lateral-w) minmax(0,1fr)}
.lateral{
  position:sticky; top:var(--barra-h); align-self:start; height:calc(100vh - var(--barra-h));
  overflow-y:auto; padding:14px 10px 40px; border-right:1px solid var(--linea); background:var(--papel);
}
.lateral a{
  display:flex; align-items:center; gap:10px; padding:.55rem .75rem; margin-bottom:1px;
  border-radius:var(--r-sm); font-size:.89rem; color:var(--tinta-suave); font-weight:500;
}
.lateral a svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.lateral a:hover{background:var(--crema-tono); color:var(--tinta)}
.lateral a.activo{background:var(--menta-claro); color:var(--menta-fuerte); font-weight:650}
.panel{padding:22px 24px 70px; min-width:0}

@media(max-width:900px){
  .cuerpo{grid-template-columns:1fr}
  .menu-btn{display:block}
  .lateral{
    position:fixed; inset:var(--barra-h) auto 0 0; width:250px; z-index:55;
    transform:translateX(-105%); transition:transform .25s ease; box-shadow:var(--sombra-lg);
  }
  .lateral.abierto{transform:none}
  .panel{padding:16px 14px 60px}
  .chip-perfil{display:none}
}

/* ---------------- ENCABEZADO DE PÁGINA ---------------- */
.pagina-cab{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:1.4rem}
.pagina-cab .sub{margin:.25rem 0 0; color:var(--tinta-tenue); font-size:.9rem}
.pagina-acc{display:flex; gap:.5rem; flex-wrap:wrap}

/* ---------------- BOTONES ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45em;
  padding:.55em 1.05em; border-radius:var(--r-full); font-size:.88rem; font-weight:600;
  border:1.5px solid var(--linea); background:var(--papel); transition:all .15s; white-space:nowrap;
}
.btn:hover{border-color:var(--menta-medio)}
.btn-principal{background:var(--menta-fuerte); color:#fff; border-color:transparent}
.btn-principal:hover{filter:brightness(1.08)}
.btn-plano{border-color:transparent; background:transparent; color:var(--tinta-suave)}
.btn-plano:hover{background:var(--crema-tono)}
.btn-chico{padding:.34em .78em; font-size:.8rem}
.btn-malo{color:var(--malo); border-color:transparent}
.btn-malo:hover{border-color:var(--malo)}
.ancho{width:100%}

/* ---------------- AVISOS ---------------- */
.aviso{padding:.8rem 1.05rem; border-radius:var(--r-sm); margin-bottom:1.2rem; font-size:.9rem; border-left:3px solid}
.aviso.ok{background:var(--ok-bg); border-color:var(--ok); color:var(--ok)}
.aviso.error,.aviso.malo{background:var(--malo-bg); border-color:var(--malo); color:var(--malo)}
.aviso.aviso-t{background:var(--aviso-bg); border-color:var(--aviso); color:var(--aviso)}
.aviso.info{background:var(--info-bg); border-color:var(--info); color:var(--info)}

/* ---------------- CIFRAS ---------------- */
.cifras{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); margin-bottom:1.8rem}
.cifra{background:var(--papel); border:1px solid var(--linea); border-radius:var(--r); padding:14px 16px}
.cifra .etq{display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--tinta-tenue); font-weight:700}
.cifra strong{display:block; font-size:1.5rem; letter-spacing:-.02em; margin:.25rem 0 .1rem; font-variant-numeric:tabular-nums}
.cifra small{color:var(--tinta-tenue); font-size:.78rem}
.cifra.atencion{border-color:var(--aviso)} .cifra.atencion strong{color:var(--aviso)}
.cifra.malo{border-color:var(--malo)} .cifra.malo strong{color:var(--malo)}

/* ---------------- BLOQUES ---------------- */
.bloque{margin-bottom:2rem}
.tarjeta{background:var(--papel); border:1px solid var(--linea); border-radius:var(--r); padding:20px 22px; margin-bottom:1.3rem}
.tarjeta.destacada{border-color:var(--menta-medio); background:var(--menta-claro)}
.tarjeta.destacada h2{color:var(--menta-fuerte)}
.tarjeta p{margin:.4rem 0 1rem; color:var(--tinta-suave); font-size:.92rem}

.alertas{display:grid; gap:8px}
.alerta{padding:.7rem 1rem; border-radius:var(--r-sm); font-size:.89rem; font-weight:550; border-left:3px solid}
.alerta.malo{background:var(--malo-bg); border-color:var(--malo); color:var(--malo)}
.alerta.aviso{background:var(--aviso-bg); border-color:var(--aviso); color:var(--aviso)}

.accesos{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
.acceso-r{
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:18px 10px;
  background:var(--papel); border:1px solid var(--linea); border-radius:var(--r);
  font-size:.85rem; font-weight:600; text-align:center; transition:all .16s;
}
.acceso-r:hover{border-color:var(--menta-medio); transform:translateY(-2px)}
.acceso-r svg{width:22px;height:22px;stroke:var(--menta-fuerte);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------------- METAS ---------------- */
.metas-lista{display:grid; gap:14px}
.meta-fila{background:var(--papel); border:1px solid var(--linea); border-radius:var(--r); padding:13px 16px}
.meta-cab{display:flex; justify-content:space-between; gap:12px; font-size:.9rem; margin-bottom:.5rem; flex-wrap:wrap}
.meta-cab span{color:var(--tinta-tenue); font-variant-numeric:tabular-nums}
.barra-avance{height:8px; background:var(--crema-tono); border-radius:var(--r-full); overflow:hidden}
.barra-avance span{display:block; height:100%; border-radius:var(--r-full); background:var(--menta-fuerte); transition:width .4s}
.barra-avance span.aviso{background:var(--aviso)} .barra-avance span.malo{background:var(--malo)}
.meta-fila small{display:block; margin-top:.35rem; color:var(--tinta-tenue); font-size:.8rem}

/* ---------------- TABLAS ---------------- */
.tabla-env{overflow-x:auto; border:1px solid var(--linea); border-radius:var(--r); background:var(--papel)}
.tabla{width:100%; border-collapse:collapse; font-size:.88rem; min-width:600px}
.tabla th{
  text-align:left; padding:10px 13px; background:var(--crema-tono); border-bottom:1px solid var(--linea);
  font-size:.74rem; text-transform:uppercase; letter-spacing:.07em; color:var(--tinta-tenue); white-space:nowrap;
}
.tabla td{padding:10px 13px; border-bottom:1px solid var(--linea); vertical-align:middle}
.tabla tbody tr:last-child td{border-bottom:0}
.tabla tbody tr:hover{background:var(--crema)}
.tabla tbody tr:has(input[type=checkbox]:checked){background:var(--menta-claro)}
.tabla small{color:var(--tinta-tenue); font-size:.8rem}
.tabla .der{text-align:right; font-variant-numeric:tabular-nums}
.tabla .cen{text-align:center}
.tabla img.mini{width:40px;height:40px;object-fit:cover;border-radius:6px}
.txt-malo{color:var(--malo)} .txt-ok{color:var(--ok)} .txt-tenue{color:var(--tinta-tenue)}

.pastilla{display:inline-block; padding:.16em .62em; border-radius:var(--r-full); font-size:.74rem; font-weight:700; white-space:nowrap}
.pastilla.ok{background:var(--ok-bg); color:var(--ok)}
.pastilla.aviso{background:var(--aviso-bg); color:var(--aviso)}
.pastilla.malo{background:var(--malo-bg); color:var(--malo)}
.pastilla.info{background:var(--info-bg); color:var(--info)}
.pastilla.neutro{background:var(--crema-tono); color:var(--tinta-tenue)}

.vacio{text-align:center; padding:52px 20px; color:var(--tinta-tenue); background:var(--papel); border:1px dashed var(--linea); border-radius:var(--r)}
.vacio h3{color:var(--tinta); margin-bottom:.3rem}

/* ---------------- FORMULARIOS ---------------- */
.forma{background:var(--papel); border:1px solid var(--linea); border-radius:var(--r); padding:20px 22px; margin-bottom:1.3rem}
.forma label{display:block; margin-bottom:1rem; font-size:.83rem; font-weight:650; color:var(--tinta-suave)}
.forma input[type=text],.forma input[type=number],.forma input[type=date],.forma input[type=password],
.forma input[type=email],.forma input[type=search],.forma input:not([type]),.forma select,.forma textarea{
  display:block; width:100%; margin-top:.32rem; padding:.58em .8em;
  border:1.5px solid var(--linea); border-radius:var(--r-sm);
  background:var(--crema); font-size:.92rem; font-weight:400; color:var(--tinta);
}
.forma input:focus,.forma select:focus,.forma textarea:focus{border-color:var(--menta-fuerte); outline:none; background:var(--papel)}
.forma input[type=file]{padding:.45em; font-size:.85rem; background:var(--crema)}
.forma textarea{resize:vertical; font-family:inherit}
.forma small{display:block; margin-top:.28rem; font-weight:400; color:var(--tinta-tenue); font-size:.79rem}
.rejilla{display:grid; gap:0 16px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.rejilla-2{display:grid; gap:0 16px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.check{display:flex; align-items:flex-start; gap:.55rem; font-weight:500; color:var(--tinta); margin-bottom:.85rem}
.check input{width:auto; margin:.25rem 0 0; accent-color:var(--menta-fuerte); flex-shrink:0}
.acciones{display:flex; gap:.6rem; margin-top:1.2rem; flex-wrap:wrap; align-items:center}
.req{color:var(--malo)}

/* Texto de ayuda / secundario -- la clase que ya usan ~50 pantallas para
   parrafos, celdas y anotaciones muted. NUNCA position:absolute ni tamano
   fijo aqui: eso fue lo que rompio Estudio y otras pantallas (texto
   encimado, ilegible) cuando esta clase compartia nombre con el globito
   de ayuda de abajo. Visto en la pantalla real antes de corregir. */
.ayuda{color:var(--tinta-suave); font-size:.87rem; line-height:1.5}
td.ayuda,span.ayuda{font-size:.85rem}

/* El globito de ayuda (icono "?" con tooltip) -- nombre propio, ya no
   comparte "ayuda" con el texto secundario de arriba. */
.tip{
  display:inline-grid; place-items:center; width:16px; height:16px; margin-left:.3em;
  border-radius:50%; background:var(--crema-tono); color:var(--tinta-tenue);
  font-size:.68rem; font-weight:700; cursor:help; position:relative; vertical-align:middle;
}
.tip-globo{
  display:none; position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  width:240px; padding:.65rem .8rem; background:var(--tinta); color:var(--crema);
  border-radius:var(--r-sm); font-size:.79rem; font-weight:400; line-height:1.45;
  z-index:80; box-shadow:var(--sombra-lg); text-align:left;
}
.tip:hover .tip-globo,.tip:focus .tip-globo{display:block}

/* Parámetro con sus dos ejemplos */
.parametro{padding:16px 0; border-bottom:1px solid var(--linea)}
.parametro:last-child{border-bottom:0}
.parametro-cab{display:flex; justify-content:space-between; gap:16px; align-items:flex-start; flex-wrap:wrap}
.parametro-cab strong{font-size:.94rem; font-weight:650}
.parametro-cab .campo{min-width:190px; max-width:260px}
.parametro .desc{font-size:.85rem; color:var(--tinta-suave); margin:.2rem 0 .6rem; max-width:62ch}
.ejemplos{display:grid; gap:9px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin-top:.5rem}
.ejemplo{padding:.6rem .8rem; border-radius:var(--r-sm); font-size:.82rem; line-height:1.45}
.ejemplo.si{background:var(--ok-bg); color:var(--ok)}
.ejemplo.no{background:var(--crema-tono); color:var(--tinta-suave)}
.ejemplo b{display:block; font-size:.71rem; text-transform:uppercase; letter-spacing:.07em; margin-bottom:.15rem}

/* Mensajes del bot: el campo es un textarea, le hace falta mas ancho que un input corto */
.parametro-cab .campo:has(textarea){max-width:420px; flex:1 1 320px}
.forma textarea.wa-textarea{min-height:4.2em}

/* Aviso de formato de WhatsApp, solo en Configuracion -> Bot */
.wa-formato{padding:14px 18px; margin-bottom:1.1rem; background:var(--menta-claro); border-color:var(--menta-medio)}
.wa-formato strong{font-size:.86rem; display:block; margin-bottom:.55rem}
.wa-formato-rejilla{display:grid; gap:6px 18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); font-size:.82rem}
.wa-formato-rejilla code{font-size:.85em}

/* ---------------- POS ---------------- */
.pos{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; align-items:start}
@media(max-width:940px){.pos{grid-template-columns:1fr}}
.pos-buscar input{font-size:1.02rem; padding:.75em 1em}
.pos-resultados{display:grid; gap:8px; margin-top:12px; max-height:440px; overflow-y:auto}
.pos-item{
  display:flex; align-items:center; gap:12px; padding:9px 12px; background:var(--papel);
  border:1px solid var(--linea); border-radius:var(--r-sm); cursor:pointer; text-align:left; width:100%;
}
.pos-item:hover{border-color:var(--menta-medio); background:var(--menta-claro)}
.pos-item img{width:42px;height:42px;object-fit:cover;border-radius:6px;flex-shrink:0}
.pos-item .info{flex:1; min-width:0}
.pos-item .info b{display:block; font-size:.9rem}
.pos-item .info small{color:var(--tinta-tenue); font-family:var(--mono); font-size:.75rem}
.pos-item .precio{font-weight:700; font-variant-numeric:tabular-nums}
.ticket{background:var(--papel); border:1px solid var(--linea); border-radius:var(--r); padding:16px; position:sticky; top:calc(var(--barra-h) + 14px)}
.ticket h2{margin-bottom:.7rem}
.ticket-lineas{display:grid; gap:7px; margin-bottom:12px; max-height:280px; overflow-y:auto}
.ticket-linea{display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center; font-size:.86rem; padding:7px 0; border-bottom:1px solid var(--linea)}
.ticket-linea b{display:block}
.ticket-linea small{color:var(--tinta-tenue); font-family:var(--mono); font-size:.73rem}
.ticket-total{display:flex; justify-content:space-between; padding:.55rem 0; font-size:1.15rem; font-weight:700; border-top:2px solid var(--tinta); margin-top:.5rem}
.ticket-sub{display:flex; justify-content:space-between; font-size:.86rem; color:var(--tinta-suave); padding:.15rem 0}

/* ---------------- PAGINACIÓN ---------------- */
.paginacion{display:flex; gap:5px; margin-top:16px; flex-wrap:wrap; justify-content:center}
.paginacion a{padding:.36em .78em; border-radius:var(--r-sm); border:1px solid var(--linea); font-size:.85rem; background:var(--papel)}
.paginacion a.actual{background:var(--menta-fuerte); color:#fff; border-color:transparent; font-weight:700}
.paginacion span{padding:.36em .3em; color:var(--tinta-tenue)}

/* ---------------- FILTROS ---------------- */
.filtros{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-bottom:1.1rem; padding:12px 14px; background:var(--papel); border:1px solid var(--linea); border-radius:var(--r)}
.filtros input,.filtros select{padding:.48em .8em; border:1.5px solid var(--linea); border-radius:var(--r-full); background:var(--crema); font-size:.86rem}
.filtros input[type=search]{min-width:210px; flex:1}

/* ---------------- ACCESO ---------------- */
body.acceso{display:grid; place-items:center; min-height:100vh; padding:20px; background:var(--crema-tono)}
.acceso-caja{background:var(--papel); border:1px solid var(--linea); border-radius:16px; padding:36px 32px; width:100%; max-width:390px; box-shadow:var(--sombra-lg); text-align:center}
.acceso-logo{width:88px;height:88px;border-radius:50%;object-fit:cover;margin:0 auto 16px}
.acceso-caja h1{font-size:1.35rem; margin-bottom:.2rem}
.acceso-sub{color:var(--tinta-tenue); font-size:.88rem; margin:0 0 1.5rem}
.acceso-caja form{text-align:left}
.acceso-caja label{display:block; margin-bottom:1rem; font-size:.83rem; font-weight:650; color:var(--tinta-suave)}
.acceso-caja input{display:block; width:100%; margin-top:.32rem; padding:.6em .85em; border:1.5px solid var(--linea); border-radius:var(--r-sm); background:var(--crema); font-size:.95rem}
.acceso-caja input:focus{border-color:var(--menta-fuerte); outline:none; background:var(--papel)}
.acceso-nota{margin-top:1.4rem; padding:.8rem .95rem; background:var(--aviso-bg); border-radius:var(--r-sm); font-size:.81rem; color:var(--aviso); text-align:left; line-height:1.5}
.acceso-pie{margin:1.3rem 0 0; font-size:.84rem}
.acceso-pie a{color:var(--tinta-tenue)}

/* ---------------- WIZARD ---------------- */
.wizard-pasos{display:flex; gap:6px; margin-bottom:1.6rem; flex-wrap:wrap}
.wizard-paso{
  flex:1; min-width:64px; padding:.5rem .4rem; text-align:center; border-radius:var(--r-sm);
  background:var(--crema-tono); font-size:.74rem; font-weight:650; color:var(--tinta-tenue);
  border-bottom:3px solid transparent;
}
.wizard-paso.actual{background:var(--menta-claro); color:var(--menta-fuerte); border-color:var(--menta-fuerte)}
.wizard-paso.hecho{color:var(--ok)} .wizard-paso.hecho::before{content:'✓ '}

/* ---------------- WIKI ---------------- */
.wiki{display:grid; grid-template-columns:220px minmax(0,1fr); gap:24px; align-items:start}
@media(max-width:800px){.wiki{grid-template-columns:1fr}}
.wiki-nav a{display:block; padding:.5rem .75rem; border-radius:var(--r-sm); font-size:.87rem; color:var(--tinta-suave)}
.wiki-nav a:hover{background:var(--crema-tono)}
.wiki-nav a.activo{background:var(--menta-claro); color:var(--menta-fuerte); font-weight:650}
.wiki-cuerpo{background:var(--papel); border:1px solid var(--linea); border-radius:var(--r); padding:26px 30px; max-width:74ch}
.wiki-cuerpo h1{font-size:1.5rem; margin-bottom:1rem}
.wiki-cuerpo h2{font-size:1.08rem; margin:1.6rem 0 .6rem}
.wiki-cuerpo p,.wiki-cuerpo li{color:var(--tinta-suave); font-size:.93rem}
.wiki-cuerpo table{width:100%; border-collapse:collapse; margin:1rem 0; font-size:.88rem}
.wiki-cuerpo th,.wiki-cuerpo td{padding:.5rem .7rem; border-bottom:1px solid var(--linea); text-align:left}
.wiki-cuerpo th{background:var(--crema-tono); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--tinta-tenue)}
.wiki-cuerpo blockquote{margin:1rem 0; padding:.7rem 1rem; background:var(--menta-claro); border-left:3px solid var(--menta-fuerte); border-radius:0 var(--r-sm) var(--r-sm) 0}
.wiki-cuerpo blockquote p{margin:0; color:var(--menta-fuerte)}

@media print{ .barra,.lateral,.pagina-acc,.acciones{display:none} .cuerpo{display:block} .panel{padding:0} }

/* ============================================================
   SERVICIOS · calendario, fotos y bloques de recepción
   ============================================================ */
.calendario{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.cal-cab{font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
         text-align:center; padding:6px 0; color:var(--tinta-suave,#5D5E59); font-weight:700}
.cal-dia{min-height:88px; border:1px solid var(--linea,#E4DED1); border-radius:8px;
         padding:4px; display:flex; flex-direction:column; gap:3px; background:var(--papel,#fff)}
.cal-vacio{border-style:dashed; opacity:.35}
.cal-hoy{border-color:var(--menta-fuerte,#2E7D6B); border-width:2px}
.cal-tarde{background:#FDF3F2}
.cal-num{font-size:.72rem; color:var(--tinta-tenue,#8B877E); font-weight:700}
.cal-orden{display:block; font-size:.68rem; line-height:1.25; padding:3px 5px; border-radius:5px;
           background:var(--menta-claro,#DCF1E9); color:var(--tinta,#35362F);
           text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cal-orden span{color:var(--tinta-suave,#5D5E59)}
.cal-orden:hover{background:var(--menta,#B8E7D7)}
.cal-urgente{background:#FBE4DF; border-left:3px solid #A8443C}

.fotos-orden{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.fotos-orden img{width:92px; height:92px; object-fit:cover; border-radius:8px;
                 border:1px solid var(--linea,#E4DED1)}

.bloque{border:1px solid var(--linea,#E4DED1); border-radius:10px; padding:14px; margin-bottom:12px;
        background:var(--papel,#fff)}
.bloque-pieza{border-left:3px solid var(--menta-fuerte,#2E7D6B)}

.alertas{display:flex; flex-direction:column; gap:8px; margin-bottom:14px}

@media (max-width:760px){
  .calendario{grid-template-columns:repeat(2,1fr)}
  .cal-cab{display:none}
  .cal-vacio{display:none}
  .cal-dia{min-height:auto}
}

/* ============================================================
   LABORATORIO DE PRÁCTICA
   ============================================================ */
.lab-avance{display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:10px}
.lab-avance .barra{flex:1; min-width:180px}

.lab-lecciones{display:flex; flex-direction:column; gap:10px}
.lab-leccion{border:1px solid var(--linea,#E4DED1); border-radius:12px;
             background:var(--papel,#fff); overflow:hidden; transition:border-color .2s}
.lab-leccion:hover{border-color:var(--menta-medio,#8FD5C2)}
.lab-abierta{border-color:var(--menta-fuerte,#2E7D6B)}
.lab-lista{background:linear-gradient(0deg, rgba(46,125,107,.04), rgba(46,125,107,.04))}

.lab-cab{display:flex; align-items:center; gap:14px; padding:14px 16px; text-decoration:none; color:inherit}
.lab-marca{flex-shrink:0; width:42px; height:42px; display:grid; place-items:center;
           border-radius:50%; background:var(--menta-claro,#DCF1E9); color:var(--menta-fuerte,#2E7D6B);
           font-weight:800; font-size:.82rem}
.lab-lista .lab-marca{background:var(--menta-fuerte,#2E7D6B); color:#fff; font-size:1.1rem}
.lab-titulo{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.lab-titulo strong{font-size:1.02rem}
.lab-min{flex-shrink:0; font-size:.74rem; color:var(--tinta-tenue,#8B877E);
         border:1px solid var(--linea,#E4DED1); border-radius:99px; padding:.2em .7em}

.lab-cuerpo{padding:4px 16px 16px; border-top:1px solid var(--linea,#E4DED1)}
.lab-paso{display:flex; align-items:flex-start; gap:12px; padding:12px 0;
          border-bottom:1px dashed var(--linea,#E4DED1)}
.lab-paso:last-of-type{border-bottom:0}
.lab-check{flex-shrink:0; margin:0}
.lab-bola{width:26px; height:26px; border-radius:50%; border:2px solid var(--linea,#E4DED1);
          background:transparent; display:grid; place-items:center; cursor:pointer;
          font-weight:800; color:#fff; line-height:1; transition:all .18s}
.lab-bola:hover{border-color:var(--menta-fuerte,#2E7D6B)}
.lab-paso-listo .lab-bola{background:var(--menta-fuerte,#2E7D6B); border-color:var(--menta-fuerte,#2E7D6B)}
.lab-paso-listo .lab-texto strong{text-decoration:line-through; opacity:.6}
.lab-texto{flex:1; min-width:0}
.lab-estado{margin-top:4px; font-size:.72rem}
.lab-ok{color:var(--menta-fuerte,#2E7D6B); font-weight:600}
.lab-pend{color:var(--tinta-tenue,#8B877E)}
.lab-felicidad{margin-top:12px; padding:10px 14px; border-radius:10px;
               background:var(--menta-claro,#DCF1E9); color:var(--menta-fuerte,#2E7D6B);
               font-weight:600; font-size:.9rem}

@media (max-width:620px){
  .lab-cab{flex-wrap:wrap}
  .lab-min{order:3}
  .lab-paso{flex-wrap:wrap}
}

/* ============================================================
   PÁGINA · plantillas y editor
   ============================================================ */
.plantillas{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px }
.plantilla{
  border:1.5px solid var(--linea,#E4DED1); border-radius:12px; padding:16px;
  background:var(--papel,#fff); transition:border-color .2s, transform .2s;
}
.plantilla:hover{ border-color:var(--menta-medio,#8FD5C2); transform:translateY(-2px) }
.plantilla-activa{ border-color:var(--menta-fuerte,#2E7D6B); border-width:2.5px }
.plantilla h4{ margin:10px 0 2px; display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.plantilla-lema{ font-size:.8rem; color:var(--menta-fuerte,#2E7D6B); font-weight:700;
                 text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px }
.plantilla p{ font-size:.88rem; margin:0 0 8px }
.plantilla-muestra{ display:flex; height:52px; border-radius:8px; overflow:hidden;
                    border:1px solid var(--linea,#E4DED1) }
.plantilla-muestra span{ flex:1 }

.editor{ border:1px solid var(--linea,#E4DED1); border-radius:8px; overflow:hidden;
         background:var(--papel,#fff) }
.editor-barra{ display:flex; gap:2px; padding:5px; background:var(--crema,#F8F4EB);
               border-bottom:1px solid var(--linea,#E4DED1) }
.editor-barra button{
  min-width:32px; height:28px; border-radius:5px; border:1px solid transparent;
  background:transparent; cursor:pointer; font-size:.85rem; line-height:1;
}
.editor-barra button:hover{ background:var(--menta-claro,#DCF1E9);
                            border-color:var(--menta-medio,#8FD5C2) }
.editor-area{ padding:10px 12px; min-height:76px; font-size:.95rem; line-height:1.6;
              outline:none }
.editor-area:focus{ box-shadow:inset 0 0 0 2px var(--menta-claro,#DCF1E9) }
.editor-area p{ margin:0 0 .5em }
.editor-area ul,.editor-area ol{ margin:.3em 0; padding-left:1.3em }
.editor-area a{ color:var(--menta-fuerte,#2E7D6B); text-decoration:underline }

.color-fila{ display:flex; align-items:center; gap:10px }
.color-fila input[type=color]{ width:52px; height:34px; padding:2px; border-radius:6px;
                               border:1px solid var(--linea,#E4DED1); cursor:pointer }

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

/* ============================================================
   Bandeja de conversaciones
   El hilo se lee como se lee WhatsApp: lo del cliente a la
   izquierda, lo nuestro a la derecha. Cualquier otra disposición
   obliga a leer quién habla en cada renglón.
   ============================================================ */
.hilo{display:flex;flex-direction:column;gap:.7rem;max-height:56vh;overflow-y:auto;
      padding:.9rem;background:var(--crema-tono,#f1ebdf);border-radius:10px}
.burbuja{max-width:76%;padding:.6rem .85rem;border-radius:12px;
         background:var(--papel,#fff);border:1px solid var(--linea,#d9d2c4)}
.burbuja-mia{align-self:flex-end;background:var(--menta-claro,#dcf1e9);
             border-color:var(--menta-medio,#8fd5c2)}
.burbuja-quien{font-size:.78rem;color:var(--tinta-tenue,#6f6b63);margin-bottom:.2rem}
.burbuja-texto{white-space:pre-wrap;word-break:break-word;line-height:1.45}

/* En el teléfono el hilo se lleva la pantalla completa: es donde
   de verdad se va a contestar. */
@media (max-width:640px){
  .hilo{max-height:66vh;padding:.6rem}
  .burbuja{max-width:88%}
}

/* ============================================================
   Estado del bot — Conversaciones → Conexión
   Los tres candados (teléfono, encendido, simulación) vivían en
   tres tarjetas sueltas, cada una con su propio texto, sin decir
   en qué orden ni qué hacer primero. Maribel nunca los pasó los
   tres: 2026-09-15, 0 conversaciones y 0 mensajes en la base.
   Prefijo `ebot-` a propósito: `.panel`, `.num` y `.mini` ya
   existen en el sistema con otro significado (`.panel` es el
   contenedor de página completo en layout.php — reusar ese nombre
   aquí habría roto el layout de TODA la pantalla, no sólo esta).
   ============================================================ */
.ebot-siguiente{
  display:flex; gap:16px; align-items:center;
  background:var(--menta-claro); border:1px solid var(--menta-medio);
  border-radius:14px; padding:18px 22px; margin-bottom:1.3rem;
}
.ebot-siguiente.ebot-siguiente-ok{background:var(--ok-bg); border-color:var(--ok)}
.ebot-icono{
  flex:none; width:38px; height:38px; border-radius:999px;
  background:var(--menta-fuerte); color:#fff; display:flex;
  align-items:center; justify-content:center; font-size:1.1rem; font-weight:800;
}
.ebot-siguiente-ok .ebot-icono{background:var(--ok)}
.ebot-siguiente-txt{flex:1; min-width:0}
.ebot-eyebrow{
  font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--menta-fuerte); margin-bottom:2px;
}
.ebot-siguiente-ok .ebot-eyebrow{color:var(--ok)}
.ebot-msg{font-size:.98rem; font-weight:650; color:var(--tinta)}
.ebot-sub{font-size:.85rem; color:var(--tinta-suave); margin-top:2px}

.ebot-panel-head{padding:4px 2px 14px}
.ebot-panel-head h2{margin:0 0 3px; font-size:1.05rem; font-weight:700}
.ebot-panel-head p{margin:0; color:var(--tinta-suave); font-size:.86rem}

.ebot-paso{display:flex; gap:14px; align-items:flex-start; padding:18px 4px; border-top:1px solid var(--linea)}
.ebot-num{
  flex:none; width:32px; height:32px; border-radius:999px; display:flex;
  align-items:center; justify-content:center; font-weight:800; font-size:.9rem; margin-top:1px;
}
.ebot-num-pendiente{background:var(--crema-tono); color:var(--tinta-tenue); border:1.5px dashed var(--linea)}
.ebot-num-listo{background:var(--ok); color:#fff}
.ebot-paso-cuerpo{flex:1; min-width:0}
.ebot-paso-cab{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:2px}
.ebot-paso-titulo{font-weight:700; font-size:.96rem}
.ebot-pastilla{display:inline-flex; align-items:center; gap:5px; padding:.2em .65em; border-radius:999px; font-size:.7rem; font-weight:700; white-space:nowrap}
.ebot-pastilla-ok{background:var(--ok-bg); color:var(--ok)}
.ebot-pastilla-falta{background:var(--aviso-bg); color:var(--aviso)}
.ebot-paso-desc{color:var(--tinta-suave); font-size:.87rem; line-height:1.5; margin:0 0 8px; max-width:60ch}
.ebot-paso-detalle{color:var(--tinta-tenue); font-size:.8rem; margin-top:6px}
.ebot-pasos-qr{margin:0; padding-left:1.1em; line-height:1.85; font-size:.88rem}