/* ============================================================
   LAS TARJETAS NUEVAS DEL INICIO — fichaje y «Tu semana»

   ESTE ARCHIVO SE CARGA EL ÚLTIMO, y no es capricho. En CSS, a igual
   especificidad manda la última regla, y en este proyecto eso ya rompió cosas
   en silencio cinco veces —la columna de estado de asistencia, el padding de
   las tarjetas, los portales, el chip del calendario y el reloj—: el archivo
   decía una cosa y la pantalla hacía otra. Con la piel nueva viviendo aquí,
   detrás de styles.css, no hay orden que recordar ni nada que mantener.

   La idea del diseño: marcar tu entrada es lo único obligatorio del día, así
   que tiene que apetecer. Se apoya en tres cosas y ninguna es decorativa —
   las tres responden una pregunta que la gente ya se hacía:

     la racha    ¿cuántos días llevo sin fallar?
     la semana   ¿cómo vengo esta semana?
     la barra    ¿cuánto me queda hoy?

   Todo sale de `asistencia_dia`, la misma función que calcula las tardanzas
   de verdad. Aquí no se decide nada: se pinta.
   ============================================================ */

.fichaje.premium{
  display:flex;flex-direction:column;gap:0;
  /* Se mide a si misma. Desde que la tarjeta puede vivir en una columna
     estrecha, lo que decide si las dos modalidades caben una al lado de otra
     NO es el ancho de la pantalla sino el que le haya tocado a ELLA. Una
     media query miraria la ventana, que aqui no dice nada. */
  container-type:inline-size;
  /* Y nada se sale por los bordes: era lo que cortaba «Presencial» contra el
     canto de la tarjeta. */
  min-width:0;
}
.fichaje.premium *{ min-width:0; }

/* El distintivo de muestra. Discreto pero imposible de no ver: son horas
   trabajadas inventadas y nadie puede tomarlas por buenas ni un segundo. */
.fi-muestra{
  margin-left:auto;flex:none;align-self:flex-start;
  padding:3px 8px;border-radius:99px;
  background:rgba(245,196,81,.14);color:var(--yellow);
  font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}

/* ---------------- la racha ---------------- */
.fi-racha{ display:flex;align-items:center;gap:10px;margin-bottom:11px; }
.fi-llama{
  width:34px;height:34px;border-radius:12px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-2);color:var(--text-4);
  transition:background var(--hover-out) var(--ease), color var(--hover-out) var(--ease);
}
/* Encendida solo si la racha está viva. Una llama a todo color con un cero al
   lado se lee como una promesa que el número desmiente. */
.fi-llama.viva{
  background:linear-gradient(145deg,#ff9d3d,#f2542d);
  color:#fff;box-shadow:0 4px 14px rgba(242,84,45,.34);
}
.fi-racha-txt{ display:flex;flex-direction:column;gap:1px;min-width:0; }
.fi-racha-txt small{
  font-size:.66rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-4);
}
.fi-racha-txt b{
  display:flex;align-items:baseline;gap:5px;
  font-size:1.2rem;font-weight:750;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--text);
}
.fi-racha-txt b i{
  font-style:normal;font-size:.66rem;font-weight:650;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-4);
}

/* ---------------- la semana ---------------- */
.fi-semana{
  display:grid;grid-template-columns:repeat(7,1fr);gap:6px;
  padding:11px 0;margin-bottom:0;
  border-top:var(--border-hairline) solid var(--border);
  border-bottom:var(--border-hairline) solid var(--border);
}
.fi-dia{ display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0; }
.fi-dia-aro{
  width:28px;height:28px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:2px solid transparent;background:var(--surface-2);color:transparent;
  transition:transform var(--hover-out) var(--ease);
}
.fi-dia-letra{
  font-size:.66rem;font-weight:600;color:var(--text-4);
  letter-spacing:.02em;
}

/* Marcado: verde lleno con su check. Es el estado que se busca, así que es el
   único que tiene color de verdad. */
.fi-dia.marcado .fi-dia-aro{ background:var(--green);color:#fff;border-color:var(--green); }
.fi-dia.marcado .fi-dia-letra{ color:var(--text-2); }

/* Llegaste, pero tarde. Ni verde ni falta: ambar, con su check. Pintarlo
   verde seria decir que ese dia cuenta para la racha, y no cuenta. */
.fi-dia.tarde .fi-dia-aro{ background:var(--yellow);color:#3a2c05;border-color:var(--yellow); }
.fi-dia.tarde .fi-dia-letra{ color:var(--text-2); }

/* Hoy sin marcar: aro abierto, NO rojo. Todavía no has faltado —pueden ser las
   ocho de la mañana—; pintarlo de falta sería acusar antes de tiempo. */
.fi-dia.hoy .fi-dia-aro{ background:transparent;border-color:var(--green); }
.fi-dia.hoy .fi-dia-letra{ color:var(--text);font-weight:700; }

/* Libre —permiso aprobado o fin de semana— ni suma ni resta. Quien se fue de
   vacaciones no faltó: tenía permiso. Gris apagado y sin borde: es el estado
   que menos tiene que llamar, porque no hay nada que hacer con él. */
.fi-dia.libre .fi-dia-aro{ background:var(--surface-2);opacity:.45; }
.fi-dia.libre .fi-dia-letra{ opacity:.6; }

/* FALTA: un día laborable que pasó sin ninguna entrada. En rojo, porque es
   lo que cualquiera espera de una falta y estaba en gris — se confundía con
   los días libres, que es justo lo contrario.

   Va HUECA y no rellena, y esa diferencia es el idioma de toda la tira:
   relleno significa «hay una marca» —verde si llegaste a tiempo, ámbar si
   tarde— y hueco significa «no hay marca». Una falta es la ausencia de una
   marca, así que hueca. Rellenarla de rojo la haría parecer un registro que
   no existe. */
.fi-dia.falta .fi-dia-aro{
  background:transparent;border-color:var(--red);
  /* Un halo muy tenue por dentro: a 28px un aro de dos píxeles se lee flojo
     al lado de los verdes rellenos, y la falta no puede ser el estado que
     menos se ve. */
  box-shadow:inset 0 0 0 6px color-mix(in srgb, var(--red) 13%, transparent);
}
.fi-dia.falta .fi-dia-letra{ color:var(--red);font-weight:650; }
.fi-dia.futuro .fi-dia-aro{ background:var(--surface-2);opacity:.35; }

/* ---------------- la barra de la jornada ---------------- */
.fi-barra-zona{ padding-top:11px; }
.fi-barra-cab{ display:flex;align-items:baseline;justify-content:space-between;gap:10px; }
.fi-barra-tit{
  font-size:.66rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-4);
}
.fi-barra-pct{
  font-size:.74rem;font-weight:650;color:var(--text-3);
  font-variant-numeric:tabular-nums;
}
.fi-barra-cifra{
  display:flex;align-items:baseline;gap:3px;margin:4px 0 8px;
}
.fi-barra-cifra.sola{ margin-bottom:2px; }
.fi-barra-cifra b{
  font-size:1.4rem;font-weight:750;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;color:var(--text);
}
.fi-barra-cifra span{
  font-size:.8rem;font-weight:550;color:var(--text-4);
  font-variant-numeric:tabular-nums;
}
.fi-barra{
  height:7px;border-radius:99px;background:var(--surface-2);overflow:hidden;
}
.fi-barra > i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--green),#5fe0a8);
  /* Un segundo entero: la barra avanza sola con el cronómetro y un salto seco
     cada tick se vería como un parpadeo. */
  transition:width 1s linear;
}

