@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root { --f: #0b1220; --p: #111b2b; --p2: #1a2638; --l: #24324a; --t: #e8edf5; --m: #8a97ab; --v: #25d366; --az: #53bdeb; --r: #f87171; --am: #f59e0b; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--f); color: var(--t); font: 15px/1.45 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; }
a { color: var(--az); text-decoration: none; }

/* Login */
.crm-login-body { display: grid; place-items: center; min-height: 100dvh; background: radial-gradient(circle at 20% 0%, rgba(37,211,102,.08), transparent 45%), var(--f); }
.crm-login { width: min(380px, 92vw); display: grid; gap: 28px; }
.crm-login-marca { text-align: center; }
.crm-login-logo { font-size: 36px; }
.crm-login-marca h1 { margin: 6px 0 4px; font-size: 26px; } .crm-login-marca h1 span { color: var(--v); }
.crm-login-marca p { margin: 0; color: var(--m); font-size: 13.5px; }
.crm-login-form { display: grid; gap: 14px; background: var(--p); border: 1px solid var(--l); border-radius: 16px; padding: 22px; }
.crm-login-form label { display: grid; gap: 6px; font-size: 13px; color: var(--m); }
.crm-login-form input { background: var(--f); border: 1px solid var(--l); color: var(--t); border-radius: 10px; padding: 10px 12px; font: inherit; }
.crm-login-error { color: var(--r); font-size: 13px; margin: 0; }

.crm-btn { background: var(--v); color: #062b17; border: 0; border-radius: 10px; padding: 10px 16px; font-weight: 700; font-size: 14px; cursor: pointer; }
.crm-btn-chico { padding: 5px 10px; font-size: 12.5px; border-radius: 8px; }
.crm-ico { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: none; border: 0; color: var(--t); font-size: 16px; cursor: pointer; }
.crm-ico:hover { background: var(--l); }

/* Tablero */
.crm-body { background: var(--f); }
.crm { display: flex; flex-direction: column; height: 100dvh; }
.crm-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 14px; background: var(--p2); border-bottom: 1px solid var(--l); }
.crm-cab-marca { font-size: 15px; display: flex; align-items: center; gap: 6px; } .crm-cab-marca span { color: var(--v); }
.crm-sel { background: var(--f); color: var(--t); border: 1px solid var(--l); border-radius: 8px; padding: 6px 10px; max-width: 46vw; }
.crm-cab-usuario { margin-left: auto; display: flex; align-items: center; gap: 14px; color: var(--m); font-size: 13.5px; }
.crm-salir { color: var(--m); }

.crm-vacio { margin: auto; text-align: center; color: var(--m); display: grid; gap: 10px; justify-items: center; padding: 40px 20px; }
.crm-vacio b { color: var(--t); font-size: 16px; }

.crm-tablero { flex: 1; overflow-x: auto; display: flex; gap: 14px; padding: 16px; align-items: flex-start; }
.crm-col { background: var(--p); border: 1px solid var(--l); border-radius: 14px; min-width: 270px; width: 270px; flex: none; display: flex; flex-direction: column; max-height: 100%; }
.crm-col-cab { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--l); font-weight: 600; font-size: 13.5px; }
.crm-col-cab small { color: var(--m); font-weight: 500; }
.crm-col-lista { overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.crm-col-lista.sobre { background: rgba(37,211,102,.06); }

.crm-tarjeta { background: var(--p2); border: 1px solid var(--l); border-radius: 10px; padding: 10px 11px; cursor: grab; display: grid; gap: 4px; }
.crm-tarjeta:active { cursor: grabbing; }
.crm-tarjeta b { font-size: 13.5px; }
.crm-tarjeta .tel { color: var(--m); font-size: 12px; }
.crm-tarjeta .prev { color: var(--m); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.crm-tag { background: #1f3a2d; color: #86efac; border-radius: 999px; padding: 1px 8px; font-size: 10.5px; }
.crm-ia { color: var(--az); font-size: 11px; }

/* Panel lateral del contacto */
.crm-panel[hidden] { display: none; }
.crm-panel { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: flex-end; }
.crm-panel-fondo { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.crm-panel-caja { position: relative; width: min(420px, 94vw); height: 100%; background: var(--p); border-left: 1px solid var(--l); display: flex; flex-direction: column; }
.crm-panel-cab { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 16px 12px; border-bottom: 1px solid var(--l); }
.crm-panel-cab small { display: block; color: var(--m); font-size: 12.5px; }
.crm-panel-cuerpo { padding: 14px 16px; overflow-y: auto; flex: 1; display: grid; gap: 14px; align-content: start; }
.crm-p-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-p-resumen { background: rgba(83,189,235,.08); border: 1px solid rgba(83,189,235,.25); border-radius: 10px; padding: 10px 12px; }
.crm-p-resumen-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.crm-p-resumen-t { margin: 0; font-size: 13px; color: #cfe3f3; white-space: pre-wrap; }
.crm-panel-cuerpo h4 { margin: 4px 0 0; font-size: 12.5px; color: var(--m); text-transform: uppercase; letter-spacing: .04em; }
.crm-p-hilo { display: flex; flex-direction: column; gap: 6px; }
.crm-p-msg { max-width: 92%; padding: 6px 9px; border-radius: 8px; font-size: 13px; }
.crm-p-msg.in { align-self: flex-start; background: var(--p2); }
.crm-p-msg.out { align-self: flex-end; background: #0f5a46; }

/* Modal: dar acceso a un cliente (centrado, a diferencia del panel lateral) */
#crm-modal-cliente { justify-content: center; align-items: center; }
.crm-modal-caja { position: relative; width: min(380px, 94vw); margin: 0; height: auto; max-height: 86vh; background: var(--p); border: 1px solid var(--l); border-radius: 14px; display: flex; flex-direction: column; overflow-y: auto; }
#crm-mc-form { display: grid; gap: 12px; }
#crm-mc-form label { display: grid; gap: 6px; font-size: 13px; color: var(--m); }
#crm-mc-form input, #crm-mc-form select { background: var(--f); border: 1px solid var(--l); color: var(--t); border-radius: 10px; padding: 9px 11px; font: inherit; width: 100%; }
.crm-mc-listo { background: rgba(37,211,102,.08); border: 1px solid rgba(37,211,102,.3); border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.crm-mc-listo p:first-child { margin: 0 0 6px; color: var(--m); }
.crm-mc-clave { margin: 0; word-break: break-all; }
.crm-mc-clave code { background: var(--p2); padding: 2px 6px; border-radius: 6px; }

@media (max-width: 700px) { .crm-col { min-width: 220px; width: 220px; } }