/* pet-track: layout de cada vista (mapa a pantalla completa con panel lateral, paginas a dos columnas,
   rejillas de tarjetas, lista compacta de alertas, cifras del historial). Tokens en base.css. */

/* Paginas con contenido principal y una columna lateral (collares, mascotas, cuenta) */
.con-lateral {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}

.con-lateral > * {
  min-width: 0;
}

.cabecera-pagina {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cabecera-pagina .chips {
  flex: 1 1 100%;
}

/* Rejillas */
.rejilla-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

.rejilla-secciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 16px;
  align-items: start;
}

.campos-fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

/* Tarjeta de collar */
.collar-tarjeta {
  display: grid;
  gap: 10px;
  padding: 16px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}

.collar-tarjeta:hover,
.collar-tarjeta.activo {
  border-color: var(--acento);
}

a.collar-tarjeta:hover {
  transform: translateY(-1px);
}

.collar-tarjeta .titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.collar-tarjeta strong {
  font-size: 1.1rem;
}

.punto {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--texto-suave);
  flex: none;
}

.punto.bueno {
  background: var(--bueno);
  box-shadow: 0 0 0 3px var(--acento-suave);
}

.punto.critico {
  background: var(--critico);
  box-shadow: 0 0 0 3px var(--critico-suave);
}

.punto.aviso-chip {
  background: var(--aviso);
  box-shadow: 0 0 0 3px var(--aviso-suave);
}

/* Barra de bateria */
.bateria {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.bateria-barra {
  height: 8px;
  border-radius: 4px;
  background: var(--superficie-2);
  overflow: hidden;
}

.bateria-barra span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--bueno);
}

.bateria-barra .aviso-chip {
  background: var(--aviso);
}

.bateria-barra .critico {
  background: var(--critico);
}

/* Mapa en vivo: panel lateral + mapa a toda la altura */
.vista-mapa {
  max-width: none;
  padding: 0;
  gap: 0;
}

.vista-mapa .mapa {
  height: 48vh;
  min-height: 280px;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}

.lateral {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 16px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.lista-collares {
  display: grid;
  gap: 8px;
}

.lista-collares button {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 10px 12px;
  min-height: 0;
  font-weight: 500;
  background: var(--superficie);
  color: var(--texto);
  border-color: var(--borde);
}

.lista-collares button:hover {
  background: var(--superficie-2);
}

.lista-collares button.activo {
  border-color: var(--acento);
  background: var(--acento-suave);
  color: var(--acento-fuerte);
}

.lista-collares small {
  color: inherit;
  opacity: 0.8;
}

.panel-collar h2 {
  font-size: 1.35rem;
}

.datos-collar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}

.dato {
  padding: 10px 12px;
  border-radius: var(--radio);
  background: var(--superficie-2);
  display: grid;
  gap: 2px;
}

.dato strong {
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

/* Alertas: lista compacta */
.lista-alertas {
  display: grid;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}

.alerta-fila {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--borde);
}

.alerta-fila:last-child {
  border-bottom: 0;
}

.alerta-fila.leida {
  opacity: 0.6;
}

.alerta-fila .texto {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.alerta-fila .texto span {
  color: var(--texto-suave);
  font-size: 0.9rem;
}

.alerta-fila .derecha {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

@media (max-width: 719px) {
  .alerta-fila {
    grid-template-columns: 12px 1fr;
  }

  .alerta-fila .derecha {
    grid-column: 2;
    justify-content: space-between;
  }
}

/* Historial: cifras y mapa grande */
.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.cifra {
  padding: 12px 14px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  display: grid;
  gap: 2px;
}

.cifra strong {
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.cifra small {
  font-size: 0.8rem;
}

.vista-historial .mapa,
.vista-geocercas .mapa {
  height: 52vh;
  min-height: 320px;
}

details.plegable {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
}

details.plegable summary {
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 600;
}

details.plegable .tabla-contenedor {
  border: 0;
  border-top: 1px solid var(--borde);
  border-radius: 0;
}

/* Entrada y registro */
.portada {
  display: grid;
  gap: 14px;
  justify-items: start;
  max-width: 420px;
  width: 100%;
  margin: 6vh auto 0;
}

.portada .marca-icono {
  width: 44px;
  height: 44px;
  font-size: 1.3rem;
  border-radius: 12px;
}

.portada p.lema {
  color: var(--texto-suave);
  font-size: 1.05rem;
}

.portada form {
  width: 100%;
}

.portada form button {
  justify-self: stretch;
}

@media (min-width: 900px) {
  /* Con la barra de soporte visible, el mapa fijo empieza mas abajo */
  body.con-soporte {
    --alto-cabecera: 98px;
  }

  .con-lateral {
    grid-template-columns: minmax(0, 1fr) 380px;
  }

  .con-lateral.lateral-ancho {
    grid-template-columns: minmax(0, 1fr) 440px;
  }

  .vista-mapa {
    grid-template-columns: 380px minmax(0, 1fr);
    min-height: calc(100vh - var(--alto-cabecera));
  }

  .vista-mapa .lateral {
    order: -1;
    border-right: 1px solid var(--borde);
    background: var(--superficie);
  }

  .vista-mapa .mapa {
    position: sticky;
    top: var(--alto-cabecera);
    height: calc(100vh - var(--alto-cabecera));
    min-height: 0;
  }
}