/* ---------------- la modalidad, en dos chips ----------------

   Antes eran dos tarjetas con icono, titulo y subtitulo: setenta pixeles de
   alto cada una, ciento cuarenta para elegir entre dos cosas que se entienden
   con una palabra. La referencia que se busca es compacta justamente porque
   no gasta altura en lo que no la necesita. */
.fichaje.premium .fi-modalidad{
  display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:11px 0 0;
}
.fichaje.premium .fi-mod{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 10px;border-radius:11px;
  background:var(--surface-2);border:var(--border-hairline) solid transparent;
  color:var(--text-3);cursor:pointer;font-family:inherit;
  transition:background var(--hover-out) var(--ease), color var(--hover-out) var(--ease),
             border-color var(--hover-out) var(--ease);
}
.fichaje.premium .fi-mod b{ font-size:.82rem;font-weight:650;letter-spacing:-.01em; }
.fichaje.premium .fi-mod .ico{ flex:none;opacity:.85; }
.fichaje.premium .fi-mod:hover{ color:var(--text);transition-duration:var(--hover-in); }
.fichaje.premium .fi-mod.activa{
  background:var(--accent-soft);border-color:var(--accent-hi);color:var(--accent-hi);
}
.fichaje.premium .fi-mod.activa .ico{ opacity:1; }

/* El enlace del PIN es lo mas secundario de la tarjeta y ocupa lo que le
   toca: una linea fina, sin caja. */
.fichaje.premium .fi-pin{
  margin-top:8px;padding:0;background:none;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:5px;
  color:var(--text-4);font-family:inherit;font-size:.7rem;font-weight:550;
}
.fichaje.premium .fi-pin:hover{ color:var(--text-2); }

/* ---------------- que nada se corte ---------------- */

/* LAS DOS MODALIDADES, UNA DEBAJO DE OTRA CUANDO NO CABEN.

   En dos columnas, «Desde donde estés» partia en tres lineas y el boton
   activo se salia contra el canto de la tarjeta. Por debajo de 300px de
   tarjeta se apilan: mejor dos filas enteras que dos columnas rotas. */
/* Ya en chips caben los dos al lado hasta muy abajo; solo se apilan si la
   tarjeta se queda de verdad sin ancho. */
@container (max-width: 232px){
  .fichaje.premium .fi-modalidad{ grid-template-columns:1fr; }
}
/* El texto de cada modalidad se recorta antes que desbordar. `min-width:0` es
   lo que se lo permite: sin eso, un hijo flex no baja de su ancho de
   contenido y empuja al padre por fuera. */
