/* ============================================================
   Tricolor — Ajustes propios de la administracion
   (se carga despues de estilo.css, heredado de los otros sistemas)
   ============================================================ */

.pagina-cabeza h1 { display: flex; align-items: center; gap: 10px; }

/* Rejilla de ambientes */
.rejilla-admin {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 16px;
}
.rejilla-admin .tarjeta { padding: 14px; }
.miniatura {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 10px; background: #eceff4; display: block; margin-bottom: 10px;
}
.acciones-tarjeta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.previa { max-width: 100%; border-radius: 10px; border: 1px solid #e2e6ee; display: block; }

/* Paleta */
.filtros-familias { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 6px; }
.filtros-familias .chip { text-decoration: none; }

.rejilla-colores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.ficha-color {
  display: flex; gap: 12px;
  background: #fff; border: 1px solid #e2e6ee; border-radius: 12px; padding: 12px;
}
.ficha-color .tono {
  width: 62px; height: 62px; border-radius: 10px; flex: 0 0 auto;
  border: 1px solid rgba(27,31,42,.12); display: block;
}
.ficha-color .datos { min-width: 0; }
.ficha-color .datos b { display: block; font-size: 15px; }
.ficha-color .datos .mini { display: block; }

pre.ejemplo {
  background: #f4f6fa; border: 1px solid #e2e6ee; border-radius: 10px;
  padding: 14px 16px; font-size: 13px; overflow-x: auto; line-height: 1.6;
}

textarea { width: 100%; font-family: inherit; font-size: 14px; padding: 10px 12px;
  border: 1px solid #d8dce4; border-radius: 10px; }