/* =============================================================================
   CRM MARTÍN NADAL — interfaz
   Misma paleta que la web V3, pero densidad de herramienta: menos aire, más
   información a la vista, y nada que distraiga.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- Color
     Fondo claro y color saturado de verdad. Los nombres de las variables son
     los de siempre para que todo el CSS que ya existía siga encontrándolas;
     lo que cambia son los valores.

     Regla que se ha seguido con cada color: si va a llevar texto pequeño
     encima, el par tiene que dar 4,5:1 medido. Por eso cada familia tiene un
     tono VIVO (rellenos, barras, puntos, bordes) y uno OSCURO (el texto). El
     rojo no se usa para nada que no sea un error.                          */

  --azul:        #2563EB;   --azul-oscuro:    #1D4ED8;   --azul-tinte:    #E3EBFC;
  --cian:        #0891B2;   --cian-oscuro:    #0E7490;   --cian-tinte:    #DFF1F5;
  --verde:       #059669;   --verde-oscuro:   #047857;   --verde-tinte:   #DEF1EC;
  --naranja:     #EA580C;   --naranja-oscuro: #9A3412;   --naranja-tinte: #FCE9DF;
  --violeta:     #7C3AED;   --violeta-oscuro: #6D28D9;   --violeta-tinte: #EEE5FD;
  --ambar:       #D97706;   --ambar-oscuro:   #92400E;   --ambar-tinte:   #FAEDDF;
  --teal:        #0D9488;   --teal-oscuro:    #0F766E;   --teal-tinte:    #E0F1F0;
  --pizarra:     #64748B;   --pizarra-oscuro: #475569;   --pizarra-tinte: #EBEDF0;
  --rojo:        #DC2626;   --rojo-oscuro:    #B91C1C;   --rojo-tinte:    #FAE3E3;

  /* Alias que usa el resto del CSS desde siempre. */
  --primary:       var(--azul);
  --primary-hover: var(--azul-oscuro);
  --acento:        var(--naranja);
  --acento-texto:  var(--naranja-oscuro);
  --peligro:       var(--rojo-oscuro);
  --sage:          var(--cian);
  --sage-light:    var(--azul-tinte);

  /* ---- Superficies ---- */
  --fondo:      #F6F8FC;
  --superficie: #FFFFFF;
  --fondo-hund: #EEF2F9;    /* pistas, cabeceras de tabla, campos en reposo */

  /* ---- Tintas, medidas sobre blanco y sobre el fondo ---- */
  --titulo:  #0F172A;       /* 17,85 : 1 */
  --texto:   #334155;       /* 10,35 : 1 */
  --apagado: #5A6A80;       /*  5,51 : 1 sobre blanco · 5,19 sobre el fondo */

  /* ---- Líneas ---- */
  --borde:         #E2E8F0;   /* decorativa */
  --borde-control: #7D8CA3;   /* 3,41 : 1 — el límite de un campo o un botón */

  /* ---- Barras del embudo ---- */
  --barra:       var(--azul);
  --barra-pista: #E4EAF4;

  /* ---- Formas y movimiento ---- */
  --radio:    14px;
  --radio-sm: 10px;
  --radio-xs: 7px;
  --sombra:    0 1px 2px rgba(15,23,42,.06), 0 6px 18px rgba(15,23,42,.06);
  --sombra-md: 0 2px 6px rgba(15,23,42,.07), 0 14px 32px rgba(15,23,42,.09);
  --rapida: 150ms cubic-bezier(.3,.7,.4,1);
}

/* Un color por etapa, saturado. El mismo en el punto del panel, en la cabecera
   de la columna del tablero y en la pastilla de la ficha: así una etapa se
   reconoce por el color esté donde esté. El descartado va en pizarra, no en
   rojo: el rojo queda para los errores. */