.fichaje.premium .fi-mod{ min-width:0;overflow:hidden; }
.fichaje.premium .fi-mod-txt{ min-width:0;overflow:hidden; }
.fichaje.premium .fi-mod-txt b,
.fichaje.premium .fi-mod-txt small{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fichaje.premium .fi-mod-ico{ flex:none; }
.fichaje.premium .fi-mod-check{ flex:none; }

/* La linea de estado y el texto de la racha, lo mismo: se recortan antes que
   empujar la tarjeta. */
.fichaje.premium .fi-linea-txt b,
.fichaje.premium .fi-linea-txt small,
.fi-racha-txt small{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------------- lo de siempre, encajado ---------------- */
.fichaje.premium .fi-cab{ padding-top:12px; }
.fichaje.premium .fi-linea{
  display:flex;align-items:center;gap:11px;padding-top:12px;
}
.fichaje.premium .fi-linea-txt{ display:flex;flex-direction:column;gap:1px;min-width:0;flex:1; }
.fichaje.premium .fi-linea-txt b{ font-size:.9rem;font-weight:650;letter-spacing:-.015em; }
.fichaje.premium .fi-linea-txt small{ font-size:.73rem;color:var(--text-3);font-weight:500; }
.fichaje.premium .fi-btn{ margin-top:12px;padding:12px; }

/* Salir no es el botón primario: el primario es entrar. Cerrar la jornada es
   un acto tranquilo y va vestido como tal —lleno pero sobrio— para que un
   roce no la cierre a media tarde. */
.fichaje.premium .fi-salir{
  background:var(--surface-2);color:var(--text);
  border:var(--border-hairline) solid var(--border-hi);
}
.fichaje.premium .fi-salir:hover{ background:var(--surface);border-color:var(--text-4); }

/* ---------------- el teléfono ----------------
   Aquí se aplica el freno: a 393px la tarjeta no puede crecer, porque lo que
   crece arriba desaparece abajo. Los círculos y las cifras se encogen; nada
   se quita, porque las tres cosas que dice la tarjeta caben. */
@media (max-width:760px){
  .fi-racha{ gap:9px;margin-bottom:11px; }
  .fi-llama{ width:31px;height:31px;border-radius:11px; }
  .fi-racha-txt b{ font-size:1.16rem; }
  .fi-semana{ gap:4px;padding:10px 0; }
  .fi-dia-aro{ width:26px;height:26px; }
  .fi-barra-zona{ padding-top:11px; }
  .fi-barra-cifra b{ font-size:1.3rem; }
  .fi-barra-cifra{ margin:4px 0 8px; }
  .fichaje.premium .fi-btn{ margin-top:11px; }
}



/* ============================================================
   «TU SEMANA»

   Era solo un grafico de barras. Con la semana a cero se quedaba en siete
   rayitas de seis pixeles flotando en una tarjeta enorme: parecia rota, no
   vacia -- y encima sobraba la mitad del alto.

   Ahora habla el mismo idioma que la tarjeta de fichaje: cifra grande arriba,
   tira debajo, pie fino. Dos tarjetas del mismo Inicio hablando distinto se
   leen como dos productos.
   ============================================================ */

/* LO QUE SOBRA SE LO QUEDA EL GRAFICO.

   Las tarjetas de una fila se estiran a la misma altura -- un escalon entre
   dos vecinas se lee como algo roto -- asi que a esta le sobraban ochenta y
   ocho pixeles por debajo del contenido. Eran los mismos que la hacian
   parecer vacia.

   En vez de dejarlos muertos, el grafico crece y se los queda: mismas barras,
   mas altas, mas faciles de comparar de un vistazo. Con tope, eso si, porque
   una barra de doscientos pixeles al lado de una de veinte deja de ser un
   grafico y pasa a ser un poster. */
#inicio-racha{ display:flex;flex-direction:column;height:100%; }

/* ---------------- la cifra ---------------- */
.sem-cab{ flex:none; }
.sem-cab{ display:flex;align-items:center;gap:10px;margin-bottom:13px; }
.sem-llama{
  width:34px;height:34px;border-radius:12px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-2);color:var(--text-4);
}
/* Encendida solo con racha viva, igual que en el fichaje: una llama a todo
   color con un cero al lado promete algo que el numero desmiente. */
.sem-llama.viva{
  background:linear-gradient(145deg,#ff9d3d,#f2542d);
  color:#fff;box-shadow:0 4px 14px rgba(242,84,45,.34);
}
.sem-txt{ display:flex;flex-direction:column;gap:1px;min-width:0; }
.sem-txt small{
  font-size:.66rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sem-txt b{
  display:flex;align-items:baseline;gap:5px;
  font-size:1.2rem;font-weight:750;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--text);
}
.sem-txt b i{
  font-style:normal;font-size:.66rem;font-weight:650;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-4);
}

/* ---------------- el gráfico ---------------- */
.sem-grafico{
  display:grid;grid-template-columns:repeat(7,1fr);gap:7px;
  flex:1;min-height:0;align-content:stretch;
  padding:13px 0 11px;
  border-top:var(--border-hairline) solid var(--border);
  border-bottom:var(--border-hairline) solid var(--border);
}
.sem-dia{ display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
           gap:6px;min-width:0;min-height:0; }
/* La columna tiene alto fijo y la barra crece dentro. Sin un alto de
   referencia, dos barras iguales en semanas distintas medirían distinto y el
   gráfico dejaría de poder compararse consigo mismo. */
.sem-col{
  width:100%;max-width:26px;border-radius:8px;
  /* Crece con la tarjeta, entre 56 y 132: por debajo las barras no se
     comparan y por encima el grafico se convierte en un poster. */
  flex:1;min-height:56px;max-height:132px;
  background:var(--surface-2);
  display:flex;align-items:flex-end;overflow:hidden;
}
.sem-col > i{
  display:block;width:100%;border-radius:8px;
  background:linear-gradient(to top,var(--accent),var(--accent-hi));
  transition:height .5s cubic-bezier(.22,.92,.24,1);
}
/* El día a cero no lleva barra corta: lleva una marca fina en la base, para
   que se lea «ese día nada» y no «ese día poco». */
.sem-dia.sin .sem-col{
  background:none;
  box-shadow:inset 0 -3px 0 0 var(--surface-2);
}
.sem-dia.es-hoy .sem-col{ box-shadow:0 0 0 2px var(--accent-soft); }
.sem-dia.es-hoy.sin .sem-col{ box-shadow:inset 0 -3px 0 0 var(--accent-soft); }

.sem-n{
  font-size:.72rem;font-weight:700;color:var(--text-2);
  font-variant-numeric:tabular-nums;line-height:1;min-height:9px;
}
.sem-dia small{ font-size:.66rem;font-weight:600;color:var(--text-4);letter-spacing:.02em; }
.sem-dia.es-hoy small{ color:var(--text);font-weight:700; }
.sem-dia.es-hoy .sem-n{ color:var(--accent-hi); }

/* ---------------- el pie ---------------- */
.sem-pie{
  flex:none;
  display:flex;align-items:center;gap:7px;padding-top:11px;
  font-size:.78rem;color:var(--text-3);
}
.sem-pie .ico{ color:var(--accent-hi);flex:none; }
.sem-pie b{ color:var(--text-2);font-weight:650; }
.sem-pie.vacio .ico{ color:var(--yellow); }

@media (max-width:760px){
  .sem-grafico{ gap:5px;padding:11px 0 9px; }
  .sem-col{ min-height:48px;max-height:96px; }
  .sem-llama{ width:31px;height:31px; }
}



/* ============================================================
   EL CALENDARIO DEL MES

   Antes cada celda llevaba dentro una pastilla de dos lineas por tarea. Se
   veia todo a la vez, y por eso no se veia nada: treinta celdas con texto
   diminuto son una pared. En el telefono habia que reducir las pastillas a
   rayas de color de cuatro pixeles, que ya era admitir que ahi no cabia.

   Ahora la rejilla dice solo DONDE se amontona el mes -- el numero y un punto
   del color de cada proyecto -- y el detalle aparece al pulsar el dia, en un
   panel encima, mientras la rejilla se encoge y se difumina detras. Primero
   el mapa; el detalle cuando lo pides.
   ============================================================ */

/* ---------------- la cabecera ---------------- */
.cal-cab{
  display:flex;align-items:center;gap:9px;margin-bottom:12px;
}
.cal-cab > b{
  font-size:.95rem;font-weight:680;letter-spacing:-.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cal-mandos{ display:inline-flex;gap:2px;flex:none; }
.cal-cab button{
  width:26px;height:26px;border-radius:8px;padding:0;flex:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:none;color:var(--text-3);font-family:inherit;
  transition:background var(--hover-out) var(--ease), color var(--hover-out) var(--ease);
}
.cal-cab button:hover{ background:var(--surface-2);color:var(--text);transition-duration:var(--hover-in); }
.cal-cab .cal-hoy{
  width:auto;padding:0 10px;font-size:.72rem;font-weight:650;
  background:var(--surface-2);color:var(--text-2);
}
/* El porcentaje del mes, a la derecha del todo como en la referencia. */
.cal-pct{
  margin-left:auto;flex:none;display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;
}
.cal-pct small{
  font-size:.6rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--text-4);
}
.cal-pct b{ font-size:.92rem;font-weight:750;letter-spacing:-.02em;color:var(--green); }

/* ---------------- las letras de los días ---------------- */
.cal-semana{
  display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:5px;
}
.cal-semana span{
  text-align:center;font-size:.62rem;font-weight:700;letter-spacing:.06em;
  color:var(--text-4);padding:5px 0;border-radius:7px;background:var(--surface-2);
}

/* ---------------- la rejilla ---------------- */
.cal-lienzo{ position:relative; }
.cal-rejilla{
  display:grid;grid-template-columns:repeat(7,1fr);gap:5px;
  /* Se encoge y se difumina cuando hay un día abierto: así se lee como que el
     día se abrió, y no como otra caja que apareció de la nada. */
  transition:transform .34s cubic-bezier(.22,.92,.24,1), opacity .28s var(--ease),
             filter .28s var(--ease);
  transform-origin:center 40%;
}
.cal-lienzo.con-panel .cal-rejilla{
  transform:scale(.965);opacity:.32;filter:blur(1.5px);pointer-events:none;
}

/* Cada día es una ficha, no una casilla de tabla. */
.cal-dia{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-height:48px;padding:6px 2px;border-radius:11px;cursor:pointer;
  background:var(--surface-2);border:var(--border-hairline) solid transparent;
  font-family:inherit;
  transition:background var(--hover-out) var(--ease), border-color var(--hover-out) var(--ease),
             transform var(--hover-out) var(--ease);
}
.cal-dia:hover{
  background:var(--surface);border-color:var(--border-hi);
  transform:translateY(-1px);transition-duration:var(--hover-in);
}
/* Los días de fuera del mes se quedan, pero apagados: la rejilla se lee como
   una hoja continua y se ve lo que cae el lunes que viene aunque sea del mes
   siguiente, que es justo cuando más falta hace mirarlo. */
.cal-dia.fuera{ background:transparent;opacity:.35; }
.cal-dia.finde{ background:color-mix(in srgb, var(--surface-2) 55%, transparent); }
.cal-dia.hoy{ border-color:var(--accent);background:var(--accent-soft); }
.cal-dia.abierto{
  background:var(--accent);border-color:var(--accent);
  transform:translateY(-1px);
}
.cal-num{
  font-size:.78rem;font-weight:600;color:var(--text-2);
  font-variant-numeric:tabular-nums;line-height:1;
}
.cal-dia.hoy .cal-num{ color:var(--accent-hi);font-weight:750; }
.cal-dia.abierto .cal-num{ color:#fff;font-weight:750; }

/* Los puntos: uno por tarea, del color de su proyecto. Dicen «aquí hay algo»
   sin pedir que nadie lea nada, y el color dice de quién es sin escribirlo. */
.cal-puntos{
  display:flex;align-items:center;justify-content:center;gap:3px;
  min-height:6px;
}
.cal-puntos i{ width:5px;height:5px;border-radius:50%;display:block; }
.cal-puntos i.venc{ box-shadow:0 0 0 1.5px color-mix(in srgb, var(--red) 60%, transparent); }
.cal-puntos b{ font-size:.55rem;font-weight:700;color:var(--text-4);line-height:1; }
.cal-dia.abierto .cal-puntos b{ color:rgba(255,255,255,.75); }

/* ---------------- el panel del día ---------------- */
.cal-panel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(300px,94%);max-height:100%;overflow:auto;z-index:3;
  background:var(--surface-solid,var(--surface));
  border:var(--border-hairline) solid var(--border-hi);
  border-radius:16px;padding:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.42);
  animation:calPanel .3s cubic-bezier(.22,.92,.24,1);
}
@keyframes calPanel{
  from{ opacity:0;transform:translate(-50%,-46%) scale(.94); }
  to{ opacity:1;transform:translate(-50%,-50%) scale(1); }
}
.cal-panel-cab{ display:flex;align-items:flex-start;gap:10px;margin-bottom:11px; }
.cal-panel-tit{ display:flex;flex-direction:column;gap:1px;min-width:0;flex:1; }
.cal-panel-tit b{
  font-size:.85rem;font-weight:680;letter-spacing:-.015em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cal-panel-tit small{ font-size:.7rem;color:var(--text-4);font-weight:550; }
.cal-panel-x{
  width:26px;height:26px;border-radius:8px;padding:0;flex:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:none;color:var(--text-3);
}
.cal-panel-x:hover{ background:var(--surface);color:var(--text); }

.cal-panel-lista{ display:flex;flex-direction:column;gap:5px;margin-bottom:11px; }
.cal-tarea{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:var(--surface-2);border:var(--border-hairline) solid transparent;
  border-radius:10px;padding:8px 9px;cursor:pointer;font-family:inherit;
  color:var(--text);
  transition:border-color var(--hover-out) var(--ease), background var(--hover-out) var(--ease);
}
.cal-tarea:hover{ border-color:var(--border-hi);background:var(--surface);transition-duration:var(--hover-in); }
/* La barra de color del proyecto, de canto: dice de quién es la tarea antes
   de leer una sola palabra. */
.cal-tarea > i{ width:3px;align-self:stretch;border-radius:99px;background:var(--c);flex:none; }
.cal-tarea-txt{ display:flex;flex-direction:column;gap:1px;min-width:0;flex:1; }
.cal-tarea-txt b{
  font-size:.79rem;font-weight:600;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cal-tarea-txt small{
  font-size:.68rem;color:var(--text-4);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cal-tarea.vencida .cal-tarea-txt small{ color:var(--red); }
.cal-tarea > .ico{ color:var(--text-4);flex:none; }

.cal-panel-vacio{
  font-size:.78rem;color:var(--text-4);margin:0 0 11px;padding:10px 0;text-align:center;
}
.cal-panel-ir{
  width:100%;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--surface-2);border:none;border-radius:10px;padding:9px;
  color:var(--text-2);cursor:pointer;font-family:inherit;font-size:.76rem;font-weight:600;
}
.cal-panel-ir:hover{ background:var(--surface);color:var(--text); }

@media (max-width:760px){
  .cal-dia{ min-height:42px;border-radius:9px;gap:4px; }
  .cal-rejilla,.cal-semana{ gap:4px; }
  .cal-panel{ width:96%;padding:12px; }
}



/* ============================================================
   «MIS ATAJOS»

   Eran ocho cuadros grises con una letra violeta: todos iguales, y habia que
   leerlos uno por uno para encontrar el que querias. Ahora cada atajo tiene
   identidad propia -- su color sale de su dominio, asi que Figma siempre es
   del mismo tono y Drive del suyo -- y dice a donde va debajo del nombre.
   ============================================================ */
.atajos-rejilla{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;
}
.atajo{
  display:flex;align-items:center;gap:10px;position:relative;
  text-decoration:none;color:var(--text);min-width:0;
  background:var(--surface-2);border:var(--border-hairline) solid transparent;
  border-radius:13px;padding:10px 11px;
  transition:border-color var(--hover-out) var(--ease), background var(--hover-out) var(--ease),
             transform var(--hover-out) var(--ease);
}
.atajo:hover{
  background:var(--surface);border-color:hsl(var(--t,265) 60% 55% / .5);
  transform:translateY(-2px);transition-duration:var(--hover-in);
}
/* La pastilla del color del dominio. `--t` lo pone el JS a partir del
   hostname: mismo sitio, mismo tono, siempre. */
.atajo-letra{
  width:34px;height:34px;border-radius:11px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:780;font-size:.9rem;color:#fff;
  background:linear-gradient(145deg,
    hsl(var(--t,265) 62% 58%), hsl(calc(var(--t,265) + 18) 60% 46%));
  box-shadow:0 3px 10px hsl(var(--t,265) 60% 40% / .35);
}
.atajo-txt{ display:flex;flex-direction:column;gap:1px;min-width:0;flex:1; }
.atajo-txt b{
  font-size:.8rem;font-weight:640;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.atajo-txt small{
  font-size:.68rem;color:var(--text-4);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* La flecha aparece al pasar por encima: dice «esto te saca de aquí» sin
   ocupar sitio mientras no hace falta. */
.atajo-flecha{
  flex:none;color:var(--text-4);opacity:0;transform:translateX(-3px);
  transition:opacity var(--hover-out) var(--ease), transform var(--hover-out) var(--ease);
}
.atajo:hover .atajo-flecha{ opacity:1;transform:translateX(0);transition-duration:var(--hover-in); }

/* El de agregar va en punteado y sin color: se lee como un hueco por
   rellenar y no como un atajo mas. */
.atajo.agregar{
  background:transparent;border-style:dashed;border-color:var(--border-hi);
  cursor:pointer;font-family:inherit;text-align:left;
}
.atajo.agregar:hover{ border-color:var(--accent);background:var(--surface-2);transform:none; }
.atajo-mas{
  width:34px;height:34px;border-radius:11px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-2);color:var(--text-3);
}
.atajo.agregar:hover .atajo-mas{ background:var(--accent-soft);color:var(--accent-hi); }
.atajo.agregar .atajo-txt b{ color:var(--text-2); }

.atajo-quitar{
  position:absolute;top:-5px;right:-5px;
  width:20px;height:20px;border-radius:50%;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-solid,var(--surface));color:var(--text-3);
  border:var(--border-hairline) solid var(--border-hi);
  opacity:0;transition:opacity var(--hover-out) var(--ease);
}
.atajo:hover .atajo-quitar{ opacity:1; }
.atajo-quitar:hover{ background:var(--red);border-color:var(--red);color:#fff; }

@media (max-width:760px){
  .atajos-rejilla{ grid-template-columns:1fr 1fr;gap:7px; }
  .atajo{ padding:9px; }
  .atajo-letra,.atajo-mas{ width:30px;height:30px;border-radius:10px; }
  .atajo-flecha{ display:none; }
}



/* ============================================================
   «AREAS Y PROYECTOS» EN EL INICIO

   Ocho areas se veian como ocho filas iguales, y doce proyectos como doce
   cajas iguales con una barra violeta cada una. El color de cada uno existia
   -- estaba en el punto y en el cuadradito del icono -- pero no hacia nada:
   demasiado pequeño para reconocerse de un vistazo.

   Ahora ese color tiñe la pieza entera: raya lateral, halo del icono, borde
   al pasar por encima y la barra de progreso. Se busca por color antes de
   leer el nombre, que es como funciona la memoria.

   Todo va colgado de `.bloque-caja` para no tocar las vistas de Areas y
   Proyectos, que comparten estas clases y tienen su propio diseño.
   ============================================================ */

/* ---------------- las áreas ---------------- */
.bloque-caja .area-mini{
  display:flex;align-items:center;gap:11px;position:relative;overflow:hidden;
  background:var(--surface-2);border:var(--border-hairline) solid transparent;
  border-radius:13px;padding:11px 13px 11px 15px;margin-bottom:7px;cursor:pointer;
  transition:background var(--hover-out) var(--ease), border-color var(--hover-out) var(--ease),
             transform var(--hover-out) var(--ease);
}
/* La raya del color, de canto. Dice de qué área es antes de leer nada. */
.bloque-caja .area-mini::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--c,var(--accent));
}
.bloque-caja .area-mini:hover{
  background:var(--surface);border-color:color-mix(in srgb, var(--c,var(--accent)) 45%, transparent);
  transform:translateX(2px);transition-duration:var(--hover-in);
}
.bloque-caja .area-mini-ico{
  width:34px;height:34px;border-radius:11px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;color:#fff;
  background:var(--c,var(--accent));
  box-shadow:0 3px 10px color-mix(in srgb, var(--c,var(--accent)) 40%, transparent);
}
.bloque-caja .area-mini-txt{ display:flex;flex-direction:column;gap:1px;min-width:0;flex:1; }
.bloque-caja .area-mini-txt b{
  font-size:.82rem;font-weight:640;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bloque-caja .area-mini-txt small{
  font-size:.68rem;color:var(--text-4);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* El número de pendientes, en chapa del color del área: es el dato por el
   que se mira esta lista. */
.bloque-caja .area-mini-n{
  flex:none;min-width:22px;text-align:center;
  padding:2px 7px;border-radius:99px;
  background:color-mix(in srgb, var(--c,var(--accent)) 18%, transparent);
  color:var(--c,var(--accent-hi));
  font-size:.7rem;font-weight:700;font-variant-numeric:tabular-nums;
}
.bloque-caja .area-mini > .ico{ color:var(--text-4);flex:none; }

/* ---------------- los proyectos ---------------- */
.bloque-caja .proy-minis{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;
}
.bloque-caja .proy-mini{
  position:relative;overflow:hidden;
  background:var(--surface-2);border:var(--border-hairline) solid transparent;
  border-radius:13px;padding:12px 13px;cursor:pointer;
  transition:background var(--hover-out) var(--ease), border-color var(--hover-out) var(--ease),
             transform var(--hover-out) var(--ease);
}
.bloque-caja .proy-mini::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--c,var(--accent));
}
.bloque-caja .proy-mini:hover{
  background:var(--surface);border-color:color-mix(in srgb, var(--c,var(--accent)) 45%, transparent);
  transform:translateY(-2px);transition-duration:var(--hover-in);
}
.bloque-caja .proy-mini-top{ display:flex;align-items:center;gap:8px;margin-bottom:9px; }
.bloque-caja .proy-dot{
  width:8px;height:8px;border-radius:50%;flex:none;background:var(--c,var(--accent));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--c,var(--accent)) 20%, transparent);
}
.bloque-caja .proy-mini b{
  font-size:.8rem;font-weight:640;letter-spacing:-.01em;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bloque-caja .proy-mini-pct{
  flex:none;font-size:.72rem;font-weight:700;color:var(--text-2);
  font-variant-numeric:tabular-nums;
}
/* La barra, del color del proyecto y no del violeta de la casa: doce barras
   violetas iguales no dicen de quién es cada una. */
.bloque-caja .proy-mini .barra{ height:5px;background:var(--surface);border-radius:99px;overflow:hidden; }
.bloque-caja .proy-mini .barra > div{
  height:100%;border-radius:99px;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--c,var(--accent)) 72%, transparent), var(--c,var(--accent)));
  transition:width .5s cubic-bezier(.22,.92,.24,1);
}
.bloque-caja .proy-mini-pie{
  display:flex;align-items:center;gap:7px;margin-top:8px;
  font-size:.66rem;color:var(--text-4);font-weight:550;
}
.bloque-caja .pm-venc{
  color:var(--red);font-weight:700;
  background:color-mix(in srgb,var(--red) 13%,transparent);
  padding:1px 6px;border-radius:99px;
}

