/* CRM de Levo. Mismos tokens que el sitio público: es la misma marca, y que el
   panel se parezca a la web no es estética, es que nadie se pierda al cambiar. */
:root{
  --tinta:#14181C;
  --metadato:#5F6B7A;
  --papel:#FFFFFF;
  --banda:#F4F4F2;
  --filete:#E7E9EC;
  --acento:#2B405F;
  --foco:#51A0D3;
  --error:#A3271F;
  --error-suave:#FBEDEC;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--banda); color:var(--tinta);
  font:16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--acento)}
:focus-visible{outline:2px solid var(--foco); outline-offset:2px}

/* --- Barra superior --- */
.barra{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  background:var(--papel); border-bottom:1px solid var(--filete);
  padding:12px clamp(16px,3vw,28px);
}
.marca img{height:28px; width:auto; display:block}
.barra nav{display:flex; gap:20px; font-size:14px}
.barra nav a{text-decoration:none; color:var(--tinta); padding:6px 0;
  border-bottom:2px solid transparent}
.barra nav a:hover{border-color:var(--acento)}
.salir{margin-left:auto; display:flex; align-items:center; gap:12px;
  font-size:14px; color:var(--metadato)}
.salir button{
  font:inherit; cursor:pointer; background:none; border:1px solid var(--filete);
  border-radius:100px; padding:6px 14px; color:var(--tinta);
}
.salir button:hover{border-color:var(--acento); color:var(--acento)}

main{padding:clamp(24px,4vw,56px) clamp(16px,3vw,28px)}

/* --- Entrar --- */
.entrar{
  max-width:380px; margin:clamp(40px,10vh,110px) auto; background:var(--papel);
  border:1px solid var(--filete); border-radius:4px; padding:36px 32px 32px;
}
.entrar .logo{height:34px; width:auto; display:block; margin:0 auto 28px}
.entrar form{display:grid; gap:16px}
.entrar label{display:grid; gap:6px; font-size:13px; color:var(--metadato)}
.entrar input{
  font:inherit; color:var(--tinta); padding:11px 13px; border:1px solid var(--filete);
  border-radius:3px; background:var(--papel);
}
.entrar input:focus{border-color:var(--foco); outline:none;
  box-shadow:0 0 0 3px rgba(81,160,211,.18)}
.entrar button{
  font:inherit; cursor:pointer; margin-top:6px; background:var(--acento); color:#fff;
  border:0; border-radius:3px; padding:13px; letter-spacing:.06em; font-size:13px;
  text-transform:uppercase;
}
.entrar button:hover{background:#1E2E45}
.error{
  background:var(--error-suave); color:var(--error); border:1px solid var(--error);
  border-radius:3px; padding:11px 13px; font-size:14px; margin:0 0 18px;
}

/* --- Panel --- */
.panel{
  background:var(--papel); border:1px solid var(--filete); border-radius:4px;
  padding:clamp(24px,4vw,40px); max-width:760px;
}
.panel h1{font-size:clamp(24px,3vw,32px); margin:0 0 10px; letter-spacing:-.02em}
.eyebrow{font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--metadato); margin:0 0 8px}
.codigo{font-size:44px; font-weight:600; margin:0 0 4px; color:var(--metadato)}
.guia{color:var(--metadato); margin:0}

/* --- Listado del catálogo --- */
.cabecera-lista{display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:20px}
.cabecera-lista h1{margin:0; font-size:clamp(22px,2.6vw,29px); letter-spacing:-.02em}
.boton{display:inline-block; background:var(--acento); color:#fff; text-decoration:none;
  border:0; border-radius:3px; padding:11px 18px; font-size:13px; cursor:pointer;
  font-family:inherit}
.boton:hover{background:#1E2E45}
.aviso{background:#FDF6E7; border:1px solid #D9A441; border-radius:3px;
  padding:12px 15px; font-size:14px; margin:0 0 18px}
.filtros{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:18px}
.filtros select, .filtros button{font:inherit; font-size:14px; padding:9px 12px;
  border:1px solid var(--filete); border-radius:3px; background:var(--papel);
  color:var(--tinta)}
.filtros button{cursor:pointer; background:var(--papel)}
.filtros button:hover{border-color:var(--acento); color:var(--acento)}
.enlace-fino{font-size:13px; color:var(--acento)}

.tabla-caja{background:var(--papel); border:1px solid var(--filete); border-radius:4px;
  overflow-x:auto}
.tabla{border-collapse:collapse; width:100%; min-width:820px; font-size:14px}
.tabla th{text-align:left; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--metadato); font-weight:600; padding:12px 14px;
  border-bottom:1px solid var(--filete); background:var(--banda)}