.etapa--nuevo         { --tono: var(--azul);    --tono-oscuro: var(--azul-oscuro);    --tono-tinte: var(--azul-tinte); }
.etapa--contactado    { --tono: var(--cian);    --tono-oscuro: var(--cian-oscuro);    --tono-tinte: var(--cian-tinte); }
.etapa--documentacion { --tono: var(--naranja); --tono-oscuro: var(--naranja-oscuro); --tono-tinte: var(--naranja-tinte); }
.etapa--estudio       { --tono: var(--violeta); --tono-oscuro: var(--violeta-oscuro); --tono-tinte: var(--violeta-tinte); }
.etapa--negociacion   { --tono: var(--ambar);   --tono-oscuro: var(--ambar-oscuro);   --tono-tinte: var(--ambar-tinte); }
.etapa--aprobado      { --tono: var(--verde);   --tono-oscuro: var(--verde-oscuro);   --tono-tinte: var(--verde-tinte); }
.etapa--cliente       { --tono: var(--teal);    --tono-oscuro: var(--teal-oscuro);    --tono-tinte: var(--teal-tinte); }
.etapa--descartado    { --tono: var(--pizarra); --tono-oscuro: var(--pizarra-oscuro); --tono-tinte: var(--pizarra-tinte); }

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { color: var(--titulo); margin: 0 0 .5em; line-height: 1.2; }
h1 { font-size: 1.75rem; letter-spacing: -.025em; font-weight: 750; }
h2 { font-size: 1.0625rem; letter-spacing: -.01em; font-weight: 700; }
h3 { font-size: .95rem; font-weight: 700; }
a { color: var(--azul-oscuro); text-underline-offset: 2px; }
a:hover { color: var(--azul); }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; border-radius: 5px; }

.etiqueta {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .7rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--azul-oscuro); margin: 0 0 .4rem;
}
.etiqueta::before {
  content: ''; width: 14px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--azul), var(--cian));
}

/* ------------------------------------------------------------- Botones */

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 2.6rem; padding: .6rem 1.15rem;
  border: 1px solid transparent; border-radius: var(--radio-sm);
  font: inherit; font-weight: 650; cursor: pointer; text-decoration: none;
  transition: background var(--rapida), border-color var(--rapida),
              box-shadow var(--rapida), transform var(--rapida);
}
.boton:active { transform: translateY(1px); }
.boton--principal {
  background: var(--azul); color: #fff;
  box-shadow: 0 1px 2px rgba(37,99,235,.25), 0 6px 16px rgba(37,99,235,.22);
}
.boton--principal:hover { background: var(--azul-oscuro); }
.boton--sutil {
  background: var(--superficie); color: var(--texto); border-color: var(--borde-control);
  font-size: .86rem; min-height: 2.2rem; padding: .4rem .85rem;
}
.boton--sutil:hover { color: var(--azul-oscuro); border-color: var(--azul); background: var(--azul-tinte); }
.boton--ancho { width: 100%; }

/* -------------------------------------------------------------- Campos */

.campo { display: grid; gap: .3rem; margin-bottom: .9rem; }
.campo label { font-size: .86rem; font-weight: 600; color: var(--titulo); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 2.75rem; padding: .6rem .8rem;
  border: 1px solid var(--borde-control); border-radius: var(--radio-sm);
  font: inherit; color: var(--titulo); background: var(--superficie);
  transition: border-color var(--rapida), box-shadow var(--rapida);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(37,99,235,.18);
}
.campo input::placeholder { color: var(--apagado); }

.aviso {
  padding: .75rem 1rem; border-radius: var(--radio-sm); font-size: .9rem; margin: 0 0 1rem;
  border-left: 4px solid currentColor;
}
.aviso--error { background: var(--rojo-tinte); color: var(--rojo-oscuro); }
.aviso--ok    { background: var(--verde-tinte); color: var(--verde-oscuro); }

/* -------------------------------------------------------------- Acceso */

.es-acceso { display: grid; place-items: center; min-height: 100vh; padding: 1.5rem; }
.es-acceso { background:
  radial-gradient(900px 500px at 15% -10%, rgba(37,99,235,.13), transparent 60%),
  radial-gradient(800px 500px at 110% 110%, rgba(124,58,237,.12), transparent 60%),
  var(--fondo);
}
.acceso__caja {
  position: relative; overflow: hidden;
  width: 100%; max-width: 380px; padding: 2.25rem 2rem 2rem;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra-md);
}
/* El mismo filete que corona las tarjetas de indicador: la pantalla de acceso
   tiene que parecer la misma aplicación que hay detrás. */