@media (max-width:760px){
  .bloque-caja .proy-minis{ grid-template-columns:1fr 1fr;gap:7px; }
  .bloque-caja .area-mini{ padding:10px 11px 10px 13px; }
  .bloque-caja .area-mini-ico{ width:30px;height:30px;border-radius:10px; }
}

/* ============================================================
   LA CARRERA DE PUNTUALIDAD
   ============================================================ */
#modal-caja:has(.carrera-pista){ max-width:720px; }

.carrera-cargando{ padding:26px 0;text-align:center;color:var(--text-2);font-size:.88rem; }

.carrera-cab{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-bottom:14px;
}
.carrera-premio{ display:flex;align-items:center;gap:11px;min-width:0; }
.carrera-premio-ico{ font-size:1.7rem;line-height:1;flex:none; }
.carrera-premio small{
  display:block;font-size:.62rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-2);
}
.carrera-premio b{ display:block;font-size:.95rem;font-weight:700;color:var(--text); }
.carrera-estado{
  padding:7px 13px;border-radius:99px;flex:none;
  background:var(--surface-2);border:var(--border-hairline) solid var(--border);
  font-size:.82rem;color:var(--text-2);
}
.carrera-estado b{ color:var(--text); }
/* Cerrada la semana, el ganador se canta en violeta. A media semana NO: cantar
   un campeon el martes y que lo pierda el jueves es como se deja de creer un
   marcador. */
