:root{
  --bg:#ffffff;
  --panel:#ffffff;
  --panel2:#f4f6f8;
  --text:#0f172a;
  --muted:#6b7280;
  --line:#e5e7eb;

  --accent:#16a34a;          /* verde */
  --accent2:#22c55e;         /* verde claro */
  --warn:#f59e0b;

  --chatbg:#f7f7f8;          /* fondo chat */
  --me:#dcfce7;              /* bubble admin */
  --other:#ffffff;           /* bubble cliente */

  --shadow:0 10px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto}
body{background:var(--bg);color:var(--text)}

.shell{height:100vh;display:flex;overflow:hidden}

/* ================================
   SIDEBAR / INBOX
================================ */
.sidebar{
  width:360px;min-width:320px;
  background:var(--panel);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
}

.msg.me {
  background: #d9fdd3; /* verde correcto */
  margin-left: auto;
  border-top-right-radius: 6px;
}


.sidebar-top{
  padding:12px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-bottom:1px solid var(--line);
  background:var(--panel);
}

.brand{font-weight:1000}
.top-actions{display:flex;gap:8px}

/* pills */
.chip{
  border:1px solid var(--line);
  background:var(--panel2);
  color:var(--text);
  padding:7px 10px;border-radius:999px;font-size:13px;
  text-decoration:none;cursor:pointer;
}
.chip:hover{filter:brightness(.98)}
.chip.ghost{background:transparent;border-color:var(--line)}

.filters{
  display:flex;gap:8px;padding:10px 12px;
  border-bottom:1px solid var(--line);
  overflow-x:auto;background:var(--panel);
}
.filter{
  text-decoration:none;color:var(--text);
  background:var(--panel2);
  padding:7px 10px;border-radius:999px;font-size:13px;white-space:nowrap;
  border:1px solid transparent;
}
.filter.active{border-color:rgba(22,163,74,.35)}
.filter:hover{filter:brightness(.98)}

