/* =====================================================================
   HOPARA · Portal de Clientes
   Sistema visual
   ---------------------------------------------------------------------
   Marca:    tinta #111218 · violeta #803EF6 · cian #22C7E0
   Títulos:  New Science (sustituida temporalmente por Space Grotesk)
   Texto:    Poppins

   El color no decora: clasifica. Hay cuatro niveles y cada uno tiene un
   tono fijo en toda la plataforma, para que el cliente los aprenda sin
   que nadie se los explique.

       rojo     = vencido, y tiene consecuencia
       violeta  = requiere una decisión tuya
       pizarra  = en marcha, informativo, nada que hacer
       verde    = resuelto

   Ninguno es un color inventado fuera de la marca. El violeta ya era el
   color de "actúa" en los botones y en el menú activo; aquí significa lo
   mismo. Todo lo que no pide nada baja a pizarra, así el violeta queda
   escaso y vuelve a pesar.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Marca */
  --tinta:        #111218;
  --tinta-alta:   #1B1C25;
  --violeta:      #803EF6;
  --violeta-osc:  #6A2BD9;
  --violeta-luz:  #F3ECFE;
  --violeta-borde:#DCC9FB;
  --cian:         #22C7E0;
  --cian-luz:     #E3F8FC;
  --cian-tinta:   #0A6F82;
  --ambar:        #F0A020;

  /* Grises derivados de la tinta, no neutros fríos */
  --gris-900: #111218;
  --gris-700: #3A3B45;
  --gris-500: #62636D;
  --gris-400: #9A9BA6;
  --gris-300: #C9CAD2;
  --gris-200: #E4E5EB;
  --gris-100: #F1F2F6;
  --gris-050: #F8F8FB;
  --blanco:   #FFFFFF;

  /* ---- Escala de urgencia ----
     Cuatro niveles, ningun color inventado fuera de la marca.
     El violeta significa "actua": es el color de los botones, del menu
     activo y de lo que espera una decision del cliente. Como todo lo
     demas baja de tono, el violeta se vuelve escaso y por eso resalta. */
  --urgente:        #C9364F;   --urgente-tinta:  #97263A;
  --urgente-luz:    #FDECEF;   --urgente-borde:  #F3C4CD;

  --decision:       #803EF6;   --decision-tinta: #55209E;
  --decision-luz:   #F3ECFE;   --decision-borde: #DCC9FB;

  /* Pizarra derivada de la tinta, no un gris neutro frio */
  --proceso:        #545667;   --proceso-tinta:  #3C3D4A;
  --proceso-luz:    #F0F0F5;   --proceso-borde:  #DCDDE6;

  --listo:          #17805F;   --listo-tinta:    #0F6248;
  --listo-luz:      #E6F6EF;   --listo-borde:    #BFE6D6;

  --radio:    16px;
  --radio-sm: 10px;
  --sombra:      0 1px 2px rgba(17,18,24,.05), 0 10px 26px -14px rgba(17,18,24,.16);
  --sombra-alta: 0 26px 64px -22px rgba(17,18,24,.34);
  --titulo: 'Space Grotesk', 'New Science', system-ui, sans-serif;
  --texto:  'Poppins', system-ui, -apple-system, sans-serif;
  --mono:   'JetBrains Mono', ui-monospace, monospace;
  --curva:  cubic-bezier(.4, 0, .2, 1);

  /* Colores que NO dependen del tema: la barra lateral y los globos son
     oscuros siempre, y el texto que va sobre un color sólido es blanco
     siempre. Tenerlos aparte es lo que permite invertir el resto. */
  --tinta-fija:      #111218;
  --tinta-fija-alta: #1B1C25;
  --blanco-fijo:     #FFFFFF;
  /* Violeta que no cambia con el tema, para lo que va sobre blanco fijo */
  --violeta-fijo:    #6A2BD9;

  /* Texto que va ENCIMA de un relleno de color de marca o de estado.
     En claro es blanco. En oscuro los rellenos se aclaran para poder
     verse sobre el fondo, y entonces el texto tiene que oscurecerse:
     blanco sobre el violeta claro da 3.06:1, muy por debajo del minimo. */
  --sobre-color:     #FFFFFF;

  /* Texto sobre las superficies que son oscuras en los dos temas: la barra
     lateral, los globos y la columna de marca del acceso. No pueden usar la
     rampa de grises, porque esa se invierte y ahi el texto desaparece. */
  --sobre-tinta:       #C9CAD2;
  --sobre-tinta-suave: #9A9BA6;
  --violeta-sobre-tinta: #A47BFF;

  /* Colores de las series de los gráficos, para que el tema los cambie
     sin tocar el JavaScript. */
  --serie-branding: #803EF6;
  --serie-web:      #0E96AE;
  --serie-tokens:   #8A6A00;
  --serie-cobrado:  #17805F;
  --serie-revision: #545667;
  --serie-pendiente:#803EF6;
  --serie-vencido:  #C9364F;

  --tono-dorado:    #D9A404;   --tono-dorado-solido:    #8A6800;
  --tono-oceano:    #2360C4;   --tono-oceano-solido:    #1D4FA6;
  --tono-bosque:    #2F7D1E;   --tono-bosque-solido:    #276818;
  --tono-lavanda:   #803EF6;   --tono-lavanda-solido:   #6427C9;
  --tono-turquesa:  #0E96AE;   --tono-turquesa-solido:  #0A6F82;
  --tono-frambuesa: #C2298A;   --tono-frambuesa-solido: #9E1E6F;
  --tono-cielo:     #8FA8FF;   --tono-cielo-solido:     #3F58C4;
  --tono-ciruela:   #6A2F90;   --tono-ciruela-solido:   #58256F;

  color-scheme: light;
}

/* =====================================================================
   TEMA OSCURO
   ---------------------------------------------------------------------
   No es un volteo automático del claro. Se eligió paso por paso:
   la rampa de grises se invierte, los fondos teñidos de urgencia bajan
   a versiones profundas (un #FDECEF sobre negro deslumbra), y tanto los
   tonos de cliente como las series de los gráficos suben de luminosidad
   para separarse del fondo oscuro.

   El violeta de marca sube a #A47BFF: el #803EF6 original se hunde
   contra un fondo oscuro y deja de leerse.
   ===================================================================== */
[data-tema="oscuro"] {
  color-scheme: dark;

  --sobre-color: #111218;

  --gris-050: #0E0F14;   /* fondo de página */
  --blanco:   #17181F;   /* superficie de tarjeta */
  --gris-100: #22242D;
  --gris-200: #2B2D38;
  --gris-300: #3B3E4C;
  --gris-400: #8C8F9C;
  --gris-500: #9C9EAA;
  --gris-700: #C7C9D4;
  --gris-900: #F2F2F5;
  --tinta:    #F2F2F5;   /* aquí es TEXTO, no fondo */

  --violeta:       #A47BFF;
  --violeta-osc:   #8B5CF6;
  --violeta-luz:   #221A38;
  --violeta-borde: #3C2D66;
  --cian-luz:      #102A31;
  --cian-tinta:    #6FD9E8;

  --urgente:        #F2647E;   --urgente-tinta: #FFA8B8;
  --urgente-luz:    #2B1419;   --urgente-borde: #4D222C;

  --decision:       #A47BFF;   --decision-tinta: #CDB4FF;
  --decision-luz:   #221A38;   --decision-borde: #3C2D66;

  --proceso:        #A8ABBA;   --proceso-tinta:  #C7C9D4;
  --proceso-luz:    #1C1E27;   --proceso-borde:  #323542;

  --listo:          #3FBF8F;   --listo-tinta:    #7FE0B8;
  --listo-luz:      #0F2620;   --listo-borde:    #1D4034;

  --sombra:      0 1px 2px rgba(0,0,0,.4), 0 10px 26px -14px rgba(0,0,0,.6);
  --sombra-alta: 0 26px 64px -22px rgba(0,0,0,.75);

  --serie-branding: #A47BFF;
  --serie-web:      #3FC5DC;
  --serie-tokens:   #D0A62A;
  --serie-cobrado:  #3FBF8F;
  --serie-revision: #8E91A0;
  --serie-pendiente:#A47BFF;
  --serie-vencido:  #F2647E;

  --tono-dorado:    #B5860B;   --tono-dorado-solido:    #D9A833;
  --tono-oceano:    #3F72D6;   --tono-oceano-solido:    #7FA0EE;
  --tono-bosque:    #3C8A22;   --tono-bosque-solido:    #6FC24E;
  --tono-lavanda:   #9A6BFF;   --tono-lavanda-solido:   #B694FF;
  --tono-turquesa:  #2AA3BA;   --tono-turquesa-solido:  #4FC0D6;
  --tono-frambuesa: #DE5490;   --tono-frambuesa-solido: #F08BB4;
  --tono-cielo:     #6B8CE0;   --tono-cielo-solido:     #9DB6F5;
  --tono-ciruela:   #8E4BAE;   --tono-ciruela-solido:   #BD86D6;
}


* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--texto);
  color: var(--tinta);
  background: var(--gris-050);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.55;
}

h1, h2, h3, h4 {
  font-family: var(--titulo);
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0;
  line-height: 1.2;
}

a { color: var(--violeta); text-decoration: none; }
a:hover { text-decoration: underline; }

.mono { font-family: var(--mono); font-size: .78rem; letter-spacing: .04em; }
.eyebrow {
  font-family: var(--mono);
  font-size: .67rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gris-500);
}
.silencio { color: var(--gris-500); }
.tabular { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }

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

/* =====================================================================
   ACCESO
   ===================================================================== */
/* Dos columnas y dos filas: la marca ocupa la de arriba a la izquierda y
   el pie la de abajo, compartiendo el mismo fondo oscuro para que se lean
   como una sola columna. El pie vive FUERA de .acceso__marca justamente
   para poder bajarlo al final de la pagina en pantallas angostas. */
.acceso {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto;
  background: var(--blanco);
}

.acceso__marca {
  grid-area: 1 / 1 / 2 / 2;
  background: var(--tinta-fija);
  color: var(--blanco-fijo);
  padding: 56px 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.acceso__marca::after {
  content: '';
  position: absolute;
  width: 620px; height: 620px;
  right: -260px; bottom: -300px;
  background: radial-gradient(circle, rgba(128,62,246,.5), transparent 68%);
  pointer-events: none;
}
.acceso__marca img { width: 190px; position: relative; z-index: 1; }
.acceso__lema { position: relative; z-index: 1; max-width: 30ch; }
.acceso__lema h2 { font-size: 2.15rem; line-height: 1.14; }
.acceso__lema p { color: var(--sobre-tinta); margin-top: 14px; font-weight: 300; }
.acceso__pie {
  grid-area: 2 / 1 / 3 / 2;
  position: relative;
  z-index: 1;
  color: var(--sobre-tinta-suave);
  font-size: .8rem;
  padding: 0 60px 56px;
}
.acceso__pie a { color: var(--sobre-tinta); }

/* El fondo oscuro y su resplandor los pinta la pagina entera, no la
   columna de marca. Antes cada caja pintaba el suyo y en la costura
   entre las dos se veia un rectangulo: el degradado moria donde
   terminaba la marca y volvia a empezar plano en el pie. */
@media (min-width: 901px) {
  .acceso::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 50%;
    background:
      radial-gradient(circle 310px at calc(100% - 50px) calc(100% - 10px),
                      rgba(128,62,246,.5), transparent 68%),
      var(--tinta-fija);
    pointer-events: none;
  }
  .acceso__marca { background: transparent; }
  .acceso__marca::after { display: none; }
}

.acceso__panel {
  grid-area: 1 / 2 / 3 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.acceso__caja { width: 100%; max-width: 380px; }
.acceso__caja h1 { font-size: 1.7rem; margin-bottom: 6px; }
.acceso__caja > p { color: var(--gris-500); margin: 0 0 26px; font-size: .92rem; }

.tabs {
  display: flex;
  gap: 4px;
  background: var(--gris-100);
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 22px;
}
.tabs button {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 9px 10px;
  border-radius: 9px;
  font-family: var(--texto);
  font-size: .86rem;
  font-weight: 500;
  color: var(--gris-500);
  cursor: pointer;
}
.tabs button[aria-selected="true"] {
  background: var(--blanco);
  color: var(--tinta);
  box-shadow: 0 1px 3px rgba(17,18,24,.1);
}

/* =====================================================================
   FORMULARIOS
   ===================================================================== */
.campo { margin-bottom: 15px; }
.campo label {
  display: block;
  font-size: .78rem;
  font-weight: 500;
  color: var(--gris-700);
  margin-bottom: 6px;
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio-sm);
  font-family: var(--texto);
  font-size: .92rem;
  color: var(--tinta);
  background: var(--blanco);
  transition: border-color .15s, box-shadow .15s;
}
.campo textarea { resize: vertical; min-height: 88px; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--violeta);
  box-shadow: 0 0 0 3px rgba(128,62,246,.16);
}
.campo .ayuda { font-size: .74rem; color: var(--gris-500); margin-top: 5px; }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Foco visible y consistente en todo lo que se navega con teclado */
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--violeta);
  outline-offset: 2px;
}
.lateral a:focus-visible, .lateral button:focus-visible { outline-color: var(--blanco-fijo); }

/* =====================================================================
   BOTONES
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radio-sm);
  border: 1px solid transparent;
  font-family: var(--texto);
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .08s, color .15s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Un SVG suelto dentro de un flex se colapsa a 0x0 si no se le da medida */
.btn svg { width: 16px; height: 16px; flex: none; }
.btn--sm svg { width: 15px; height: 15px; }

.btn--primario { background: var(--violeta); color: var(--sobre-color); }
.btn--primario:hover:not(:disabled) { background: var(--violeta-osc); }

.btn--tinta { background: var(--tinta-fija); color: var(--blanco-fijo); }
.btn--tinta:hover:not(:disabled) { background: var(--tinta-fija-alta); }

.btn--linea { background: var(--blanco); border-color: var(--gris-300); color: var(--tinta); }
.btn--linea:hover:not(:disabled) { border-color: var(--gris-500); background: var(--gris-050); }

.btn--fantasma { background: transparent; color: var(--gris-700); }
.btn--fantasma:hover:not(:disabled) { background: var(--gris-100); }

.btn--peligro { background: var(--urgente-luz); color: var(--urgente-tinta); }
.btn--peligro:hover:not(:disabled) { background: color-mix(in srgb, var(--urgente) 22%, var(--blanco)); }

/* Botones que heredan el color del bloque de urgencia donde viven */
.btn--urgente  { background: var(--urgente);  color: var(--sobre-color); }
.btn--urgente:hover:not(:disabled)  { background: var(--urgente-tinta); }
.btn--decision { background: var(--decision); color: var(--sobre-color); }
.btn--decision:hover:not(:disabled) { background: var(--violeta-osc); }

.btn--bloque { width: 100%; }
.btn--sm { padding: 6px 12px; font-size: .8rem; }

/* =====================================================================
   ESTRUCTURA
   ===================================================================== */
.app {
  --sidebar-w: 264px;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  transition: grid-template-columns .24s var(--curva);
}
/* Sin esto, un hijo ancho (una tabla) estira su columna y arrastra la
   página entera a scroll horizontal. */
.app > *, .rejilla > *, .contenido { min-width: 0; }

.lateral {
  background: var(--tinta-fija);
  color: var(--sobre-tinta);
  padding: 20px 14px 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: visible;
}

.lateral__marca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-left: 6px;
}
.lateral__logo { display: block; line-height: 0; }
/* El display de cada logo lo deciden sus clases, no el elemento: un
   `.lateral__logo img` gana por especificidad y dibujaría los dos. */
.logo-completo { width: 118px; display: block; }
.logo-iso { width: 34px; display: none; }
.lateral__etiqueta {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--violeta-sobre-tinta);
  margin-top: 7px;
  padding-left: 8px;
}

.plegar {
  width: 30px; height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 9px;
  background: transparent;
  color: var(--sobre-tinta-suave);
  cursor: pointer;
  transition: background .14s, color .14s;
}
.plegar:hover { background: rgba(255,255,255,.09); color: var(--blanco-fijo); }
.plegar svg { width: 15px; height: 15px; transition: transform .24s var(--curva); }
.plegar svg { width: 15px; height: 15px; }

/* Plegado: el isotipo y el boton ocupan la misma casilla y se relevan
   al pasar el cursor. Es lo que hace Norata, y funciona porque en 80px
   no caben los dos sin que la barra se vea apretada. */
.lateral__marca--apilada { display: grid; place-items: center; width: 34px; margin: 0 auto; }
.lateral__marca--apilada .lateral__logo,
.lateral__marca--apilada .plegar {
  grid-area: 1 / 1;
  transition: opacity .16s var(--curva);
}
.lateral__marca--apilada .lateral__logo { pointer-events: none; }
.lateral__marca--apilada .plegar { opacity: 0; border-color: transparent; }
.lateral__marca--apilada:hover .lateral__logo,
.lateral__marca--apilada:focus-within .lateral__logo { opacity: 0; }
.lateral__marca--apilada:hover .plegar,
.lateral__marca--apilada:focus-within .plegar { opacity: 1; border-color: rgba(255,255,255,.14); }