.carrera-estado.cerrada{ background:var(--accent);border-color:var(--accent);color:#fff; }
.carrera-estado.cerrada b{ color:#fff; }

/* EL AVISO DE QUE ESTO ES UNA MUESTRA. Estaba en ámbar claro sobre fondo casi
   blanco y NO SE LEÍA en el tema claro — que es el que usa dirección. Se vio
   en cuanto alguien abrió la pista en local y preguntó por qué salía en la
   carrera una persona que no compite: el aviso que lo explicaba estaba ahí,
   invisible. Un aviso que no se lee es peor que no ponerlo: hace creer que la
   pantalla miente. */
.carrera-muestra{
  display:flex;align-items:center;gap:8px;
  margin-bottom:10px;padding:9px 12px;border-radius:9px;
  background:rgba(245,196,81,.16);border:1px solid rgba(200,150,20,.55);
  color:#6b5310;font-size:.78rem;font-weight:700;
}
html[data-theme="dark"] .carrera-muestra{ color:#f5c451;border-color:rgba(245,196,81,.45); }

.carrera-pista{
  background:var(--bg-deep, var(--bg));
  border:var(--border-hairline) solid var(--border);
  border-radius:14px;padding:12px 14px;
}
/* La cabecera de dias se alinea con los carriles: mismo reparto de columnas. */
.carrera-dias{
  display:grid;grid-template-columns:132px 1fr 46px;
  align-items:center;gap:10px;margin-bottom:9px;
}
.carrera-dias > span:first-child{ }
.carrera-dias i{
  font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.1em;
  color:var(--text-2);text-align:center;
}
/* Los cinco dias se reparten el mismo ancho que la via de abajo. */
.carrera-dias{ grid-template-columns:132px repeat(var(--tramos, 5), 1fr) 46px; }
.carrera-meta{ text-align:right;font-size:.95rem; }

.carrera-carril{
  display:grid;grid-template-columns:132px 1fr 46px;
  align-items:center;gap:10px;
  padding:5px 0;border-radius:9px;
}
/* Tu carril, marcado. En una lista de siete nombres el propio se busca solo, y
   buscarse es lo primero que hace cualquiera al abrir esto. */
.carrera-carril.yo{
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent);
  padding-left:6px;padding-right:6px;margin:0 -6px;
}

.carrera-quien{ display:flex;align-items:center;gap:7px;min-width:0; }
.carrera-puesto{
  width:19px;flex:none;text-align:center;
  font-size:.8rem;font-weight:800;color:var(--text-2);
}
.carrera-cara{
  width:26px;height:26px;border-radius:50%;flex:none;object-fit:cover;
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-size:.72rem;font-weight:800;
}
.carrera-nombre{
  min-width:0;font-size:.83rem;font-weight:650;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.carrera-nombre i{ font-style:normal;color:var(--text-2);font-weight:600; }

/* LA VIA. Cinco tramos y el carrito encima, colocado por porcentaje. */
.carrera-via{
  position:relative;display:grid;grid-template-columns:repeat(var(--tramos, 5), 1fr);gap:4px;
  height:26px;align-items:center;
}
.carrera-tramo{ height:8px;border-radius:99px;background:var(--surface-2); }
.carrera-tramo.puntual{ background:var(--verde, #3ecf8e); }
/* Tarde y sin marcar se distinguen, pero ninguno grita: el tablero informa,
   no señala. Un rojo intenso por llegar tarde un martes convierte un juego en
   una pizarra de castigos. */
.carrera-tramo.tarde{ background:color-mix(in srgb, var(--text-2) 42%, transparent); }
.carrera-tramo.sinmarcar{ background:repeating-linear-gradient(90deg,
  var(--surface-2) 0 4px, transparent 4px 8px); }
.carrera-tramo.permiso{ background:color-mix(in srgb, var(--lavender, #a88df8) 40%, transparent); }
.carrera-tramo.pendiente,
.carrera-tramo.porvenir{ background:var(--surface-2);opacity:.5; }
/* Un día que esa persona no trabaja. Se deja ver el hueco —no se esconde— para
   que quien mire entienda por qué a alguien le faltan tramos sin haber fallado. */
.carrera-tramo.nolaborable{ background:transparent;box-shadow:inset 0 0 0 1px var(--border); }

.carrera-coche{
  position:absolute;top:-2px;
  transition:left .6s cubic-bezier(.2,.7,.3,1);
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.35));
  pointer-events:none;
}
/* Quien va en cabeza con la semana completa lleva su estela. Es el unico
   adorno de toda la pista y por eso significa algo. */
.carrera-carril.pleno .carrera-coche{ animation:carreraVibra 1.4s ease-in-out infinite; }
@keyframes carreraVibra{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } }

.carrera-marcador{
  text-align:right;font-size:.85rem;font-weight:800;color:var(--text);
}
.carrera-marcador i{ font-style:normal;font-weight:600;color:var(--text-2);font-size:.72rem; }

.carrera-reglas{
  margin:12px 2px 0;font-size:.75rem;line-height:1.5;color:var(--text-2);
}

/* El boton que la abre, en la tarjeta de fichaje. */
.fi-carrera{
  margin-left:auto;flex:none;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px;border-radius:99px;
  background:var(--surface-2);border:var(--border-hairline) solid var(--border);
  color:var(--text-2);font-size:.76rem;font-weight:700;cursor:pointer;
  transition:color var(--hover-in) var(--ease), border-color var(--hover-in) var(--ease);
}
.fi-carrera:hover{ color:var(--text);border-color:var(--accent); }

@media (max-width:620px){
  /* En el telefono el nombre completo y el marcador se comen la via, que es lo
     unico que hay que ver. Se estrecha la columna de la izquierda y el
     marcador se va debajo del nombre. */
  .carrera-dias{ grid-template-columns:86px repeat(var(--tramos, 5), 1fr) 34px; }
  .carrera-carril{ grid-template-columns:86px 1fr 34px;gap:7px; }
  .carrera-cara{ width:22px;height:22px; }
  .carrera-nombre i{ display:none; }
  .fi-carrera span{ display:none; }
}

/* LA BANDERA A CUADROS, dibujada. En emoji la pinta cada sistema a su manera
   —en Windows sale plana y gris— y esto no es un adorno: es la meta. */
.carrera-bandera, .carrera-meta{
  display:inline-block;width:15px;height:12px;vertical-align:-1px;
  background-image:
    linear-gradient(45deg, var(--text) 25%, transparent 25%, transparent 75%, var(--text) 75%),
    linear-gradient(45deg, var(--text) 25%, transparent 25%, transparent 75%, var(--text) 75%);
  background-size:6px 6px;background-position:0 0, 3px 3px;
  background-color:var(--surface-solid, #fff);
  border-radius:2px;
}
.carrera-meta{ justify-self:end; }
/* La linea de meta, al final de la via. Sin ella los carriles terminan en el
   aire y no se ve que haya nada que alcanzar. */
.carrera-via::after{
  content:'';position:absolute;right:-5px;top:-3px;bottom:-3px;width:2px;
  background:repeating-linear-gradient(180deg,
    var(--text-2) 0 3px, transparent 3px 6px);
  opacity:.6;
}
/* El puesto: numero con el color del podio. Los tres primeros se distinguen
   sin depender de que el sistema sepa dibujar una medalla. */
.carrera-puesto.oro{ color:#f5c451; }
.carrera-puesto.plata{ color:#c9c9d4; }
.carrera-puesto.bronce{ color:#d08a5a; }
.carrera-puesto.oro, .carrera-puesto.plata, .carrera-puesto.bronce{ font-size:.92rem; }

/* LOS PREMIOS, DIBUJADOS. El de esta semana en grande y los otros tres al
   lado: saber que dentro de tres semanas hay entradas de cine es parte de lo
   que hace que alguien siga corriendo la segunda. */
.carrera-premio{ display:flex;align-items:center;gap:12px;min-width:0; }
.carrera-premio-dib{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:60px;height:60px;border-radius:14px;
  background:color-mix(in srgb, var(--accent) 11%, transparent);
  border:var(--border-hairline) solid color-mix(in srgb, var(--accent) 30%, transparent);
  color:var(--accent);
}
.carrera-premio-txt{ min-width:0; }
.carrera-premio-txt small{
  display:block;font-size:.62rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-2);margin-bottom:2px;
}
.carrera-premio-txt b{ display:block;font-size:1rem;font-weight:750;color:var(--text);line-height:1.25; }

.carrera-siguientes{ display:flex;align-items:center;gap:7px;flex:none; }
.carrera-siguientes small{
  font-size:.6rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-2);margin-right:1px;
}
.carrera-sig{
  display:inline-flex;flex-direction:column;align-items:center;gap:1px;
  padding:6px 8px;border-radius:10px;
  background:var(--surface-2);border:var(--border-hairline) solid var(--border);
  color:var(--text-2);
}
.carrera-sig i{ font-style:normal;font-size:.58rem;font-weight:800;letter-spacing:.04em; }

@media (max-width:620px){
  /* En el telefono los premios que vienen se van: lo que hay que ver es la
     pista y el de esta semana. */
  .carrera-siguientes{ display:none; }
  .carrera-premio-dib{ width:46px;height:46px; }
}

/* ---------- EL AVISO DEL LUNES ----------
   Arriba del Inicio, una vez, y se cierra. Es lo primero que se ve el lunes. */
#carrera-aviso:empty{ display:none; }
.cav{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;margin-bottom:14px;border-radius:14px;
  background:var(--surface-2);
  border:var(--border-hairline) solid var(--border);
}
/* Al ganador se le canta en violeta; al resto se le informa en gris. La
   diferencia importa: un cartel de fiesta a quien perdió se lee como burla. */
.cav.gane{
  background:linear-gradient(120deg,
    color-mix(in srgb, var(--accent) 18%, transparent),
    color-mix(in srgb, var(--accent) 6%, transparent));
  border-color:color-mix(in srgb, var(--accent) 45%, transparent);
}
.cav-bandera{
  flex:none;width:26px;height:20px;border-radius:3px;
  background-image:
    linear-gradient(45deg, var(--text) 25%, transparent 25%, transparent 75%, var(--text) 75%),
    linear-gradient(45deg, var(--text) 25%, transparent 25%, transparent 75%, var(--text) 75%);
  background-size:10px 10px;background-position:0 0, 5px 5px;
  background-color:var(--surface-solid, #fff);
}
.cav-txt{ flex:1;min-width:0; }
.cav-txt b{ display:block;font-size:.92rem;font-weight:750;color:var(--text); }
.cav-txt small{ display:block;font-size:.78rem;color:var(--text-2);margin-top:1px; }
.cav-txt small b{ display:inline;font-size:inherit; }
.cav-ver{
  flex:none;padding:7px 13px;border-radius:99px;
  background:var(--surface-solid, var(--surface));
  border:var(--border-hairline) solid var(--border);
  color:var(--text);font-size:.79rem;font-weight:700;cursor:pointer;
}
.cav-ver:hover{ border-color:var(--accent); }
.cav-x{
  flex:none;width:28px;height:28px;border-radius:8px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:none;color:var(--text-2);cursor:pointer;
}
.cav-x:hover{ color:var(--text);background:var(--surface-2); }

/* ---------- la semana pasada, dentro de la pista ---------- */
.carrera-ultima{
  display:flex;align-items:center;gap:10px;
  margin-bottom:10px;padding:9px 12px;border-radius:10px;
  background:var(--surface-2);border:var(--border-hairline) solid var(--border);
}
.carrera-ultima.ok{ border-color:color-mix(in srgb, var(--verde, #3ecf8e) 45%, transparent); }
.carrera-ultima-ico{ flex:none;color:var(--accent);display:inline-flex; }
.carrera-ultima.ok .carrera-ultima-ico{ color:var(--verde, #3ecf8e); }
.carrera-ultima-txt{ flex:1;min-width:0; }
.carrera-ultima-txt b{ display:block;font-size:.83rem;font-weight:700;color:var(--text); }
.carrera-ultima-txt small{ display:block;font-size:.74rem;color:var(--text-2); }

@media (max-width:620px){
  .cav-ver{ display:none; }   /* en el telefono manda el texto, no el boton */
}