.acceso__caja::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--azul), var(--violeta) 55%, var(--cian));
}
.acceso__marca { margin-bottom: 1.5rem; }
.acceso__nombre { display: block; font-size: 1.15rem; font-weight: 700; color: var(--titulo); letter-spacing: -.01em; }
.acceso__sub {
  display: inline-block; margin-top: .25rem;
  font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--azul-oscuro); background: var(--azul-tinte);
  padding: .12rem .45rem; border-radius: 4px;
}
.acceso__nota { margin: 1.25rem 0 0; font-size: .78rem; color: var(--apagado); text-align: center; }

/* ---------------------------------------------------------- Disposición */

.disposicion { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
@media (min-width: 60rem) { .disposicion { grid-template-columns: 232px 1fr; } }

.lateral {
  display: flex; flex-direction: column; gap: 1.25rem;
  padding: 1.25rem;
  background: var(--superficie); border-bottom: 1px solid var(--borde);
}
/* Un filete de color en el canto del lateral: es lo que hace que la
   aplicación se reconozca de un vistazo sin recurrir a un fondo oscuro. */
@media (min-width: 60rem) {
  .lateral { box-shadow: inset -1px 0 0 var(--borde); border-right: 0; }
  .lateral::before {
    content: ''; position: fixed; top: 0; left: 0; width: 4px; height: 100vh;
    z-index: 2;   /* si no, el fondo del propio lateral se lo come */
    background: linear-gradient(180deg, var(--azul), var(--violeta) 55%, var(--cian));
  }
}
@media (min-width: 60rem) {
  .lateral { border-bottom: 0; border-right: 1px solid var(--borde); position: sticky; top: 0; height: 100vh; }
}
.lateral__marca { line-height: 1.2; }
.lateral__nombre { display: block; font-weight: 800; font-size: 1.02rem; letter-spacing: -.015em; color: var(--titulo); }
.lateral__sub {
  display: inline-block; margin-top: .15rem;
  font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--azul-oscuro); background: var(--azul-tinte);
  padding: .1rem .4rem; border-radius: 4px;
}

.lateral__nav { display: flex; flex-wrap: wrap; gap: .2rem; }
@media (min-width: 60rem) { .lateral__nav { flex-direction: column; flex: 1; } }
.lateral__enlace {
  position: relative;
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem .75rem; border-radius: var(--radio-sm);
  font-size: .92rem; font-weight: 600; color: var(--texto); text-decoration: none;
  transition: background var(--rapida), color var(--rapida);
}
.lateral__enlace:hover { background: var(--fondo-hund); color: var(--azul-oscuro); }
.lateral__enlace.es-activo { background: var(--azul-tinte); color: var(--azul-oscuro); font-weight: 700; }
/* El estado activo no depende solo del color: lleva el punto lleno y, en
   escritorio, una barra a la izquierda. Con el color apagado se sigue viendo. */
.lateral__punto { width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--borde-control); flex: none; }
.lateral__enlace.es-activo .lateral__punto { background: var(--azul); border-color: var(--azul); }
@media (min-width: 60rem) {
  .lateral__enlace.es-activo::before {
    content: ''; position: absolute; left: -1.25rem; top: 50%; transform: translateY(-50%);
    width: 3px; height: 1.4em; border-radius: 0 3px 3px 0; background: var(--azul);
  }
}

.lateral__pie { display: grid; gap: .35rem; padding-top: .9rem; border-top: 1px solid var(--borde); }
.lateral__usuario { font-size: .88rem; font-weight: 600; color: var(--titulo); }
.lateral__rol { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--apagado); }

.principal {
  padding: clamp(1.25rem, 3vw, 2.25rem);
  max-width: 1100px;
  /* Sin esto, la pista «1fr» del grid crece hasta caber el tablero entero y el
     desplazamiento se lo come la página en vez de la columna del Kanban. Los
     elementos de grid tienen min-width:auto por defecto. */
  min-width: 0;
}
.cabecera-panel { margin-bottom: 1.5rem; }

/* ------------------------------------------------------------ Tarjetas */

.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; margin-bottom: 1.75rem; }
.metrica {
  position: relative; overflow: hidden;
  display: grid; gap: .15rem; padding: 1.05rem 1.15rem;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  transition: border-color var(--rapida), box-shadow var(--rapida);
}
/* Un filete de color en el borde superior: identifica la tarjeta sin añadir
   ningún elemento al marcado ni ninguna cifra que no sea real. */