/* ---- Navegación ---- */
.nav { display: flex; flex-direction: column; gap: 3px; }
.nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border-radius: 11px;
  color: var(--sobre-tinta);
  font-size: .88rem;
  text-decoration: none;
  transition: background .14s, color .14s;
}
.nav a:hover { background: rgba(255,255,255,.08); color: var(--blanco-fijo); text-decoration: none; }
.nav a.activo { background: var(--violeta); color: var(--sobre-color); }
.nav__icono { display: grid; place-items: center; flex: none; }
.nav__icono svg { width: 18px; height: 18px; display: block; }

/* Cada elemento del menú trae dos etiquetas: la larga para la barra
   lateral y la corta para el dock del teléfono. Solo una se muestra. */
.etiqueta-corta { display: none; }

/* Y cada zona de carga trae dos textos: no se puede arrastrar un
   archivo con el dedo. (hover:none) identifica pantalla táctil. */
.solo-tactil { display: none; }
@media (hover: none) {
  .solo-mouse  { display: none; }
  .solo-tactil { display: block; }
}

/* Contador de pendientes */
.contador {
  margin-left: auto;
  flex: none;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 500;
  background: rgba(255,255,255,.16);
  color: var(--blanco-fijo);
}
.contador--urgente  { background: var(--urgente);  color: var(--sobre-color); }
.contador--decision { background: var(--decision); color: var(--sobre-color); }
.contador--proceso   { background: var(--proceso);  color: var(--sobre-color); }
/* Sobre el elemento activo (relleno violeta) el contador va sólido:
   un blanco translúcido sobre violeta con número blanco no se lee. */
.nav a.activo .contador { background: var(--blanco-fijo); color: var(--violeta-fijo); }

.lateral__usuario {
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 14px;
}
.usuario { display: flex; align-items: center; gap: 10px; padding: 0 4px 10px; }
.avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--violeta);
  color: var(--sobre-color);
  display: grid;
  place-items: center;
  font-family: var(--titulo);
  font-weight: 600;
  font-size: .82rem;
  flex: none;
}
.usuario__datos { min-width: 0; }
.usuario__datos strong { display: block; font-size: .84rem; color: var(--blanco-fijo); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario__datos span { font-size: .74rem; color: var(--sobre-tinta-suave); }

.salir {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--sobre-tinta-suave);
  font-family: var(--texto);
  font-size: .84rem;
  cursor: pointer;
  transition: background .14s, color .14s;
}
.salir:hover { background: rgba(255,255,255,.08); color: var(--blanco-fijo); }
.salir svg { width: 17px; height: 17px; flex: none; }

/* ---- Secciones aún no disponibles ----
   Se ven, pero apagadas y con candado. Ocultarlas seria peor: el
   cliente no sabria que existen y pensaria que su portal esta incompleto. */
/* .62 y no menos: medido, ahi la etiqueta queda en 5.0 : 1 contra el
   fondo de la barra. A .42 se veia mejor apagada pero caia a 2.9 y
   dejaba de leerse, que es justo lo contrario de lo que se busca. */
.nav a.nav--bloqueado { opacity: .62; cursor: not-allowed; }
.nav a.nav--bloqueado:hover { background: transparent; color: var(--sobre-tinta-suave); }
.nav__candado { margin-left: auto; display: inline-flex; flex: none; }
.nav__candado svg { width: 13px; height: 13px; }

/* ---- Menú plegado: solo iconos, con globo al pasar el cursor ----
   Acotado a 721px hacia arriba: en el teléfono no hay barra lateral,
   y el 'plegado' que el usuario dejó guardado en su compu no debe
   borrarle las etiquetas del dock. ---- */
@media (min-width: 721px) {
  .app[data-menu="plegado"] { --sidebar-w: 80px; }
  .app[data-menu="plegado"] .logo-completo { display: none; }
  .app[data-menu="plegado"] .logo-iso { display: block; }
  .app[data-menu="plegado"] .lateral { padding-left: 12px; padding-right: 12px; }
  .app[data-menu="plegado"] .lateral__marca { padding-left: 0; }
  .app[data-menu="plegado"] .lateral__etiqueta { display: none; }
  .app[data-menu="plegado"] .nav a { justify-content: center; padding: 12px 0; }
  .app[data-menu="plegado"] .nav a > span:not(.nav__icono):not(.contador):not(.nav__candado) { display: none; }
  .app[data-menu="plegado"] .nav__candado { position: absolute; bottom: 5px; right: 9px; margin: 0; }
  .app[data-menu="plegado"] .contador {
    position: absolute;
    top: 4px; right: 8px;
    margin: 0;
    min-width: 17px; height: 17px;
    font-size: .6rem;
    padding: 0 4px;
    border: 2px solid var(--tinta-fija);
  }
  .app[data-menu="plegado"] .usuario { justify-content: center; padding: 0 0 10px; }
  .app[data-menu="plegado"] .usuario__datos { display: none; }
  .app[data-menu="plegado"] .salir { justify-content: center; }
  .app[data-menu="plegado"] .salir span { display: none; }

  .app[data-menu="plegado"] .nav a::after,
  .app[data-menu="plegado"] .salir::after {
    content: attr(data-globo);
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--tinta-fija-alta);
    color: var(--blanco-fijo);
    border: 1px solid rgba(255,255,255,.16);
    padding: 6px 11px;
    border-radius: 9px;
    font-size: .78rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .14s;
    z-index: 70;
    box-shadow: var(--sombra-alta);
  }
  .app[data-menu="plegado"] .salir { position: relative; }
  .app[data-menu="plegado"] .nav a:hover::after,
  .app[data-menu="plegado"] .nav a:focus-visible::after,
  .app[data-menu="plegado"] .salir:hover::after,
  .app[data-menu="plegado"] .salir:focus-visible::after { opacity: 1; }

}

/* ---- Contenido ---- */
.contenido { padding: 30px 38px 70px; max-width: 1320px; width: 100%; }

.encabezado {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.encabezado h1 { font-size: 1.6rem; }
.encabezado p { color: var(--gris-500); margin: 5px 0 0; font-size: .9rem; }
.encabezado__acciones { display: flex; gap: 8px; flex-wrap: wrap; }

/* =====================================================================
   NECESITA TU ATENCIÓN
   El primer bloque de cada resumen. Antes de cualquier cifra, la
   respuesta a "¿tengo que hacer algo?".
   ===================================================================== */
.atencion { display: grid; gap: 10px; margin-bottom: 24px; }

.atencion__fila {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 17px;
  border-radius: var(--radio);
  border: 1px solid var(--gris-200);
  border-left: 4px solid var(--gris-300);
  background: var(--blanco);
  animation: aparecer .32s var(--curva) both;
}
.atencion__fila:nth-child(2) { animation-delay: .05s; }
.atencion__fila:nth-child(3) { animation-delay: .1s; }
@keyframes aparecer { from { opacity: 0; transform: translateY(7px); } }

.atencion__icono {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--blanco);
  flex: none;
}
.atencion__icono svg { width: 19px; height: 19px; }
.atencion__cuerpo { flex: 1; min-width: 0; }
.atencion__cuerpo strong {
  display: block;
  font-family: var(--titulo);
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.atencion__cuerpo span { display: block; font-size: .84rem; margin-top: 2px; }

.atencion__fila--urgente {
  background: var(--urgente-luz);
  border-color: var(--urgente-borde);
  border-left-color: var(--urgente);
  color: var(--urgente-tinta);
}
.atencion__fila--urgente .atencion__icono { color: var(--urgente); }

.atencion__fila--decision {
  background: var(--decision-luz);
  border-color: var(--decision-borde);
  border-left-color: var(--decision);
  color: var(--decision-tinta);
}
.atencion__fila--decision .atencion__icono { color: var(--decision); }

.atencion__fila--proceso {
  background: var(--proceso-luz);
  border-color: var(--proceso-borde);
  border-left-color: var(--proceso);
  color: var(--proceso-tinta);
}
.atencion__fila--proceso .atencion__icono { color: var(--proceso); }

.atencion__fila--listo {
  background: var(--listo-luz);
  border-color: var(--listo-borde);
  border-left-color: var(--listo);
  color: var(--listo-tinta);
}
.atencion__fila--listo .atencion__icono { color: var(--listo); }

/* El punto que late: solo en lo urgente, y solo uno a la vez */
.pulso { position: relative; }
.pulso::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 14px;
  border: 2px solid currentColor;
  opacity: 0;
  animation: latir 2.4s ease-out infinite;
}
@keyframes latir {
  0%   { opacity: .5; transform: scale(.94); }
  70%  { opacity: 0;  transform: scale(1.12); }
  100% { opacity: 0;  transform: scale(1.12); }
}

