:root {
  --fondo: #f1f5f9; --panel: #ffffff; --borde: #e2e8f0; --texto: #0f172a; --tenue: #64748b;
  --lateral: #0f172a; --lateral2: #1e293b; --lat-texto: #cbd5e1;
  --acento: #2563eb; --rojo: #dc2626; --morado: #7c3aed; --verde: #16a34a; --ambar: #d97706;
  --burbuja-in: #ffffff; --burbuja-out: #dcfce7; --burbuja-ia: #ede9fe; --chat-fondo: #e9edf2;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--texto); background: var(--fondo); }
.oculto { display: none !important; }
input, select, textarea, button { font: inherit; }
input, select, textarea { border: 1px solid var(--borde); border-radius: 8px; padding: 8px 10px; background: #fff; color: var(--texto); outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--acento); }
button { border: 0; border-radius: 8px; padding: 9px 16px; background: var(--acento); color: #fff; cursor: pointer; font-weight: 600; }
button:hover { filter: brightness(1.08); }
.btn-sec { background: #fff; color: var(--texto); border: 1px solid var(--borde); padding: 6px 12px; font-weight: 500; }
.btn-peligro { background: var(--rojo); }

/* Login */
.login { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--lateral); }
.login-caja { width: 320px; background: #fff; padding: 32px; border-radius: 14px; display: flex; flex-direction: column; gap: 12px; }
.login-caja .marca { color: var(--texto); font-size: 20px; }
.login-caja .sub { margin: -6px 0 8px; color: var(--tenue); }
.login-msg { color: var(--rojo); min-height: 20px; font-size: 13px; }
.marca { font-size: 17px; letter-spacing: .2px; display: flex; align-items: center; gap: 8px; }
.punto { width: 10px; height: 10px; border-radius: 50%; background: #25d366; display: inline-block; }

/* Estructura */
.app { display: grid; grid-template-columns: 230px 340px 1fr; grid-template-rows: minmax(0, 1fr); height: 100vh; height: 100dvh; overflow: hidden; }
.app > * { min-height: 0; }
.lateral { background: var(--lateral); color: var(--lat-texto); padding: 16px 12px; overflow-y: auto; display: flex; flex-direction: column; }
.lateral .marca { color: #fff; margin-bottom: 10px; }
.puente { font-size: 12px; padding: 5px 10px; border-radius: 20px; background: var(--lateral2); align-self: flex-start; margin-bottom: 8px; }
.puente.ok { color: #86efac; } .puente.mal { color: #fca5a5; cursor: pointer; }
.grupo-tit { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: #64748b; margin: 16px 6px 6px; display: flex; justify-content: space-between; }
.grupo-tit a { color: #64748b; text-transform: none; letter-spacing: 0; text-decoration: none; }
.grupo-tit a:hover { color: #fff; }
.menu { list-style: none; margin: 0; padding: 0; }
.menu li { padding: 7px 10px; border-radius: 7px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.menu li:hover { background: var(--lateral2); }
.menu li.activo { background: var(--acento); color: #fff; }
.menu li em { margin-left: auto; font-style: normal; font-size: 12px; opacity: .8; }
.menu li em.alerta-n { background: var(--rojo); color: #fff; border-radius: 10px; padding: 0 7px; opacity: 1; font-weight: 700; }
.ico { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ico.rojo { background: var(--rojo); } .ico.morado { background: #a78bfa; } .ico.azul { background: #60a5fa; }
.ico.verde { background: #4ade80; } .ico.gris { background: #64748b; } .ico.blanco { background: #e2e8f0; }
.chk { font-size: 13px; margin: 8px 10px 0; display: flex; gap: 6px; align-items: center; cursor: pointer; }
.sel { width: 100%; margin-bottom: 6px; background: var(--lateral2); color: var(--lat-texto); border-color: #334155; }
.yo { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--lateral2); display: flex; justify-content: space-between; font-size: 13px; }
.yo a { color: #94a3b8; text-decoration: none; }

/* Lista */
.lista { background: var(--panel); border-right: 1px solid var(--borde); display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.lista-cab { padding: 12px; border-bottom: 1px solid var(--borde); }
.lista-cab input { width: 100%; }
.chats { overflow-y: auto; flex: 1; }
.chat { padding: 11px 14px; border-bottom: 1px solid #f1f5f9; cursor: pointer; display: grid; grid-template-columns: 40px 1fr; gap: 10px; }
.chat:hover { background: #f8fafc; }
.chat.activo { background: #eff6ff; }
.chat.humano { box-shadow: inset 3px 0 0 var(--rojo); }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: #cbd5e1; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.avatar.grupo { border-radius: 10px; }
.chat-l1 { display: flex; justify-content: space-between; gap: 6px; }
.chat-nom { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-hora { font-size: 11px; color: var(--tenue); white-space: nowrap; }
.chat-l2 { display: flex; justify-content: space-between; gap: 6px; color: var(--tenue); font-size: 13px; }
.chat-ult { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nl { background: #25d366; color: #fff; border-radius: 10px; padding: 0 7px; font-size: 11px; font-weight: 700; height: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chip { font-size: 10.5px; padding: 1px 7px; border-radius: 10px; background: #f1f5f9; color: #475569; }
.chip.rojo { background: #fee2e2; color: var(--rojo); font-weight: 600; }
.chip.morado { background: #ede9fe; color: var(--morado); }
.chip.ambar { background: #fef3c7; color: var(--ambar); font-weight: 600; }
.lista-vacia { padding: 40px 20px; text-align: center; color: var(--tenue); }

/* Conversación */
.conv { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--chat-fondo); }
.conv-vacia { margin: auto; color: var(--tenue); }
.conv-in { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.conv-cab { background: var(--panel); border-bottom: 1px solid var(--borde); padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.conv-tit .nom { font-weight: 700; font-size: 15px; }
.conv-tit .sub { color: var(--tenue); font-size: 12.5px; }
.conv-acc { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.conv-acc select { padding: 5px 8px; font-size: 13px; max-width: 150px; }
.sw { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--morado); cursor: pointer; padding: 0 6px; }
.alerta { background: #fef2f2; color: var(--rojo); border-bottom: 1px solid #fecaca; padding: 8px 16px; font-size: 13px; font-weight: 600; }
.conv-cuerpo { flex: 1; display: flex; min-height: 0; }
.mensajes { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 6%; display: flex; flex-direction: column; gap: 6px; }
.nota-sis { align-self: center; background: #fffbeb; border: 1px dashed #fcd34d; color: #92400e; font-size: 12px; padding: 4px 12px; border-radius: 8px; max-width: 90%; text-align: center; }
.dia { align-self: center; background: #fff; color: var(--tenue); font-size: 12px; padding: 3px 12px; border-radius: 8px; margin: 8px 0; }
.msg { max-width: 68%; padding: 7px 10px 5px; border-radius: 10px; background: var(--burbuja-in); box-shadow: 0 1px 1px rgba(0,0,0,.06); position: relative; word-wrap: break-word; white-space: pre-wrap; }
.msg.out { align-self: flex-end; background: var(--burbuja-out); }
.msg.ia { background: var(--burbuja-ia); }
.msg-autor { font-size: 12px; font-weight: 700; color: var(--acento); margin-bottom: 2px; }
.msg.ia .msg-autor { color: var(--morado); }
.msg-pie { font-size: 11px; color: var(--tenue); text-align: right; margin-top: 2px; display: flex; justify-content: flex-end; gap: 8px; }
.msg-pie .err { color: var(--rojo); font-weight: 600; }
.msg img { max-width: 280px; max-height: 320px; border-radius: 6px; display: block; cursor: zoom-in; }
.msg audio { width: 260px; }
.msg a { color: var(--acento); }
.ensenar { display: none; font-size: 11px; color: var(--morado); cursor: pointer; font-weight: 600; }
.msg.out:not(.ia):hover .ensenar { display: inline; }
.redactor { background: var(--panel); border-top: 1px solid var(--borde); padding: 10px 14px; display: flex; gap: 10px; align-items: flex-end; }
.redactor textarea { flex: 1; resize: none; max-height: 160px; }

/* Ficha */
.ficha { width: 280px; background: var(--panel); border-left: 1px solid var(--borde); padding: 14px; overflow-y: auto; }
.ficha h4 { margin: 0 0 12px; }
.ficha label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--tenue); margin-bottom: 10px; }
.ficha input, .ficha textarea { color: var(--texto); }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(15,23,42,.55); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.modal-caja { background: #fff; border-radius: 12px; width: 520px; max-width: 100%; max-height: 90vh; display: flex; flex-direction: column; }
.modal-cab { padding: 14px 18px; border-bottom: 1px solid var(--borde); font-weight: 700; display: flex; justify-content: space-between; }
.modal-x { text-decoration: none; color: var(--tenue); font-size: 22px; line-height: 1; }
.modal-cuerpo { padding: 18px; overflow-y: auto; }
.modal-cuerpo label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--tenue); margin-bottom: 10px; }
.modal-cuerpo .fila { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 14px; }
.tabla td, .tabla th { padding: 7px 6px; border-bottom: 1px solid var(--borde); text-align: left; }
.tabla tr.clic { cursor: pointer; } .tabla tr.clic:hover { background: #f8fafc; }
.qr-caja { display: flex; justify-content: center; padding: 10px; }
.nota { font-size: 12.5px; color: var(--tenue); }
.img-grande { max-width: 100%; display: block; margin: auto; }

@media (max-width: 1100px) { .app { grid-template-columns: 200px 290px 1fr; } .ficha { position: absolute; right: 0; top: 0; bottom: 0; z-index: 5; } .conv-cuerpo { position: relative; } }

/* Elementos solo para celular (ocultos en escritorio) */
.lista-movil, .solo-movil, .velo { display: none; }
.btn-icono { background: transparent; color: inherit; border: 0; font-size: 22px; line-height: 1; padding: 4px 8px; font-weight: 400; cursor: pointer; }
.punto-estado { width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; display: inline-block; }
.punto-estado.ok { background: #22c55e; } .punto-estado.mal { background: var(--rojo); }

@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  /* Menú lateral como cajón deslizable */
  .lateral { position: fixed; top: 0; bottom: 0; left: 0; width: 280px; max-width: 85vw; z-index: 60; transform: translateX(-100%); transition: transform .2s ease; display: flex; }
  .app.menu-abierto .lateral { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.35); }
  .velo { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 55; }
  .app.menu-abierto .velo { display: block; }
  /* Lista o conversación, una a la vez */
  .app.con-chat .lista { display: none; }
  .app:not(.con-chat) .conv { display: none; }
  .lista-cab { padding: 8px 10px; }
  .lista-movil { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 700; font-size: 16px; }
  .lista-movil #tituloBandeja { flex: 1; }
  .solo-movil { display: inline-flex; }
  .chat { padding: 12px 12px; }
  /* Cabecera del chat compacta; opciones plegables con ⋯ */
  .conv-cab { padding: 8px 8px; gap: 6px; flex-wrap: nowrap; }
  .conv-tit { flex: 1; min-width: 0; }
  .conv-tit .nom, .conv-tit .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .conv-acc { display: none; }
  .conv-cab.acc-abierto { flex-wrap: wrap; }
  .conv-cab.acc-abierto .conv-acc { display: flex; width: 100%; order: 5; padding-top: 6px; }
  .conv-acc select { max-width: none; flex: 1 1 45%; }
  .alerta { padding: 6px 12px; font-size: 12.5px; }
  .mensajes { padding: 12px 10px; }
  .msg { max-width: 86%; }
  .msg img { max-width: 100%; }
  .ficha { position: fixed; inset: 0; width: 100%; z-index: 50; }
  .ficha h4 { display: flex; justify-content: space-between; }
  .ficha h4 a { font-size: 14px; font-weight: 600; color: var(--acento); text-decoration: none; }
  .redactor { padding: 8px; gap: 8px; }
  .redactor button { padding: 9px 14px; }
  /* 16px evita que el iPhone haga zoom al escribir */
  input, select, textarea { font-size: 16px; }
  .modal { padding: 0; align-items: stretch; }
  .modal-caja, .modal-caja.ancho { width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
  .tabs a { padding: 8px 8px; }
}


/* Configuración */
.modal-caja.ancho { width: 880px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin: -6px 0 14px; flex-wrap: wrap; }
.tabs a { padding: 8px 12px; text-decoration: none; color: var(--tenue); border-bottom: 2px solid transparent; font-weight: 600; font-size: 13px; }
.tabs a.activo { color: var(--acento); border-bottom-color: var(--acento); }
.tab-panel { display: none; } .tab-panel.activo { display: block; }
.cfg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.cfg-grid .full { grid-column: 1 / -1; }
.cfg-tabla { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 12px; }
.cfg-tabla td, .cfg-tabla th { padding: 5px 4px; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
.cfg-tabla input[type=time], .cfg-tabla input[type=number] { padding: 4px 6px; }
.cfg-tabla textarea { width: 100%; }
.cfg-ayuda { font-size: 12px; color: var(--tenue); margin: -4px 0 10px; }
.cfg-prueba { background: #f8fafc; border: 1px solid var(--borde); border-radius: 8px; padding: 10px 12px; white-space: pre-wrap; font-size: 13px; margin-top: 8px; }
.cfg-pie { position: sticky; bottom: -18px; background: #fff; padding: 12px 0 2px; border-top: 1px solid var(--borde); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
@media (max-width: 760px) { .cfg-grid { grid-template-columns: 1fr; } }