/* Tema oscuro (estética del brandbook, la de Mister Care OS): se carga DESPUÉS de estilos.css.
   Redefine los colores de estilos.css y ajusta las piezas: oro para lo principal, Outfit en títulos,
   Lato en el texto e Inter en botones y etiquetas. Hoy lo usa la bienvenida. */
@font-face{font-family:"EB Garamond";src:url(/fuentes/garamond.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(/fuentes/garamond-italica.woff2) format("woff2");font-weight:400 800;font-style:italic;font-display:swap}
@font-face{font-family:Outfit;src:url(/fuentes/outfit.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Lato;src:url(/fuentes/lato-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Lato;src:url(/fuentes/lato-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Inter;src:url(/fuentes/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}

:root{
  --fondo:#0A0908; --sup:#181614; --sup2:#1E1B18; --linea:#26231F; --linea2:#302C27;
  --texto:#F4F0E8; --suave:#A39D93; --tenue:#8A857D;
  /* «verde» era el color principal de estilos.css: acá pasa a ser el oro */
  --verde:#C79D55; --verde2:#E5BC74; --verde-t:#2A2116;
  --ambar:#E5A651; --ambar-t:#33271A; --rojo:#C2665F; --rojo-t:#2E1A17; --azul:#7C9CB5; --azul-t:#1A2230;
  --oro:#C79D55; --oro2:#E5BC74; --champagne:#D8C29B; --glow:#C79D5533; --pos:#6FA173;
  --sombra:0 1px 2px #0006,0 10px 30px #0005;
  --serif:"EB Garamond",Georgia,serif; --titulo:Outfit,Inter,system-ui,sans-serif;
  --letra:Lato,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --ui:Inter,system-ui,sans-serif;
  color-scheme:dark;
}
body{background:radial-gradient(90% 60% at 50% 0%,#1F160D 0%,var(--fondo) 65%) no-repeat,var(--fondo);font-family:var(--letra)}
a{color:var(--champagne)}
:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
h1,h2,h3{font-family:var(--titulo);font-weight:600;letter-spacing:-.015em}

/* marca: el nombre en Garamond con el rombo dorado */
.marca{font:500 19px var(--serif);letter-spacing:.14em;text-transform:uppercase;color:#F7F3EB;gap:11px}
.marca .rombo{width:9px;height:9px;background:var(--oro);transform:rotate(45deg);box-shadow:0 0 14px var(--glow);flex:none}

/* botones: los de mistercare.vip */
.btn{font:700 14px var(--ui);letter-spacing:.01em;border-radius:10px;border:1px solid var(--linea2);background:var(--sup);color:var(--texto);min-height:44px}
.btn:hover{border-color:var(--oro);color:#fff}
.btn.prim{background:linear-gradient(180deg,#D4AC66,var(--oro));border:0;color:#151210;box-shadow:0 8px 24px #C79D5526,inset 0 1px 0 #ffffff40}
.btn.prim:hover{background:linear-gradient(180deg,#DDB672,#D0A65E);filter:brightness(1.05);color:#151210}
.btn.plano{background:transparent;border-color:transparent;color:var(--tenue)}
.btn.plano:hover{color:var(--oro2);background:#ffffff08}
.btn.chico{min-height:36px;font-size:13px;border-radius:8px}
.btn.peligro{color:var(--rojo);border-color:#C2665F55}

/* encabezado y avance */
.bv-top{border-bottom:1px solid var(--linea);padding:16px max(24px,env(safe-area-inset-right,0px)) 16px max(24px,env(safe-area-inset-left,0px))}
.bv-barra{height:3px;background:var(--linea);margin-top:-1px}
.bv-barra i{background:linear-gradient(90deg,#9C7A3F,var(--oro2));box-shadow:0 0 12px var(--glow)}
.bv-num{color:var(--oro);font:700 11px var(--ui);letter-spacing:.16em}
.bv-caja h1{font-size:34px;line-height:1.12;color:#FFF4E2;text-wrap:balance}
.bv-caja .ayuda{color:var(--suave)}

/* opciones de las preguntas */
.op{background:var(--sup);border:1px solid var(--linea2);border-radius:12px;color:var(--texto);font:600 16px var(--letra)}
.op:hover{border-color:#C79D5588;background:#1C1916}
.op .mk{border-color:#4A443C}
.op.si{border-color:var(--oro);background:linear-gradient(90deg,#2E2416,#1C1814);box-shadow:inset 0 0 0 1px #C79D5533}
.op.si .mk{border-color:var(--oro);background:var(--oro)}
.op.si .mk:after{background:#151210}
.op.varias.si .mk:after{border-color:#151210;background:none}
.bv-input{background:var(--sup2);border:1px solid var(--linea2);border-radius:12px;color:var(--texto);font-family:var(--letra)}
.bv-input:focus{border-color:var(--oro);box-shadow:0 0 0 4px var(--glow)}
.campo span{font:700 10.5px var(--ui);letter-spacing:.15em;text-transform:uppercase;color:var(--tenue)}
.campo input,.campo select,.campo textarea{background:var(--sup2);border-color:var(--linea2);color:var(--texto)}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--oro);box-shadow:0 0 0 3px var(--glow)}

/* módulos y plataformas */
.mod,.plat,.tn-caja,.form-plat{background:var(--sup);border:1px solid var(--linea2);border-radius:14px}
.mod.listo,.plat.listo{border-color:var(--oro);box-shadow:0 0 0 1px #C79D5533,0 14px 40px #0006}
.mod .ic{background:linear-gradient(142deg,var(--oro) 0%,#7A5B2C 100%);color:#151210;box-shadow:0 4px 16px #C79D5540}
.mod.pronto .ic{background:#2A2622;color:var(--tenue);box-shadow:none}
.mod h3,.plat h3{font-size:18px;color:#FFF4E2}
.mod p,.plat p{color:var(--suave)}
.grupo-tit{font:700 10.5px var(--ui);letter-spacing:.16em;color:var(--tenue)}
.chip{font:700 11px var(--ui);letter-spacing:.04em;background:#26221D;color:var(--suave)}
.chip.verde{background:#2A2116;color:var(--oro2)}
.chip.ambar{background:var(--ambar-t);color:var(--ambar)}
.chip.rojo{background:var(--rojo-t);color:#E8A49D}
.chip.azul{background:var(--azul-t);color:#A8C1D6}
.avance{background:var(--sup);border-color:var(--linea2)}
.avance-barra{background:var(--linea)}
.avance-barra i{background:linear-gradient(90deg,#9C7A3F,var(--oro2))}
.ayuda-plat{background:var(--sup2);color:var(--suave)}
.nota{color:var(--tenue)}

/* guías paso a paso */
.guia-nec li{background:var(--sup);border-color:var(--linea2)}
.guia-nec li:before{background:#2A2116;color:var(--oro2)}
.guia-pasos li:before{background:var(--oro);color:#151210;font-family:var(--ui)}

/* avisos */
.aviso.ok{background:#17201A;color:#BFD9C1;border:1px solid #6FA17355}
.aviso.mal,.error{background:var(--rojo-t);color:#E8A49D;border:1px solid #C2665F55}
.aviso.info{background:var(--ambar-t);color:#F0C27F;border:1px solid #E5A65155}
.toast{background:#F4F0E8;color:#151210;font-family:var(--ui)}

@media (max-width:600px){ .bv-caja h1{font-size:27px} }

/* volver */
.bv-volver{font:700 13px/1 var(--ui);letter-spacing:.02em;color:var(--tenue);padding:8px 14px 8px 0}
.bv-volver:hover{color:var(--oro2)}

.avanzado{border-color:var(--linea)}
.avanzado summary{font:600 12.5px var(--ui);color:var(--tenue)}
.drop{background:var(--sup);border-color:#4A443C}
.drop.encima{border-color:var(--oro);background:#2A2116}
.drop svg{color:var(--oro)}

/* ---------------------------------------------------------------- panel */
.pn-menu{background:linear-gradient(165deg,#2B2620 0%,#221E19 48%,#1B1814 100%);border-right:1px solid #3A342B}
.pn-menu .marca{border-bottom:1px solid #3A342B;margin:0 -14px 6px;padding:8px 22px 18px}
.pn-mod{font:700 9.5px var(--ui);letter-spacing:.13em;color:#8C8375}
.pn-menu a.it{color:#D8D1C4;font:600 13.5px var(--letra);border-radius:0 22px 22px 0;margin-left:-14px;padding-left:24px;position:relative}
.pn-menu a.it svg{opacity:.75}
.pn-menu a.it:hover{background:#332D25;color:#F7F3EB}
.pn-menu a.it.si{background:linear-gradient(90deg,#3D3120,transparent 88%);color:#E5BC74;font-weight:700;text-shadow:0 0 18px #C79D5533}
.pn-menu a.it.si::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;background:#E5BC74;border-radius:0 3px 3px 0;box-shadow:0 0 12px #E5BC74}
.pn-menu a.it .cu{background:var(--oro);color:#151210}
.pn-menu .abajo{border-top-color:#3A342B}
.pn-menu .quien{color:#8C8375}
.pn-cab h1{font-size:30px;color:#FFF4E2}
.pn-cab .sub{color:var(--suave)}
.estado-tn{background:var(--sup);border-color:var(--linea2);color:var(--suave)}
.estado-tn .pt{background:var(--pos)}
.kpi{background:var(--sup);border-color:var(--linea);box-shadow:var(--sombra)}
.kpi small{font:700 10.5px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--tenue)}
.kpi b{font-family:var(--letra);font-weight:800;color:var(--texto)}
.kpi.dest{background:linear-gradient(160deg,#2A2116,var(--sup));border-color:#C79D5555}
.kpi.dest b{color:var(--oro2)}
.heroe{background:linear-gradient(160deg,#1A1612 0%,#141210 60%);border:1px solid #2E2820;position:relative;overflow:hidden}
.heroe::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,#C79D5520 0%,transparent 70%);pointer-events:none}
.heroe small{font:700 11px var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--oro)}
.heroe b{font-family:var(--letra);font-weight:800;letter-spacing:-.045em;background:linear-gradient(94deg,#F4F0E8 0%,#D8C29B 58%,#C79D55 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.heroe span{color:var(--suave)}
.heroe.neg{background:linear-gradient(160deg,#2A1412 0%,#141210 60%);border-color:#C2665F55}
.heroe.neg small{color:#E8A49D}
.heroe.neg b{background:linear-gradient(94deg,#F4F0E8 0%,#E8A49D 100%);-webkit-background-clip:text;background-clip:text}
.tab{background:var(--sup);border-color:var(--linea2);color:var(--suave);font:600 13px var(--ui)}
.tab b{background:#26221D;color:var(--suave)}
.tab.si{background:linear-gradient(90deg,#3D3120,#2B2620);border-color:#C79D5566;color:var(--oro2)}
.tab.si b{background:#C79D5533;color:var(--oro2)}
.tj,.tabla,.vacio,.prev,.msj,.graf,.ctl,.fila-g,.fila-co,.avance,.sis-p,.sis-lista,.cuentas3 div,.cel-lista .fila,.todo-grid a{background:var(--sup);border-color:var(--linea)}
.tj:hover,.ctl:hover,.fila-g:hover{border-color:#C79D5566}
.tabla th{background:var(--sup2);color:var(--tenue);font:700 10px var(--ui);letter-spacing:.12em;border-bottom-color:var(--linea2)}
.tabla td{border-bottom-color:var(--linea)}
.tabla tbody tr:hover td{background:#1E1B18}
.ini{background:#2A2116;color:var(--oro2)}
.vacio{border-color:#4A443C}
.vacio h2{color:#FFF4E2}
.burbuja{background:#1F3A2A;color:#E6F2E8}
.buscar input,.sel-mes,.costo-in{background:var(--sup2);border-color:var(--linea2);color:var(--texto)}
.buscar input:focus,.costo-in:focus-within{border-color:var(--oro);box-shadow:0 0 0 3px var(--glow)}
.canales i{background:linear-gradient(90deg,#9C7A3F,var(--oro2))}
.auto{background:#2A2116;color:var(--oro2)}
.ctl .ir{color:var(--oro2)}
.graf .eje{fill:var(--tenue)}
.graf .tip{background:#0E0C0A;border:1px solid #3A342B}
.cajon{background:var(--fondo);box-shadow:-10px 0 40px #000A}
.cajon-cab{background:var(--fondo);border-bottom-color:var(--linea)}
.cajon .bloque{background:var(--sup);border-color:var(--linea)}
.velo{background:#000a}
.x{color:var(--tenue)}.x:hover{background:#ffffff0d}
.pn-tabcel{background:#1B1814;border-top-color:#3A342B}
.pn-tabcel a{color:#8C8375}
.pn-tabcel a.si{color:var(--oro2)}
.qr{background:#fff}
.act{border-top-color:var(--linea)}
.legal article{background:var(--sup);border-color:var(--linea)}
.legal p,.legal li{color:var(--texto)}

.guia-ej{background:#0E0C0A;border:1px solid var(--linea2);color:var(--champagne)}

/* Conversaciones (Messenger e Instagram): lista + hilo; en el celular, una cosa por vez */
.ch{display:grid;grid-template-columns:340px 1fr;height:calc(100vh - 170px);min-height:460px;border:1px solid var(--linea);border-radius:14px;overflow:hidden;background:var(--sup)}
.ch-lista{overflow-y:auto;border-right:1px solid var(--linea);background:#141210}
.ch-it{display:flex;gap:12px;align-items:center;width:100%;padding:12px 14px;border:0;border-bottom:1px solid var(--linea);background:none;color:var(--texto);text-align:left;cursor:pointer;font:inherit}
.ch-it:hover{background:#ffffff06}
.ch-it.si{background:#2A2116}
.ch-cara{position:relative;flex:none;width:44px;height:44px}
.ch-cara .ini,.ch-foto{width:44px;height:44px;border-radius:50%;object-fit:cover;display:grid;place-items:center}
.ch-canal{position:absolute;right:-1px;bottom:-1px;width:14px;height:14px;border-radius:50%;border:2px solid #141210}
.ch-tx{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.ch-l1,.ch-l2{display:flex;align-items:center;gap:8px;min-width:0}
.ch-l1 b{font:600 14.5px var(--ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.ch-l1 time{font:500 11.5px var(--ui);color:var(--tenue);flex:none}
.ch-l2 span:first-child{color:var(--suave);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.ch-it.nuevo .ch-l1 b{color:#fff}.ch-it.nuevo .ch-l2 span:first-child{color:var(--texto);font-weight:700}.ch-it.nuevo time{color:var(--oro2)}
.ch-l2 .cu{flex:none;background:var(--oro);color:#151210;border-radius:999px;padding:0 7px;font:700 11px/18px var(--ui)}
.ch-hilo{display:flex;flex-direction:column;min-width:0;min-height:0}
.ch-nada{margin:auto;color:var(--tenue);font:500 14px var(--ui)}
.ch-cab{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--linea);background:#141210}
.ch-cab .ch-canal{border-color:#141210}
.ch-quien{flex:1;min-width:0;display:flex;flex-direction:column}
.ch-quien b{font:600 15px var(--ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-quien span{font-size:12.5px;color:var(--tenue)}
.ch-volver{display:none;font-size:26px;line-height:1;padding:0 8px}
.ch-msjs{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.ch-dia{align-self:center;font:600 11.5px var(--ui);color:var(--tenue);margin:12px 0 4px}
.ch-dia::first-letter{text-transform:uppercase}
.ch-m{align-self:flex-start;max-width:72%;background:#26221D;border-radius:16px 16px 16px 4px;padding:8px 12px 6px;color:var(--texto)}
.ch-m.mio{align-self:flex-end;background:#3A2C17;border-radius:16px 16px 4px 16px}
.ch-m p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14.5px;line-height:1.45}
.ch-m time{display:block;text-align:right;font:500 10.5px var(--ui);color:var(--tenue);margin-top:2px}
.ch-m img{display:block;max-width:240px;max-height:300px;border-radius:10px;margin:2px 0 4px}
.ch-adj{display:inline-block;margin:2px 0 4px;font:600 13px var(--ui)}
.ch-ventana{margin:0 16px 8px;padding:8px 12px;border-radius:10px;font-size:13px;background:var(--ambar-t);color:#F0C27F}
.ch-ventana.cerrada{background:var(--rojo-t);color:#E8A49D}
.ch-resp{display:flex;gap:10px;align-items:flex-end;padding:12px 16px;border-top:1px solid var(--linea);background:#141210}
.ch-resp textarea{flex:1;resize:none;min-height:44px;max-height:140px;padding:11px 14px;border-radius:12px;border:1px solid var(--linea2);background:var(--sup2);color:var(--texto);font:15px/1.4 var(--letra)}
.ch-resp textarea:focus{outline:none;border-color:var(--oro)}
.ch-resp .btn{width:44px;padding:0;flex:none;display:grid;place-items:center}
.ch-resp .btn svg{width:18px;height:18px}
@media (max-width:860px){
  .ch{grid-template-columns:1fr;height:calc(100dvh - 290px);min-height:360px;border-radius:12px}
  .pn-main.ch-full{padding-top:10px}
  .pn-main.ch-full .pn-cab,.pn-main.ch-full .pn-cel-top{display:none!important}
  .ch.abierta{height:calc(100dvh - 10px - 96px - env(safe-area-inset-bottom));min-height:0}
  .ch.abierta .ch-lista{display:none}
  .ch:not(.abierta) .ch-hilo{display:none}
  .ch-volver{display:block}
  .ch-m{max-width:85%}
  .ch-resp textarea{font-size:16px}
}

/* Logo del negocio: en la bienvenida (subirlo) y arriba del menú */
.bv-logo{display:flex;flex-direction:column;align-items:center;gap:6px;padding:28px 20px;margin:0 0 22px;border:1.5px dashed var(--linea2);border-radius:16px;background:var(--sup);cursor:pointer;text-align:center;transition:border-color .15s,background .15s}
.bv-logo:hover,.bv-logo.encima{border-color:var(--oro);background:#1F1A14}
.bv-logo.subiendo{opacity:.6;pointer-events:none}
.bv-logo b{font:600 15px var(--ui);color:var(--texto)}
.bv-logo span:last-child{font-size:13px;color:var(--tenue)}
.bv-logo-img{display:grid;place-items:center;width:100%;min-height:72px;margin-bottom:6px;color:var(--oro)}
.bv-logo-img svg{width:34px;height:34px}
.bv-logo-img img{max-width:220px;max-height:96px;object-fit:contain}
.marca .logo-negocio{max-height:34px;max-width:150px;object-fit:contain;display:block}
.msj.resalta{border-color:var(--oro)!important;box-shadow:0 0 0 3px var(--glow)}