/* ===================================================================
   CRM CrediAyudarte — sistema visual
   Hereda los tokens de la landing: blanco dominante, verde protagonista,
   Plus Jakarta Sans, esquinas muy redondeadas y sombras verdosas suaves.
   Modo claro unico y deliberado: el equipo trabaja de dia y en oficina.
   =================================================================== */

:root{
  /* ---- Marca (identicos a la landing) ---- */
  --verde-marca:     #7CB41D;
  --verde-medio:     #6AA31A;
  --verde-brillante: #6C9D28;
  --verde-texto:     #4F7D1F;
  --verde-agua:      #EAF3DC;
  --verde-menta:     #F3F8EB;
  --verde-nube:      #FBFDF7;

  --amarillo:        #F9C205;
  --amarillo-suave:  #FFD645;

  /* ---- Resto de la gama de la landing, que no estaba usando ---- */
  --lima:            #8AC521;
  --lima-clara:      #93CB2C;
  --hoja:            #A7D64A;
  --rosa:            #E0607A;
  --rosa-suave:      #FBEAEE;
  --verde-wa:        #25D366;
  --verde-hondo:     #25A15A;
  --teja:            #C0392B;
  --cielo:           #EFF4FC;

  --tinta:           #2B3327;
  --gris-texto:      #5B655D;
  --gris-suave:      #97A099;
  --crema:           #F7F9F3;
  --blanco:          #FFFFFF;
  --linea:           #EAEDE4;

  /* ---- Degradados de marca ---- */
  --grad-verde:  linear-gradient(100deg, var(--verde-marca), var(--lima));
  --grad-fresco: linear-gradient(120deg, var(--verde-marca), var(--hoja));
  --grad-sol:    linear-gradient(100deg, var(--amarillo), var(--amarillo-suave));
  --grad-mixto:  linear-gradient(90deg, var(--verde-marca), var(--amarillo));
  --grad-rosa:   linear-gradient(100deg, var(--rosa), #F08CA0);
  --grad-hondo:  linear-gradient(100deg, var(--verde-texto), var(--verde-marca));

  /* ---- Datos ----
     El verde y el amarillo de marca no sirven para graficas: el amarillo
     queda fuera de la banda de luminosidad y el verde no alcanza 3:1 sobre
     blanco. Estos son sus equivalentes validados. */
  --dato:            #5F8F16;   /* una sola serie: magnitud */
  --dato-suave:      #DDE9C6;   /* pista de fondo de las barras */
  --cat-1:           #5F8F16;
  --cat-2:           #2C7BE5;
  --cat-3:           #C08A00;
  --cat-4:           #6741D9;
  --cat-5:           #D9480F;
  --cat-6:           #087F5B;

  /* ---- Estado (reservados, siempre con etiqueta) ---- */
  --ok:              #087F5B;
  --aviso:           #C08A00;
  --grave:           #D9480F;
  --critico:         #C92A2A;

  --f-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  --radius: 24px;
  --radius-sm: 16px;
  --radius-xs: 10px;
  --shadow: 0 26px 60px -30px rgba(76,110,40,.30);
  --shadow-sm: 0 16px 40px -24px rgba(76,110,40,.28);
  --ease: cubic-bezier(.22,.61,.36,1);

  --sidebar: 268px;
  --topbar: 74px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-body);color:var(--gris-texto);background:var(--crema);
  line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{color:var(--tinta);line-height:1.15;letter-spacing:-.02em;font-weight:800}
h1{font-size:1.6rem}
h2{font-size:1.28rem}
h3{font-size:1.05rem;font-weight:700}
svg.ico{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;
        stroke-linecap:round;stroke-linejoin:round}
svg.ico.solid{fill:currentColor;stroke:none}
.oculto{display:none !important}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===================== ACCESO ===================== */
.acceso{
  min-height:100dvh;display:grid;place-items:center;padding:1.5rem;
  background:
    radial-gradient(1100px 620px at 12% -10%, var(--verde-menta), transparent 60%),
    radial-gradient(900px 520px at 105% 110%, var(--verde-agua), transparent 62%),
    var(--blanco);
}
.acceso__caja{
  width:min(100%,432px);background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:2.4rem 2.1rem;
}
.acceso__logo{width:74px;margin:0 auto 1.1rem}
.acceso__caja h1{text-align:center;font-size:1.42rem;margin-bottom:.3rem}
.acceso__sub{text-align:center;color:var(--gris-suave);font-size:.94rem;margin-bottom:1.7rem}

.campo{margin-bottom:1.05rem}
.campo label{display:block;font-weight:700;color:var(--tinta);font-size:.9rem;margin-bottom:.42rem}
.campo input,.campo select,.campo textarea{
  width:100%;padding:.85rem 1rem;border:2px solid var(--linea);border-radius:var(--radius-sm);
  background:var(--blanco);transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--verde-marca);box-shadow:0 0 0 4px var(--verde-menta);
}
.campo textarea{resize:vertical;min-height:96px}
.campo__ayuda{font-size:.82rem;color:var(--gris-suave);margin-top:.35rem}