/* =====================================================================
   TARJETAS
   ===================================================================== */
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  padding: 22px;
  box-shadow: var(--sombra);
}
.tarjeta__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.tarjeta__cabeza h3 { font-size: 1.02rem; }
.tarjeta + .tarjeta { margin-top: 18px; }

.rejilla { display: grid; gap: 18px; }
.rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.rejilla--4 { grid-template-columns: repeat(4, 1fr); }
.rejilla--asimetrica { grid-template-columns: 1.65fr 1fr; align-items: start; }

/* ---- Métrica ---- */
.metrica {
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  padding: 17px 19px;
  border-top: 3px solid transparent;
}
.metrica__valor {
  font-family: var(--titulo);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
}
.metrica__valor--fecha { font-size: 1.15rem; }
.metrica__pie { font-size: .76rem; color: var(--gris-500); margin-top: 3px; }

/* La métrica se tiñe según lo que significa su cifra */
.metrica--urgente  { border-top-color: var(--urgente);  background: var(--urgente-luz);  border-color: var(--urgente-borde); }
.metrica--urgente  .metrica__valor { color: var(--urgente-tinta); }
.metrica--urgente  .metrica__pie   { color: var(--urgente-tinta); opacity: .85; }
.metrica--decision { border-top-color: var(--decision); background: var(--decision-luz); border-color: var(--decision-borde); }
.metrica--decision .metrica__valor { color: var(--decision-tinta); }
.metrica--decision .metrica__pie   { color: var(--decision-tinta); opacity: .85; }
.metrica--proceso   { border-top-color: var(--proceso); }
.metrica--proceso   .metrica__valor { color: var(--proceso-tinta); }
.metrica--listo    { border-top-color: var(--listo); }
.metrica--listo    .metrica__valor { color: var(--listo-tinta); }

/* ---- Tarjeta de proyecto ---- */
.proyecto {
  position: relative;
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  padding: 20px;
  cursor: pointer;
  transition: border-color .16s, box-shadow .16s, transform .16s;
  border-left: 3px solid var(--violeta);
  text-align: left;
  width: 100%;
  font-family: var(--texto);
  display: block;
  overflow: hidden;
}
.proyecto:hover { border-color: var(--gris-300); box-shadow: var(--sombra); transform: translateY(-2px); }
.proyecto[data-linea="web"]    { border-left-color: var(--cian); }
.proyecto[data-linea="tokens"] { border-left-color: var(--ambar); }
.proyecto h3 { font-size: 1.05rem; margin: 8px 0 4px; }
.proyecto__meta { font-size: .8rem; color: var(--gris-500); }

/* Proyecto detenido esperando al cliente: se marca sin sutilezas */
.proyecto--tuturno {
  border-color: var(--decision-borde);
  border-left-color: var(--decision);
  background: linear-gradient(180deg, var(--decision-luz) 0%, var(--blanco) 74px);
}
.proyecto__cinta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 5px 11px;
  border-radius: 20px;
  background: var(--decision);
  color: var(--sobre-color);
  font-size: .73rem;
  font-weight: 500;
}
.proyecto__cinta svg { width: 13px; height: 13px; }

/* =====================================================================
   INSIGNIAS
   ===================================================================== */
.insignia {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 500;
  white-space: nowrap;
  background: var(--gris-100);
  color: var(--gris-700);
}
.insignia::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .85;
}
.insignia--ok      { background: var(--listo-luz);    color: var(--listo-tinta); }
.insignia--curso   { background: var(--proceso-luz);  color: var(--proceso-tinta); }
.insignia--espera  { background: var(--decision-luz); color: var(--decision-tinta); }
.insignia--error   { background: var(--urgente-luz);  color: var(--urgente-tinta); }
.insignia--web     { background: var(--cian-luz);     color: var(--cian-tinta); }
.insignia--neutra  { background: var(--gris-100);     color: var(--gris-700); }
.insignia--proceso { background: var(--proceso-luz);  color: var(--proceso-tinta); }
.insignia--sin-punto::before { display: none; }
.insignia--fuerte  { background: var(--urgente); color: var(--sobre-color); }

/* =====================================================================
   BARRA DE AVANCE
   ===================================================================== */
.avance { display: flex; align-items: center; gap: 11px; }
.avance__pista {
  flex: 1;
  height: 7px;
  background: var(--gris-200);
  border-radius: 20px;
  overflow: hidden;
}
.avance__relleno {
  height: 100%;
  background: var(--violeta);
  border-radius: 20px;
  transition: width .55s var(--curva);
}
.avance__relleno[data-linea="web"]    { background: var(--cian); }
.avance__relleno[data-linea="tokens"] { background: var(--ambar); }
.avance__cifra {
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 500;
  min-width: 38px;
  text-align: right;
}

/* =====================================================================
   LÍNEA DE TIEMPO
   ===================================================================== */
.tiempo { list-style: none; margin: 0; padding: 0; }
.tiempo li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 14px;
  padding-bottom: 20px;
  position: relative;
}
.tiempo li:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 26px;
  bottom: 0;
  width: 2px;
  background: var(--gris-200);
}
.tiempo li[data-estado="completada"]:not(:last-child)::before { background: var(--listo); opacity: .28; }
.tiempo__punto {
  width: 25px; height: 25px;
  border-radius: 50%;
  border: 2px solid var(--gris-300);
  background: var(--blanco);
  display: grid;
  place-items: center;
  font-size: .68rem;
  font-family: var(--mono);
  color: var(--gris-500);
  position: relative;
  z-index: 1;
  flex: none;
}
li[data-estado="completada"] .tiempo__punto { background: var(--listo); border-color: var(--listo); color: var(--sobre-color); }
li[data-estado="en_curso"] .tiempo__punto {
  border-color: var(--proceso);
  color: var(--proceso);
  box-shadow: 0 0 0 4px rgba(84,86,103,.14);
}
li[data-estado="espera_cliente"] .tiempo__punto {
  background: var(--decision);
  border-color: var(--decision);
  color: var(--sobre-color);
  box-shadow: 0 0 0 5px rgba(128,62,246,.2);
}
.tiempo__cuerpo { padding-bottom: 2px; }
.tiempo__cuerpo strong { font-size: .93rem; font-weight: 500; display: block; }
.tiempo__cuerpo p { margin: 3px 0 0; font-size: .83rem; color: var(--gris-500); }
.tiempo__fecha { font-family: var(--mono); font-size: .7rem; color: var(--gris-500); margin-top: 4px; display: block; }

/* La etapa viva se lee de un vistazo, sin buscar */
.tiempo li[data-estado="en_curso"] .tiempo__cuerpo,
.tiempo li[data-estado="espera_cliente"] .tiempo__cuerpo {
  border-radius: 12px;
  padding: 11px 14px;
  margin-top: -9px;
}
.tiempo li[data-estado="en_curso"] .tiempo__cuerpo {
  background: var(--proceso-luz);
  border: 1px solid var(--proceso-borde);
}
.tiempo li[data-estado="espera_cliente"] .tiempo__cuerpo {
  background: var(--decision-luz);
  border: 1px solid var(--decision-borde);
}
.tiempo li[data-estado="espera_cliente"] .tiempo__cuerpo p { color: var(--decision-tinta); }

/* =====================================================================
   TABLAS Y LISTAS
   ===================================================================== */
.tabla { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabla th {
  text-align: left;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris-500);
  font-weight: 500;
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--gris-200);
}
.tabla td { padding: 13px 12px; border-bottom: 1px solid var(--gris-100); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--gris-050); }
.tabla .der { text-align: right; }
.tabla__envoltura { overflow-x: auto; margin: 0 -6px; }

/* Una fila con algo pendiente no se pierde entre las demás */
.tabla tr[data-urgencia="urgente"]  td:first-child { box-shadow: inset 3px 0 0 var(--urgente); }
.tabla tr[data-urgencia="atencion"] td:first-child { box-shadow: inset 3px 0 0 var(--decision); }
.tabla tr[data-urgencia="urgente"]  { background: var(--urgente-luz); }
.tabla tr[data-urgencia="urgente"]:hover { background: color-mix(in srgb, var(--urgente) 18%, var(--blanco)); }

.lista { list-style: none; margin: 0; padding: 0; }
.lista li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid var(--gris-100);
}
.lista li:last-child { border-bottom: 0; }
.lista__icono {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--gris-100);
  display: grid;
  place-items: center;
  flex: none;
  color: var(--gris-500);
}
.lista__icono svg { width: 17px; height: 17px; }
.lista__icono--urgente  { background: var(--urgente-luz);  color: var(--urgente); }
.lista__icono--decision { background: var(--decision-luz); color: var(--decision); }
.lista__icono--proceso   { background: var(--proceso-luz);  color: var(--proceso); }
.lista__icono--listo    { background: var(--listo-luz);    color: var(--listo); }
.lista__cuerpo { flex: 1; min-width: 0; }
.lista__cuerpo strong { font-weight: 500; font-size: .9rem; display: block; }
.lista__cuerpo span { font-size: .78rem; color: var(--gris-500); }