.metrica::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--azul), var(--cian));
}
.metrica:hover { border-color: var(--azul); box-shadow: var(--sombra-md); transform: translateY(-1px); }
.metrica__valor {
  font-size: 2rem; font-weight: 800; color: var(--titulo); line-height: 1;
  letter-spacing: -.035em; font-variant-numeric: tabular-nums;
}
.metrica__nombre { font-size: .8rem; font-weight: 600; color: var(--apagado); }
/* Una métrica puede ser un enlace: entonces se comporta como tal. */
a.metrica { text-decoration: none; }
a.metrica:hover .metrica__nombre { color: var(--azul-oscuro); }

/* La alerta se distingue por el color Y por el grosor del filete: quien no
   distinga el terracota del verde sigue viendo que esa tarjeta es distinta. */
.metrica--alerta::before { background: linear-gradient(90deg, var(--naranja), var(--ambar)); height: 6px; }
.metrica--alerta .metrica__valor { color: var(--naranja-oscuro); }
.metrica--alerta { background: var(--naranja-tinte); border-color: #F6D4BE; }

@media (max-width: 30rem) {
  .tarjetas { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .metrica { padding: .85rem .9rem; }
  .metrica__valor { font-size: 1.5rem; }
}

.bloque {
  padding: 1.35rem; margin-bottom: 1rem;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
}
.bloque > h2 {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .9rem; padding-bottom: .7rem; border-bottom: 1px solid var(--borde);
}
.bloque > h2::before {
  content: ''; width: 3px; height: 1em; border-radius: 2px;
  background: var(--sage); flex: none;
}
.vacio { color: var(--apagado); font-size: .9rem; margin: 0; }
/* Estado vacío con cuerpo: cuando hay que explicar por qué no hay nada. */
.vacio--caja {
  display: grid; gap: .35rem; justify-items: start;
  padding: 1.5rem; border: 1px dashed var(--borde-control); border-radius: var(--radio);
  background: var(--fondo-hund);
}
.vacio--caja strong { color: var(--titulo); font-size: .95rem; }

.embudo-resumen { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.embudo-resumen__fila {
  display: grid; grid-template-columns: 10px minmax(7rem, 1fr) 2fr auto;
  gap: .7rem; align-items: center; font-size: .88rem;
  padding: .3rem .45rem; margin: 0 -.45rem; border-radius: var(--radio-xs);
  color: inherit; text-decoration: none;
  transition: background var(--rapida);
}
a.embudo-resumen__fila:hover { background: var(--fondo-hund); }
a.embudo-resumen__fila:hover .embudo-resumen__nombre { color: var(--azul-oscuro); }
.embudo-resumen__nombre { font-weight: 600; color: var(--texto); }
.embudo-resumen__punto { width: 10px; height: 10px; border-radius: 50%; border: 0; }
.embudo-resumen__barra {
  height: 9px; background: var(--barra-pista); border-radius: 999px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(36,55,70,.05);
}
/* El width lo calcula el panel con los datos reales. La transición es solo
   para que el cambio no dé un salto seco al recargar; no altera la cifra. */
.embudo-resumen__barra span {
  display: block; height: 100%; min-width: 0;
  background: var(--tono, var(--barra)); border-radius: 999px;
  transition: width 420ms cubic-bezier(.3,.7,.4,1);
}
.embudo-resumen__escala {
  margin: .8rem 0 0; font-size: .76rem; line-height: 1.45; color: var(--apagado);
}
@media (max-width: 30rem) {
  .embudo-resumen__fila { grid-template-columns: 10px 1fr auto; row-gap: .25rem; }
  .embudo-resumen__barra { grid-column: 1 / -1; }
}
.embudo-resumen__num { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--titulo); min-width: 2ch; text-align: right; }

.lista-estado { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: .88rem; }
.lista-estado li { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .4rem; border-bottom: 1px solid var(--borde); }
.lista-estado strong { color: var(--titulo); }

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

/* =============================================================================
   TABLERO KANBAN
   ========================================================================== */

.pista { font-size: .86rem; color: var(--apagado); margin: 0 0 1rem; }
.cabecera-panel--fila { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.migas-crm { margin-bottom: .75rem; font-size: .86rem; }
.migas-crm a { text-decoration: none; color: var(--apagado); }
.migas-crm a:hover { color: var(--primary); }

.tablero {
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(246px, 1fr);
  gap: .75rem;
  overflow-x: auto;
  padding-bottom: .75rem;
  scroll-snap-type: x proximity;
}
@media (max-width: 60rem) {
  .tablero { grid-auto-columns: minmax(80vw, 1fr); }
  .columna { scroll-snap-align: start; }
}

.columna { display: flex; flex-direction: column; min-width: 0; }
/* La cabecera es ahora un ENLACE a los leads de esa etapa. Antes era un
   <header> sin nada que pulsar: por eso «no funcionaban los clics». */
.columna__cabecera {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .8rem; margin-bottom: .55rem;
  background: var(--tono-tinte, var(--azul-tinte));
  border-radius: var(--radio-sm);
  border: 1px solid transparent;
  border-left: 4px solid var(--tono, var(--azul));
  text-decoration: none;
  transition: box-shadow var(--rapida), border-color var(--rapida);
}
a.columna__cabecera:hover { box-shadow: var(--sombra); border-color: var(--tono, var(--azul)); border-left-color: var(--tono, var(--azul)); }
.columna__nombre { font-size: .82rem; font-weight: 800; color: var(--tono-oscuro, var(--titulo)); letter-spacing: -.01em; flex: 1; }
.columna__cuenta {
  min-width: 1.6rem; padding: .1rem .45rem; text-align: center;
  background: var(--superficie); border-radius: 999px;
  font-size: .76rem; font-weight: 800; color: var(--tono-oscuro, var(--titulo));
  font-variant-numeric: tabular-nums;
}

.columna__zona {
  flex: 1; min-height: 80px;
  display: flex; flex-direction: column; gap: .5rem;
  padding: .25rem; border-radius: var(--radio-sm);
  transition: background var(--rapida), outline-color var(--rapida);
  outline: 2px dashed transparent; outline-offset: -2px;
}
.columna__zona.es-destino { background: var(--sage-light); outline-color: var(--sage); }

.tarjeta-op {
  position: relative;
  display: grid; gap: .3rem;
  padding: .7rem .8rem;
  background: #fff; border: 1px solid var(--borde); border-left: 3px solid var(--borde);
  border-radius: var(--radio-sm);
  cursor: grab; touch-action: pan-y;
  transition: box-shadow var(--rapida), border-color var(--rapida), transform var(--rapida);
}
.tarjeta-op:hover { box-shadow: var(--sombra-md); border-color: var(--borde-control); }
.tarjeta-op:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tarjeta-op.prioridad--alta   { border-left-color: var(--naranja); }
.tarjeta-op.prioridad--normal { border-left-color: var(--azul); }
.tarjeta-op.prioridad--baja   { border-left-color: var(--pizarra); }

/* Mientras se arrastra: la original se atenúa y la copia sigue al dedo. */
.tarjeta-op.se-arrastra { opacity: .35; }
.tarjeta-op.fantasma {
  position: fixed; z-index: 90; pointer-events: none; margin: 0;
  width: var(--ancho, 240px); cursor: grabbing;
  box-shadow: 0 10px 26px rgba(36,55,70,.18); transform: rotate(1.2deg);
}
.tarjeta-op.guardando { opacity: .6; }
.tarjeta-op.ha-fallado { border-color: var(--peligro); animation: sacudir 240ms; }
@keyframes sacudir { 25% { transform: translateX(-4px);} 75% { transform: translateX(4px);} }

/* display:block y una pizca de aire para que el destino táctil llegue a los
   24 px que pide el 2.5.8; medido, se quedaba en 23 y pico. */
.tarjeta-op__nombre {
  display: block; padding: .1rem 0; min-height: 1.6rem;
  font-size: .92rem; font-weight: 700; color: var(--titulo); text-decoration: none;
}
.tarjeta-op__nombre:hover { color: var(--azul-oscuro); text-decoration: underline; }
.tarjeta-op__tipo { margin: 0; font-size: .78rem; color: var(--apagado); }
.tarjeta-op__accion { margin: .15rem 0 0; font-size: .78rem; color: var(--texto); }
.tarjeta-op__pie { display: flex; justify-content: space-between; font-size: .72rem; color: var(--apagado); }
.tarjeta-op__marcas { display: flex; flex-wrap: wrap; gap: .25rem; }

/* Las marcas no dependen solo del color: llevan texto. */
.marca {
  font-size: .68rem; font-weight: 700; padding: .12rem .45rem; border-radius: 5px;
  background: var(--pizarra-tinte); color: var(--pizarra-oscuro); border: 0;
}
.marca--alta { background: var(--naranja-tinte); color: var(--naranja-oscuro); }
.marca--doc.doc--completa { background: var(--verde-tinte);  color: var(--verde-oscuro); }
.marca--doc.doc--pedida,
.marca--doc.doc--parcial  { background: var(--ambar-tinte);  color: var(--ambar-oscuro); }

.tarjeta-op__mover {
  margin-top: .2rem; width: 100%;
  font-size: .76rem; padding: .25rem .4rem;
  border: 1px solid var(--borde); border-radius: 6px; background: #fff; color: var(--apagado);
}
.tarjeta-op__mover:focus { outline: 2px solid var(--primary); outline-offset: 1px; }

.aviso-flotante {
  position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%);
  z-index: 95; padding: .65rem 1.1rem; border-radius: 999px;
  background: var(--titulo); color: #fff; font-size: .86rem; box-shadow: var(--sombra);
}
.aviso-flotante[hidden] { display: none; }
.aviso-flotante.es-error { background: var(--rojo-oscuro); }

/* =============================================================================
   FICHAS, TABLAS Y FORMULARIOS
   ========================================================================== */

.dos-columnas { display: grid; gap: 1rem; align-items: start; }
@media (min-width: 64rem) { .dos-columnas { grid-template-columns: 1.35fr 1fr; } }

.formulario-crm .campo { margin-bottom: .8rem; }
.formulario-crm textarea, .formulario-crm select {
  width: 100%; padding: .6rem .8rem; font: inherit;
  border: 1px solid var(--borde-control); border-radius: var(--radio-sm); background: #fff;
}
.formulario-crm textarea { min-height: 5rem; resize: vertical; line-height: 1.55; }
.formulario-crm select:focus, .formulario-crm textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(41,75,67,.13);
}
.rejilla-campos { display: grid; gap: .8rem; }
@media (min-width: 40rem) { .rejilla-campos { grid-template-columns: 1fr 1fr; } }

.acciones-rapidas { display: flex; flex-wrap: wrap; gap: .4rem; }

.historial { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; max-height: 420px; overflow-y: auto; }
.historial__item { padding-left: .85rem; border-left: 3px solid var(--azul-tinte); }
.historial__tipo { font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--azul-oscuro); }
.historial__cuerpo { margin: .15rem 0; font-size: .88rem; }
.historial__meta { font-size: .74rem; color: var(--apagado); }

