/* Pantalla de cuenta. Mismas variables que la app (docs/app/app.css) para que
   no parezca otro producto, pero con layout propio: la app es una sola vista
   sin scroll y esto es una pagina normal. */
:root {
  --bg: #0d0f12;
  --panel: #171a1f;
  --accent: #3b9eff;
  --danger: #ff4d4d;
  --warn: #ffb23b;
  --ok: #4caf50;
  --text: #eee;
  --muted: #9aa4b2;
  --line: #2a2f37;
}
* { box-sizing: border-box; }

body {
  font-family: system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0 1rem 3rem;
  line-height: 1.5;
}

.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; max-width: 1120px; margin: 0 auto; padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex; align-items: center; gap: 0.5rem;
  color: var(--text); text-decoration: none; font-weight: 600;
}
.brand img { height: 1.4em; width: 1.4em; }

.preferencias { display: flex; gap: 0.5rem; }
#langSelect, #unitSelect {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px; padding: 0.3rem 0.5rem;
}

main { max-width: 1120px; margin: 0 auto; }
/* Entrar y elegir nombre siguen siendo un formulario angosto: a 1120 px una
   sola columna de botones queda perdida en el medio. */
#viewSignIn, #viewUsername { max-width: 640px; margin: 0 auto; }

h1 { font-size: 1.4rem; margin: 1.5rem 0 0.5rem; }
h2 { font-size: 0.95rem; margin: 0 0 0.6rem; color: var(--muted); font-weight: 600; }

.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 1rem; margin: 1rem 0;
}

