/* CRM Inmobiliario · LyDour Systems
   Marca: azul marino #0B2E59 (principal), #1B4A85 (secundario), #071F3D (oscuro),
   fondo de marca #0F1722 (el del logo), gris #1E1E1E / #F5F5F5. Títulos en Montserrat (como el logo), texto en Inter. */
:root {
  --ac: #0B2E59; --ac-s: #E8EEF6; --ac-o: #071F3D; --ac2: #1B4A85; --ac-claro: #5E8FD0;
  --marca-fondo: #0F1722; --marca-fondo2: #16202E; --marca-txt: #C9D1DC; --marca-txt2: #8C97A6;
  --txt: #1E1E1E; --txt2: #5B6472; --txt3: #8A93A1;
  --borde: #E2E7EE; --borde2: #D3DAE3; --fondo: #F4F6F9; --card: #ffffff; --hover: #EEF2F7;
  --ok: #1B7A4B; --ok-s: #E3F3EA; --adv: #8A6A12; --adv-s: #FBF2DA; --mal: #96351F; --mal-s: #FBEAE5;
  --inf: #1B4A85; --inf-s: #E8EEF6; --gris-s: #EEF1F5;
  --r: 10px; --r2: 14px; --sombra: 0 1px 2px rgba(11,46,89,.05), 0 1px 3px rgba(11,46,89,.07);
  --sombra2: 0 16px 40px rgba(15,23,34,.22);
  --lat: 240px;
  --titulos: "Montserrat", "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 14px; color: var(--txt); background: var(--fondo);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--fondo); }
[hidden] { display: none !important; }
a { color: var(--ac); }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.005em; font-family: var(--titulos); color: var(--ac-o); }
small { color: var(--txt2); }
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--borde2); border-radius: 8px; background: #fff; min-height: 36px;
}
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--ac) 35%, transparent); border-color: var(--ac); }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--txt2); font-weight: 550; }
label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--txt); font-weight: 500; font-size: 13.5px; }
label.check input { width: auto; min-height: 0; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--borde2); background: #fff; cursor: pointer; font-weight: 560; white-space: nowrap; min-height: 36px; }
.btn:hover { background: var(--hover); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.pri { background: var(--ac); border-color: var(--ac); color: #fff; }
.btn.pri:hover { background: var(--ac-o); }
.btn.sec { background: #fff; }
.btn.peligro { color: var(--mal); border-color: color-mix(in srgb, var(--mal) 35%, #fff); }
.btn.link { border: 0; background: none; color: var(--ac); padding: 4px; min-height: 0; }
.btn.xs { padding: 4px 9px; font-size: 12.5px; min-height: 28px; }
.btn.icono { padding: 6px 9px; min-width: 36px; }
.btn.ancho { width: 100%; }
.btn .rayo { color: #d99a00; }
.btn.pri .rayo { color: #ffd257; }
.btn.auto { border-color: color-mix(in srgb, var(--ac) 40%, #fff); }

/* Insignias */
.b { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 600;
  background: var(--gris-s); color: var(--txt2); white-space: nowrap; }
.b.ok { background: var(--ok-s); color: var(--ok); } .b.adv { background: var(--adv-s); color: var(--adv); }
.b.mal { background: var(--mal-s); color: var(--mal); } .b.inf { background: var(--inf-s); color: var(--inf); }
.b.ac { background: var(--ac-s); color: var(--ac-o); }
.score { font-weight: 700; font-size: 12px; padding: 2px 7px; border-radius: 6px; background: var(--gris-s); color: var(--txt2); }
.score.alto { background: var(--ok-s); color: var(--ok); } .score.medio { background: var(--adv-s); color: var(--adv); }
.av { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; flex: none; }
.av.nadie { background: var(--gris-s); color: var(--txt3); border: 1px dashed var(--borde2); }

/* Login: panel de marca (fondo del logo) + formulario */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--fondo); }
.login-marca-panel { background: radial-gradient(120% 90% at 0% 0%, #1A2638 0%, var(--marca-fondo) 55%); color: var(--marca-txt); padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.login-ld { display: flex; align-items: center; gap: 14px; }
.login-ld .ld { width: 46px; height: 46px; color: var(--marca-txt); }
.wordmark { font-family: "Montserrat", sans-serif; font-weight: 500; letter-spacing: .14em; font-size: 15px; color: var(--marca-txt); }
.login-claim h2 { font-size: 34px; color: #fff; font-weight: 600; margin-bottom: 12px; }
.login-claim p { max-width: 420px; font-size: 15.5px; line-height: 1.55; color: var(--marca-txt); margin: 0; }
.login-pie { color: var(--marca-txt2); font-size: 12.5px; letter-spacing: .02em; }
.login-form-panel { display: grid; place-items: center; padding: 24px 16px; }
.login-caja { width: min(380px, 100%); background: #fff; border: 1px solid var(--borde); border-radius: var(--r2); box-shadow: var(--sombra); padding: 30px 28px; display: flex; flex-direction: column; gap: 14px; }
.login-titulo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.login-titulo b { font-family: var(--titulos); font-size: 20px; font-weight: 600; color: var(--ac-o); }
.login-error { color: var(--mal); margin: 0; min-height: 1em; font-size: 13px; }
.ld { display: block; flex: none; }
.ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Estructura */
.app { display: flex; min-height: 100vh; }
.lateral { width: var(--lat); background: var(--marca-fondo); color: var(--marca-txt); display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 30; }
.marca { display: flex; gap: 12px; align-items: center; padding: 20px 18px 16px; border-bottom: 1px solid rgba(255,255,255,.07); }
.marca .ld { width: 34px; height: 34px; color: var(--marca-txt); }
.marca div { display: flex; flex-direction: column; min-width: 0; }
.marca b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-family: var(--titulos); font-weight: 600; font-size: 14.5px; }
.marca small { color: var(--marca-txt2); font-size: 11.5px; }
.nav { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; overflow-y: auto; flex: 1; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 8px; color: var(--marca-txt); text-decoration: none; font-weight: 500; position: relative; }
.nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav a.activo { background: var(--ac2); color: #fff; }
.nav a.activo::before { content: ''; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ac-claro); }
.nav a .n { margin-left: auto; background: var(--ac-claro); color: var(--marca-fondo); font-size: 11px; border-radius: 99px; padding: 1px 7px; font-weight: 700; }
.nav a .ic { width: 20px; display: grid; place-items: center; }
.nav .sec { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--marca-txt2); padding: 16px 12px 6px; }
.lateral-pie { border-top: 1px solid rgba(255,255,255,.07); padding: 12px 14px; display: flex; align-items: center; gap: 8px; }
.lateral-pie .btn.sec { background: transparent; border-color: rgba(255,255,255,.18); color: var(--marca-txt); }
.lateral-pie .btn.sec:hover { background: rgba(255,255,255,.08); }
.yo { display: flex; gap: 8px; align-items: center; flex: 1; min-width: 0; }
.yo div { display: flex; flex-direction: column; min-width: 0; }
.yo b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; }
.yo small { color: var(--marca-txt2); }
.firma-lydour { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px 12px; color: var(--marca-txt2); font-family: "Montserrat", sans-serif; font-size: 9.5px; letter-spacing: .16em; }
.firma-lydour .ld { width: 14px; height: 14px; color: var(--marca-txt2); }
.principal { margin-left: var(--lat); flex: 1; min-width: 0; display: flex; flex-direction: column; }
.barra { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 14px 28px; background: color-mix(in srgb, #fff 94%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--borde); }
.barra h1 { font-size: 20px; }
.barra-der { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.buscador { position: relative; }
.buscador .ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--txt3); width: 16px; height: 16px; }
.buscador input { width: 300px; background: var(--fondo); padding-left: 32px; border-color: transparent; }
.buscador input:focus { background: #fff; }
.acciones-vista { display: flex; gap: 8px; flex-wrap: wrap; padding: 16px 28px 0; }
.acciones-vista:empty { display: none; }
.vista { padding: 18px 28px 48px; outline: none; }
.solo-movil { display: none !important; }

/* Campana */
.campana { position: relative; }
.punto { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--mal); color: #fff; font-size: 10px; display: grid; place-items: center; font-weight: 700; }
.avisos { position: absolute; right: 0; top: 44px; width: min(380px, 92vw); max-height: 70vh; overflow: auto; background: #fff; border: 1px solid var(--borde); border-radius: var(--r2); box-shadow: var(--sombra2); z-index: 40; }
.avisos-cab { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--borde); }
.aviso { display: flex; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--borde); cursor: pointer; }
.aviso:hover { background: var(--hover); }
.aviso.nueva { background: color-mix(in srgb, var(--ac-s) 55%, #fff); }
.aviso .t { font-weight: 600; font-size: 13px; }
.aviso p { margin: 2px 0 0; font-size: 12.5px; color: var(--txt2); }
.aviso .nivel { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--inf); }
.aviso .nivel.aviso-n { background: var(--adv); } .aviso .nivel.urgente { background: var(--mal); }

/* Tarjetas y grillas */
.card { background: var(--card); border: 1px solid var(--borde); border-radius: var(--r2); box-shadow: var(--sombra); }
.card-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 14px 16px 6px; }
.card-cab h3 { font-size: 14px; }
.card-cab small { display: block; margin-top: 2px; }
.card-cuerpo { padding: 8px 16px 16px; }
.card-cuerpo.np { padding: 0; }
.fila { display: grid; gap: 16px; margin-bottom: 16px; }
.fila.c2 { grid-template-columns: 1fr 1fr; } .fila.c3 { grid-template-columns: repeat(3, 1fr); } .fila.c21 { grid-template-columns: 2fr 1fr; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: #fff; border: 1px solid var(--borde); border-radius: var(--r2); padding: 14px 16px 14px 18px; box-shadow: var(--sombra); position: relative; overflow: hidden; }
.kpi::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ac2); }
.kpi .l { font-size: 12px; color: var(--txt2); font-weight: 550; }
.kpi .v { font-size: 26px; font-weight: 600; margin: 4px 0 2px; letter-spacing: -.01em; font-family: var(--titulos); color: var(--ac-o); }
.kpi .s { font-size: 12px; color: var(--txt3); }
.kpi .d { font-size: 12px; font-weight: 700; margin-left: 6px; }
.kpi .d.bien { color: var(--ok); } .kpi .d.mal { color: var(--mal); }
.nota { font-size: 12.5px; color: var(--txt2); background: #EEF3F9; border-left: 3px solid var(--ac2); border-radius: 0 8px 8px 0; padding: 8px 10px; margin: 10px 0 0; }
.nota.adv { background: var(--adv-s); color: var(--adv); border-left-color: var(--adv); }
.vacio { text-align: center; color: var(--txt3); padding: 28px 12px; }
.herr { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.herr .info { color: var(--txt2); font-size: 13px; }
.herr .der { margin-left: auto; display: flex; gap: 8px; }
.seg { display: inline-flex; border: 1px solid var(--borde2); border-radius: 9px; overflow: hidden; background: #fff; }
.seg button { border: 0; background: none; padding: 6px 12px; cursor: pointer; font-weight: 550; color: var(--txt2); border-right: 1px solid var(--borde); }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--ac-s); color: var(--ac-o); }

/* Tablas */
.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ac2); font-weight: 650; padding: 9px 12px; border-bottom: 1px solid var(--borde); background: #F7F9FC; }
.tabla td { padding: 10px 12px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla tr.click { cursor: pointer; } .tabla tr.click:hover td { background: var(--hover); }
.tabla .der { text-align: right; white-space: nowrap; }
.tabla td small { display: block; }
.tabla-scroll { overflow-x: auto; }

/* Gráficos */
.graf svg { width: 100%; height: auto; display: block; }
.leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--txt2); margin-top: 8px; }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.hbar { display: grid; grid-template-columns: 120px 1fr 44px; gap: 8px; align-items: center; margin: 7px 0; font-size: 13px; }
.hbar .barra-h { height: 10px; background: var(--gris-s); border-radius: 99px; overflow: hidden; }
.hbar .barra-h span { display: block; height: 100%; background: var(--ac); border-radius: 99px; }
.hbar b { text-align: right; }
.embudo { display: flex; flex-direction: column; gap: 6px; }
.embudo .paso { display: grid; grid-template-columns: 110px 1fr 90px; gap: 10px; align-items: center; font-size: 13px; }
.embudo .paso .fr { height: 26px; background: var(--ac); border-radius: 6px; opacity: .9; min-width: 4px; }
.embudo .paso small { text-align: right; }

/* Feed y timeline */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--borde); font-size: 13px; }
.feed li:last-child { border-bottom: 0; }
.feed .ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; font-size: 13px; background: var(--gris-s); }
.feed .ic.auto { background: #FBF2DA; } .feed .ic.humano { background: var(--gris-s); } .feed .ic.ia { background: var(--ac-s); }
.feed .ic.falla { background: var(--mal-s); }
.feed small { display: block; }
.pend { list-style: none; margin: 0; padding: 0; }
.pend li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--borde); cursor: pointer; }
.pend li:last-child { border-bottom: 0; }
.pend li:hover b { color: var(--ac); }
.pend .dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--adv); }
.pend .dot.ok { background: var(--ok); } .pend .dot.mal { background: var(--mal); }
.pend small { display: block; }

/* Kanban */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: start; }
.col { background: #eef1f4; border-radius: var(--r2); padding: 10px; min-height: 160px; }
.col.sobre { outline: 2px dashed var(--ac); background: var(--ac-s); }
.col-cab { display: flex; align-items: center; gap: 8px; padding: 2px 4px 10px; }
.col-cab .n { background: #fff; border-radius: 99px; padding: 0 8px; font-size: 12px; font-weight: 700; color: var(--txt2); }
.col-cab small { margin-left: auto; font-weight: 600; }
.tj { background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: 10px 11px; margin-bottom: 8px; cursor: pointer; box-shadow: var(--sombra); }
.tj:hover { border-color: var(--ac); }
.tj.arrastrando { opacity: .45; }
.tj-cab { display: flex; justify-content: space-between; gap: 8px; }
.tj h4 { font-size: 13.5px; }
.tj .m { font-size: 12px; color: var(--txt3); margin-top: 1px; }
.tj-prop { display: flex; gap: 6px; align-items: center; margin-top: 8px; font-size: 12.5px; color: var(--txt2); }
.tj-prop span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.tj-prop em { font-style: normal; font-weight: 650; color: var(--txt); }
.tj-pie { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; gap: 6px; }
.col-vacia { text-align: center; color: var(--txt3); font-size: 12.5px; padding: 18px 6px; border: 1px dashed var(--borde2); border-radius: 10px; }

/* Propiedades */
.props { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.pc { background: #fff; border: 1px solid var(--borde); border-radius: var(--r2); overflow: hidden; cursor: pointer; box-shadow: var(--sombra); display: flex; flex-direction: column; }
.pc:hover { border-color: var(--ac); }
.foto { position: relative; aspect-ratio: 16/10; background: linear-gradient(135deg, #E3E9F1, #CBD6E4); display: grid; place-items: center; color: #7C8DA6; font-size: 34px; overflow: hidden; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto .b { position: absolute; top: 10px; left: 10px; }
.foto .precio { position: absolute; bottom: 10px; left: 10px; background: rgba(15, 23, 34, .86); color: #fff; padding: 4px 10px; border-radius: 7px; font-weight: 600; font-size: 13px; font-family: var(--titulos); }
.pc-c { padding: 11px 13px 13px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.pc-c h4 { font-size: 14px; }
.pc-c .m { font-size: 12.5px; color: var(--txt2); }
.pc-pie { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 8px; font-size: 12px; color: var(--txt3); }
.canales { display: inline-flex; gap: 3px; }
.canal { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; background: var(--gris-s); color: var(--txt3); }
.canal.publicada { background: var(--ok-s); color: var(--ok); } .canal.desactualizada, .canal.pendiente_manual { background: var(--adv-s); color: var(--adv); }
.canal.error { background: var(--mal-s); color: var(--mal); }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.galeria .ft { position: relative; aspect-ratio: 4/3; border-radius: 8px; overflow: hidden; background: var(--gris-s); }
.galeria .ft img { width: 100%; height: 100%; object-fit: cover; }
.galeria .ft button { position: absolute; top: 4px; right: 4px; border: 0; background: rgba(0,0,0,.6); color: #fff; border-radius: 6px; cursor: pointer; font-size: 11px; padding: 2px 6px; }
.galeria .ft .ppal { position: absolute; left: 4px; bottom: 4px; }

/* Agenda */
.semana { display: grid; grid-template-columns: 54px repeat(var(--cols), minmax(120px, 1fr)); border: 1px solid var(--borde); border-radius: var(--r2); background: #fff; overflow: auto; }
.semana .cab { position: sticky; top: 0; background: #fafbfc; border-bottom: 1px solid var(--borde); padding: 8px; text-align: center; font-size: 12px; color: var(--txt2); z-index: 2; }
.semana .cab b { display: block; font-size: 18px; color: var(--txt); }
.semana .cab.hoy b { color: var(--ac); }
.semana .horas { border-right: 1px solid var(--borde); }
.semana .horas span { display: block; height: var(--hh); font-size: 11px; color: var(--txt3); text-align: right; padding: 2px 6px 0 0; }
.semana .dia { position: relative; border-right: 1px solid var(--borde); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hh) - 1px), var(--borde) calc(var(--hh) - 1px), var(--borde) var(--hh)); }
.semana .dia.hoy { background-color: #F7F9FC; }
.ev { position: absolute; left: 4px; right: 4px; border-radius: 7px; padding: 4px 7px; font-size: 11.5px; overflow: hidden; cursor: pointer; border-left: 3px solid; background: #fff; box-shadow: var(--sombra); }
.ev b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev span { color: var(--txt2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.ev.pasado { opacity: .55; } .ev.cancelada { text-decoration: line-through; opacity: .4; }
.ahora { position: absolute; left: 0; right: 0; height: 2px; background: var(--mal); z-index: 1; }
.lista-dias .dia-l { margin-bottom: 14px; }
.lista-dias h4 { margin-bottom: 6px; }

/* WhatsApp */
.wa { display: grid; grid-template-columns: 320px 1fr; height: calc(100vh - 150px); min-height: 480px; background: #fff; border: 1px solid var(--borde); border-radius: var(--r2); overflow: hidden; }
.wa-lista { border-right: 1px solid var(--borde); overflow-y: auto; }
.wa-item { display: flex; gap: 10px; padding: 11px 13px; border-bottom: 1px solid var(--borde); cursor: pointer; }
.wa-item:hover { background: var(--hover); }
.wa-item.on { background: var(--ac-s); }
.wa-item .c { flex: 1; min-width: 0; }
.wa-item .c b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-item .c small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-item .der { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 11px; color: var(--txt3); }
.nl { background: var(--ac); color: #fff; border-radius: 99px; font-size: 11px; font-weight: 700; padding: 0 7px; }
.wa-chat { display: flex; flex-direction: column; min-width: 0; background: #efeae2; }
.wa-cab { display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.wa-cab .c { flex: 1; min-width: 160px; }
.wa-cab .c b { display: block; }
.wa-msgs { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.burb { max-width: min(560px, 80%); padding: 7px 10px 5px; border-radius: 10px; background: #fff; box-shadow: 0 1px .5px rgba(0,0,0,.13); white-space: pre-wrap; word-wrap: break-word; font-size: 13.5px; line-height: 1.4; }
.burb.sal { align-self: flex-end; background: #d9fdd3; }
.burb.sal.bot { background: #E3ECF7; }
.burb .pie { display: flex; gap: 6px; justify-content: flex-end; font-size: 10.5px; color: var(--txt3); margin-top: 3px; }
.burb .quien { font-size: 11px; font-weight: 700; color: var(--ac-o); margin-bottom: 2px; }
.burb.fallido { border: 1px solid var(--mal); }
.sistema-msg { align-self: center; background: #fff8e1; color: var(--adv); font-size: 12px; border-radius: 8px; padding: 4px 10px; }
.wa-escribir { display: flex; gap: 8px; padding: 10px 12px; background: #f0f2f5; border-top: 1px solid var(--borde); align-items: flex-end; }
.wa-escribir textarea { min-height: 40px; max-height: 140px; }
.wa-vacio { display: grid; place-items: center; height: 100%; color: var(--txt3); text-align: center; padding: 20px; }

/* Cajón lateral (ficha) */
.velo { position: fixed; inset: 0; background: rgba(15, 23, 32, .35); z-index: 50; }
.cajon { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: #fff; z-index: 60; box-shadow: var(--sombra2); display: flex; flex-direction: column; animation: entra .18s ease-out; }
@keyframes entra { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.cj-cab { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-bottom: 1px solid var(--borde); }
.cj-cab .c { flex: 1; min-width: 0; }
.cj-cab h2 { font-size: 18px; }
.cj-cab .bs { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.cj-cuerpo { overflow-y: auto; padding: 4px 18px 30px; flex: 1; }
.cj-foto { margin: 0 -18px; }
.sec-cj { padding: 14px 0; border-bottom: 1px solid var(--borde); }
.sec-cj:last-child { border-bottom: 0; }
.sec-cj > h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--txt3); margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.datos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 0; }
.datos div { min-width: 0; }
.datos dt { font-size: 11.5px; color: var(--txt3); }
.datos dd { margin: 1px 0 0; font-weight: 550; overflow-wrap: anywhere; }
.lst { list-style: none; margin: 0; padding: 0; }
.lst li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--borde); }
.lst li:last-child { border-bottom: 0; }
.lst li .c { flex: 1; min-width: 0; }
.lst li .c small { display: block; }
.lst li.click { cursor: pointer; } .lst li.click:hover b { color: var(--ac); }
.tl { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--borde); }
.tl li { position: relative; padding: 0 0 12px 10px; font-size: 13px; }
.tl li::before { content: ''; position: absolute; left: -20px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--txt3); }
.tl li.auto::before { border-color: #d99a00; } .tl li.ia::before { border-color: var(--ac); } .tl li.humano::before { border-color: var(--inf); }
.tl small { display: block; }
.informe { white-space: pre-wrap; line-height: 1.55; font-size: 13.5px; background: var(--fondo); border-radius: 10px; padding: 12px 14px; }

/* Formularios */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.form .ancho { grid-column: 1 / -1; }
.form h5 { grid-column: 1 / -1; margin: 8px 0 -4px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--txt3); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { border: 1px solid var(--borde2); background: #fff; border-radius: 99px; padding: 4px 11px; cursor: pointer; font-size: 12.5px; }
.chips button.on { background: var(--ac-s); border-color: var(--ac); color: var(--ac-o); font-weight: 600; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.slots button { border: 1px solid var(--borde2); background: #fff; border-radius: 9px; padding: 8px; cursor: pointer; text-align: left; }
.slots button b { display: block; font-size: 13px; } .slots button small { font-size: 12px; }
.slots button.on { border-color: var(--ac); background: var(--ac-s); }

/* Modal */
.modal-fondo { position: fixed; inset: 0; z-index: 80; background: rgba(15, 23, 32, .45); display: grid; place-items: center; padding: 16px; }
.modal { width: min(620px, 100%); max-height: 92vh; overflow: auto; background: #fff; border-radius: var(--r2); box-shadow: var(--sombra2); }
.modal.ancho { width: min(980px, 100%); }
.md-cab { padding: 18px 20px 6px; }
.md-cab h3 { font-size: 17px; }
.md-cab p { margin: 4px 0 0; color: var(--txt2); font-size: 13px; }
.md-cuerpo { padding: 12px 20px; }
.md-pie { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 20px 18px; border-top: 1px solid var(--borde); position: sticky; bottom: 0; background: #fff; }
.md-error { color: var(--mal); font-size: 13px; margin: 8px 0 0; }

/* Tasación */
.rango { margin: 8px 0 4px; }
.rango .barra-r { position: relative; height: 12px; border-radius: 99px; background: linear-gradient(90deg, #CFDBEA, var(--ac2), #CFDBEA); }
.rango .marca-r { position: absolute; top: -5px; width: 4px; height: 22px; background: var(--txt); border-radius: 2px; transform: translateX(-2px); }
.rango .valores { display: flex; justify-content: space-between; font-size: 12.5px; margin-top: 8px; color: var(--txt2); }
.rango .valores b { color: var(--txt); display: block; font-size: 14px; }
.tas-num { font-size: 30px; font-weight: 600; letter-spacing: -.01em; font-family: var(--titulos); color: var(--ac-o); }
.tas-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; align-items: start; }
.cajon.ancho { width: min(860px, 100vw); }
.cajon .tas-grid { grid-template-columns: 1fr; }
.md-cuerpo.con-previa { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.md-cuerpo.con-previa > .card { position: sticky; top: 0; margin-top: 0 !important; }
.md-cuerpo.con-previa .tas-grid { grid-template-columns: 1fr; }
.md-cuerpo.con-previa .md-error { grid-column: 1 / -1; }
.md-cuerpo.con-previa .form { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px) { .md-cuerpo.con-previa { grid-template-columns: 1fr; } .md-cuerpo.con-previa > .card { position: static; } }

/* Toasts y carga */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--marca-fondo); color: #fff; border-radius: 10px; padding: 11px 14px; min-width: 240px; max-width: 380px; box-shadow: var(--sombra2); font-size: 13px; animation: entra .18s ease-out; }
.toast b { display: block; }
.toast.mal { background: var(--mal); } .toast.ok { background: var(--ok); } .toast.adv { background: #6E540E; }
.cargando { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; overflow: hidden; }
.cargando span { display: block; height: 100%; width: 40%; background: var(--ac-claro); animation: carga 1s infinite ease-in-out; }
@keyframes carga { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.flash { animation: flash 1.6s ease-out; }
@keyframes flash { from { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac) 45%, transparent); } to { box-shadow: var(--sombra); } }

/* Responsive */
@media (max-width: 1100px) {
  .fila.c3 { grid-template-columns: 1fr 1fr; }
  .buscador input { width: 200px; }
  .tas-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; }
  .login-marca-panel { padding: 28px 22px; gap: 18px; }
  .login-claim h2 { font-size: 24px; }
  .login-claim p, .login-pie { display: none; }
  .lateral { transform: translateX(-100%); transition: transform .2s; box-shadow: var(--sombra2); }
  .app.menu-abierto .lateral { transform: none; }
  .principal { margin-left: 0; }
  .solo-movil { display: inline-flex !important; }
  .barra { padding: 10px 16px; }
  .vista { padding: 12px 16px 40px; }
  .barra h1 { font-size: 17px; }
  .buscador { display: none; }
  .acciones-vista { padding: 12px 16px 0; }
  .vista { padding: 12px 16px 40px; }
  .fila.c2, .fila.c3, .fila.c21 { grid-template-columns: 1fr; }
  .form, .datos { grid-template-columns: 1fr; }
  .wa { grid-template-columns: 1fr; height: calc(100vh - 130px); }
  .wa.con-chat .wa-lista { display: none; }
  .wa:not(.con-chat) .wa-chat { display: none; }
  .hbar { grid-template-columns: 90px 1fr 36px; }
  .kanban { grid-auto-columns: 82vw; }
  .toasts { left: 12px; right: 12px; bottom: 12px; }
  .toast { min-width: 0; max-width: none; }
  .md-pie { flex-wrap: wrap; }
}
@media print {
  .lateral, .barra, .acciones-vista, .toasts { display: none !important; }
  .principal { margin: 0; }
}

/* ── v2: canales, listas con casillas, planillas, links ─────────────────── */
.cn { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 3px; border-radius: 5px; font-size: 9.5px; font-weight: 800; color: #fff; flex: 0 0 auto; letter-spacing: .02em; }
.cn.whatsapp { background: #1f9d55; } .cn.instagram { background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af); } .cn.messenger { background: #0866ff; } .cn.web { background: #64748b; }
.chk-lista { max-height: 320px; overflow: auto; border: 1px solid var(--borde); border-radius: 10px; padding: 2px 10px; background: #fff; }
.chk-lista label { display: flex; flex-direction: row; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--borde); font-weight: 500; font-size: 13.5px; color: var(--txt); cursor: pointer; }
.chk-lista input { width: auto; min-height: 0; flex: 0 0 auto; margin: 0; }
.chk-lista label:last-child { border-bottom: 0; }
.chk-lista img, .chk-lista .sinfoto { width: 44px; height: 34px; object-fit: cover; border-radius: 6px; background: var(--fondo); flex: 0 0 auto; }
.chk-lista small { display: block; color: var(--txt3); }
.previa-csv { max-height: 260px; overflow: auto; margin-top: 8px; }
.codigo { font-family: ui-monospace, Consolas, monospace; font-size: 12px; background: var(--fondo); border-radius: 8px; padding: 10px; white-space: pre-wrap; word-break: break-all; }
.link-fila { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.link-fila code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; background: var(--fondo); padding: 6px 8px; border-radius: 6px; }