/* ===================== BOTONES ===================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:700;font-size:.96rem;padding:.8rem 1.4rem;border-radius:50px;
  cursor:pointer;border:2px solid transparent;white-space:nowrap;
  transition:transform .18s var(--ease),box-shadow .22s var(--ease),background .18s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-primary{background:var(--verde-marca);color:#fff;box-shadow:0 14px 26px -14px rgba(124,180,29,.95)}
.btn-primary:hover:not(:disabled){background:var(--verde-medio)}
.btn-ghost{background:var(--blanco);color:var(--verde-texto);border-color:var(--linea)}
.btn-ghost:hover:not(:disabled){background:var(--verde-menta);border-color:var(--verde-marca)}
.btn-peligro{background:#fff;color:var(--critico);border-color:#F3D5D5}
.btn-peligro:hover:not(:disabled){background:#FDF2F2}
.btn-block{width:100%}
.btn-sm{padding:.5rem .95rem;font-size:.87rem}
.btn-icono{
  width:42px;height:42px;padding:0;border-radius:50%;background:var(--blanco);
  border:1px solid var(--linea);color:var(--gris-texto);display:inline-grid;place-items:center;cursor:pointer;
}
.btn-icono:hover{background:var(--verde-menta);color:var(--verde-texto)}

/* ===================== ARMAZON ===================== */
.app{display:none;min-height:100dvh}
.app.activa{display:block}

.barra-lateral{
  position:fixed;inset:0 auto 0 0;width:var(--sidebar);background:var(--blanco);
  border-right:1px solid var(--linea);display:flex;flex-direction:column;z-index:40;
}
.barra-lateral__marca{
  display:flex;align-items:center;gap:.7rem;padding:1.15rem 1.4rem;
  border-bottom:1px solid var(--linea);min-height:var(--topbar);
}
.barra-lateral__marca img{width:38px}
.barra-lateral__marca strong{color:var(--tinta);font-size:1.02rem;letter-spacing:-.02em}
.barra-lateral__marca span{display:block;font-size:.74rem;color:var(--gris-suave);font-weight:600}

.nav{padding:1rem .8rem;flex:1;overflow-y:auto}
.nav__titulo{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--gris-suave);
  font-weight:800;padding:.9rem .7rem .45rem;
}
.nav__item{
  display:flex;align-items:center;gap:.75rem;width:100%;padding:.72rem .8rem;
  border-radius:var(--radius-sm);border:none;background:none;cursor:pointer;
  color:var(--gris-texto);font-weight:600;font-size:.95rem;text-align:left;
  transition:background .16s var(--ease),color .16s var(--ease);
}
.nav__item:hover{background:var(--verde-nube);color:var(--verde-texto)}
.nav__item.activo{background:var(--verde-menta);color:var(--verde-texto);font-weight:800}
.nav__item .ico{width:1.22rem;height:1.22rem}
.nav__globo{
  margin-left:auto;background:var(--verde-marca);color:#fff;font-size:.72rem;font-weight:800;
  min-width:22px;height:22px;border-radius:11px;display:grid;place-items:center;padding:0 .4rem;
}

.barra-lateral__pie{border-top:1px solid var(--linea);padding:.9rem}
.usuario{display:flex;align-items:center;gap:.7rem;padding:.5rem}
.usuario__avatar{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:.92rem;flex:none;
}
.usuario__nombre{font-weight:800;color:var(--tinta);font-size:.92rem;line-height:1.2}
.usuario__rol{font-size:.76rem;color:var(--gris-suave);text-transform:capitalize}

.principal{margin-left:var(--sidebar);min-height:100dvh;display:flex;flex-direction:column}
.barra-superior{
  position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea);min-height:var(--topbar);
  display:flex;align-items:center;gap:1rem;padding:.9rem 1.7rem;
}
.barra-superior h1{flex:1;min-width:0}
.barra-superior__sub{font-size:.86rem;color:var(--gris-suave);font-weight:600}
.menu-movil{display:none}