.row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: #262b33; color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 0.55rem 1rem; font-size: 0.95rem;
  cursor: pointer; font-family: inherit;
}
.btn:hover:not(:disabled) { background: #2f353e; }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #06121f; font-weight: 600; }
.btn.primary:hover:not(:disabled) { background: #57adff; }
.btn.danger { border-color: var(--danger); color: var(--danger); background: transparent; }
.btn.danger:hover:not(:disabled) { background: rgba(255, 77, 77, 0.12); }
.btn.proveedor { width: 100%; padding: 0.7rem 1rem; font-weight: 600; margin-bottom: 0.6rem; }
.btn.proveedor svg { width: 1.2em; height: 1.2em; }
.btn.discord { background: #5865f2; border-color: #5865f2; color: #fff; }
.btn.discord:hover { background: #6b75f5; }
.btn.google { background: #fff; border-color: #dadce0; color: #1f1f1f; }
.btn.google:hover { background: #f1f3f4; }
.btn.link { background: none; border: none; color: var(--accent); padding: 0.2rem 0.4rem; }

form { margin: 1rem 0; }
label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.3rem; }
input[type="text"], #usernameInput {
  width: 100%; font-size: 1rem; padding: 0.55rem 0.7rem;
  background: var(--panel); border: 1px solid var(--line);
  color: var(--text); border-radius: 8px; font-family: inherit;
}
#usernameInput:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Login con mail */
.mail-form input {
  width: 100%; font-size: 1rem; padding: 0.55rem 0.7rem;
  background: var(--panel); border: 1px solid var(--line);
  color: var(--text); border-radius: 8px; font-family: inherit;
}
.mail-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.mail-form input[readonly] { opacity: 0.7; }
.mail-form label { margin-top: 0.7rem; }
.mail-form h2 { font-size: 1.1rem; margin: 0 0 0.4rem; }
.mail-form .btn.primary { width: 100%; }
.mail-form [hidden] { display: none !important; }
#emailCodeInput { max-width: 12rem; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.mail-links { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; margin-top: 0.6rem; }
.divisor { display: flex; align-items: center; gap: 0.6rem; color: var(--muted); font-size: 0.85rem; margin: 0.6rem 0 0; }
.divisor::before, .divisor::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
.divisor[hidden] { display: none; }
/* Vincular el mail desde Ajustes: el mismo formulario, sin lo de entrar. */
.vinculando-mail .solo-entrar { display: none !important; }

.hint { min-height: 1.4em; font-size: 0.85rem; margin: 0.4rem 0 0.8rem; color: var(--muted); }
.hint.ok { color: var(--ok); }
.hint.bad { color: var(--danger); }

.check { display: flex; align-items: center; gap: 0.5rem; color: var(--text); font-size: 0.95rem; margin-bottom: 0.4rem; }
.check input { width: 1.1em; height: 1.1em; accent-color: var(--accent); }

.notice { border-radius: 8px; padding: 0.7rem 0.9rem; font-size: 0.9rem; margin: 1rem 0; }
.notice.danger { background: rgba(255, 77, 77, 0.12); border: 1px solid var(--danger); }
.notice.warn { background: rgba(255, 178, 59, 0.12); border: 1px solid var(--warn); }

.who { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.who img { width: 64px; height: 64px; border-radius: 50%; background: var(--panel); }
.who h1 { margin: 0; }
.titulo-usuario {
  display: inline-flex; align-items: center; gap: 0.3rem; margin: 0.25rem 0 0.1rem;
  font-size: 0.8rem; font-weight: 600; color: var(--warn);
  border: 1px solid var(--warn); border-radius: 999px; padding: 0.05rem 0.6rem;
}
.titulo-usuario::before { content: '\2605'; }
.titulo-usuario[hidden] { display: none; }

.logins, .sessions { list-style: none; margin: 0; padding: 0; }
.logins li, .sessions li {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--line);
}
.logins li:last-child, .sessions li:last-child { border-bottom: none; }
.sessions .when { color: var(--muted); font-size: 0.85rem; }
.tag { font-size: 0.75rem; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 0.05rem 0.5rem; }

.loading { text-align: center; color: var(--muted); padding: 3rem 0; }

#toastContainer {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3000;
  display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none;
}
.toast {
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  padding: 0.6rem 1rem; border-radius: 8px; font-size: 0.85rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  opacity: 0; transform: translateY(-10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.ok { border-color: var(--ok); }
.toast.bad { border-color: var(--danger); }

@media (max-width: 480px) {
  h1 { font-size: 1.2rem; }
  .row { flex-direction: column; align-items: stretch; }
  .row .btn { width: 100%; }
}

hr { border: none; border-top: 1px solid var(--line); margin: 1rem 0; }
#deleteConfirm { margin-top: 0.8rem; }
#deleteConfirm .btn { margin-right: 0.5rem; }
#deleteInput {
  width: 100%; font-size: 1rem; padding: 0.55rem 0.7rem;
  background: var(--bg); border: 1px solid var(--danger);
  color: var(--text); border-radius: 8px; font-family: inherit;
}

.legal a { color: var(--muted); text-decoration: underline; }
.legal a:hover { color: var(--accent); }

#deviceInput {
  width: 100%; max-width: 12rem; font-size: 1.2rem; letter-spacing: 0.15em;
  text-transform: uppercase; padding: 0.55rem 0.7rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: var(--bg); border: 1px solid var(--line);
  color: var(--text); border-radius: 8px;
}
#deviceInput:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* --- viajes -------------------------------------------------------------
   Las tarjetas de arriba son formularios; esta es una lista larga, asi que
   las filas se separan con una linea y no con aire. */
.totals { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-bottom: 1rem; }
/* hidden pierde contra un display propio, asi que hay que decirlo. */
.totals[hidden], .btn[hidden] { display: none; }
.totals .tot b { display: block; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.totals .tot span { font-size: 0.75rem; color: var(--muted); }

.trips { list-style: none; margin: 0; padding: 0; }
.trips li { padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.trips li:last-child { border-bottom: none; }
.trips .route { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-weight: 600; }
.trips .sub { font-size: 0.85rem; color: var(--muted); margin-top: 0.15rem; }
.trips .foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.trips .tag { color: var(--muted); border-color: var(--line); }
.trips .tag.open { color: var(--accent); border-color: var(--accent); }
.trips .tag.ontime { color: var(--ok); border-color: var(--ok); }
.trips .tag.late { color: var(--warn); border-color: var(--warn); }
#tripsEmpty { margin: 0; }
#btnMoreTrips { margin-top: 0.8rem; }

/* Borrar un viaje no es la accion principal de la fila: boton de texto y no
   uno de los grandes, que son para lo que la persona vino a hacer. */
.linkish {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--muted); font: inherit; font-size: 0.85rem; text-decoration: underline;
}
.linkish:hover { color: var(--text); }
.linkish.armado { color: var(--danger); }
.linkish:disabled { opacity: 0.5; cursor: default; }

/* --- estadisticas y detalle -------------------------------------------- */
.juego + .juego { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.juego h3 { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
            color: var(--accent); margin: 0 0 0.6rem; }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.8rem 1rem; }
/* En el celular de a tres: de a dos eran cinco filas de numeros. */
@media (max-width: 560px) {
  .cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem 0.6rem; }
  .cifras div b { font-size: 0.98rem; }
}
.cifras div b { display: block; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.cifras div span { font-size: 0.72rem; color: var(--muted); }
.juego .renglon { font-size: 0.85rem; color: var(--muted); margin-top: 0.7rem; }
.detalle-celda .renglon { font-size: 0.85rem; color: var(--muted); margin-top: 0.35rem; }
.juego .renglon b { color: var(--text); font-weight: 600; }
.juego .aviso { font-size: 0.8rem; color: var(--warn); margin-top: 0.6rem; }
.nota-stats { font-size: 0.8rem; color: var(--muted); margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--line); }

.detalle { margin: 0.6rem 0 0.2rem; }
/* El alto manda y el ancho sale de la forma del recorrido (se la pone
   el guion con aspect-ratio): un viaje de este a oeste queda ancho y
   bajo, y uno de norte a sur, angosto y alto. Con un alto fijo y ancho
   completo, casi todos quedaban perdidos en el medio de una franja. */
.detalle .ruta { display: block; margin: 0.3rem auto 0.5rem;
                 height: 230px; width: auto; max-width: 100%; }
:is(.detalle, .vivo) .ruta .traza { fill: none; stroke: var(--accent); stroke-width: 2;
                        stroke-linejoin: round; stroke-linecap: round; }
:is(.detalle, .vivo) .ruta .hueco { fill: none; stroke: var(--muted); stroke-width: 1.5;
                        stroke-dasharray: 4 4; }
:is(.detalle, .vivo) .ruta .punta { fill: var(--accent); }
:is(.detalle, .vivo) .ruta .punta.fin { fill: var(--text); }  /* blanco: el verde es "lento" en el mapa de calor */
.acciones { display: flex; gap: 1rem; }

/* --- banderas de los paises --------------------------------------------
   Chromium en Windows NO dibuja las banderas de emoji: muestra las dos
   letras en un recuadro, y ahi esta la mayor parte de la gente que abre
   esto desde la PC donde juega. Microsoft no las pone en su fuente y
   Chromium no piensa traer las suyas, asi que la unica salida es una
   fuente aparte.

   Se descarga SOLO cuando hace falta: la clase la pone el guion despues de
   medir en un canvas si el navegador las dibuja. Firefox, macOS, Android e
   iOS ya las dibujan y no bajan estos 78 KB. */
@font-face {
  font-family: 'Banderas';
  src: url('../assets/TwemojiCountryFlags.woff2') format('woff2');
  unicode-range: U+1F1E6-1F1FF;
  font-display: swap;
}
.paises { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.7rem; }
.paises .etq { font-size: 0.85rem; color: var(--muted); margin-right: 0.15rem; }
.paises .bandera { font-size: 1.3rem; line-height: 1.15; cursor: default; }
.sin-banderas .paises .bandera { font-family: 'Banderas', system-ui, sans-serif; }
.paises .tag { color: var(--muted); border-color: var(--line); }

/* --- panel de la cuenta (a la FSHub) -------------------------------------
   En escritorio, navegacion a la izquierda y contenido a la derecha; en el
   celular, la navegacion pasa a pestanas arriba y todo va en una columna. */
.tablero { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.lado {
  position: sticky; top: 1rem; margin-top: 1.5rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.lado a {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem;
  color: var(--text); text-decoration: none; font-size: 0.95rem;
  border-bottom: 1px solid var(--line);
}
.lado a:last-child { border-bottom: none; }
.lado a:hover { background: #1d2127; }
.lado a.activo { background: #1f2630; box-shadow: inset 3px 0 0 var(--accent); }
.lado svg { width: 1.1em; height: 1.1em; fill: var(--warn); flex: none; }
.contenido { min-width: 0; }
.pagina[hidden] { display: none; }
.rotulo { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
          text-transform: uppercase; color: var(--warn); }

/* La cinta de numeros grandes de arriba. */
.cinta {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 1rem 0; border: 1px solid #3a3226; border-radius: 10px; overflow: hidden;
  background: linear-gradient(90deg, #241f18, #171a1f 55%);
}
.cinta[hidden] { display: none; }
.cinta > div { padding: 0.9rem 0.6rem; text-align: center; border-right: 1px solid var(--line); min-width: 0; }
.cinta > div:last-child { border-right: none; }
.cinta b { display: block; font-size: 1.35rem; font-variant-numeric: tabular-nums;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cinta .etq { display: block; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
              color: var(--muted); margin-top: 0.15rem; }
.cinta .sub { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 0.2rem;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cabecera { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.cabecera h2 { margin: 0; margin-right: auto; }
.btn.chico { padding: 0.3rem 0.7rem; font-size: 0.85rem; border-radius: 6px; text-decoration: none; }

.filtros { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 0 0 0.8rem; }
.filtros label { margin: 0; display: flex; align-items: center; gap: 0.4rem; }
.filtros select, .filtros input[type="search"] {
  background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 0.3rem 0.5rem; font: inherit; font-size: 0.85rem;
}

/* Tabla de viajes: la del resumen y la del logbook son la misma. */
table.viajes { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.viajes th {
  text-align: left; font-weight: 600; font-size: 0.78rem; color: var(--muted);
  padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.viajes td { padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.viajes tr.fila { cursor: pointer; }
table.viajes tr.fila:hover td { background: #1b1f25; }
table.viajes tr.fila.abierta td { background: #1d232b; border-bottom-color: transparent; }
table.viajes .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.viajes .negativo { color: var(--danger); }
.apoyo { margin: 1rem 0 0; }
.apoyo a { color: var(--accent); font-weight: 600; }
table.viajes .camion { white-space: nowrap; }
/* Una etiqueta partida en dos renglones ("driving / now") no se lee. */
.tag { white-space: nowrap; }
table.viajes .cuando { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
table.viajes .ruta-celda { font-weight: 600; }
table.viajes .ruta-celda .tag { margin-left: 0.15rem; font-weight: 400; vertical-align: 1px; }
table.viajes .ruta-txt { white-space: nowrap; }
table.viajes .ruta-txt.sin-ciudades { color: var(--muted); font-weight: 400; }
table.viajes td.num.gris { color: var(--muted); font-size: 0.82rem; }
/* Laptop chica y tablet: con la barra lateral la tabla no entra con todo en un renglon. */
@media (max-width: 1100px) {
  table.viajes .camion, table.viajes .ruta-txt { white-space: normal; }
}
/* Recien aparece la barra lateral y el contenido es angosto: el vehiculo se
   ve en el detalle del viaje. */
@media (min-width: 821px) and (max-width: 940px) {
  table.viajes th:nth-child(3), table.viajes td.camion { display: none; }
}
table.viajes .juego-chip { font-size: 0.68rem; color: var(--muted); border: 1px solid var(--line);
                           border-radius: 4px; padding: 0 0.3rem; margin-right: 0.4rem; font-weight: 400; }
table.viajes .chico-gris { display: block; font-size: 0.78rem; color: var(--muted); font-weight: 400; }
table.viajes td.detalle-celda { padding: 0 0.5rem 0.8rem; background: #1d232b; }
.tag.open { color: var(--accent); border-color: var(--accent); }
.tag.ontime { color: var(--ok); border-color: var(--ok); }
.tag.late { color: var(--warn); border-color: var(--warn); }
.tag.gris { color: var(--muted); border-color: var(--line); }

@media (max-width: 820px) {
  .tablero { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lado { position: static; display: flex; margin-top: 1rem; }
  .lado a { flex: 1; justify-content: center; border-bottom: none; border-right: 1px solid var(--line); padding: 0.6rem 0.4rem; }
  .lado a:last-child { border-right: none; }
  .lado a.activo { box-shadow: inset 0 -3px 0 var(--accent); }
  .cinta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cinta > div:nth-child(2) { border-right: none; }
  .cinta > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* Cinco secciones no entran en una fila con su nombre al lado: en el
   celular el icono va arriba y el nombre abajo, mas chico. */
@media (max-width: 560px) {
  .lado a { flex-direction: column; gap: 0.2rem; font-size: 0.7rem; padding: 0.5rem 0.15rem; position: relative; min-width: 0; }
  .lado a span[data-i18n] { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lado .nav-badge { position: absolute; top: 0.25rem; right: 0.3rem; margin: 0; }
}

/* En el celular la tabla no entra: cada viaje pasa a ser un bloque, con la
   ruta arriba y el resto en una linea. */
@media (max-width: 640px) {
  table.viajes thead { display: none; }
  table.viajes, table.viajes tbody, table.viajes tr, table.viajes td { display: block; width: 100%; }
  table.viajes tr.fila { padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
  table.viajes tr.fila.abierta { border-bottom: none; }
  table.viajes td { border-bottom: none; padding: 0.05rem 0; }
  table.viajes td.num, table.viajes td.oculto-movil { display: inline; padding-right: 0.6rem; text-align: left; font-size: 0.85rem; color: var(--muted); }
  table.viajes td.oculto-movil:empty, table.viajes td.num:empty { display: none; }
  table.viajes .cuando { font-size: 0.78rem; }
  table.viajes td.detalle-celda { padding: 0 0 0.8rem; }
}

/* Lo mas repetido de cada juego: listas cortas en columnas fijas (con
   auto-fit quedaba una lista sola en una fila). */
.tops { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
        gap: 0.9rem 1.2rem; margin-top: 1rem; }
.tops.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tops.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .tops.tres, .tops.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem 0.9rem; }
  /* Records y consumo son renglones largos: uno debajo del otro. */
  .tops.dos:has(.records) { grid-template-columns: minmax(0, 1fr); }
}

/* La plata de un juego, por moneda. */
table.plata { border-collapse: collapse; margin-top: 0.9rem; font-size: 0.88rem; font-variant-numeric: tabular-nums; }
table.plata th, table.plata td { padding: 0.18rem 0; }
table.plata thead th { font-size: 0.72rem; color: var(--muted); font-weight: 600; text-align: right; }
table.plata tbody th { text-align: left; font-weight: 400; color: var(--muted); padding-right: 1.5rem; }
table.plata td { text-align: right; padding-left: 1.5rem; white-space: nowrap; }
table.plata tr.gasto td { color: var(--muted); }
table.plata tr.neto th, table.plata tr.neto td { color: var(--text); font-weight: 600; border-top: 1px solid var(--line); padding-top: 0.35rem; }
.tops h4 { margin: 0 0 0.3rem; font-size: 0.72rem; letter-spacing: 0.08em;
           text-transform: uppercase; color: var(--muted); font-weight: 600; }
.tops ol { margin: 0; padding-left: 1.2rem; font-size: 0.88rem; }
.tops li { margin: 0.1rem 0; }
.tops li span { color: var(--muted); font-size: 0.8rem; }

/* Actividad: barras por semana o mes y el calendario de dias manejados. */
.cabecera select {
  background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 0.3rem 0.5rem; font: inherit; font-size: 0.85rem;
}
.grafico svg { display: block; width: 100%; height: auto; }
.grafico[hidden], .calendario[hidden], .leyenda-cal[hidden] { display: none; }
.grafico .barra { fill: var(--accent); }
.grafico .barra.vacia { fill: var(--line); }
.grafico .barra:hover { fill: #57adff; }
.grafico text { fill: var(--muted); font-size: 11px; font-family: system-ui, sans-serif; }
.grafico .tope { fill: var(--text); font-weight: 600; }
.grafico .piso { stroke: var(--line); }
.sub-titulo { font-size: 0.78rem; color: var(--muted); font-weight: 600; margin: 1rem 0 0.4rem; }
.calendario { overflow-x: auto; }
/* Cuadritos de 11 px como minimo: mas chicos no se distinguen. */
.calendario svg { display: block; width: 100%; min-width: 660px; height: auto; }
.calendario text { fill: var(--muted); font-size: 9px; font-family: system-ui, sans-serif; }
.calendario .dia.n0, .leyenda-cal i.n0 { fill: #1e232a; background: #1e232a; }
.calendario .dia.n1, .leyenda-cal i.n1 { fill: #12395f; background: #12395f; }
.calendario .dia.n2, .leyenda-cal i.n2 { fill: #1b5c97; background: #1b5c97; }
.calendario .dia.n3, .leyenda-cal i.n3 { fill: #2a7fd0; background: #2a7fd0; }
.calendario .dia.n4, .leyenda-cal i.n4 { fill: #57adff; background: #57adff; }
.leyenda-cal { display: flex; align-items: center; justify-content: flex-end; gap: 3px;
               font-size: 0.72rem; color: var(--muted); margin-top: 0.3rem; }
.leyenda-cal i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.leyenda-cal i:first-of-type { margin-left: 4px; }
.leyenda-cal i:last-of-type { margin-right: 4px; }

/* --- logros ----------------------------------------------------------- */
/* Cuatro logros recientes en una fila (con 15rem quedaban tres y uno solo abajo). */
.logros { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.7rem; }
@media (max-width: 560px) {
  .logros { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .logro { flex-direction: column; gap: 0.4rem; padding: 0.6rem; }
  .logro .icono { width: 2.1rem; height: 2.1rem; }
  .logro .icono svg { width: 1.15rem; height: 1.15rem; }
  .logro b { font-size: 0.86rem; }
  .logro .desc { font-size: 0.76rem; }
}
.logro { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.7rem;
         border: 1px solid var(--line); border-radius: 8px; background: #1b1f25; }
.logro .icono { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%;
                display: flex; align-items: center; justify-content: center;
                background: radial-gradient(circle at 30% 30%, #ffcf6b, #c88a12); }
.logro .icono svg { width: 1.4rem; height: 1.4rem; fill: #1d1406; }
.logro.bloqueado .icono { background: #2a2f37; }
.logro.bloqueado .icono svg { fill: var(--muted); }
.logro b { display: block; font-size: 0.92rem; }
.logro .desc { display: block; font-size: 0.8rem; color: var(--muted); margin-top: 0.1rem; }
.logro .pie { display: block; font-size: 0.75rem; color: var(--warn); margin-top: 0.35rem; }
.logro.bloqueado .pie { color: var(--muted); }
.barrita { height: 4px; background: #2a2f37; border-radius: 2px; margin-top: 0.35rem; overflow: hidden; }
.barrita i { display: block; height: 100%; background: var(--accent); }

/* --- manejando ahora ---------------------------------------------------- */
#drivingBody .ruta-ahora { font-weight: 600; font-size: 1.05rem; }
#drivingBody .barrita { height: 6px; margin: 0.5rem 0 0.3rem; }

/* --- corregir un viaje ---------------------------------------------------- */
.correccion { margin-top: 0.7rem; display: flex; flex-direction: column; gap: 0.4rem; }
.correccion .botones { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.correccion textarea {
  width: 100%; min-height: 3.2rem; resize: vertical; font: inherit; font-size: 0.85rem;
  background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 0.4rem 0.5rem;
}
.nota-viaje { font-size: 0.85rem; margin-top: 0.4rem; font-style: italic; }

.link-publico { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
                font-size: 0.85rem; margin-top: 0.6rem; }
.link-publico[hidden] { display: none; }
.link-publico a { color: var(--accent); word-break: break-all; }

/* --- perfil publico: la misma pantalla, sin lo que es solo de la cuenta - */
/* Seguir */
.nav-badge { margin-left: auto; min-width: 1.3em; padding: 0 0.35em; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.72rem; font-weight: 700; text-align: center; }
.nav-badge[hidden] { display: none; }
.follow-form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.follow-form input { flex: 1 1 12rem; min-width: 0; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 0.45rem 0.6rem; font-size: 0.95rem; }
.follow-box { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-top: 0.4rem; }
.follow-box[hidden] { display: none; }
.follow-box .estado { font-size: 0.82rem; color: var(--muted); }
ul.gente, ul.feed { list-style: none; margin: 0 0 0.8rem; padding: 0; }
ul.gente li, ul.feed li { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
ul.gente li:first-child, ul.feed li:first-child { border-top: none; }
ul.gente img, .vivo img { width: 28px; height: 28px; border-radius: 50%; background: var(--panel); flex: 0 0 auto; }
ul.gente .letra, ul.feed .letra, .vivo .letra { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; background: #2a313b;
  color: var(--muted); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; }
ul.feed img { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; }
ul.gente .nombre, .vivo .nombre { font-weight: 600; color: var(--text); text-decoration: none; }
ul.gente .acciones-fila { margin-left: auto; display: flex; gap: 0.4rem; flex-wrap: wrap; }
ul.feed .cuando { margin-left: auto; color: var(--muted); font-size: 0.8rem; }
ul.feed .meta { color: var(--muted); font-size: 0.85rem; }
/* align-items: start: quien no esta manejando no tiene mapita, y su tarjeta
   quedaba estirada y vacia al lado de la de quien si. */
.vivos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0.8rem; align-items: start; }

/* Las listas de gente con el mismo titulo que el resto de las tarjetas. */
.listas-gente h3 { font-size: 0.95rem; margin: 1.1rem 0 0.4rem; color: var(--muted); font-weight: 600; }
.listas-gente h3:first-child { margin-top: 0; }

/* El codigo de la PC con su boton al lado. */
.fila-codigo { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.fila-codigo input { flex: 0 1 12rem; }
.acciones-sesion { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.4rem; }
.vivo { border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem 0.8rem; background: var(--bg); }
.vivo .cabeza { display: flex; align-items: center; gap: 0.5rem; }
.vivo .linea-estado { margin: 0.35rem 0 0; font-size: 0.88rem; }
.vivo .linea-estado.manejando::before { content: ''; display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--ok); margin-right: 0.35em; vertical-align: 0.05em; }
.vivo svg.ruta { margin-top: 0.5rem; max-height: 8rem; width: 100%; }
.vivo svg.ruta circle.aqui { fill: var(--accent); stroke: #fff; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.vivo .titulo-usuario { margin: 0; }
.publico #pageFollowing,
.publico #sideNav, .publico #pageLogbook, .publico #pageSettings,
.publico #pageAchievements, .publico #recoveryWarning, .publico #cardActivity,
.publico #cardDriving, .publico #recentAchLink, .publico .cabecera a[href="#logbook"] { display: none; }
.publico .tablero { grid-template-columns: minmax(0, 1fr); }
.publico table.viajes tr.fila { cursor: default; }
.publico table.viajes tr.fila:hover td { background: none; }

/* Solapas de las stats: un juego por vez, y camion o auto en ATS. */
.pestanas { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.2rem; margin: 0 0 0.9rem;
            border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.pestana { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 0.85rem;
           font-weight: 600; padding: 0.35rem 0.9rem; border-radius: 6px; cursor: pointer; }
.pestana:hover { color: var(--text); }
.pestana[aria-selected="true"] { background: #1f2630; color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.pestanas.chicas { margin-top: 1.2rem; }
.pestanas.chicas .pestana { font-size: 0.8rem; padding: 0.25rem 0.75rem; }
.renglon.neto { color: var(--text); font-weight: 600; }

/* El recorrido con el nombre de las ciudades en las puntas. */
.detalle .mapa-ruta { position: relative; margin: 0.3rem auto 0.5rem;
                      width: min(100%, calc(230px * var(--r))); aspect-ratio: var(--r); }
.detalle .mapa-ruta svg.ruta { display: block; width: 100%; height: 100%; margin: 0; }
.nombre-punta { position: absolute; transform: translate(8px, -50%); white-space: nowrap; pointer-events: none;
                font-size: 0.75rem; font-weight: 600; color: var(--text); padding: 0.05rem 0.35rem;
                border-radius: 4px; background: rgba(13, 17, 23, 0.8); }
.nombre-punta.izq { transform: translate(calc(-100% - 8px), -50%); }
.nombre-punta.abajo { transform: translate(8px, 60%); }
.nombre-punta.izq.abajo { transform: translate(calc(-100% - 8px), 60%); }

/* Borrar el viaje: aparte de la nota y en rojo. */
.detalle-celda .acciones { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid var(--line); }
.btn.danger.armado { background: var(--danger); color: #fff; }
.correccion > .linkish { margin-top: 0.4rem; align-self: flex-start; }

/* Fuera del resumen, el saludo en chico. */
html[data-pagina]:not(.publico):not([data-pagina="overview"]) .who { margin-top: 1rem; }
html[data-pagina]:not(.publico):not([data-pagina="overview"]) .who img { width: 36px; height: 36px; }
html[data-pagina]:not(.publico):not([data-pagina="overview"]) .who h1 { font-size: 1.15rem; }
html[data-pagina]:not(.publico):not([data-pagina="overview"]) #dashLabel,
html[data-pagina]:not(.publico):not([data-pagina="overview"]) #memberSince,
html[data-pagina]:not(.publico):not([data-pagina="overview"]) #userTitle { display: none; }

/* De la actividad de "Siguiendo" al viaje. */
ul.feed a.a-viaje { color: var(--text); text-decoration: none; }
ul.feed a.a-viaje:hover { text-decoration: underline; }

/* Buscar en el logbook. */
label.buscar { flex: 1 1 12rem; }
label.buscar input { width: 100%; min-width: 0; padding: 0.35rem 0.6rem; }
label.buscar input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Records y consumo por camion: una lista corta, sin numeros adelante. */
.records { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; }
.records li { margin: 0.15rem 0; }
.records li span { color: var(--muted); font-size: 0.8rem; }

/* Mapa de calor de velocidad en el detalle del viaje. */
:is(.detalle, .vivo) .ruta .tramo { stroke-width: 2.6; stroke-linecap: round; }
.leyenda-vel { display: flex; align-items: center; justify-content: center; gap: 0.4rem;
               font-size: 0.75rem; color: var(--muted); margin: 0 0 0.4rem; }
.leyenda-vel i { display: inline-block; width: 8rem; height: 6px; border-radius: 3px;
                 background: linear-gradient(90deg, hsl(120, 80%, 50%), hsl(60, 80%, 50%), hsl(0, 80%, 50%)); }

/* Vincular la PC desde el link del cliente. */
.vincular-pendiente { border-color: var(--accent); }
.vincular-pendiente .codigo-vincular { font-size: 1.6rem; letter-spacing: 0.15em; margin: 0.4rem 0; }
.vincular-pendiente .botones { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Trabajo con auto: la misma etiqueta que el juego, en otro color. */
table.viajes .juego-chip.auto { color: var(--warn); border-color: var(--warn); }

/* El nombre de usuario en Ajustes: como texto, no como codigo. */
.nombre-usuario { font-weight: 600; font-size: 1rem; }