/* --------------------------------------------------------------------------
   Escritorio
   -------------------------------------------------------------------------- */
/* Lo primero que ve la casa al entrar. La rejilla es de tarjetas-enlace: cada
   una lleva a un sitio que ya existe, y el color del icono agrupa por familia
   sin necesidad de leer. */
.cmr-escritorio { padding-top: calc(var(--nav-alto) + 2.5rem); }

.cmr-esc-saludo {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 2.5rem;
}

.cmr-esc-avatar {
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.cmr-esc-avatar.es-iniciales {
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: .06em;
  color: var(--papel);
  background: var(--verde);
}

.cmr-esc-saludo h1 {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--verde);
}

.cmr-esc-rol {
  padding: .18rem .5rem;
  font-family: var(--sans);
  font-weight: 800;
  font-size: .6rem;
  letter-spacing: .14em;
  color: var(--papel);
  background: #a3312a;
  border-radius: var(--radio);
}

.cmr-esc-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 15rem) 1fr;
  gap: 2.5rem;
  align-items: start;
}

.cmr-esc-columna { display: grid; gap: 1.2rem; }

.cmr-esc-metrica {
  display: grid;
  gap: .25rem;
  padding: 1.1rem 1.2rem;
  background: var(--papel);
  border: 1px solid var(--crema);
  border-radius: var(--radio);
}

.cmr-esc-metrica-label {
  font-weight: 700;
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris);
}

.cmr-esc-metrica-valor {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--verde);
}

.cmr-esc-metrica .cmr-muted { font-size: .8rem; }

.cmr-esc-lateral { display: grid; gap: .15rem; }

.cmr-esc-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem .9rem;
  font-size: .92rem;
  text-align: left;
  border-radius: var(--radio);
  transition: background var(--transicion), color var(--transicion);
}

.cmr-esc-cat:hover { background: var(--papel); }

.cmr-esc-cat.es-activa { color: var(--papel); background: var(--verde); }

.cmr-esc-cuenta { font-size: .8rem; opacity: .7; }

.cmr-esc-grupos { display: grid; gap: 2.5rem; }

.cmr-esc-grupo-titulo {
  margin-bottom: 1rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris);
}

.cmr-esc-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.1rem;
}

.cmr-esc-tarjeta {
  display: grid;
  gap: .55rem;
  align-content: start;
  padding: 1.3rem;
  background: var(--papel);
  border-radius: calc(var(--radio) * 4);
  transition: transform var(--transicion), box-shadow var(--transicion);
}

.cmr-esc-tarjeta:hover { transform: translateY(-2px); box-shadow: var(--sombra); }

.cmr-esc-tarjeta h3 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  color: var(--verde);
}

.cmr-esc-tarjeta p { font-size: .86rem; line-height: 1.5; color: var(--gris); }

.cmr-esc-icono {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: .3rem;
  color: var(--papel);
  border-radius: calc(var(--radio) * 4);
}

.cmr-esc-icono .cmr-ico { width: 1.3rem; height: 1.3rem; }

.cmr-esc-icono.es-verde   { background: var(--verde); }

.cmr-esc-icono.es-naranja { background: var(--naranja); }

.cmr-esc-icono.es-tinta   { background: var(--tinta); }

.cmr-esc-icono.es-azul    { background: #2c6e9b; }

.cmr-esc-icono.es-morado  { background: #6b4c9a; }

.cmr-esc-icono.es-rojo    { background: #a3312a; }

.cmr-esc-icono.es-crema   { background: #b08d4f; }