/* ---- Boton de copiar ---- */
.copiar {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: var(--radio-sm);
  border: 1px solid var(--gris-300);
  background: var(--blanco);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: .78rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
}
.copiar svg { width: 15px; height: 15px; flex: none; }
.copiar:hover { border-color: var(--gris-500); background: var(--gris-050); }
.copiar:focus-visible { outline: 2px solid var(--decision); outline-offset: 2px; }
.copiar--hecho,
.copiar--hecho:hover {
  border-color: var(--listo);
  color: var(--listo-tinta);
  background: var(--listo-luz);
}

/* En pantalla angosta el boton se va abajo y ocupa el ancho: asi el
   dedo no compite con la CLABE por el mismo renglon. */
@media (max-width: 480px) {
  .lista li.lista__fila-copiar { flex-wrap: wrap; }
  .lista__fila-copiar .lista__cuerpo { flex: 1 1 100%; }
  /* 44px de alto: por debajo de eso el pulgar falla el tiro. */
  .lista__fila-copiar .copiar {
    width: 100%;
    justify-content: center;
    padding: 13px 14px;
    font-size: .84rem;
  }
}

/* ---- Zona de carga ---- */
.soltar {
  border: 1.5px dashed var(--gris-300);
  border-radius: var(--radio);
  padding: 26px;
  text-align: center;
  color: var(--gris-500);
  font-size: .86rem;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: var(--gris-050);
}
.soltar:hover, .soltar.encima { border-color: var(--violeta); background: var(--violeta-luz); color: var(--decision-tinta); }
.soltar strong { color: var(--tinta); display: block; font-weight: 500; margin-bottom: 3px; }

/* ---- Vacío ---- */
.vacio { text-align: center; padding: 46px 20px; color: var(--gris-500); }
.vacio svg { width: 38px; height: 38px; color: var(--gris-300); margin-bottom: 12px; }
.vacio strong { display: block; color: var(--tinta); font-family: var(--titulo); font-size: 1.02rem; margin-bottom: 5px; }
.vacio p { margin: 0 auto; max-width: 42ch; font-size: .87rem; }

/* =====================================================================
   BIENVENIDA · cuenta sin proyectos todavia
   ===================================================================== */
.bienvenida { padding: 34px 30px; }
.bienvenida__titulo {
  font-size: 1.32rem;
  line-height: 1.28;
  max-width: 26ch;
  margin-bottom: 10px;
}
.bienvenida__texto {
  color: var(--gris-700);
  font-size: .93rem;
  max-width: 54ch;
  margin-bottom: 26px;
}
.bienvenida__servicios {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 26px;
}
.servicio {
  border: 1px solid var(--gris-200);
  border-radius: var(--radio-sm);
  padding: 18px;
  background: var(--gris-050);
  min-width: 0;
}
.servicio__icono { color: var(--decision); margin-bottom: 10px; }
.servicio strong { display: block; font-family: var(--titulo); font-size: .97rem; margin-bottom: 4px; }
.servicio p { margin: 0; color: var(--gris-700); font-size: .86rem; }

.bienvenida__acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.bienvenida__nota {
  margin: 16px 0 0;
  color: var(--gris-500);
  font-size: .84rem;
  max-width: 56ch;
}

@media (max-width: 640px) {
  .bienvenida { padding: 24px 20px; }
  .bienvenida__titulo { font-size: 1.16rem; }
  .bienvenida__servicios { grid-template-columns: 1fr; }
  /* A un dedo se le da el renglon entero, no la mitad. */
  .bienvenida__acciones { flex-direction: column; }
  .bienvenida__acciones .btn { width: 100%; }
}

/* =====================================================================
   MENSAJES
   ===================================================================== */
.hilo { display: flex; flex-direction: column; gap: 14px; max-height: 440px; overflow-y: auto; padding-right: 6px; }
.burbuja { max-width: 74%; }
.burbuja__cuerpo {
  padding: 11px 15px;
  border-radius: 15px;
  font-size: .88rem;
  background: var(--gris-100);
  border-bottom-left-radius: 4px;
}
.burbuja__meta { font-size: .7rem; color: var(--gris-500); margin-top: 4px; padding: 0 4px; }
.burbuja--mia { align-self: flex-end; }
.burbuja--mia .burbuja__cuerpo {
  background: var(--violeta);
  color: var(--sobre-color);
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 4px;
}
.burbuja--mia .burbuja__meta { text-align: right; }

.redactor { display: flex; gap: 10px; margin-top: 16px; align-items: flex-end; }
.redactor textarea {
  flex: 1;
  min-height: 44px;
  max-height: 140px;
  padding: 11px 13px;
  border: 1px solid var(--gris-300);
  border-radius: var(--radio-sm);
  font-family: var(--texto);
  font-size: .92rem;
  resize: vertical;
}
.redactor textarea:focus {
  outline: none;
  border-color: var(--violeta);
  box-shadow: 0 0 0 3px rgba(128,62,246,.16);
}

/* =====================================================================
   MODAL
   ===================================================================== */
