/* ==========================================================================
   Enciclopedia del Ecosistema - estilos propios
   Complementan el tema Material sin pelearse con el modo claro/oscuro.
   ========================================================================== */

/* --- Portada -------------------------------------------------------------- */

.subtitulo-portada {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--md-default-fg-color--light);
  max-width: 42rem;
  margin: -0.4rem 0 2rem 0;
}

/* El h1 de la portada, mas presente */
.md-typeset h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--md-default-fg-color);
}

/* --- Tarjetas (grid cards) ------------------------------------------------ */

.md-typeset .grid.cards > ul > li {
  border-radius: 0.6rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  transition: border-color 180ms ease, box-shadow 180ms ease,
              transform 180ms ease;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.14);
  transform: translateY(-2px);
}

/* Icono grande de cada tarjeta */
.md-typeset .grid.cards .lg.middle {
  color: var(--md-accent-fg-color);
}

/* --- Cifras destacadas ---------------------------------------------------- */

.cifra {
  display: block;
  font-size: 2.1rem;
  line-height: 1.1;
  font-weight: 700;
  color: var(--md-accent-fg-color);
  letter-spacing: -0.03em;
}

/* --- Semaforos de estado (para el monitor de recursos) -------------------- */

.estado {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.estado.ok        { background: rgba(46, 125, 50, 0.08);  color: #2e7d32; border: 1px solid #2e7d32; }
.estado.aviso     { background: rgba(239, 108, 0, 0.08);  color: #ef6c00; border: 1px solid #ef6c00; }
.estado.saturado  { background: rgba(198, 40, 40, 0.08);  color: #c62828; border: 1px solid #c62828; }
.estado.inactivo  { background: rgba(117, 117, 117, 0.08); color: #757575; border: 1px solid #757575; }

/* En modo oscuro, subir el contraste de los semaforos */
[data-md-color-scheme="slate"] .estado.ok       { color: #81c784; border-color: #81c784; }
[data-md-color-scheme="slate"] .estado.aviso    { color: #ffb74d; border-color: #ffb74d; }
[data-md-color-scheme="slate"] .estado.saturado { color: #e57373; border-color: #e57373; }
[data-md-color-scheme="slate"] .estado.inactivo { color: #bdbdbd; border-color: #bdbdbd; }

/* --- Tablas --------------------------------------------------------------- */

.md-typeset table:not([class]) {
  font-size: 0.76rem;
  border-radius: 0.4rem;
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  font-weight: 700;
  background: var(--md-default-fg-color--lightest);
}

/* Numeros alineados a la derecha cuando la celda solo tiene digitos */
.md-typeset table:not([class]) td.numero {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --- Etiquetas de seccion en la ficha de una app -------------------------- */

.etiqueta {
  display: inline-block;
  padding: 0.08rem 0.5rem;
  margin: 0 0.2rem 0.2rem 0;
  border-radius: 0.25rem;
  font-size: 0.68rem;
  font-weight: 600;
  background: var(--md-accent-fg-color--transparent);
  color: var(--md-accent-fg-color);
  border: 1px solid var(--md-accent-fg-color);
}

/* --- Pie de pagina -------------------------------------------------------- */

.md-footer-meta {
  font-size: 0.72rem;
}