.filtros { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-bottom: 1rem; }
.filtros .campo { margin: 0; }
.filtros input, .filtros select {
  padding: .55rem .75rem; font: inherit; background: #fff;
  border: 1px solid var(--borde-control); border-radius: var(--radio-sm);
}
.campo--buscador { flex: 1 1 220px; }
.campo--buscador input { width: 100%; }

.bloque--tabla { padding: 0; overflow: hidden; }
.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th {
  text-align: left; padding: .75rem 1rem; background: var(--fondo-hund);
  font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--apagado);
  border-bottom: 1px solid var(--borde);
}
.tabla td { padding: .8rem 1rem; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr { transition: background var(--rapida); }
.tabla tbody tr:hover { background: var(--fondo-hund); }
.tabla__principal { font-weight: 700; color: var(--titulo); text-decoration: none; }
.tabla__principal:hover { color: var(--azul-oscuro); text-decoration: underline; }
.tabla__dato { display: block; font-size: .85rem; }
.tabla__dato--tenue { color: var(--apagado); }
.enlace-tabla { font-size: .85rem; font-weight: 600; color: var(--primary); text-decoration: none; }

/* En móvil la tabla se convierte en fichas apiladas. */
@media (max-width: 52rem) {
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tr { padding: .8rem 1rem; border-bottom: 1px solid var(--borde); }
  .tabla td { border: 0; padding: .15rem 0; }
  .tabla td[data-col]:not([data-col=""])::before {
    content: attr(data-col) ': '; font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--apagado);
  }
}