.tabla td{padding:13px 14px; border-bottom:1px solid var(--filete); vertical-align:top}
.tabla tr:last-child td{border-bottom:0}
.tabla .num{text-align:right; font-variant-numeric:tabular-nums}
.tabla .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;
  color:var(--metadato)}
.tabla a{color:var(--tinta); text-decoration:none; font-weight:500}
.tabla a:hover{color:var(--acento); text-decoration:underline}
.tabla tr.incompleta{background:#FFFBF3}
.falta{display:block; font-size:11.5px; color:#9A6A12; margin-top:3px}
.vacio{color:#B23B34; font-size:13px}
.pildora{display:inline-block; font-size:11px; letter-spacing:.06em; padding:3px 9px;
  border-radius:100px}
.pildora.publicada{background:#E4F0EA; color:#1F5F4B}
.pildora.borrador{background:var(--banda); color:var(--metadato)}

/* --- Alta y edición de una propiedad --- */
.forma .panel{max-width:920px; display:grid; gap:18px; border:1px solid var(--filete); margin:0}
.forma fieldset[disabled]{opacity:.85}
.forma label{display:grid; gap:6px; font-size:13px; color:var(--metadato)}
.forma .rejilla{display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr))}
.forma input, .forma select, .forma textarea{
  font:inherit; font-size:15px; color:var(--tinta); padding:10px 12px;
  border:1px solid var(--filete); border-radius:3px; background:var(--papel); width:100%;
}
.forma textarea{resize:vertical; line-height:1.5}
.forma input:focus, .forma select:focus, .forma textarea:focus{
  border-color:var(--foco); outline:none; box-shadow:0 0 0 3px rgba(81,160,211,.18)}
.forma .acciones{display:flex; align-items:center; gap:18px;
  border-top:1px solid var(--filete); padding-top:18px}
.forma .boton{border:0}
.forma .boton[disabled]{opacity:.45; cursor:not-allowed}
.acciones-ficha{display:flex; align-items:center; gap:14px}
.acciones-ficha .boton{border:0; cursor:pointer}
.acciones-ficha .boton[disabled]{opacity:.45; cursor:not-allowed}
.ok{background:#E4F0EA; border:1px solid #7FB79F; border-radius:3px;
  padding:12px 15px; font-size:14px; margin:0 0 18px; color:#1F5F4B}

/* --- Fotos de la ficha --- */
.fotos{margin-top:36px; max-width:920px}
.fotos .subir{display:flex; gap:10px; align-items:center; font-size:14px}
.fotos .subir input[type=file]{font:inherit; font-size:13px; max-width:280px}
.galeria{display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr))}
.galeria figure{margin:0; background:var(--papel); border:1px solid var(--filete);
  border-radius:4px; overflow:hidden}
.galeria figure.portada{border-color:var(--acento)}
.galeria img{display:block; width:100%; height:130px; object-fit:cover}
.galeria figcaption{display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:8px 10px}
.galeria .falta{margin:0}
.enlace-boton{font:inherit; font-size:12px; background:none; border:0; padding:0;
  color:var(--acento); cursor:pointer; text-decoration:underline}

/* --- Expediente de un contacto --- */
.expediente{display:grid; gap:24px; grid-template-columns:minmax(0,1fr) 320px; align-items:start}
@media (max-width:900px){.expediente{grid-template-columns:1fr}}
.tiempo{list-style:none; margin:0 0 18px; padding:0; display:grid; gap:12px}
.tiempo li{background:var(--papel); border:1px solid var(--filete); border-left-width:3px;
  border-radius:4px; padding:12px 14px}
.tiempo li.mensaje{border-left-color:var(--acento)}
.tiempo li.nota{border-left-color:#7FB79F}
.tiempo .cuando{margin:0 0 4px; font-size:11.5px; color:var(--metadato);
  letter-spacing:.04em; text-transform:uppercase}
.tiempo .asunto{margin:0 0 4px; font-weight:600; font-size:14.5px}
.tiempo .texto{margin:0; font-size:14.5px; white-space:pre-line}
.forma.nota{max-width:none}
.forma.nota label{display:grid; gap:6px; font-size:13px; color:var(--metadato); margin-bottom:12px}
.papeles{border:1px solid var(--filete); border-radius:3px; padding:12px 14px; margin:0}
.papeles legend{font-size:12px; color:var(--metadato); padding:0 6px}
.forma .casilla{display:flex; align-items:center; gap:8px; font-size:14px;
  color:var(--tinta); cursor:pointer}
.forma .casilla input{width:auto; margin:0}
.papeles{display:grid; gap:8px}
.decidir{display:flex; gap:8px; align-items:center; margin-bottom:6px}
.decidir select{font:inherit; font-size:13px; padding:7px 9px; border:1px solid var(--filete);
  border-radius:3px; background:var(--papel)}

/* --- Qué busca y propuestas --- */
.busca{background:var(--papel); border:1px solid var(--filete); border-radius:4px;
  padding:12px 14px; margin-bottom:12px}
.busca.cerrada{opacity:.6}
.criterios{margin:0 0 8px; font-size:14.5px}
.propuestas{list-style:none; margin:0 0 14px; padding:0; display:grid; gap:8px}
.propuestas li{font-size:14.5px}
.propuestas a{color:var(--tinta); font-weight:500}
.agregar{margin-bottom:22px}
.agregar summary{cursor:pointer; font-size:13.5px; color:var(--acento)}
.agregar .forma{margin-top:12px}
.agregar .rejilla{display:grid; gap:14px; margin-bottom:14px;
  grid-template-columns:repeat(auto-fit, minmax(150px,1fr))}
.agregar .papeles{margin-bottom:14px; grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}

/* --- Kanban --- */
.tablero{display:grid; gap:14px; grid-template-columns:repeat(5, minmax(190px,1fr));
  overflow-x:auto; align-items:start; padding-bottom:8px}
@media (max-width:1100px){.tablero{grid-template-columns:repeat(5, 220px)}}
.columna{background:var(--banda); border:1px solid var(--filete); border-radius:4px; padding:10px}
.columna header{margin-bottom:10px}
.columna h2{margin:0; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--metadato)}
.columna header p{margin:2px 0 0; font-size:13px; font-variant-numeric:tabular-nums}
.tarjeta{background:var(--papel); border:1px solid var(--filete); border-radius:4px;
  padding:10px 12px; margin-bottom:10px}
.tarjeta p{margin:0}
.tarjeta .quien{font-weight:600; font-size:14px}
.tarjeta .que{font-size:13px; color:var(--metadato); margin-bottom:4px}
.tarjeta .cuanto{font-size:14px; font-variant-numeric:tabular-nums}
.tarjeta .quien-lleva{font-size:11.5px; color:var(--metadato); margin-top:2px}
.tarjeta .mover{display:flex; gap:6px; margin-top:8px}
.tarjeta .mover select{font:inherit; font-size:12px; padding:4px 6px; border:1px solid var(--filete);
  border-radius:3px; background:var(--papel); flex:1}
.tarjeta .cerrar{display:flex; gap:8px; align-items:center; margin-top:6px; flex-wrap:wrap}
.tarjeta .perder{display:flex; gap:4px}
.tarjeta .perder input{font:inherit; font-size:12px; padding:4px 6px; width:90px;
  border:1px solid var(--filete); border-radius:3px}
.enlace-boton.gana{color:#1F5F4B}
.cerrados{display:flex; gap:20px; margin-top:20px; font-size:14px; color:var(--metadato)}
.cerrados p{margin:0}

/* --- Libro de Ventas --- */
.cifras{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  margin-bottom:26px}
.cifras > div{background:var(--papel); border:1px solid var(--filete); border-radius:4px;
  padding:14px 16px}
.cifras .eyebrow{margin:0 0 4px}
.cifra{margin:0; font-size:clamp(20px,2.4vw,26px); font-weight:600; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.cifra.deuda, .tabla td.deuda{color:#9A3B12}
.tabla td.num .falta{display:inline; margin-left:4px}

/* --- Mando Central --- */
.senales{display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  margin-bottom:28px}
.senal{display:block; background:var(--papel); border:1px solid var(--filete);
  border-left:3px solid var(--metadato); border-radius:4px; padding:14px 16px;
  text-decoration:none; color:var(--tinta)}
.senal:hover{border-color:var(--acento)}
.senal.alta{border-left-color:#A3271F; background:#FDF4F3}
.senal.media{border-left-color:#D9A441; background:#FDF9F1}
.senal .que{margin:0 0 4px; font-weight:600; font-size:15px}
.senal .porque{margin:0; font-size:13px; color:var(--metadato)}
.actividad{list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:14px}
.actividad li{color:var(--tinta)}
.actividad .cuando{color:var(--metadato); font-size:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; margin-right:8px}

/* --- Rentas --- */
.tabla tr.vencida{background:var(--error-suave)}
.tabla tr.vencida td{color:var(--error)}
.tabla tr.vencida td.deuda{font-weight:600}