.velo {
  position: fixed;
  inset: 0;
  background: rgba(17,18,24,.55);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: 22px;
  z-index: 80;
  animation: velar .18s ease-out;
}
@keyframes velar { from { opacity: 0; } }
.velo[hidden] { display: none !important; }
.modal {
  background: var(--blanco);
  border-radius: 20px;
  width: 100%;
  max-width: 540px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: var(--sombra-alta);
  animation: subir .22s var(--curva);
}
@keyframes subir { from { opacity: 0; transform: translateY(12px); } }
.modal__cabeza {
  padding: 22px 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.modal__cabeza h3 { font-size: 1.15rem; }
.modal__cabeza p { margin: 5px 0 0; font-size: .85rem; color: var(--gris-500); }
.modal__cuerpo { padding: 20px 24px; }
.modal__pie { padding: 0 24px 22px; display: flex; justify-content: flex-end; gap: 9px; }
.cerrar {
  border: 0; background: transparent; cursor: pointer;
  color: var(--gris-400); font-size: 1.4rem; line-height: 1;
  padding: 0 4px;
}
.cerrar:hover { color: var(--tinta); }

/* =====================================================================
   AVISOS
   ===================================================================== */
.aviso {
  display: flex;
  gap: 11px;
  padding: 13px 15px;
  border-radius: var(--radio-sm);
  font-size: .85rem;
  border: 1px solid;
  margin-bottom: 16px;
}
.aviso svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.aviso--info   { background: var(--violeta-luz);  border-color: var(--violeta-borde); color: var(--decision-tinta); }
.aviso--ok     { background: var(--listo-luz);    border-color: var(--listo-borde);   color: var(--listo-tinta); }
.aviso--alerta { background: var(--decision-luz); border-color: var(--decision-borde);color: var(--decision-tinta); }
.aviso--error  { background: var(--urgente-luz);  border-color: var(--urgente-borde); color: var(--urgente-tinta); }

.brindis {
  position: fixed;
  bottom: 22px;
  right: 22px;
  background: var(--tinta-fija);
  color: var(--blanco-fijo);
  padding: 13px 19px;
  border-radius: var(--radio-sm);
  font-size: .87rem;
  box-shadow: var(--sombra-alta);
  z-index: 90;
  animation: subir .22s var(--curva);
  max-width: 360px;
}
.brindis--error { background: var(--urgente-tinta); }

.cinta-demo {
  background: var(--proceso-luz);
  border-bottom: 1px solid var(--proceso-borde);
  color: var(--proceso-tinta);
  font-size: .81rem;
  padding: 8px 20px;
  text-align: center;
}
.cinta-demo strong { font-weight: 600; }
.cinta-demo a { color: var(--proceso-tinta); text-decoration: underline; }

.esqueleto {
  background: linear-gradient(90deg, var(--gris-100) 25%, var(--gris-200) 50%, var(--gris-100) 75%);
  background-size: 200% 100%;
  animation: brillo 1.3s infinite;
  border-radius: var(--radio-sm);
  height: 15px;
}
@keyframes brillo { to { background-position: -200% 0; } }

/* =====================================================================
   PANTALLAS ANCHAS Y LAPTOPS
   ===================================================================== */
@media (max-width: 1240px) {
  .contenido { padding: 28px 28px 70px; }
  .rejilla { gap: 15px; }
}

/* Laptop chica y tableta: el menú se pliega solo.
   Si el usuario lo desplegó a mano, su decisión manda (data-menu="abierto").

   El rango tiene suelo en 721px a propósito: por debajo manda el diseño
   de teléfono, y estas reglas son más específicas, así que sin el suelo
   se colaban al dock y le borraban las etiquetas. */
@media (min-width: 721px) and (max-width: 1100px) {
  .app:not([data-menu="abierto"]) { --sidebar-w: 80px; }
  .app:not([data-menu="abierto"]) .logo-completo { display: none; }
  .app:not([data-menu="abierto"]) .logo-iso { display: block; }
  .app:not([data-menu="abierto"]) .lateral { padding-left: 12px; padding-right: 12px; }
  .app:not([data-menu="abierto"]) .lateral__marca { padding-left: 0; }
  .app:not([data-menu="abierto"]) .lateral__etiqueta { display: none; }
  .app:not([data-menu="abierto"]) .nav a { justify-content: center; padding: 12px 0; }
  .app:not([data-menu="abierto"]) .nav a > span:not(.nav__icono):not(.contador):not(.nav__candado) { display: none; }
  .app:not([data-menu="abierto"]) .nav__candado { position: absolute; bottom: 5px; right: 9px; margin: 0; }
  .app:not([data-menu="abierto"]) .contador {
    position: absolute; top: 4px; right: 8px; margin: 0;
    min-width: 17px; height: 17px; font-size: .6rem; padding: 0 4px;
    border: 2px solid var(--tinta-fija);
  }
  .app:not([data-menu="abierto"]) .usuario { justify-content: center; padding: 0 0 10px; }
  .app:not([data-menu="abierto"]) .usuario__datos { display: none; }
  .app:not([data-menu="abierto"]) .salir { justify-content: center; }
  .app:not([data-menu="abierto"]) .salir span { display: none; }
  .app:not([data-menu="abierto"]) .plegar svg { transform: rotate(180deg); }
  .app[data-menu="abierto"] .plegar svg { transform: none; }

  .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
  .rejilla--asimetrica { grid-template-columns: 1fr; }
}

/* Tableta en vertical */
@media (max-width: 900px) {
  .contenido { padding: 24px 22px 70px; }
  .rejilla--3 { grid-template-columns: repeat(2, 1fr); }
  /* Una sola columna: marca, formulario y al final el pie. Antes estaba
     escondido en este ancho, y con el se iban los enlaces legales, que
     tienen que poder alcanzarse siempre. */
  .acceso {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }
  .acceso__marca { grid-area: auto; padding: 30px 26px; gap: 26px; }
  .acceso__marca img { width: 145px; }
  .acceso__lema h2 { font-size: 1.55rem; }
  .acceso__panel { grid-area: auto; }
  /* Sin franja oscura: el pie se posa sobre el fondo de la pagina, asi
     que sus colores dejan de ser los de "sobre tinta" y pasan a los
     normales, que ya siguen al tema claro u oscuro. */
  .acceso__pie {
    grid-area: auto;
    text-align: center;
    line-height: 2;
    padding: 22px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    color: var(--gris-500);
  }
  .acceso__pie a { color: var(--gris-700); }
}

/* =====================================================================
   TELÉFONO
   Barra de marca arriba, dock flotante abajo. El pulgar llega a todo.
   ===================================================================== */
@media (max-width: 720px) {
  /* Dos filas: la de arriba se ajusta a su contenido y la de abajo se
     queda con el resto. Sin esto, ambas se reparten el alto de la
     pantalla y la barra negra crece hasta ocupar media página. */
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .lateral {
    position: sticky;
    top: 0;
    z-index: 40;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    overflow: visible;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .lateral__marca { padding: 0; }
  .logo-completo { width: 94px; display: block; }
  .logo-iso { display: none; }
  .lateral__etiqueta, .plegar { display: none; }

  /* Dock flotante */
  .nav {
    position: fixed;
    left: 10px; right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 50;
    flex-direction: row;
    gap: 2px;
    padding: 7px 6px;
    background: rgba(19, 20, 28, .93);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 22px;
    box-shadow: 0 14px 38px -12px rgba(17,18,24,.6);
  }
  .nav a {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
    padding: 6px 2px 5px;
    font-size: .63rem;
    text-align: center;
    align-items: center;
    border-radius: 14px;
    color: var(--sobre-tinta-suave);
  }
  .nav a:hover { background: transparent; }
  .nav a span:not(.contador):not(.nav__candado) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* En el dock no cabe un renglon mas: el candado se posa en la esquina. */
  .nav__candado { position: absolute; top: 3px; right: 7px; margin: 0; }
  .nav__candado svg { width: 11px; height: 11px; }
  /* El dock ya parte de un gris mas apagado que la barra lateral, asi que
     .62 lo hundia a 3.3 : 1. Con .85 queda en 5.1 y el candado sigue
     diciendo lo que hay que decir. */
  .nav a.nav--bloqueado { opacity: .85; }

  /* Píldora violeta detrás del icono activo */
  .nav__icono {
    width: 46px; height: 28px;
    border-radius: 15px;
    transition: background .2s var(--curva);
  }
  .nav__icono svg { width: 19px; height: 19px; }
  /* La etiqueta va sobre el dock, que es oscuro en los dos temas: blanco.
     El icono va dentro de la píldora violeta: ahí manda --sobre-color. */
  .nav a.activo { background: transparent; color: var(--blanco-fijo); }
  .nav a.activo .nav__icono { background: var(--violeta); color: var(--sobre-color); }

  .contador {
    position: absolute;
    top: 1px;
    right: calc(50% - 25px);
    margin: 0;
    min-width: 17px; height: 17px;
    padding: 0 4px;
    font-size: .6rem;
    border: 2px solid var(--tinta-fija);
  }

  .etiqueta-larga { display: none; }
  .etiqueta-corta { display: inline; }

  .lateral__usuario {
    margin: 0 0 0 auto;
    border: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .usuario { padding: 0; }
  .usuario__datos { display: none; }
  .salir { width: auto; padding: 9px; color: var(--sobre-tinta); }
  .salir span { display: none; }

  /* Hueco para que el dock no tape el final del contenido */
  .contenido { padding: 20px 16px calc(104px + env(safe-area-inset-bottom, 0px)); }

  .rejilla--2, .rejilla--asimetrica { grid-template-columns: 1fr; }
  .rejilla--3, .rejilla--4 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .fila { grid-template-columns: 1fr; }
  .burbuja { max-width: 90%; }

  .metrica { padding: 14px; }
  .metrica__valor { font-size: 1.3rem; }
  .metrica__valor--fecha { font-size: 1.02rem; }
  .eyebrow { font-size: .62rem; letter-spacing: .1em; }
  .encabezado h1 { font-size: 1.42rem; }
  .tarjeta { padding: 18px; }

  /* Safari en iPhone hace zoom al enfocar un campo de menos de 16px */
  .campo input, .campo select, .campo textarea, .redactor textarea { font-size: 16px; }

  /* Objetivos táctiles */
  .btn { min-height: 44px; padding: 11px 18px; }
  .btn--sm { min-height: 38px; padding: 8px 13px; font-size: .82rem; }
  .tabs button { min-height: 42px; }

  .modal { max-height: 92vh; border-radius: 18px; }
  .velo { padding: 14px; }
  .brindis { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); right: 14px; left: 14px; max-width: none; }
  .hilo { max-height: 58vh; }

  .atencion__fila { align-items: flex-start; flex-wrap: wrap; }
  .atencion__fila .btn { width: 100%; margin-top: 4px; }

  /* En pantalla táctil, las acciones de una fila se van abajo a lo ancho */
  .lista li { flex-wrap: wrap; }
  .lista li > div:last-child:not(.lista__cuerpo):not(.lista__icono) { width: 100%; justify-content: flex-start; }
}

@media (max-width: 720px) {
  .legal-enlaces { text-align: center; }
}

@media (max-width: 400px) {
  .nav a { font-size: .57rem; }
  .nav__icono { width: 40px; }
  .contador { right: calc(50% - 22px); }
  .acceso__panel { padding: 26px 18px; }
  .rejilla--3, .rejilla--4 { grid-template-columns: 1fr; }
}

/* =====================================================================
   IDENTIDAD POR CLIENTE
   ---------------------------------------------------------------------
   Cinco tonos validados con el script de paleta categórica: pasan banda
   de luminosidad, piso de croma, separación para daltonismo y contraste
   sobre blanco. El rojo y el naranja quedan fuera a propósito: están
   reservados para las alertas y no pueden significar "un cliente".

   El color NUNCA va solo. Siempre acompaña al nombre en negritas, que
   es lo que de verdad identifica; el tono solo acelera el reconocimiento.
   ===================================================================== */

/* El selector lleva el atributo a proposito: sin el, reglas como
   `.lista__cuerpo span` o `td.silencio` ganan por especificidad y el
   nombre del cliente se pinta gris. */

[data-cliente="dorado"] { --cliente: var(--tono-dorado); --cliente-solido: var(--tono-dorado-solido); }
[data-cliente="oceano"] { --cliente: var(--tono-oceano); --cliente-solido: var(--tono-oceano-solido); }
[data-cliente="bosque"] { --cliente: var(--tono-bosque); --cliente-solido: var(--tono-bosque-solido); }
[data-cliente="lavanda"] { --cliente: var(--tono-lavanda); --cliente-solido: var(--tono-lavanda-solido); }
[data-cliente="turquesa"] { --cliente: var(--tono-turquesa); --cliente-solido: var(--tono-turquesa-solido); }
[data-cliente="frambuesa"] { --cliente: var(--tono-frambuesa); --cliente-solido: var(--tono-frambuesa-solido); }
[data-cliente="cielo"] { --cliente: var(--tono-cielo); --cliente-solido: var(--tono-cielo-solido); }
[data-cliente="ciruela"] { --cliente: var(--tono-ciruela); --cliente-solido: var(--tono-ciruela-solido); }

.cliente[data-cliente] {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--cliente-solido, var(--gris-700));
  font-weight: 600;
}
/* Ficha con la inicial. La letra es lo que identifica; el color solo
   acelera el reconocimiento. Asi ocho tonos conviven sin confundirse
   aunque dos queden parecidos. */
.cliente__punto {
  width: 19px; height: 19px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cliente) 18%, var(--blanco));
  box-shadow: inset 0 0 0 1.5px var(--cliente-solido);
  color: var(--cliente-solido);
  display: grid;
  place-items: center;
  font-family: var(--titulo);
  font-size: .6rem;
  font-weight: 700;
  line-height: 1;
  flex: none;
}
.cliente__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cliente--sm { font-size: .8rem; gap: 6px; }
.cliente--sm /* Ficha con la inicial. La letra es lo que identifica; el color solo
   acelera el reconocimiento. Asi ocho tonos conviven sin confundirse
   aunque dos queden parecidos. */