.contenido{flex:1;padding:1.7rem}
.vista{display:none}
.vista.activa{display:block;animation:entra .28s var(--ease)}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ===================== TARJETAS ===================== */
.tarjeta{
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:1.4rem;
}
.tarjeta__cab{display:flex;align-items:center;gap:.8rem;margin-bottom:1.1rem;flex-wrap:wrap}
.tarjeta__cab h2,.tarjeta__cab h3{flex:1;min-width:0}
.rejilla{display:grid;gap:1.1rem}
.rejilla--kpis{grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
.rejilla--2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.mb{margin-bottom:1.1rem}

/* ---- Ficha de cifra ---- */
.kpi{
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radius);
  padding:1.25rem 1.3rem;box-shadow:var(--shadow-sm);
}
.kpi__etiqueta{
  font-size:.79rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  color:var(--gris-suave);display:flex;align-items:center;gap:.45rem;margin-bottom:.55rem;
}
.kpi__valor{
  font-size:2.1rem;font-weight:800;color:var(--tinta);letter-spacing:-.03em;line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.kpi__pie{font-size:.84rem;color:var(--gris-suave);margin-top:.3rem}
.kpi__delta{font-weight:800;font-size:.84rem;display:inline-flex;align-items:center;gap:.28rem}
.kpi__delta.sube{color:var(--ok)}
.kpi__delta.baja{color:var(--grave)}

/* ---- Barras horizontales ---- */
.barras{display:flex;flex-direction:column;gap:.85rem}
.barra__fila{display:grid;grid-template-columns:1fr auto;gap:.3rem .8rem;align-items:baseline}
.barra__nombre{font-weight:700;color:var(--tinta);font-size:.92rem;overflow-wrap:anywhere}
.barra__cifra{font-weight:800;color:var(--tinta);font-variant-numeric:tabular-nums;font-size:.92rem}
.barra__pct{color:var(--gris-suave);font-weight:600;font-size:.82rem;margin-left:.35rem}
.barra__pista{
  grid-column:1/-1;height:10px;background:var(--dato-suave);border-radius:5px;overflow:hidden;
}
.barra__valor{
  height:100%;background:var(--dato);border-radius:5px;
  transition:width .5s var(--ease);
}

/* ---- Serie temporal ---- */
.grafica{width:100%;height:auto;overflow:visible}
.grafica .eje{stroke:var(--linea);stroke-width:1}
.grafica .rejilla-linea{stroke:var(--linea);stroke-width:1;stroke-dasharray:3 4}
.grafica .etiqueta{fill:var(--gris-suave);font-size:11px;font-weight:600}
.grafica .serie{fill:none;stroke:var(--dato);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.grafica .area{fill:var(--verde-menta)}
.grafica .punto{fill:var(--dato);stroke:var(--blanco);stroke-width:2}

/* ===================== TABLAS ===================== */
.tabla-envoltura{overflow-x:auto;border-radius:var(--radius-sm);border:1px solid var(--linea)}
table{width:100%;border-collapse:collapse;background:var(--blanco);font-size:.92rem}
thead th{
  background:var(--verde-nube);color:var(--tinta);font-weight:800;text-align:left;
  padding:.8rem .95rem;white-space:nowrap;border-bottom:1px solid var(--linea);
  font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;
}
tbody td{padding:.8rem .95rem;border-bottom:1px solid var(--linea);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr.clicable{cursor:pointer;transition:background .14s}
tbody tr.clicable:hover{background:var(--verde-nube)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.tabla-vacia{padding:2.6rem 1rem;text-align:center;color:var(--gris-suave)}

/* ===================== ETIQUETAS DE ESTADO ===================== */
.pastilla{
  display:inline-flex;align-items:center;gap:.35rem;padding:.24rem .68rem;border-radius:50px;
  font-size:.79rem;font-weight:800;white-space:nowrap;border:1px solid transparent;
}
.pastilla .punto{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.pastilla--nuevo       {background:#EFF4FC;color:#1B5FB0;border-color:#D6E4F7}
.pastilla--contactado  {background:var(--verde-menta);color:var(--verde-texto);border-color:var(--verde-agua)}
.pastilla--en_estudio  {background:#FDF6E3;color:#96690A;border-color:#F5E4BC}
.pastilla--radicado    {background:#F1EDFD;color:#5433C4;border-color:#E0D8FA}
.pastilla--aprobado    {background:#E7F6F1;color:var(--ok);border-color:#C9EBE0}
.pastilla--desembolsado{background:#E3F3EC;color:#056145;border-color:#BFE5D8}
.pastilla--negado      {background:#FDECE6;color:var(--grave);border-color:#F8D6C9}
.pastilla--descartado  {background:#F3F4F2;color:var(--gris-texto);border-color:var(--linea)}
.pastilla--alerta      {background:#FDF0F0;color:var(--critico);border-color:#F5D2D2}
.pastilla--neutra      {background:var(--crema);color:var(--gris-texto);border-color:var(--linea)}

/* ===================== FILTROS ===================== */
.filtros{
  display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-bottom:1.1rem;
}
.filtros .campo{margin:0}
.buscador{position:relative;flex:1;min-width:230px}
.buscador .ico{position:absolute;left:.95rem;top:50%;transform:translateY(-50%);color:var(--gris-suave)}
.buscador input{padding-left:2.7rem}
.segmentado{
  display:inline-flex;background:var(--blanco);border:1px solid var(--linea);
  border-radius:50px;padding:.22rem;gap:.15rem;
}
.segmentado button{
  border:none;background:none;padding:.44rem 1rem;border-radius:50px;cursor:pointer;
  font-weight:700;font-size:.88rem;color:var(--gris-texto);transition:background .16s,color .16s;
}
.segmentado button:hover{color:var(--verde-texto)}
.segmentado button.activo{background:var(--verde-marca);color:#fff}

/* ===================== FICHA DE CLIENTE ===================== */
.ficha__cab{
  display:flex;align-items:flex-start;gap:1.1rem;flex-wrap:wrap;
  padding-bottom:1.2rem;border-bottom:1px solid var(--linea);margin-bottom:1.2rem;
}
.ficha__avatar{
  width:60px;height:60px;border-radius:50%;background:var(--verde-menta);color:var(--verde-texto);
  display:grid;place-items:center;font-weight:800;font-size:1.35rem;flex:none;
}
.ficha__datos{flex:1;min-width:200px}
.ficha__datos h2{margin-bottom:.2rem}
.ficha__meta{color:var(--gris-suave);font-size:.9rem}
.datos-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem}
.dato__etiqueta{font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--gris-suave)}
.dato__valor{font-weight:700;color:var(--tinta);overflow-wrap:anywhere}

/* ===================== TRAZABILIDAD ===================== */
.linea-tiempo{position:relative;padding-left:1.9rem}
.linea-tiempo::before{
  content:"";position:absolute;left:7px;top:.4rem;bottom:.4rem;width:2px;background:var(--linea);
}
.evento{position:relative;padding-bottom:1.3rem}
.evento:last-child{padding-bottom:0}
.evento__punto{
  position:absolute;left:-1.9rem;top:.28rem;width:16px;height:16px;border-radius:50%;
  background:var(--blanco);border:3px solid var(--verde-marca);
}
.evento__cab{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.2rem}
.evento__titulo{font-weight:800;color:var(--tinta)}
.evento__fecha{font-size:.82rem;color:var(--gris-suave);margin-left:auto}
.evento__detalle{font-size:.93rem}
.evento__autor{font-size:.82rem;color:var(--gris-suave);margin-top:.25rem}

/* ===================== CHAT ===================== */
.chat{display:grid;grid-template-columns:266px 1fr;gap:1.1rem;height:calc(100dvh - var(--topbar) - 3.4rem)}
.chat__lista{
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radius);
  overflow-y:auto;padding:.6rem;
}
.chat__conv{
  display:flex;align-items:center;gap:.7rem;padding:.72rem .8rem;border-radius:var(--radius-sm);
  cursor:pointer;border:none;background:none;width:100%;text-align:left;transition:background .16s;
}
.chat__conv:hover{background:var(--verde-nube)}
.chat__conv.activo{background:var(--verde-menta)}
.chat__conv-nombre{font-weight:700;color:var(--tinta);font-size:.94rem}
.chat__conv-ultimo{font-size:.81rem;color:var(--gris-suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}

.chat__panel{
  background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radius);
  display:flex;flex-direction:column;overflow:hidden;
}
.chat__cab{padding:1rem 1.2rem;border-bottom:1px solid var(--linea);display:flex;align-items:center;gap:.7rem}
.chat__mensajes{flex:1;overflow-y:auto;padding:1.2rem;display:flex;flex-direction:column;gap:.85rem}
.burbuja{max-width:min(74%,520px);display:flex;flex-direction:column;gap:.2rem}
.burbuja__autor{font-size:.79rem;font-weight:800;color:var(--verde-texto)}
.burbuja__texto{
  padding:.65rem .95rem;border-radius:var(--radius-sm);background:var(--crema);
  color:var(--tinta);overflow-wrap:anywhere;
}
.burbuja__hora{font-size:.72rem;color:var(--gris-suave)}
.burbuja--propia{align-self:flex-end;align-items:flex-end}
.burbuja--propia .burbuja__texto{background:var(--verde-marca);color:#fff}
.burbuja__cliente{
  display:inline-flex;align-items:center;gap:.35rem;margin-top:.35rem;padding:.28rem .7rem;
  background:var(--blanco);border:1px solid var(--linea);border-radius:50px;
  font-size:.8rem;font-weight:700;color:var(--verde-texto);cursor:pointer;
}
.chat__escribir{padding:.9rem 1.1rem;border-top:1px solid var(--linea);display:flex;gap:.7rem;align-items:flex-end}
.chat__escribir textarea{
  flex:1;border:2px solid var(--linea);border-radius:var(--radius-sm);padding:.7rem .9rem;
  resize:none;max-height:130px;min-height:46px;
}
.chat__escribir textarea:focus{outline:none;border-color:var(--verde-marca)}
.chat__dia{text-align:center;font-size:.79rem;color:var(--gris-suave);font-weight:700;margin:.4rem 0}

/* ===================== MODAL ===================== */
.modal-fondo{
  position:fixed;inset:0;background:rgba(43,51,39,.5);backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:1.2rem;z-index:80;
}
.modal{
  background:var(--blanco);border-radius:var(--radius);box-shadow:var(--shadow);
  width:min(100%,620px);max-height:90dvh;overflow-y:auto;padding:1.7rem;
}
.modal--ancho{width:min(100%,920px)}
.modal__cab{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem}
.modal__cab h2{flex:1}

/* ===================== AVISOS ===================== */
.avisos{position:fixed;bottom:1.4rem;right:1.4rem;z-index:100;display:flex;flex-direction:column;gap:.6rem}
.aviso{
  background:var(--tinta);color:#fff;padding:.85rem 1.2rem;border-radius:var(--radius-sm);
  box-shadow:var(--shadow);font-weight:600;display:flex;align-items:center;gap:.6rem;
  animation:sube .26s var(--ease);max-width:400px;
}
.aviso--ok{background:var(--ok)}
.aviso--error{background:var(--critico)}
@keyframes sube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.error-caja{
  background:#FDF0F0;border:1px solid #F5D2D2;color:var(--critico);
  padding:.8rem 1rem;border-radius:var(--radius-sm);font-weight:600;font-size:.92rem;margin-bottom:1rem;
}
.cargando{padding:2.6rem;text-align:center;color:var(--gris-suave)}
.girador{
  width:32px;height:32px;border:3px solid var(--verde-agua);border-top-color:var(--verde-marca);
  border-radius:50%;animation:gira .8s linear infinite;margin:0 auto .8rem;
}
@keyframes gira{to{transform:rotate(360deg)}}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1000px){
  .barra-lateral{transform:translateX(-100%);transition:transform .28s var(--ease)}
  .barra-lateral.abierta{transform:none;box-shadow:var(--shadow)}
  .principal{margin-left:0}
  .menu-movil{display:inline-grid}
  .chat{grid-template-columns:1fr;height:auto}
  .chat__lista{max-height:210px}
  .chat__panel{height:64dvh}
  .contenido{padding:1.1rem}
}
/* ===================================================================
   DECORACIÓN Y MOVIMIENTO
   Mismo vocabulario de la landing: manchas difuminadas, patrón de puntos
   y flotaciones lentas. Todo detrás del contenido y sin capturar el ratón.
   =================================================================== */
@keyframes floaty  {0%,100%{transform:translateY(0)}      50%{transform:translateY(-22px)}}
@keyframes floaty2 {0%,100%{transform:translate(0,0)}     50%{transform:translate(10px,18px)}}
@keyframes drift   {0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-16px,14px) scale(1.06)}}
@keyframes fadeUp  {from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none}}
@keyframes brilla  {from{transform:translateX(-120%)} to{transform:translateX(120%)}}
@keyframes crece   {from{transform:scaleX(0)}         to{transform:scaleX(1)}}
@keyframes late    {0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.12);opacity:.75}}

.blob{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(2px)}
.blob--verde  {background:radial-gradient(circle at 35% 35%, rgba(124,180,29,.20), rgba(124,180,29,0) 68%)}
.blob--amarillo{background:radial-gradient(circle at 40% 40%, rgba(249,194,5,.18), rgba(249,194,5,0) 68%)}
.blob--rosa   {background:radial-gradient(circle at 40% 40%, rgba(224,96,122,.14), rgba(224,96,122,0) 70%)}
.blob--menta  {background:radial-gradient(circle at 40% 40%, rgba(124,180,29,.12), rgba(124,180,29,0) 70%)}
.anim-float {animation:floaty  7s ease-in-out infinite}
.anim-float2{animation:floaty2 9s ease-in-out infinite}
.anim-drift {animation:drift  12s ease-in-out infinite}

.puntos{
  position:absolute;pointer-events:none;z-index:0;opacity:.4;
  background-image:radial-gradient(var(--verde-marca) 24%, transparent 25%);
  background-size:18px 18px;
}
.puntos--claro{background-image:radial-gradient(rgba(255,255,255,.6) 24%, transparent 25%);opacity:.35}

/* ---- Encabezado de sección con degradado ---- */
.heroe{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:var(--grad-verde);color:#fff;padding:1.6rem 1.8rem;margin-bottom:1.2rem;
  box-shadow:0 22px 44px -26px rgba(124,180,29,.9);
}
.heroe > *{position:relative;z-index:1}
.heroe h2{color:#fff;margin-bottom:.2rem}
.heroe p{color:rgba(255,255,255,.9);font-weight:600}
.heroe .puntos{inset:auto -20px -30px auto;width:180px;height:180px}
.heroe--sol   {background:var(--grad-sol);color:var(--tinta);box-shadow:0 22px 44px -26px rgba(249,194,5,.85)}
.heroe--sol h2{color:var(--tinta)} .heroe--sol p{color:rgba(43,51,39,.75)}
.heroe--rosa  {background:var(--grad-rosa);box-shadow:0 22px 44px -26px rgba(224,96,122,.8)}
.heroe--hondo {background:var(--grad-hondo)}

.etiqueta-ojo{
  display:inline-flex;align-items:center;gap:.5rem;font-weight:800;
  font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;margin-bottom:.5rem;
}
.etiqueta-ojo::before{
  content:"";width:8px;height:8px;border-radius:50%;background:currentColor;
  box-shadow:0 0 0 4px rgba(255,255,255,.28);animation:late 2.4s ease-in-out infinite;
}

/* ---- Tarjetas con más vida ---- */
.tarjeta{position:relative;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.tarjeta:hover{transform:translateY(-3px);box-shadow:var(--shadow)}

.kpi{position:relative;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.kpi::before{
  content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:var(--grad-verde);transform-origin:left;animation:crece .6s var(--ease) both;
}
.kpi:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.kpi--sol::before  {background:var(--grad-sol)}
.kpi--rosa::before {background:var(--grad-rosa)}
.kpi--azul::before {background:linear-gradient(100deg,#2C7BE5,#5B9BF0)}
.kpi--hondo::before{background:var(--grad-hondo)}
.kpi__icono{
  position:absolute;right:1rem;top:1.15rem;width:36px;height:36px;border-radius:12px;
  display:grid;place-items:center;background:var(--verde-menta);color:var(--verde-texto);
}
.kpi--sol   .kpi__icono{background:#FEF6DC;color:#96690A}
.kpi--rosa  .kpi__icono{background:var(--rosa-suave);color:#B03650}
.kpi--azul  .kpi__icono{background:var(--cielo);color:#1B5FB0}
.kpi__valor{animation:fadeUp .45s var(--ease) both}

/* Entrada escalonada: las fichas aparecen una tras otra, no todas de golpe. */
.rejilla--kpis > *{animation:fadeUp .42s var(--ease) both}
.rejilla--kpis > *:nth-child(1){animation-delay:.02s}
.rejilla--kpis > *:nth-child(2){animation-delay:.07s}
.rejilla--kpis > *:nth-child(3){animation-delay:.12s}
.rejilla--kpis > *:nth-child(4){animation-delay:.17s}
.rejilla--kpis > *:nth-child(5){animation-delay:.22s}
.rejilla--kpis > *:nth-child(6){animation-delay:.27s}

/* ---- Barras con brillo al aparecer ---- */
.barra__valor{position:relative;overflow:hidden}
.barra__valor::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
  animation:brilla 1.6s var(--ease) .3s;
}
.barra__fila:nth-child(odd)  .barra__valor{background:var(--dato)}
.barra__fila:nth-child(even) .barra__valor{background:linear-gradient(90deg,var(--dato),var(--lima))}

/* ---- Botones con barrido ---- */
.btn{position:relative;overflow:hidden}
.btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .6s var(--ease);
}
.btn:hover::after{transform:translateX(120%)}
.btn-primary{background:var(--grad-verde)}

/* ---- Navegación con marcador deslizante ---- */
.nav__item{position:relative}
.nav__item::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:0;border-radius:2px;background:var(--verde-marca);transition:height .22s var(--ease);
}
.nav__item.activo::before{height:62%}

/* ---- Pestañas de segmento ---- */
.pestanas{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.2rem}
.pestana{
  display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.15rem;border-radius:50px;
  border:1px solid var(--linea);background:var(--blanco);cursor:pointer;
  font-weight:700;font-size:.9rem;color:var(--gris-texto);
  transition:transform .18s var(--ease),box-shadow .2s var(--ease),background .2s,color .2s;
}
.pestana:hover{transform:translateY(-2px);color:var(--verde-texto);border-color:var(--verde-marca)}
.pestana.activa{background:var(--grad-verde);color:#fff;border-color:transparent;
                box-shadow:0 12px 24px -14px rgba(124,180,29,.95)}

/* ---- Medidor de proporción (bien / mal reportados) ---- */
.medidor{display:flex;height:34px;border-radius:17px;overflow:hidden;background:var(--crema);
         border:1px solid var(--linea)}
.medidor__parte{
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:.82rem;
  transition:flex-grow .6s var(--ease);white-space:nowrap;overflow:hidden;
}
.medidor__parte--bien{background:var(--grad-verde)}
.medidor__parte--mal {background:var(--grad-rosa)}
.medidor__parte--nd  {background:var(--gris-suave)}
.medidor-leyenda{display:flex;gap:1.1rem;flex-wrap:wrap;margin-top:.8rem;font-size:.87rem;font-weight:600}
.medidor-leyenda span{display:inline-flex;align-items:center;gap:.4rem}
.medidor-leyenda i{width:11px;height:11px;border-radius:3px;display:inline-block}

/* ---- Calendario: lista de fechas clave bajo la cuadrícula ---- */
.cal__lista{display:flex;flex-direction:column;gap:.7rem;margin-top:1.2rem}
.cal__evento{
  display:flex;gap:.9rem;align-items:flex-start;padding:.85rem 1rem;border-radius:var(--radius-sm);
  background:var(--verde-nube);border:1px solid var(--linea);transition:transform .18s var(--ease);
}
.cal__evento:hover{transform:translateX(4px)}
.cal__fechita{
  flex:none;width:52px;text-align:center;background:var(--blanco);border-radius:var(--radius-xs);
  padding:.3rem;border:1px solid var(--linea);
}
.cal__fechita b{display:block;font-size:1.15rem;color:var(--verde-texto);line-height:1}
.cal__fechita span{font-size:.7rem;text-transform:uppercase;font-weight:800;color:var(--gris-suave)}

/* ---- Noticias ---- */
.noticia{
  display:flex;gap:1rem;padding:1.1rem;border-radius:var(--radius-sm);background:var(--blanco);
  border:1px solid var(--linea);transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.noticia:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.noticia__barra{width:5px;border-radius:3px;background:var(--grad-verde);flex:none}
.noticia--importante .noticia__barra{background:var(--grad-rosa)}
.noticia__titulo{font-weight:800;color:var(--tinta);margin-bottom:.25rem}
.noticia__meta{font-size:.8rem;color:var(--gris-suave);margin-top:.45rem}


/* ===================================================================
   COLOR POR PERFIL
   Un color = un perfil, en todo el CRM. Los tonos de texto van a 4.5:1
   sobre su propio fondo claro, y todos llevan además el nombre escrito:
   el color acompaña a la etiqueta, nunca la reemplaza.
   =================================================================== */
.leyenda{
  display:flex;gap:1rem;flex-wrap:wrap;align-items:center;
  padding:.65rem 1.15rem;background:var(--blanco);border:1px solid var(--linea);
  border-radius:50px;font-size:.85rem;font-weight:700;color:var(--gris-texto);
}
.leyenda__item{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap}
.leyenda__item i{width:11px;height:11px;border-radius:50%;flex:none}
.leyenda__raya{width:18px !important;height:5px !important;border-radius:3px !important}
.leyenda__sep{width:1px;height:18px;background:var(--linea);flex:none}

/* Píldora de perfil. Toma los colores de las variables --tc-* que pone cada
   tarjeta, así una sola clase sirve para los cinco perfiles. */
.chip-seg{
  display:inline-flex;align-items:center;gap:.38rem;padding:.24rem .7rem;border-radius:50px;
  font-size:.79rem;font-weight:800;white-space:nowrap;
  background:var(--tc-fondo);color:var(--tc-tinte);border:1px solid var(--tc-borde);
}
.chip-seg::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

/* ===================================================================
   CLIENTES NUEVOS
   =================================================================== */
.interruptor{
  display:inline-flex;align-items:center;gap:.55rem;padding:.62rem 1.1rem;cursor:pointer;
  border:1px solid var(--linea);border-radius:50px;background:var(--blanco);
  font-weight:700;font-size:.88rem;color:var(--gris-texto);transition:border-color .18s,color .18s;
}
.interruptor:hover{border-color:var(--verde-marca);color:var(--verde-texto)}
.interruptor input{accent-color:var(--verde-marca);width:16px;height:16px;cursor:pointer}

.rejilla-nuevos{display:grid;grid-template-columns:repeat(auto-fill,minmax(372px,1fr));gap:1.1rem}

.tc{
  position:relative;background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1.4rem 1.3rem 1.3rem;
  overflow:hidden;transition:transform .22s var(--ease),box-shadow .22s var(--ease);
  animation:fadeUp .38s var(--ease) both;
}
.tc:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.tc__barra{position:absolute;top:0;left:0;right:0;height:5px;background:var(--tc-tinte)}
.tc__cab{display:flex;gap:.85rem;align-items:flex-start;margin-bottom:.85rem}
.tc__avatar{
  width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--tc-fondo);color:var(--tc-tinte);border:1px solid var(--tc-borde);
  font-weight:800;font-size:.95rem;
}
.tc__id{flex:1;min-width:0}
.tc__id h3{font-size:1.03rem;margin-bottom:.1rem;overflow-wrap:anywhere}
.tc__cuando{font-size:.78rem;color:var(--gris-suave);font-weight:600}
.tc__chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.9rem}
.tc__datos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:.8rem;
  padding:.95rem 0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  margin-bottom:.95rem;
}
.tc__datos .dato__valor{font-size:.92rem}
.tc__pie{display:flex;gap:.5rem;flex-wrap:wrap}

/* El globito rojo es para lo que no puede esperar; el verde de Mensajes es
   solo "hay algo nuevo". */
.nav__globo--aviso{background:var(--critico)}

/* ===================================================================
   CALENDARIO
   Cuadrícula de un mes o de una semana. Cada cliente que llegó es una
   píldora del color de su perfil; las fechas clave, una píldora aparte.
   =================================================================== */
.cal-barra{align-items:center}
.cal-nav{display:inline-flex;align-items:center;gap:.35rem}
.cal-nav .btn-icono{font-size:1.3rem;line-height:1;font-weight:800;color:var(--verde-texto)}
.cal-titulo{
  font-size:1.1rem;font-weight:800;color:var(--tinta);letter-spacing:-.02em;
  min-width:215px;text-transform:capitalize;
}
.cal-cuenta{margin-left:auto;font-size:.85rem;font-weight:700;color:var(--gris-suave)}

/* La cuadrícula no se encoge por debajo de lo legible: en pantallas estrechas
   se desplaza de lado en vez de aplastar siete columnas. */
.gcal-caja{padding:.75rem;overflow-x:auto}
.gcal{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;min-width:680px;
  background:var(--linea);border:1px solid var(--linea);border-radius:var(--radius-sm);overflow:hidden;
}
.gcal__dow{
  background:var(--verde-nube);text-align:center;padding:.55rem 0;
  font-size:.73rem;font-weight:800;color:var(--gris-suave);
  text-transform:uppercase;letter-spacing:.07em;
}
.gcal__dia{
  background:var(--blanco);min-height:122px;padding:.42rem .45rem;cursor:pointer;
  display:flex;flex-direction:column;gap:.25rem;transition:background .14s;
}
.gcal__dia:hover{background:var(--verde-nube)}
.gcal__dia--fuera{background:var(--crema)}
.gcal__dia--fuera .gcal__num{color:var(--gris-suave);font-weight:600}
.gcal__dia--hoy{background:var(--verde-menta);box-shadow:inset 0 0 0 2px var(--verde-marca)}
.gcal__cab{display:flex;align-items:center;justify-content:space-between;gap:.3rem}
.gcal__num{font-weight:800;color:var(--tinta);font-size:.86rem;font-variant-numeric:tabular-nums}
.gcal__cuenta{
  font-size:.68rem;font-weight:800;background:var(--verde-agua);color:var(--verde-texto);
  border-radius:50px;padding:.05rem .4rem;min-width:18px;text-align:center;
}
.gcal__eventos{display:flex;flex-direction:column;gap:.18rem;min-width:0}
.gcal__eventos--alto{flex:1;overflow-y:auto;padding:.4rem;gap:.28rem}
.gcal__mas{
  background:none;border:none;cursor:pointer;text-align:left;padding:.08rem .3rem;
  font-size:.72rem;font-weight:800;color:var(--gris-texto);border-radius:6px;font-family:inherit;
}
.gcal__mas:hover{background:var(--verde-agua);color:var(--verde-texto)}
.gcal__vacio{color:var(--gris-suave);font-size:.8rem;text-align:center;padding:.6rem 0}

/* Vista de semana: siete columnas altas, sin recortar eventos. */
.gcal--semana{min-width:820px}
.gcal__col{background:var(--blanco);display:flex;flex-direction:column;min-height:440px;cursor:pointer}
.gcal__colcab{padding:.55rem;text-align:center;background:var(--verde-nube);border-bottom:1px solid var(--linea)}
.gcal__col--hoy .gcal__colcab{background:var(--verde-menta)}
.gcal__coldow{
  display:block;font-size:.7rem;font-weight:800;color:var(--gris-suave);
  text-transform:uppercase;letter-spacing:.07em;
}
.gcal__colnum{font-size:1.25rem;font-weight:800;color:var(--tinta);line-height:1.2}

/* La píldora de un evento. Los colores llegan en --ev y --ev-fondo desde el
   JS, que es quien sabe de qué perfil o de qué tipo es cada uno. */
.ev{
  display:block;width:100%;text-align:left;padding:.22rem .45rem;border-radius:7px;
  font-size:.75rem;font-weight:700;line-height:1.45;font-family:inherit;
  background:var(--ev-fondo);color:var(--ev);border:none;border-left:3px solid var(--ev);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ev--cliente{cursor:pointer;transition:filter .15s,transform .15s var(--ease)}
.ev--cliente:hover{filter:brightness(.96);transform:translateX(2px)}
.ev--fecha{font-weight:800;cursor:default}
.ev__punto{
  display:inline-block;vertical-align:middle;width:6px;height:6px;border-radius:50%;
  background:var(--ev);margin-right:.32rem;
}
.ev b{font-variant-numeric:tabular-nums;font-weight:800;opacity:.78;margin-right:.28rem}

/* Detalle de un día, dentro del modal. */
.dia-fecha{
  background:var(--ev-fondo);border-left:4px solid var(--ev);
  padding:.8rem 1rem;border-radius:var(--radius-xs);margin-bottom:.6rem;
}
.dia-fecha strong{color:var(--ev)}
.dia-fecha p{font-size:.9rem;margin-top:.15rem}
.dia-lista{display:flex;flex-direction:column;gap:.6rem}
.dia-cliente{
  display:flex;gap:.9rem;align-items:flex-start;padding:.85rem 1rem;background:var(--blanco);
  border:1px solid var(--linea);border-left:4px solid var(--ev);border-radius:var(--radius-sm);
}
.dia-hora{
  flex:none;font-variant-numeric:tabular-nums;font-weight:800;font-size:.82rem;
  color:var(--ev);background:var(--ev-fondo);padding:.28rem .58rem;border-radius:8px;
}

@media (max-width:640px){
  .rejilla-nuevos{grid-template-columns:1fr}
  .cal-titulo{min-width:0}
  .cal-cuenta{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}