/* Pastillas de estado. El color no va solo: cada una lleva su punto, para que
   se distingan también sin percibir el matiz. */
.pastilla {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .15rem .55rem; border-radius: 999px;
  font-size: .74rem; font-weight: 700; border: 0;
  background: var(--pizarra-tinte); color: var(--pizarra-oscuro);
}
.pastilla::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pastilla--en_curso  { background: var(--azul-tinte);  color: var(--azul-oscuro); }
.pastilla--firmada   { background: var(--verde-tinte); color: var(--verde-oscuro); }
.pastilla--cancelada { background: var(--rojo-tinte);  color: var(--rojo-oscuro); }
/* Pastilla que toma el color de su etapa. */
.pastilla--etapa { background: var(--tono-tinte, var(--pizarra-tinte)); color: var(--tono-oscuro, var(--pizarra-oscuro)); }

.pendientes { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.pendientes__item { display: grid; gap: .1rem; padding-bottom: .55rem; border-bottom: 1px solid var(--borde); }
.pendientes__item:last-child { border-bottom: 0; padding-bottom: 0; }
.pendientes__item a { font-weight: 600; color: var(--titulo); text-decoration: none; }
.pendientes__accion { font-size: .82rem; color: var(--apagado); }
.pendientes__item .pastilla { justify-self: start; margin-top: .15rem; }


/* -------------------------------------------------------------- Exportar */

.casillas { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.casilla { display: flex; align-items: center; gap: .5rem; padding: .45rem .6rem; border: 1px solid var(--borde); border-radius: var(--radio-sm); font-size: .88rem; cursor: pointer; }
.casilla input { accent-color: var(--primary); }
.casilla:has(input:checked) { background: var(--sage-light); border-color: var(--sage); }
.formatos { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.aviso--ok { background: #E8F2EC; color: #1F5942; }

/* -------------------------------------------------------------- Diálogo */

.diálogo { border: 0; border-radius: var(--radio); padding: 1.5rem; max-width: 24rem; box-shadow: 0 16px 40px rgba(36,55,70,.2); }
.diálogo::backdrop { background: rgba(36,55,70,.4); }
.diálogo h2 { margin-top: 0; }
.diálogo menu { display: flex; gap: .5rem; justify-content: flex-end; margin: 1.25rem 0 0; padding: 0; }

/* Texto solo para lectores de pantalla. Faltaba, y las etiquetas de los
   desplegables de las tarjetas se veían en pantalla. */
.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =============================================================================
   SIN ESTILOS EN LÍNEA
   -----------------------------------------------------------------------------
   El CRM se sirve con  style-src 'self'  y SIN 'unsafe-inline'. Esa política
   bloquea también los atributos style="". Durante meses el panel escribía
   style="width: 50%" en las barras del embudo y el navegador lo descartaba sin
   decir nada al usuario: todas las barras salían llenas, daba igual que la
   etapa tuviera 0, 1 o 2 oportunidades. Lo mismo con el color de los puntos y
   con el tono de las columnas del tablero.
   Se comprobó en el navegador: 17 violaciones de CSP en una sola carga del
   panel, y getComputedStyle devolvía el mismo ancho para todas las barras.

   La salida no es relajar la política —es buena— sino no usar atributos
   style. Lo que sigue son las clases que los sustituyen.
   ========================================================================== */

.embudo-resumen__punto { background: var(--tono, var(--sage-light)); }

/* Separaciones que antes iban en línea. */
.sep-sm { margin-top: .9rem; }
.sep    { margin-top: 1rem; }
.sep-lg { margin-top: 1.25rem; }

/* Anchura de las barras del embudo, en pasos de 1 %. El panel calcula el
   porcentaje con los datos reales y elige la clase; el redondeo al entero
   supone, en una barra de 300 px, un error máximo de 3 px. Las cifras exactas
   van escritas al lado. */
.a-0{width:0%}.a-1{width:1%}.a-2{width:2%}.a-3{width:3%}.a-4{width:4%}.a-5{width:5%}.a-6{width:6%}.a-7{width:7%}.a-8{width:8%}.a-9{width:9%}.a-10{width:10%}.a-11{width:11%}.a-12{width:12%}.a-13{width:13%}.a-14{width:14%}.a-15{width:15%}.a-16{width:16%}.a-17{width:17%}.a-18{width:18%}.a-19{width:19%}.a-20{width:20%}.a-21{width:21%}.a-22{width:22%}.a-23{width:23%}.a-24{width:24%}.a-25{width:25%}.a-26{width:26%}.a-27{width:27%}.a-28{width:28%}.a-29{width:29%}.a-30{width:30%}.a-31{width:31%}.a-32{width:32%}.a-33{width:33%}.a-34{width:34%}.a-35{width:35%}.a-36{width:36%}.a-37{width:37%}.a-38{width:38%}.a-39{width:39%}.a-40{width:40%}.a-41{width:41%}.a-42{width:42%}.a-43{width:43%}.a-44{width:44%}.a-45{width:45%}.a-46{width:46%}.a-47{width:47%}.a-48{width:48%}.a-49{width:49%}.a-50{width:50%}.a-51{width:51%}.a-52{width:52%}.a-53{width:53%}.a-54{width:54%}.a-55{width:55%}.a-56{width:56%}.a-57{width:57%}.a-58{width:58%}.a-59{width:59%}.a-60{width:60%}.a-61{width:61%}.a-62{width:62%}.a-63{width:63%}.a-64{width:64%}.a-65{width:65%}.a-66{width:66%}.a-67{width:67%}.a-68{width:68%}.a-69{width:69%}.a-70{width:70%}.a-71{width:71%}.a-72{width:72%}.a-73{width:73%}.a-74{width:74%}.a-75{width:75%}.a-76{width:76%}.a-77{width:77%}.a-78{width:78%}.a-79{width:79%}.a-80{width:80%}.a-81{width:81%}.a-82{width:82%}.a-83{width:83%}.a-84{width:84%}.a-85{width:85%}.a-86{width:86%}.a-87{width:87%}.a-88{width:88%}.a-89{width:89%}.a-90{width:90%}.a-91{width:91%}.a-92{width:92%}.a-93{width:93%}.a-94{width:94%}.a-95{width:95%}.a-96{width:96%}.a-97{width:97%}.a-98{width:98%}.a-99{width:99%}.a-100{width:100%}

/* ------------------------------------------------- Fichas de filtro (Leads)
   Son enlaces, no un desplegable: la cabecera de cada columna del tablero
   apunta aquí con ?etapa=<clave> y cae exactamente en la misma vista. Cada
   una lleva el color de su etapa, el mismo que en el panel y en el tablero. */
.fichas-etapa { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.ficha-etapa {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .7rem; border-radius: 999px;
  font-size: .82rem; font-weight: 650; text-decoration: none;
  color: var(--tono-oscuro, var(--texto));
  background: var(--superficie); border: 1px solid var(--borde-control);
  transition: border-color var(--rapida), background var(--rapida);
}
.ficha-etapa:hover { border-color: var(--tono, var(--borde-control)); background: var(--tono-tinte, var(--fondo-hund)); }
.ficha-etapa__n {
  font-size: .74rem; font-weight: 800; font-variant-numeric: tabular-nums;
  padding: 0 .35rem; border-radius: 999px;
  background: var(--tono-tinte, var(--fondo-hund)); color: var(--tono-oscuro, var(--apagado));
}
/* La activa no se distingue solo por el color: también por el relleno lleno y
   el borde grueso. */
/* La activa se rellena con el tono OSCURO, no con el vivo. Medido: el blanco
   sobre el ámbar vivo daba 3,19:1 y sobre el cian, el verde, el naranja y el
   teal tampoco llegaba a 4,5. Sobre los oscuros, el peor par es 5,36:1. */
.ficha-etapa.es-activa {
  background: var(--tono-oscuro, var(--azul-oscuro)); color: #fff;
  border-color: var(--tono-oscuro, var(--azul-oscuro));
  box-shadow: 0 2px 8px rgba(15,23,42,.18);
}
/* El contador de la ficha activa iba en blanco sobre un blanco al 25 % encima
   del color: 3,31:1, por debajo del mínimo. Relleno casi opaco y número en el
   tono oscuro de la etapa. */
.ficha-etapa.es-activa .ficha-etapa__n {
  background: rgba(255,255,255,.94); color: var(--tono-oscuro, var(--azul-oscuro));
}
.ficha-etapa--alerta { --tono: var(--rojo); --tono-oscuro: var(--rojo-oscuro); --tono-tinte: var(--rojo-tinte); }

@media (max-width: 40rem) {
  .fichas-etapa { gap: .35rem; }
  .ficha-etapa { font-size: .78rem; padding: .3rem .6rem; }
}