/* Consola VIIInoor — estilos. ADN visual de las referencias aprobadas
   (Momento_Consola_Estilizada + ModosAC): vidrio cálido de marca, borde oro.
   Tipografía (ajustada tras la prueba de fuego): Jost para TODO cuerpo que se
   lee seguido (conversación, mensajes de NOOR) · Cormorant Garamond solo como
   acento de marca (títulos, frase madre, remates) · cero bold (400 máx).
   Legibilidad (Tarea 7): cuerpo de tarjeta ≥16px, metadata ≥13px, texto chico
   siempre en tonos AA (≥4.5:1 sobre el bosque): --salvia-lectura o --bronce.
   --salvia y --oro quedan para lo decorativo. MÓVIL-PRIMERO, sin zoom. */

:root{
  --crema:#F5F3ED; --bosque:#303323; --oro:#AA8E51; --bronce:#C8A96E;
  --bruma:#C8CBB8; --arena:#E1DCC1; --salvia:#868C79; --oliva:#3E3C27;
  --lino:#FCFBF7; --luz:#FBF7EC; --verde:#748C69; --envio:#556648;
  --vidrio:rgba(252,251,247,0.06); --vidrio-borde:rgba(200,169,110,0.28);
  /* Derivado de --salvia SOLO para texto que se lee (AA 4.78:1 sobre bosque;
     la salvia original da 3.72:1 y queda para usos decorativos). */
  --salvia-lectura:#99A08B;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bosque); color:#F1EEE4;
  font-family:'Jost',sans-serif; font-weight:300; line-height:1.6;
  -webkit-font-smoothing:antialiased; min-height:100dvh;
}
.serif{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400}
button{font-family:inherit;font-weight:300;cursor:pointer;border:none;background:none;color:inherit}
input,textarea{font-family:inherit;font-weight:300}
[hidden]{display:none !important}

/* Onda decorativa de fondo, sutil */
.bg-waves{position:fixed;inset:0;width:100%;height:100%;opacity:0.25;z-index:0;pointer-events:none}

/* Marco móvil */
.app{position:relative;z-index:1;max-width:520px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding:16px 14px 88px}

