/* Tracker 25 CRM · identidad de la casa
   Azul marino #0D1B3E, naranja #F47B20, Sora para títulos. */

:root{
  --marino:#0D1B3E;
  --marino-claro:#1B2C55;
  --naranja:#F47B20;
  --texto:#141A2A;
  --texto-2:#5A6076;
  --texto-3:#8A90A3;
  --linea:#E4E7EF;
  --fondo:#F5F6F9;
  --blanco:#FFFFFF;
  --rojo:#A32D2D;
  --rojo-fondo:#FCEBEB;
  --rojo-linea:#F09595;
  --ambar:#854F0B;
  --ambar-fondo:#FAEEDA;
  --ambar-linea:#EF9F27;
  --verde:#0F6E56;
  --azul-liga:#1D4ED8;
  --radio:10px;
  --sombra:0 1px 2px rgba(13,27,62,.06);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* ⚠️ Lo escondido se queda escondido, sin excepciones.
   El atributo hidden esconde con display:none, pero CUALQUIER regla nuestra que
   diga display le gana, y entonces algo que creíamos oculto sigue en pantalla.
   Aquí eso no es un detalle visual: la aplicación se esconde hasta saber quién
   entró, así que una fuga aquí es cartera asomándose antes de tiempo. */
[hidden]{display:none !important}
body{
  background:var(--fondo);
  color:var(--texto);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.titular{font-family:"Sora",-apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:-.015em;font-weight:600;margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit}

/* Armazon: menu de lado en escritorio, barra de abajo en celular */
.app{display:flex;min-height:100vh}
.principal{flex:1;min-width:0;display:flex;flex-direction:column}

.lateral{
  width:214px;flex-shrink:0;background:var(--marino);
  padding:18px 12px;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.marca{
  display:block;font-family:"Sora",sans-serif;font-weight:600;font-size:16px;
  color:#fff;padding:0 10px 18px;
}
.marca span{color:var(--naranja)}
.menu{display:flex;flex-direction:column;gap:2px}
.menu a{
  display:flex;align-items:center;gap:10px;color:#9AA3BC;font-size:14.5px;
  padding:9px 10px;border-radius:8px;
}
.menu a svg{
  width:18px;height:18px;flex-shrink:0;fill:none;
  stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.menu a:hover{color:#fff;background:var(--marino-claro)}
.menu a.activo{color:#fff;background:var(--marino-claro)}
.menu a.activo svg{color:var(--naranja)}

/* Barra de arriba: solo el buscador */
.barra{
  background:#fff;border-bottom:1px solid var(--linea);
  padding:10px 20px;display:flex;justify-content:flex-end;
  position:sticky;top:0;z-index:15;
}
.buscador{position:relative;width:100%;max-width:360px}
.buscador input{
  width:100%;border:1px solid var(--linea);border-radius:8px;padding:8px 12px;
  font-size:14px;background:var(--fondo);color:var(--texto);
}
.buscador input::placeholder{color:var(--texto-3)}
.buscador input:focus{outline:2px solid var(--naranja);outline-offset:0;border-color:var(--naranja);background:#fff}
.sugerencias{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  box-shadow:0 8px 24px rgba(13,27,62,.14);overflow:hidden;
}
.sugerencias button{
  display:block;width:100%;text-align:left;background:none;border:none;
  padding:9px 12px;font-size:14px;cursor:pointer;border-top:1px solid var(--linea);
}
.sugerencias button:first-child{border-top:none}
.sugerencias button:hover{background:var(--fondo)}
.sugerencias .sug-2{color:var(--texto-2);font-size:12.5px}
.sugerencias .vacio{padding:10px 12px;color:var(--texto-2);font-size:13.5px}

/* Lienzo */
.vista{max-width:860px;margin:0 auto;padding:22px 16px 40px}
.pie{max-width:860px;margin:0 auto;padding:0 16px 30px;color:var(--texto-3);font-size:12.5px}

.encabezado{margin-bottom:18px}
.encabezado h1{font-size:23px;color:var(--marino)}
.narrativa{font-size:16px;color:#B04A16;margin-top:6px}
.narrativa.tranquilo{color:var(--verde)}

/* Bloques de la pantalla Hoy */
.bloque{background:#fff;border:1px solid var(--linea);border-radius:12px;box-shadow:var(--sombra);overflow:hidden;margin-bottom:16px}
.bloque-cabeza{display:flex;align-items:center;gap:10px;padding:9px 16px;background:#F4F5F8;border-bottom:1px solid var(--linea)}
.bloque-titulo{font-size:15px;font-weight:500;color:var(--marino);flex:1}
.cuenta{font-size:12px;font-weight:600;color:var(--marino);background:#fff;border:1px solid #C9CEDB;border-radius:20px;padding:1px 9px}
.bloque.urgente .bloque-cabeza{background:var(--rojo-fondo);border-bottom-color:var(--rojo-linea)}
.bloque.urgente .bloque-titulo{color:var(--rojo)}
.bloque.urgente .cuenta{color:var(--rojo);border-color:var(--rojo-linea)}
.bloque.aviso .bloque-cabeza{background:var(--ambar-fondo);border-bottom-color:var(--ambar-linea)}
.bloque.aviso .bloque-titulo{color:var(--ambar)}
.bloque.aviso .cuenta{color:var(--ambar);border-color:var(--ambar-linea)}

.renglon{display:flex;align-items:center;gap:14px;padding:11px 16px;border-top:1px solid var(--linea)}
.renglon:first-of-type{border-top:none}
.renglon:hover{background:#FAFBFD}
.renglon-nombre{font-size:14.5px;font-weight:500;color:var(--marino);min-width:150px;flex-shrink:0}
.renglon-nombre:hover{color:var(--naranja)}
.renglon-motivo{font-size:13.5px;color:var(--texto-2);flex:1;min-width:0}
.consejo{color:var(--ambar)}
.alerta{color:var(--rojo)}
.mas{padding:9px 16px;border-top:1px solid var(--linea);font-size:13.5px;color:var(--azul-liga);cursor:pointer;background:none;border-left:none;border-right:none;border-bottom:none;width:100%;text-align:left}

.wa{
  border:1px solid #C9CEDB;background:#fff;color:var(--marino);
  border-radius:8px;padding:5px 12px;font-size:12.5px;cursor:pointer;white-space:nowrap;
}
.wa:hover{border-color:var(--naranja);color:var(--naranja)}
.wa.flojo{border-color:transparent;color:var(--texto-3)}
.wa.flojo:hover{color:var(--texto-2);border-color:var(--linea)}

.suave{color:var(--texto-3)}
.liga{color:var(--azul-liga)}
.tarea{color:var(--marino);font-weight:500}
.mas.suelto{background:#fff;border:1px solid var(--linea);border-radius:12px;box-shadow:var(--sombra);margin-bottom:16px}

/* Lo que ya se gestionó */
.panel-gestion{padding:12px 16px;background:#F4F6FB;border-top:1px solid var(--linea)}
.panel-linea{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.panel-linea:last-child{margin-bottom:0}
.bloque.callado{opacity:.85}
.bloque.pendientes .bloque-cabeza{background:#EEF3FF;border-bottom-color:#C7D6F5}
.bloque.pendientes .bloque-titulo{color:#1D4ED8}
.bloque.pendientes .cuenta{color:#1D4ED8;border-color:#C7D6F5}

/* Fichas */
.ficha{background:#fff;border:1px solid var(--linea);border-radius:12px;box-shadow:var(--sombra);padding:18px 20px;margin-bottom:16px}
.ficha h1{font-size:22px;color:var(--marino)}
.ficha-contacto{color:var(--texto-2);font-size:14px;margin-top:4px}
.etiqueta-pago{display:inline-block;margin-top:10px;font-size:13.5px;padding:3px 10px;border-radius:20px;background:#EAF3DE;color:#3B6D11}
.etiqueta-pago.gestion{background:var(--ambar-fondo);color:var(--ambar)}
.etiqueta-pago.sindatos{background:#F1EFE8;color:#5F5E5A}
.acciones{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}

.seccion{margin-top:22px}
.seccion h2{font-size:14.5px;font-weight:500;color:var(--marino);margin-bottom:8px}
.lista-limpia{border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.lista-limpia .renglon{border-top-color:var(--linea)}

.aviso-oportunidad{
  margin-top:18px;padding:11px 14px;border-radius:var(--radio);
  background:var(--ambar-fondo);color:var(--ambar);font-size:14px;
}

.notas div{padding:8px 0;border-top:1px solid var(--linea);font-size:14px}
.notas div:first-child{border-top:none}
.notas .fecha{color:var(--texto-3);font-size:12.5px;margin-right:8px}

/* Tabla de recibos */
.tabla{width:100%;border-collapse:collapse;font-size:13.5px}
.tabla th{
  text-align:left;font-size:13px;color:var(--texto-2);font-weight:500;
  padding:7px 10px;border-bottom:1px solid var(--linea);
}
.tabla td{padding:9px 10px;border-bottom:1px solid var(--linea)}
.tabla tr:last-child td{border-bottom:none}
.tabla .num{text-align:right;font-variant-numeric:tabular-nums}
.pastilla{display:inline-block;font-size:12px;padding:2px 9px;border-radius:20px}
.pastilla.pagado{background:#EAF3DE;color:#3B6D11}
.pastilla.pendiente{background:#F1EFE8;color:#5F5E5A}
.pastilla.vencido{background:var(--rojo-fondo);color:var(--rojo)}

.datos-poliza{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:16px}
.dato .etq{font-size:13px;color:var(--texto-2)}
.dato .val{font-size:15px;font-weight:500;color:var(--marino)}

.migaja{font-size:13.5px;color:var(--azul-liga);cursor:pointer;background:none;border:none;padding:0;margin-bottom:12px}
.vacio-suave{color:var(--texto-2);font-size:14px;padding:12px 16px}

/* Ajustes */
.titulo-ajuste{font-family:"Sora",sans-serif;font-size:17px;font-weight:600;color:var(--marino);letter-spacing:-.01em}
.nota-ajuste{font-size:13.5px;color:var(--texto-2);margin:8px 0 0;line-height:1.55}
.tabla-envoltura{overflow-x:auto;margin-top:14px}
.tabla-gracia th:first-child,.tabla-gracia td:first-child{min-width:170px}
.nombre-aseguradora{font-weight:500;color:var(--marino)}
.tabla-gracia .pie-dato{font-size:12px;color:var(--texto-3)}
input.dias{
  width:62px;border:1px solid var(--linea);border-radius:8px;padding:5px 8px;
  font:inherit;font-size:14px;text-align:right;color:var(--marino);background:#fff;
}
input.dias:focus{outline:2px solid var(--naranja);outline-offset:0;border-color:var(--naranja)}
input.dias.cambiado{border-color:var(--naranja);background:#FFF7F1}
/* Un supuesto nuestro no puede verse igual de confiable que un dato real. */
input.dias.supuesto{border-style:dashed;border-color:#C9CEDB;color:var(--texto-3);background:#FAFBFD}
.leyenda{font-size:12.5px;color:var(--texto-2);margin:10px 0 0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.muestra{display:inline-block;width:22px;height:14px;border-radius:4px;vertical-align:-2px}
.muestra.supuesto{border:1px dashed #C9CEDB;background:#FAFBFD}
.muestra.cambiado{border:1px solid var(--naranja);background:#FFF7F1;margin-left:8px}
.alta-linea{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.alta-linea input[type=text]{
  border:1px solid var(--linea);border-radius:8px;padding:7px 10px;font:inherit;font-size:14px;
  min-width:230px;flex:1;max-width:320px;
}
.alta-linea input[type=text]:focus{outline:2px solid var(--naranja);outline-offset:0;border-color:var(--naranja)}
.etiqueta-campo{font-size:14px;color:var(--texto-2)}

.ramos{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ramo{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--marino);
  background:#F4F6FB;border:1px solid var(--linea);border-radius:20px;padding:5px 12px;
}
.ramo.propio{background:#FFF7F1;border-color:var(--naranja)}
.ramo-cuenta{font-size:12px;color:var(--texto-3)}
.ramo-quitar{
  border:none;background:none;color:var(--texto-3);font-size:12px;cursor:pointer;
  padding:0;text-decoration:underline;
}
.ramo-quitar:hover{color:var(--rojo)}

.dias-semana{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.dia-semana{
  border:1px solid var(--linea);background:#fff;color:var(--texto-2);
  border-radius:8px;padding:7px 14px;font-size:13.5px;cursor:pointer;min-width:56px;
}
.dia-semana:hover{border-color:#C9CEDB}
.dia-semana.puesto{background:var(--marino);border-color:var(--marino);color:#fff;font-weight:500}
input.hora{
  border:1px solid var(--linea);border-radius:8px;padding:6px 10px;font:inherit;
  font-size:14px;color:var(--marino);background:#fff;
}
input.hora:focus{outline:2px solid var(--naranja);outline-offset:0;border-color:var(--naranja)}

/* Calendario */
.cal-navegacion{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.cal-flecha{
  border:1px solid #C9CEDB;background:#fff;color:var(--marino);
  border-radius:8px;padding:5px 12px;font-size:12.5px;cursor:pointer;
}
.cal-flecha:hover{border-color:var(--naranja);color:var(--naranja)}
/* Regresar al mes de hoy nunca se esconde: las flechas navegan, esto vuelve. */
.cal-flecha.ahora{border-color:var(--naranja);color:var(--naranja);font-weight:500}

.cal-resumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.cal-dato{background:#fff;border:1px solid var(--linea);border-radius:12px;box-shadow:var(--sombra);padding:12px 14px}
.cal-dato .etq{font-size:13px;color:var(--texto-2)}
.cal-dato .val{font-family:"Sora",sans-serif;font-size:21px;font-weight:600;color:var(--marino);margin-top:2px}
.cal-dato .pie-dato{font-size:12.5px;color:var(--texto-3);margin-top:2px}

.cal-rejilla{
  display:grid;grid-template-columns:repeat(7,1fr);gap:6px;
  background:#fff;border:1px solid var(--linea);border-radius:12px;
  box-shadow:var(--sombra);padding:12px;margin-bottom:16px;
}
.cal-nombre-dia{font-size:12.5px;color:var(--texto-3);text-align:center;padding-bottom:4px}
.cal-celda{
  min-height:74px;border:1px solid var(--linea);border-radius:8px;background:#fff;
  padding:5px 6px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:3px;
  font:inherit;overflow:hidden;
}
.cal-celda.vacia{border:none;background:none;cursor:default;min-height:0}
.cal-celda:hover{border-color:#C9CEDB}
.cal-celda.con-cosas{background:#FBFCFE}
/* Los días que el agente no trabaja se ven apagados, pero siguen mostrando lo
   que cae ahí: la aseguradora no descansa aunque él sí. Va después de
   .con-cosas para que un domingo con cobros también se vea apagado. */
.cal-celda.no-laboral,.cal-celda.no-laboral.con-cosas{background:#EDEFF4}
.cal-celda.no-laboral .cal-numero{color:var(--texto-3)}
.cal-celda.hoy{border-color:var(--naranja);border-width:2px}
.cal-celda.elegida{border-color:var(--marino);border-width:2px;background:#F4F6FB}
.cal-numero{font-size:12.5px;font-weight:500;color:var(--texto-2)}
.cal-celda.hoy .cal-numero{color:var(--naranja)}
.cal-marca{
  font-size:11px;line-height:1.3;border-radius:5px;padding:1px 5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cal-marca.cobro{background:#EAF3DE;color:#3B6D11;font-weight:500}
.cal-marca.cobro.malo{background:var(--rojo-fondo);color:var(--rojo)}
.cal-marca.renovacion{background:#E6F1FB;color:#185FA5}
.cal-marca.cumple{background:var(--ambar-fondo);color:var(--ambar)}
.cal-marca.pendiente{background:#EEF3FF;color:#1D4ED8}

@media (max-width:640px){
  .cal-rejilla{gap:3px;padding:8px}
  .cal-celda{min-height:56px;padding:3px}
  .cal-marca{font-size:10px;padding:1px 3px}
  .cal-numero{font-size:11.5px}
}

@media (max-width:820px){
  .app{display:block}
  .lateral{
    position:fixed;bottom:0;left:0;right:0;top:auto;width:auto;height:auto;
    padding:0;z-index:30;border-top:1px solid var(--marino-claro);
  }
  .lateral .marca{display:none}
  .menu{flex-direction:row}
  .menu a{
    flex:1;flex-direction:column;gap:3px;font-size:11px;
    padding:8px 2px 9px;border-radius:0;text-align:center;
  }
  .menu a.activo{background:none;color:var(--naranja)}
  .menu a svg{width:20px;height:20px}
  .pie{padding-bottom:80px}
  /* Los botones se van a la derecha en vez de quedar flotando a media línea */
  .renglon .wa:first-of-type{margin-left:auto}
}

@media (max-width:640px){
  .buscador{max-width:none}
  .renglon{flex-wrap:wrap;gap:6px}
  .renglon-nombre{min-width:0;width:100%}
  .renglon-motivo{width:100%;flex-basis:100%}
  .vista{padding:16px 12px 32px}
}

/* Etiqueta que explica una tabla, en lugar de encabezados que hay que adivinar */
.nota-ajuste.subrayado{margin-top:16px;color:var(--marino);font-weight:500}
.dato .pie-dato{font-size:12.5px;color:var(--texto-3);margin-top:1px}

/* Siniestros: el momento en que el cliente mas necesita a su agente */
.bloque.siniestro .bloque-cabeza{background:#EEEDFE;border-bottom-color:#AFA9EC}
.bloque.siniestro .bloque-titulo{color:#3C3489}
.bloque.siniestro .cuenta{color:#3C3489;border-color:#AFA9EC}

/* ---------- La puerta ---------- */
.puerta{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px 16px;background:var(--marino);
}
.tarjeta-puerta{
  background:#fff;border-radius:16px;padding:28px 26px;width:100%;max-width:420px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
.marca-puerta{
  font-family:"Sora",sans-serif;font-weight:600;font-size:15px;
  color:var(--marino);margin:0 0 18px;
}
.marca-puerta span{color:var(--naranja)}

/* Solo se ve el paso en el que va */
.paso{display:none}
body[data-puerta="entrar"]   .paso[data-para="entrar"],
body[data-puerta="registro"] .paso[data-para="registro"],
body[data-puerta="aviso"]    .paso[data-para="aviso"]{display:block}

.tarjeta-puerta h1{font-size:21px;color:var(--marino);margin-bottom:4px}
.explica{font-size:14.5px;color:var(--texto-2);margin:0 0 16px}
.ayuda{font-size:13px;color:var(--texto-3);margin:6px 0 0;line-height:1.5}

.tarjeta-puerta label{
  display:block;font-size:13.5px;color:var(--texto-2);margin:14px 0 5px;
}
.tarjeta-puerta input,
.tarjeta-puerta select{
  width:100%;border:1px solid var(--linea);border-radius:8px;
  padding:10px 12px;font:inherit;font-size:15px;background:#fff;color:var(--texto);
}
.tarjeta-puerta input:focus,
.tarjeta-puerta select:focus{
  outline:2px solid var(--naranja);outline-offset:0;border-color:var(--naranja);
}
.tarjeta-puerta input:disabled,
.tarjeta-puerta select:disabled{background:var(--fondo);color:var(--texto-3)}

.boton-grande{
  width:100%;margin-top:20px;border:none;border-radius:8px;
  background:var(--marino);color:#fff;padding:12px;font-size:15px;
  font-weight:500;cursor:pointer;
}
.boton-grande:hover{background:var(--marino-claro)}
.boton-grande:disabled{background:#9AA3BC;cursor:default}

.pie-puerta{font-size:13.5px;color:var(--texto-2);margin:16px 0 0;text-align:center}
.liga-boton{
  border:none;background:none;color:var(--azul-liga);cursor:pointer;
  font-size:13.5px;padding:0;text-decoration:underline;
}

.recado{font-size:13.5px;margin:14px 0 0;min-height:1px}
.recado.malo{color:var(--rojo)}
.recado.bueno{color:var(--texto-2)}

.bienvenida{border-color:#C7D6F5;background:#FBFCFF}
.pie{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* Formulario de captura */
.formulario{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:18px}
.campo.ancho{grid-column:1 / -1}
.campo label{display:block;font-size:13.5px;color:var(--texto-2);margin-bottom:5px}
.campo input,.campo select{
  width:100%;border:1px solid var(--linea);border-radius:8px;padding:9px 11px;
  font:inherit;font-size:15px;background:#fff;color:var(--texto);
}
.campo input:focus,.campo select:focus{
  outline:2px solid var(--naranja);outline-offset:0;border-color:var(--naranja);
}
.ayuda-campo{font-size:12.5px;color:var(--texto-3);margin-top:4px;line-height:1.45}
.boton-guardar{
  border:none;border-radius:8px;background:var(--marino);color:#fff;
  padding:10px 18px;font-size:14.5px;font-weight:500;cursor:pointer;
}
.boton-guardar:hover{background:var(--marino-claro)}
.boton-guardar:disabled{background:#9AA3BC;cursor:default}
.ficha .recado{margin-top:14px}