.cliente__punto {
  width: 19px; height: 19px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cliente) 18%, var(--blanco));
  box-shadow: inset 0 0 0 1.5px var(--cliente-solido);
  color: var(--cliente-solido);
  display: grid;
  place-items: center;
  font-family: var(--titulo);
  font-size: .6rem;
  font-weight: 700;
  line-height: 1;
  flex: none;
}

/* Avatar teñido con el tono del cliente */
/* Las iniciales son texto: el relleno usa el tono oscuro, no el de marca */
.avatar--cliente { background: var(--cliente-solido, var(--violeta)); }

/* Franja del tono en la fila o tarjeta del cliente */
.franja-cliente { box-shadow: inset 3px 0 0 var(--cliente, var(--gris-300)); }

/* Elegir tono, en el portal del cliente */
.tonos { display: flex; gap: 10px; flex-wrap: wrap; }
.tono {
  width: 42px; height: 42px;
  border-radius: 12px;
  border: 2px solid transparent;
  background: var(--cliente);
  cursor: pointer;
  position: relative;
  padding: 0;
  transition: transform .12s var(--curva);
}
.tono:hover { transform: scale(1.06); }
.tono[aria-pressed="true"] { border-color: var(--tinta); box-shadow: 0 0 0 3px var(--blanco) inset; }

/* =====================================================================
   GLOBO DE AYUDA  ·  el signo (?)
   El consejo no compite con el dato: vive detrás de un signo pequeño y
   solo aparece cuando se pide. Con ratón basta acercarse; con el dedo,
   se toca.
   ===================================================================== */
.pista {
  width: 17px; height: 17px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--gris-300);
  background: var(--blanco);
  color: var(--gris-500);
  font-family: var(--texto);
  font-size: .66rem;
  font-weight: 600;
  line-height: 1;
  cursor: help;
  padding: 0;
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  transition: border-color .14s, color .14s, background .14s;
}
.pista:hover, .pista[aria-expanded="true"] {
  border-color: var(--violeta);
  color: var(--violeta);
  background: var(--violeta-luz);
}

.globo {
  position: fixed;
  z-index: 95;
  max-width: 300px;
  background: var(--tinta-fija);
  color: var(--sobre-tinta);
  font-size: .82rem;
  line-height: 1.5;
  padding: 12px 14px;
  border-radius: 12px;
  box-shadow: var(--sombra-alta);
  border: 1px solid rgba(255,255,255,.12);
  animation: subir .16s var(--curva);
}
.globo strong { color: var(--blanco-fijo); display: block; margin-bottom: 3px; font-family: var(--titulo); }
.globo__pico {
  position: absolute;
  width: 9px; height: 9px;
  background: var(--tinta-fija);
  border-left: 1px solid rgba(255,255,255,.12);
  border-top: 1px solid rgba(255,255,255,.12);
  transform: rotate(45deg);
}

/* =====================================================================
   GRÁFICOS
   ===================================================================== */
.grafico { width: 100%; display: block; overflow: visible; }
.grafico text { font-family: var(--texto); fill: var(--gris-500); }
.grafico .eje { font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em; }
.grafico .reja { stroke: var(--gris-200); stroke-width: 1; }
.grafico .valor { font-size: 10.5px; font-weight: 600; fill: var(--gris-700); }
.grafico .barra { transition: opacity .14s; }
.grafico .barra:hover { opacity: .78; }

.leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; }
.leyenda__item { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--gris-700); }
.leyenda__marca { width: 11px; height: 11px; border-radius: 3px; flex: none; }

.cifra-heroe {
  font-family: var(--titulo);
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cifra-heroe__pie { font-size: .82rem; color: var(--gris-500); margin-top: 7px; }

/* Consejos */
.consejo {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--gris-100);
}
.consejo:last-child { border-bottom: 0; }
.consejo__marca {
  width: 30px; height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--proceso-luz);
  color: var(--proceso);
}
.consejo__marca svg { width: 15px; height: 15px; }
.consejo--urgente .consejo__marca { background: var(--urgente-luz); color: var(--urgente); }
.consejo--decision .consejo__marca { background: var(--decision-luz); color: var(--decision); }
.consejo--listo .consejo__marca { background: var(--listo-luz); color: var(--listo); }
.consejo__cuerpo { flex: 1; min-width: 0; }
.consejo__cuerpo strong { display: block; font-size: .9rem; font-weight: 500; }
.consejo__cuerpo p { margin: 3px 0 0; font-size: .82rem; color: var(--gris-500); }

@media (max-width: 720px) {
  .globo { max-width: calc(100vw - 28px); }
  .pista { width: 22px; height: 22px; font-size: .75rem; }
  .cifra-heroe { font-size: 2rem; }
}

/* =====================================================================
   INTERRUPTOR DE TEMA  ·  sol / luna
   Los dos iconos siempre visibles: se ve en qué modo estás y cuál es la
   otra opción, sin tener que adivinar qué hace el botón.
   ===================================================================== */
.tema {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 20px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
}
.tema button {
  width: 30px; height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 15px;
  background: transparent;
  color: var(--sobre-tinta-suave);
  cursor: pointer;
  padding: 0;
  transition: background .16s var(--curva), color .16s var(--curva);
}
.tema button svg { width: 15px; height: 15px; }
.tema button:hover { color: var(--blanco-fijo); }
.tema button[aria-pressed="true"] {
  background: var(--violeta);
  color: var(--sobre-color);
}

/* Sobre fondo claro (la pantalla de acceso) el interruptor se invierte */
.tema--claro {
  background: var(--gris-100);
  border-color: var(--gris-200);
}
.tema--claro button { color: var(--gris-500); }
.tema--claro button:hover { color: var(--tinta); }

.acceso__tema { position: absolute; top: 20px; right: 22px; z-index: 5; }

/* En la barra lateral vive junto al usuario; plegada, se apila */
.lateral__tema { display: flex; justify-content: center; padding: 0 4px 10px; }
.app[data-menu="plegado"] .tema { flex-direction: column; gap: 3px; border-radius: 16px; }
@media (min-width: 721px) and (max-width: 1100px) {
  .app:not([data-menu="abierto"]) .tema { flex-direction: column; gap: 3px; border-radius: 16px; }
}
@media (max-width: 720px) {
  .lateral__tema { padding: 0; }
  .lateral__usuario { gap: 6px; }
}

/* =====================================================================
   PANTALLA DE CARGA
   Se pinta desde el HTML, antes de que corra nada, y se quita cuando la
   primera vista ya está lista. Si tarda, se explica sola.
   ===================================================================== */