/* Encabezado */
.topbar{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;margin-bottom:14px;border-bottom:0.5px solid rgba(200,169,110,0.18)}
.topbar-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
button:disabled{opacity:0.6;cursor:default}
.greet{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:22px;color:#F1EEE4}
.date{font-size:13px;letter-spacing:1px;color:var(--salvia-lectura);text-transform:uppercase}
.noor-line{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.noor-dot{width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:radial-gradient(circle at 40% 40%,#C8A96E,rgba(200,169,110,0.3) 60%,transparent)}
/* Voz de NOOR en «Hoy»: se lee a diario — Jost recto, no itálica de acento */
.noor-txt{font-size:15px;color:var(--bruma)}

/* Tarjeta de vidrio cálido */
.glass{background:var(--vidrio);backdrop-filter:blur(16px) saturate(1.1);
  border:1px solid var(--vidrio-borde);border-radius:16px;padding:18px 16px;
  box-shadow:0 20px 50px rgba(0,0,0,0.3),inset 0 1px 0 rgba(200,169,110,0.2)}

/* Instrucción numerada («Hoy») */
.instr{background:rgba(245,243,237,0.05);border:0.5px solid rgba(200,169,110,0.15);
  border-radius:10px;padding:14px;margin-bottom:10px;display:flex;gap:12px;align-items:flex-start}
.instr:last-child{margin-bottom:0}
.instr-n{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:22px;color:var(--bronce);line-height:1;min-width:20px}
.instr-body{flex:1;min-width:0}
.instr-t{font-size:16px;color:#F1EEE4;line-height:1.5;margin-bottom:6px}
.instr-t b{color:var(--bronce);font-weight:400}
.instr-motivo{font-size:13.5px;color:var(--salvia-lectura);margin-bottom:10px}
.instr-actions{display:flex;flex-wrap:wrap;gap:8px}
.cta{display:inline-flex;align-items:center;gap:6px;font-size:13px;letter-spacing:0.4px;
  color:var(--bosque);background:var(--bronce);padding:10px 16px;border-radius:6px}
.cta.ghost{background:transparent;border:0.5px solid rgba(200,169,110,0.4);color:var(--bronce)}
.instr.hecha{opacity:0.5}
.instr.hecha .cta{background:var(--salvia)}

/* Burbuja de mensaje NOOR (Bandeja) */
.sug{margin-bottom:12px}
.sug-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 8px;margin-bottom:6px}
.sug-quien{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:18px;color:#F1EEE4}
.sug-tag{font-size:13px;letter-spacing:0.8px;text-transform:uppercase;color:var(--bronce);text-align:right}
.sug-ctx{font-size:13.5px;color:var(--salvia-lectura);margin-bottom:10px}
.sug-num{font-size:13px;letter-spacing:0.5px;color:var(--salvia-lectura);margin:-2px 0 8px}
.sug-hora{font-size:13.5px;color:var(--salvia-lectura);margin-bottom:10px}
.instr-hora{color:var(--bruma)}
.inbound{background:rgba(116,140,105,0.12);border:0.5px solid rgba(116,140,105,0.3);
  border-radius:14px 14px 4px 14px;padding:12px 15px;margin-bottom:10px}
.inbound-lbl{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 10px;font-size:13px;
  letter-spacing:0.8px;text-transform:uppercase;color:var(--salvia-lectura);margin-bottom:6px}
.inbound-txt{font-size:16px;font-weight:400;color:#F1EEE4;line-height:1.6}
.inbound-txt.sin-texto{font-style:italic;font-weight:300;color:var(--bruma)}
/* Ventana de 24 h de Meta por cerrarse (>20 h): señal discreta, no alarma */
.inbound.ventana{border-color:rgba(200,169,110,0.55)}
.inbound-venc{font-size:13px;letter-spacing:0.8px;text-transform:uppercase;color:var(--bronce);margin-bottom:6px}

/* Hilo de la Bandeja (P1, 16 jul): la conversación en la tarjeta. Texto del
   cliente en Jost RECTO 16px — jamás itálicas (hallazgo #5 del fire test). */
.hilo{background:rgba(116,140,105,0.12);border:0.5px solid rgba(116,140,105,0.3);
  border-radius:10px;padding:12px 14px;margin-bottom:12px}
.hilo.ventana{border-color:rgba(200,169,110,0.55)}
.hilo-msgs{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.hilo-msg{max-width:88%;padding:8px 12px;border-radius:10px;display:flex;flex-direction:column}
.hilo-msg.inbound{align-self:flex-start;background:rgba(245,243,237,0.07);border:0.5px solid rgba(134,140,121,0.35)}
.hilo-msg.outbound{align-self:flex-end;background:rgba(200,169,110,0.10);border:0.5px solid rgba(200,169,110,0.28)}
.hilo-txt{font-size:16px;font-weight:400;font-style:normal;color:#F1EEE4;line-height:1.55}
.hilo-txt.sin-texto{font-weight:300;color:var(--bruma)}
.hilo-hora{font-size:13px;color:var(--salvia-lectura);margin-top:4px}
.hilo-msg.actual{border-left:2px solid var(--bronce)}
.hilo-marca{font-size:13px;letter-spacing:0.8px;text-transform:uppercase;color:var(--bronce);margin-top:6px}
.bubble{background:rgba(245,243,237,0.08);border-radius:14px 14px 14px 4px;padding:14px 16px}
.bubble-lbl{font-size:13px;letter-spacing:0.8px;text-transform:uppercase;color:var(--bronce);margin-bottom:7px}
.bubble-txt{font-size:16px;font-weight:400;color:#F1EEE4;line-height:1.6}
.bubble textarea{width:100%;background:transparent;color:#F1EEE4;border:0.5px solid rgba(200,169,110,0.3);
  border-radius:8px;padding:10px;font-size:16px;line-height:1.6;resize:vertical;min-height:90px}
.sug-actions{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
.btn{font-size:13.5px;letter-spacing:0.4px;padding:11px 15px;border-radius:6px;flex:1;text-align:center;min-width:96px}
.btn.send{background:var(--verde);color:#F1EEE4}
.btn.edit{background:transparent;border:0.5px solid rgba(200,169,110,0.4);color:var(--bronce)}
.btn.discard{background:transparent;border:0.5px solid rgba(134,140,121,0.4);color:var(--salvia-lectura)}
.btn.primary{background:var(--bronce);color:var(--bosque)}

/* Confirmación de envío (T10) */
.envio-aviso{font-size:14.5px;color:var(--bronce);line-height:1.6;margin-top:12px}
.envio-aviso:empty{display:none}
#envio-ventana:empty{display:none}
#envio-ventana{margin-bottom:8px}

/* Confirmación de un toque */
.confirm-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.confirm-btn{padding:16px 12px;border-radius:10px;font-size:16px;text-align:center;
  background:rgba(245,243,237,0.05);border:0.5px solid rgba(200,169,110,0.22);color:#F1EEE4}
.confirm-btn small{display:block;font-size:13px;color:var(--salvia-lectura);margin-top:3px}

/* Login */
.login-wrap{flex:1;display:flex;flex-direction:column;justify-content:center;gap:18px;max-width:360px;margin:0 auto;width:100%}
.brand{text-align:center;margin-bottom:8px}
.brand .mark{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:34px;color:#F1EEE4}
.brand .sub{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--salvia-lectura);margin-top:4px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--salvia-lectura)}
.field input{background:rgba(245,243,237,0.06);border:0.5px solid rgba(200,169,110,0.28);
  border-radius:8px;padding:13px 14px;font-size:16px;color:#F1EEE4}
.field input::placeholder{color:rgba(134,140,121,0.7)}
.big-btn{background:var(--bronce);color:var(--bosque);border-radius:9px;padding:14px;font-size:16px;letter-spacing:0.5px;width:100%}
.hint{font-size:13.5px;color:var(--salvia-lectura);text-align:center;line-height:1.5}
.error{font-size:13.5px;color:#D98C6A;text-align:center;min-height:16px}

/* Barra de búsqueda (Contactos) — 16px evita el zoom de iOS al enfocar;
   appearance:none impide que Safari iOS imponga su estilo nativo de searchfield */
.buscar{-webkit-appearance:none;appearance:none;width:100%;background:rgba(245,243,237,0.06);
  border:0.5px solid rgba(200,169,110,0.28);
  border-radius:8px;padding:12px 14px;font-size:16px;color:#F1EEE4;margin-bottom:12px}
.buscar::placeholder{color:rgba(134,140,121,0.7)}

/* Saludo vivo (tanda 16 jul): persona en Cormorant (lo humano), negocio en su
   línea, frase del día como acento de marca. Lecturas pequeñas en tonos AA. */
.negocio-linea{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--salvia-lectura);margin-top:2px}
.negocio-linea:empty{display:none}
.frase-dia{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:17px;color:var(--bronce);margin:0 0 10px}
.frase-dia:empty{display:none}

/* Edición de contacto (solo nombre e interés) */
.contacto-edicion{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.contacto-edicion label{font-size:13px;letter-spacing:1px;text-transform:uppercase;
  color:var(--salvia-lectura);display:flex;flex-direction:column;gap:6px}
.contacto-edicion input{-webkit-appearance:none;appearance:none;width:100%;
  background:rgba(245,243,237,0.06);border:0.5px solid rgba(200,169,110,0.28);
  border-radius:8px;padding:12px 14px;font-size:16px;color:#F1EEE4}
.edicion-botones{display:flex;gap:8px;margin-top:2px}
.ed-abrir{margin-top:10px}

/* Estados / vacíos */
.section-title{font-size:13px;letter-spacing:2.5px;text-transform:uppercase;color:var(--bronce);margin:2px 0 12px}
.empty{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:17px;color:var(--salvia-lectura);text-align:center;padding:26px 10px}
.kpi{font-size:13.5px;color:var(--bruma)}
.kpi b{color:var(--bronce);font-weight:400}

/* Pie oficial */
.foot{margin-top:16px;padding-top:12px;border-top:0.5px solid rgba(200,169,110,0.18);
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13.5px;color:var(--salvia-lectura);text-align:center}

/* Navegación inferior */
.nav{position:fixed;bottom:0;left:0;right:0;z-index:3;display:flex;max-width:520px;margin:0 auto;
  background:rgba(48,51,35,0.92);backdrop-filter:blur(10px);border-top:0.5px solid rgba(200,169,110,0.2)}
.nav button{flex:1;padding:12px 6px;font-size:13px;letter-spacing:0.5px;color:var(--salvia-lectura);text-align:center}
.nav button.active{color:var(--bronce)}
.nav .badge{display:inline-block;min-width:18px;font-size:13px;background:var(--bronce);color:var(--bosque);border-radius:9px;padding:0 5px;margin-left:4px}

/* Entrevista / registro — conversación guiada */
.chat{flex:1;display:flex;flex-direction:column;gap:14px;padding-top:10px}
.noor-say{display:flex;gap:10px;align-items:flex-start}
.noor-say .noor-dot{margin-top:2px}
/* Cuerpo conversacional (entrevista/registro): Jost recto, peso 400 y aire —
   la itálica Cormorant cansa en párrafos seguidos (hallazgo prueba de fuego).
   Cormorant queda solo como acento de marca: títulos, frase madre, remates. */
.noor-bubble{background:rgba(245,243,237,0.06);border:0.5px solid rgba(200,169,110,0.18);
  border-radius:14px 14px 14px 4px;padding:14px 16px;
  font-size:16.5px;font-weight:400;color:#F1EEE4;line-height:1.65;max-width:88%}
.you-say{align-self:flex-end;background:var(--verde);color:#F1EEE4;border-radius:14px 14px 4px 14px;
  padding:10px 15px;font-size:16px;max-width:82%}
.answer-area{margin-top:auto;padding-top:14px}
.answer-area .field input,.answer-area textarea{width:100%;background:rgba(245,243,237,0.06);
  border:0.5px solid rgba(200,169,110,0.28);border-radius:9px;padding:13px 14px;font-size:16px;color:#F1EEE4}
.options{display:flex;flex-direction:column;gap:8px}
.opt{text-align:left;background:rgba(245,243,237,0.05);border:0.5px solid rgba(200,169,110,0.22);
  border-radius:9px;padding:13px 15px;font-size:16px;color:#F1EEE4}
.opt:active{background:rgba(200,169,110,0.15)}
.answer-row{display:flex;gap:9px;margin-top:10px}
.progress{font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--salvia-lectura);text-align:center;margin-bottom:4px}
.skip{background:transparent;color:var(--salvia-lectura);font-size:13.5px;text-decoration:underline;padding:8px}

/* Resumen de confirmación */
.resumen{background:rgba(245,243,237,0.06);border:0.5px solid rgba(200,169,110,0.22);border-radius:12px;padding:16px 18px;margin-top:8px}
.resumen-row{font-size:16px;color:#F1EEE4;line-height:1.7}
.resumen-row b{color:var(--bronce);font-weight:400}

/* FAB + de registro rápido */
.fab{position:fixed;right:calc(50% - 246px);bottom:78px;z-index:4;width:52px;height:52px;border-radius:50%;
  background:var(--bronce);color:var(--bosque);font-size:26px;line-height:1;box-shadow:0 8px 22px rgba(0,0,0,0.35)}
@media(max-width:540px){.fab{right:16px}}

/* Contactos — lista limpia agrupada por estado (no CRM) */
.grupo-h{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--bronce);margin:14px 2px 8px}
#contactos-list .grupo-h:first-child{margin-top:0}
.grupo{padding:6px 16px}
.contacto{padding:12px 2px;border-bottom:0.5px solid rgba(200,169,110,0.14);cursor:pointer}
.contacto:last-child{border-bottom:none}
.contacto.nc{opacity:0.75}
.contacto-top{display:flex;align-items:baseline;gap:4px 8px;flex-wrap:wrap}
.contacto-nombre{font-size:16px;color:#F1EEE4;flex:1;min-width:0}
.contacto-nc{font-size:13px;color:var(--salvia-lectura)}
.contacto-hora{font-size:13px;color:var(--salvia-lectura);white-space:nowrap}
.contacto-interes{font-size:13.5px;color:var(--salvia-lectura);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.contacto-detalle{font-size:13.5px;color:var(--bruma);margin-top:8px}
.contacto-detalle b{color:var(--bronce);font-weight:400}
.contacto-guia{font-size:13px;color:var(--salvia-lectura);margin-top:4px}

/* Semana (M13) */
.week-block{margin-bottom:12px}
.week-h{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--bronce);margin-bottom:8px}
.week-big{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:30px;color:#F1EEE4;line-height:1}
.week-big small{font-size:14px;color:var(--salvia-lectura);font-style:normal;font-family:'Jost';letter-spacing:0.5px}
.week-list{font-size:15.5px;color:#F1EEE4;line-height:1.8}
.week-list .dot{color:var(--oro);margin-right:8px}
.canal-line{font-size:14.5px;color:var(--bruma);line-height:1.7}
.canal-line b{color:var(--bronce);font-weight:400}

/* Insumo — alerta en «Hoy» */
.insumo{display:flex;gap:12px;align-items:flex-start;background:rgba(200,169,110,0.08);
  border-left:3px solid var(--oro);border-radius:0 10px 10px 0;padding:13px 15px;margin-bottom:10px}
.insumo-ico{width:22px;color:var(--oro);font-size:16px;flex-shrink:0;text-align:center}
.insumo-t{font-size:15px;color:#F1EEE4;line-height:1.5}
.insumo-t b{color:var(--bronce);font-weight:400}

/* Toast */
.toast{position:fixed;bottom:78px;left:50%;transform:translateX(-50%);z-index:5;
  background:var(--lino);color:var(--oliva);font-size:14px;padding:11px 18px;border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,0.35);opacity:0;transition:opacity .25s;pointer-events:none;max-width:90%}
.toast.show{opacity:1}

/* Tablet (≥700px): las tarjetas usan el ancho — misma columna, más generosa,
   sin deformarse ni flotar en vacío. */
@media(min-width:700px){
  .app{max-width:640px;padding:26px 28px 96px}
  .nav{max-width:640px}
  .fab{right:calc(50% - 306px)}
}