.chat-list{flex:1;overflow:auto;background:var(--panel)}
.chat-row{
  display:flex;gap:12px;padding:12px;
  text-decoration:none;color:var(--text);
  border-bottom:1px solid var(--line);
}
.chat-row:hover{background:#f9fafb}
.chat-meta{flex:1;min-width:0}
.chat-name{font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-sub{display:flex;gap:8px;align-items:center;margin-top:4px;font-size:12px;color:var(--muted)}
.unread{color:var(--accent);font-size:14px;align-self:center}

.avatar{
  width:44px;height:44px;border-radius:50%;
  background:rgba(22,163,74,.10);
  border:1px solid rgba(22,163,74,.18);
  display:flex;align-items:center;justify-content:center;font-weight:900;
  color:var(--accent);
}
.avatar.big{width:56px;height:56px}

.badge{font-size:12px;padding:3px 8px;border-radius:999px;font-weight:900}
.badge.ok{background:rgba(22,163,74,.12);color:var(--accent);border:1px solid rgba(22,163,74,.20)}
.badge.warn{background:rgba(245,158,11,.12);color:var(--warn);border:1px solid rgba(245,158,11,.20)}

.row{display:flex;align-items:center}
.muted{color:var(--muted);font-size:12px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}

/* inbox empty state */
.empty-state{
  flex:1;
  background:linear-gradient(180deg,#ffffff 0%, #f7f7f8 100%);
  display:flex;align-items:center;justify-content:center;
}
.empty-card{
  width:min(520px,92%);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;padding:22px;
  box-shadow:var(--shadow);
}
.empty-title{font-size:20px;font-weight:1000;margin-bottom:6px}
.empty-sub{color:var(--muted)}

/* ================================
   CHAT
================================ */
.chat-main{
  flex:1;
  display:flex;
  flex-direction:column;
  background:var(--chatbg)}

.chat-header{
  background:var(--panel);
  border-bottom:1px solid var(--line);
  padding:12px;
}

.messages{
  flex:1;overflow:auto;
  padding:16px 18px 10px;
  background:var(--chatbg);
}

/* bubbles */
.msg{
  max-width:78%;
  padding:10px 12px;border-radius:14px;margin:6px 0;
  border:1px solid rgba(0,0,0,.04);
}
.msg.me{background:var(--me);margin-left:auto;border-top-right-radius:6px}
.msg.other{background:var(--other);margin-right:auto;border-top-left-radius:6px}

.msg-top{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:4px}
.msg-sender{font-weight:1000;font-size:12px;color:rgba(15,23,42,.85)}
.msg-time{font-size:11px;opacity:.65}
.msg-text{white-space:pre-wrap;word-break:break-word;font-size:14px;color:var(--text)}
.msg-media img{margin-top:8px;max-width:100%;border-radius:10px;border:1px solid rgba(0,0,0,.08)}

/* composer */
.composer{
  background:#ffffff;
  border-top:1px solid var(--line);
  padding:10px;
  display:flex;gap:10px;align-items:center;
}
.icon-btn{
  width:42px;height:42px;border-radius:12px;
  background:var(--panel2);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;user-select:none;
}
.icon-btn:hover{filter:brightness(.98)}
.composer-input{
  flex:1;
  border:1px solid var(--line);
  outline:none;border-radius:999px;
  padding:12px 14px;font-size:14px;
  background:#fff;color:var(--text);
}
.composer-input::placeholder{color:#9ca3af}

.composer-input:disabled{
  background:#f3f4f6;color:#9ca3af;cursor:not-allowed;
}

.send-btn{
  width:42px;height:42px;border-radius:999px;border:none;
  background:var(--accent);
  color:#ffffff;
  font-size:16px;font-weight:900;cursor:pointer;
}
.send-btn:hover{filter:brightness(.97)}

/* ================================
   PANELS / DRAWERS
================================ */
.panel{padding:12px;overflow:auto}
.panel-title{font-weight:1000;margin:10px 0 8px}
.panel-row{display:flex;gap:10px;align-items:center;margin:8px 0}
.divider{height:1px;background:var(--line);margin:14px 0}

.drawer{
  background:var(--panel2);
  border:1px solid var(--line);
  border-radius:16px;padding:12px;margin-top:10px;
}

.action-list{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.action{
  border:1px solid var(--line);
  background:#fff;
  color:var(--text);
  padding:10px;border-radius:14px;cursor:pointer;text-align:left;
}
.action:hover{background:#f9fafb}
.action-label{font-weight:1000;display:block}
.action-sub{display:block;color:var(--muted);font-size:12px;margin-top:4px}

.input{
  width:100%;
  border:1px solid var(--line);
  outline:none;border-radius:999px;
  padding:10px 12px;
  background:#fff;color:var(--text);
}

.product-list{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.product{
  display:flex;gap:12px;padding:10px;border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
}
.product-img{
  width:64px;height:64px;border-radius:12px;overflow:hidden;
  background:rgba(22,163,74,.08);
  border:1px solid rgba(22,163,74,.15);
  display:flex;align-items:center;justify-content:center;
}
.product-img img{width:100%;height:100%;object-fit:cover}
.img-ph{color:rgba(15,23,42,.55);font-weight:1000;font-size:12px}
.product-title{font-weight:1000}

/* Buttons */
.btn-primary{
  background:var(--accent);
  border:none;color:#fff;font-weight:1000;
  padding:10px 14px;border-radius:12px;
  cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;
}
.btn-primary:hover{filter:brightness(.97)}
.btn-ghost{
  background:#fff;
  border:1px solid var(--line);
  color:var(--text);
  padding:10px 14px;border-radius:12px;
  cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;
}
.btn-ghost:hover{background:#f9fafb}
.small{padding:8px 10px;font-size:12px}

/* ================================
   AUTH / PAGES
================================ */
.auth,.page{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#ffffff,#f7f7f8);
}
.auth-card,.page-card{
  width:min(520px,92%);
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;padding:22px;
  box-shadow:var(--shadow);
}
.auth-title{font-size:22px;font-weight:1000}
.auth-sub{color:var(--muted);margin:6px 0 18px}

.auth-form label,.form label{display:block;margin:10px 0 6px;color:var(--muted);font-size:13px}
.auth-form input,
.form input,.form select{
  width:100%;
  padding:12px;border-radius:12px;
  border:1px solid var(--line);
  background:#fff;color:var(--text);
  outline:none;
}

.page-card.wide{width:min(980px,94%)}
.page-title{font-size:20px;font-weight:1000;margin-bottom:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.colspan2{grid-column:1 / span 2}

.table{margin-top:14px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.tr{display:grid;grid-template-columns:70px 1fr 1fr 120px;gap:10px;padding:10px;border-bottom:1px solid var(--line)}
.tr:last-child{border-bottom:none}
.tr.head{background:var(--panel2);font-weight:1000}

/* ================================
   TEMPLATE CHIPBAR
================================ */
.chipbar{
  width:100%;
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;margin:0 6px;
  border-radius:14px;
  background:#ffffff;
  border:1px solid var(--line);
}

.chipbar-scroll{
  flex:1;
  display:flex;gap:8px;
  overflow-x:auto;
  padding-bottom:2px;
}

.chip{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:999px;
  border:1px solid var(--line);
  background:var(--panel2);
  white-space:nowrap;
}

.chip-k{font-size:12px;color:var(--muted);font-weight:900;text-transform:capitalize}
.chip-v{font-size:13px;color:var(--text);font-weight:900}

.chip--edit input{
  border:none;outline:none;background:transparent;
  font-size:13px;font-weight:900;width:160px;color:var(--text);
}
.chip--ro{background:rgba(22,163,74,.10);border-color:rgba(22,163,74,.25)}
.chipbar-x{border:none;background:transparent;font-size:18px;cursor:pointer;color:var(--text)}

/* Banner window closed */
.composer-locked{
  margin:10px 16px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(22,163,74,.08);
  border:1px solid rgba(22,163,74,.18);
  color:rgba(15,23,42,.85);
  font-size:13px;
}

/* ================================
   MOBILE RESPONSIVE
   - Inbox MUST show sidebar (chat list)
   - Chat page becomes full-screen
================================ */

/* Mobile base: stack layout */
@media (max-width: 900px){
  .shell{flex-direction:column}
  .sidebar{width:100%;min-width:0;height:100vh}
  .chat-main{height:100vh}
  .empty-state{display:flex}
}

/* ✅ SOLO EN CHAT: ocultar sidebar en móvil (cuando existe #chat-form) */
@media (max-width: 900px){
  .shell:has(#chat-form){
    display:block !important;
    height:100vh;
    overflow:hidden;
  }
  .shell:has(#chat-form) .sidebar{
    display:none !important;
  }
  .shell:has(#chat-form) .chat-main{
    width:100% !important;
    height:100vh;
    display:flex;
    flex-direction:column;
  }
  .shell:has(#chat-form) .messages{
    flex:1 1 auto;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:90px;
  }
  .shell:has(#chat-form) .composer{
    position:sticky;
    bottom:0;left:0;right:0;
    margin:0;border-radius:0;
    z-index:5;
  }
}

/* Mobile header (solo útil en chat) */
.chat-header-mobile{display:none}
@media (max-width: 900px){
  .shell:has(#chat-form) .chat-header{display:none !important}
  .shell:has(#chat-form) .chat-header-mobile{
    display:flex;
    align-items:center;gap:8px;
    padding:10px;
    border-bottom:1px solid var(--line);
    background:#ffffff;
  }
  .shell:has(#chat-form) .chat-header-mobile-title{
    flex:1;
    font-weight:700;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .shell:has(#chat-form) .chat-header-mobile-actions{display:flex;gap:6px}
}

/* Mobile drawers */
@media (max-width: 900px){
  .mobile-drawer{
    position:fixed;
    left:10px;right:10px;
    top:64px;
    bottom:90px;
    overflow:auto;
    border-radius:16px;
    padding:12px;
    background:#ffffff;
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    z-index:50;
  }
}


/* =====================================================
   COMPOSER + CHIPBAR
   - Plantillas SIEMPRE arriba
   - Input + botones abajo
   - PC y MOBILE
===================================================== */

/* El form del chat */
.composer{
  display: flex;
  flex-wrap: wrap;          /* permite que haya filas */
  align-items: center;
  gap: 10px;
  background: #ffffff;
  border-top: 1px solid #2a3942;
  padding: 10px;
}

/* ===============================
   CHIPBAR (PLANTILLAS)
   =============================== */
.composer .chipbar{
  flex: 0 0 100%;           /* ocupa TODA la fila */
  width: 100%;
  order: 0;                /* SIEMPRE arriba */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 14px;
  background: #111b21;
  border: 1px solid #2a3942;
}

/* Scroll horizontal de chips */
.composer .chipbar-scroll{
  flex: 1;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Chip individual */
.composer .chip{
  background: #ffffff;
  color: #e9edef;
  border-radius: 999px;
  padding: 8px 10px;
  white-space: nowrap;
}

/* Input dentro del chip */
.composer .chip--edit input{
  background: transparent;
  border: none;
  outline: none;
  color: #e9edef;
  font-weight: 600;
  min-width: 140px;
}

/* Botón cerrar plantilla */
.composer .chipbar-x{
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: #e9edef;
  font-size: 18px;
  cursor: pointer;
}

/* ===============================
   FILA DE ESCRITURA (ABAJO)
   =============================== */

/* Adjuntar */
.composer .icon-btn{
  order: 1;
  background: #2a3942;
  color: #e9edef;
  border-radius: 50%;
  width: 38px;
  height: 38px;
}

/* Input escribir */
.composer .composer-input{
  order: 2;
  flex: 1 1 auto;
  min-width: 0;             /* CLAVE para que no se rompa */
  background: #2a3942;
  color: #e9edef;
  border: none;
  border-radius: 20px;
  padding: 10px 14px;
  outline: none;
}

.composer .composer-input::placeholder{
  color: #aebac1;
}

/* Botón enviar */
.composer .send-btn{
  order: 3;
  background: #00a884;
  color: white;
  border: none;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  cursor: pointer;
}

.composer .send-btn:hover{
  background: #029e7a;
}

/* ===============================
   MOBILE (refuerzos)
   =============================== */
@media (max-width: 900px){
  .composer{
    padding-bottom: env(safe-area-inset-bottom);
  }

  .composer .chipbar{
    margin-bottom: 4px;   /* pequeño aire visual */
  }
}