.cargando {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--gris-050);
  gap: 0;
  transition: opacity .3s var(--curva), visibility .3s;
}
.cargando[hidden] { display: grid !important; opacity: 0; visibility: hidden; pointer-events: none; }
.cargando__caja { text-align: center; padding: 24px; }
.cargando__marca { position: relative; width: 74px; height: 74px; margin: 0 auto 20px; }
.cargando__marca img { width: 74px; height: 74px; display: block; position: relative; z-index: 1; }
.cargando__marca::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid var(--violeta);
  animation: respirar 1.9s ease-out infinite;
}
@keyframes respirar {
  0%   { opacity: .55; transform: scale(.86); }
  70%  { opacity: 0;   transform: scale(1.22); }
  100% { opacity: 0;   transform: scale(1.22); }
}
.cargando__texto { font-family: var(--titulo); font-size: 1.02rem; color: var(--tinta); }
.cargando__pie { font-size: .84rem; color: var(--gris-500); margin-top: 7px; max-width: 34ch; }
.cargando__tarda { margin-top: 16px; font-size: .82rem; }

/* =====================================================================
   PASOS DEL PROYECTO
   En computadora, bolitas de izquierda a derecha arriba de todo.
   En teléfono, lista vertical con la etapa más reciente hasta arriba,
   como el rastreo de una paquetería.
   ===================================================================== */
.pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
}
.paso {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 6px;
}
/* La línea que une las bolitas: mitad a cada lado, así nunca sobresale */
.paso::before, .paso::after {
  content: '';
  position: absolute;
  top: 15px;
  height: 2px;
  background: var(--gris-200);
}
.paso::before { left: 0; right: 50%; }
.paso::after  { left: 50%; right: 0; }
.paso:first-child::before, .paso:last-child::after { display: none; }
.paso[data-estado="completada"]::before,
.paso[data-estado="completada"]::after { background: var(--listo); opacity: .45; }
.paso[data-estado="en_curso"]::before,
.paso[data-estado="espera_cliente"]::before { background: var(--listo); opacity: .45; }

.paso__punto {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--gris-300);
  background: var(--blanco);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--gris-500);
  position: relative;
  z-index: 1;
  flex: none;
  transition: transform .2s var(--curva);
}
.paso__punto svg { width: 15px; height: 15px; }
.paso:hover .paso__punto { transform: scale(1.08); }

.paso[data-estado="completada"] .paso__punto {
  background: var(--listo); border-color: var(--listo); color: var(--sobre-color);
}
.paso[data-estado="en_curso"] .paso__punto {
  border-color: var(--proceso); color: var(--proceso); border-width: 3px;
}
.paso[data-estado="espera_cliente"] .paso__punto {
  background: var(--decision); border-color: var(--decision); color: var(--sobre-color);
}

.paso__texto { margin-top: 11px; }
.paso__texto strong {
  display: block;
  font-size: .82rem;
  font-weight: 500;
  line-height: 1.32;
  color: var(--tinta);
}
.paso__texto span { display: block; font-size: .72rem; color: var(--gris-500); margin-top: 3px; }
.paso__desc { display: none; }
.paso[data-estado="pendiente"] .paso__texto strong { color: var(--gris-500); font-weight: 400; }

/* Anillo que se expande y se desvanece: solo en lo que está vivo */
.aro { position: relative; }
.aro::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  animation: expandir 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes expandir {
  0%   { opacity: .45; transform: scale(.9); }
  65%  { opacity: 0;   transform: scale(1.35); }
  100% { opacity: 0;   transform: scale(1.35); }
}
.paso[data-estado="en_curso"] .paso__punto { color: var(--proceso); }
.paso[data-estado="espera_cliente"] .aro::after { border-color: var(--decision); }

/* Llamada de atención discreta en el botón de revisar */
.btn--respira { animation: respiro-btn 3.2s ease-in-out infinite; }
@keyframes respiro-btn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(128,62,246,0); }
  50%      { box-shadow: 0 0 0 5px rgba(128,62,246,.16); }
}

/* =====================================================================
   PLAN CONTRATADO
   ===================================================================== */
.plan {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 9px;
  border-radius: 20px;
  background: var(--decision-luz);
  border: 1px solid var(--decision-borde);
  color: var(--decision-tinta);
  font-size: .81rem;
  font-weight: 500;
}
.plan svg { width: 15px; height: 15px; flex: none; }
.plan[data-linea="web"] { background: var(--cian-luz); border-color: transparent; color: var(--cian-tinta); }
.plan--grande { font-size: .9rem; padding: 8px 16px 8px 12px; }

/* El mismo icono sin píldora: en la ficha de proyecto la cápsula pesa
   demasiado y compite con el nombre. */
.plan-suelto {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--gris-500);
}
.plan-suelto svg { width: 14px; height: 14px; flex: none; color: var(--decision); }
.plan-suelto[data-linea="web"] svg { color: var(--cian-tinta); }
.plan--grande svg { width: 17px; height: 17px; }

@media (max-width: 720px) {
  /* Vertical y al revés: lo más reciente hasta arriba, como en paquetería */
  .pasos { flex-direction: column-reverse; gap: 0; }
  .paso {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 14px;
    padding: 0 0 20px;
  }
  .paso::before, .paso::after { top: auto; height: auto; width: 2px; left: 15px; right: auto; }
  .paso::before { top: 32px; bottom: 0; }
  .paso::after  { display: none; }
  .paso:last-child::before { display: block; }
  .paso:first-child::before { display: none; }
  .paso__texto { margin-top: 3px; flex: 1; min-width: 0; }
  .paso__texto strong { font-size: .93rem; }
  .paso__desc { display: block; font-size: .83rem; color: var(--gris-500); margin: 3px 0 0; }
  .cargando__marca, .cargando__marca img { width: 62px; height: 62px; }
}

/* =====================================================================
   MENÚ DEL USUARIO
   Mi cuenta, el tema y cerrar sesión viven aquí dentro, no sueltos en
   la barra. Se abre hacia arriba porque vive al pie del menú.
   ===================================================================== */
.lateral__usuario { position: relative; }
.usuario {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 11px;
  padding: 7px 6px;
  text-align: left;
  transition: background .14s;
}
.usuario:hover { background: rgba(255,255,255,.08); }
.usuario__flecha { margin-left: auto; color: var(--sobre-tinta-suave); flex: none; }
.usuario__flecha svg { width: 14px; height: 14px; transition: transform .2s var(--curva); }
.usuario[aria-expanded="true"] .usuario__flecha svg { transform: rotate(180deg); }

.menu-usuario {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--tinta-fija-alta);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 13px;
  padding: 6px;
  box-shadow: var(--sombra-alta);
  animation: subir .16s var(--curva);
}
.menu-usuario a,
.menu-usuario button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--sobre-tinta);
  font-family: var(--texto);
  font-size: .86rem;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}
.menu-usuario a:hover,
.menu-usuario button:hover { background: rgba(255,255,255,.09); color: var(--blanco-fijo); text-decoration: none; }
.menu-usuario a svg, .menu-usuario button svg { width: 16px; height: 16px; flex: none; }
.menu-usuario__separador { height: 1px; background: rgba(255,255,255,.12); margin: 5px 4px; }
.menu-usuario__tema {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  font-size: .86rem;
  color: var(--sobre-tinta);
}

/* Plegado: el menú se abre a un lado, no debajo de una columna de 80px */
.app[data-menu="plegado"] .menu-usuario { left: calc(100% + 10px); right: auto; width: 218px; bottom: 0; }
@media (min-width: 721px) and (max-width: 1100px) {
  .app:not([data-menu="abierto"]) .menu-usuario { left: calc(100% + 10px); right: auto; width: 218px; bottom: 0; }
}

@media (max-width: 720px) {
  /* En el teléfono la barra está arriba: el menú cae hacia abajo */
  .menu-usuario { top: calc(100% + 10px); bottom: auto; left: auto; right: 0; width: 226px; }
  .usuario { width: auto; padding: 4px; }
  .usuario__flecha { display: none; }
}

/* =====================================================================
   PASTILLA DE ESTADO
   Un renglón corto arriba de la cifra que dice de un vistazo si vamos
   bien de tiempo. Va donde está la fecha de entrega.
   ===================================================================== */
.pastilla {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 20px;
  font-family: var(--mono);
  font-size: .61rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 11px;
  white-space: nowrap;
}
.pastilla svg { width: 12px; height: 12px; flex: none; }
.pastilla--listo    { background: var(--listo-luz);    color: var(--listo-tinta); }
.pastilla--decision { background: var(--decision-luz); color: var(--decision-tinta); }
.pastilla--urgente  { background: var(--urgente-luz);  color: var(--urgente-tinta); }
.pastilla--proceso  { background: var(--proceso-luz);  color: var(--proceso-tinta); }

/* Dentro de una métrica ocupa su propio renglón: si queda inline, el
   rótulo se le pega al lado. */
.metrica .pastilla { display: flex; width: max-content; max-width: 100%; }