/* =============================================================================
   MOLECULAS - dos o tres atomos que solo tienen sentido juntos.

   Una molecula define la RELACION entre sus piezas -que va al lado de que, con
   cuanto aire- pero no vuelve a definir las piezas. Si aqui aparece un color,
   casi siempre significa que faltaba un atomo.
============================================================================= */

/* --- Formulario en linea -------------------------------------------------
   Varias acciones seguidas en una celda de tabla. Cada una es su propio
   formulario porque cada una hace algo distinto; van en linea para que se lean
   como una sola fila de opciones. */

.inline-form, .sesion form { display: inline; }
.inline-form select { width: auto; padding: .2rem var(--espacio-1); font-size: var(--texto-sm); }

/* Cambio de rol desde la propia fila: select y boton pegados. */
.fila-rol { display: inline-flex; align-items: center; gap: var(--espacio-1); }
.fila-rol select { margin: 0; }

/* --- Grupo de acciones ---------------------------------------------------- */

.acciones {
  display: flex;
  gap: var(--espacio-3);
  align-items: center;
  flex-shrink: 0;
}

/* --- Meta ----------------------------------------------------------------
   Etiquetas y datos sueltos bajo un nombre. */

.meta {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  font-size: .82rem;
  margin-top: .15rem;
  flex-wrap: wrap;
}

/* --- Casilla con texto ---------------------------------------------------- */

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--espacio-2);
  margin: var(--espacio-1) 0 0;
  font-size: var(--texto-base);
  color: var(--color-texto);
}

.check input { width: auto; margin-top: var(--espacio-1); }

/* --- Aviso ---------------------------------------------------------------- */

.aviso {
  padding: .7rem .9rem;
  border-radius: var(--radio);
  border: var(--borde-fino) solid;
  margin: 0 0 var(--espacio-5);
}

.error { background: var(--color-peligro-fondo); border-color: var(--color-peligro-borde); color: var(--color-peligro-texto); }
.info  { background: var(--color-aviso-fondo);   border-color: var(--color-aviso-borde);   color: var(--color-aviso-texto); }

/* --- Detalle plegable ----------------------------------------------------
   Contexto que importa cuando algo falla, pero que no tiene por que ocupar
   sitio el resto del tiempo. */

.detalle { margin: .6rem 0; }
.detalle summary { cursor: pointer; color: var(--color-texto-tenue); font-size: var(--texto-sm); }
.detalle summary:hover { color: var(--color-texto); }
.detalle[open] summary { margin-bottom: var(--espacio-1); }

/* --- Esqueleto ------------------------------------------------------------
   Varios huesos apilados. Se usa SOLO cuando el dato aun no existe, nunca
   como adorno: un esqueleto donde en realidad hay un cero enganaria mas que
   informar. */

.esqueleto {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  margin: .9rem 0;
}

/* --- Filtros -------------------------------------------------------------- */

.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--espacio-3);
  margin: var(--espacio-5) 0;
  padding: .9rem;
  border: var(--borde-fino) solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-superficie);
}

.filtros .campo { display: flex; flex-direction: column; gap: var(--espacio-1); }
.filtros .campo label { font-size: var(--texto-sm); color: var(--color-texto-tenue); margin: 0; }
.filtros .campo input,
.filtros .campo select { margin: 0; }
.filtros .campo:first-child { flex: 1 1 14rem; }

.campo-acciones { flex-direction: row; align-items: center; gap: var(--espacio-3); }

/* --- Paginador -----------------------------------------------------------
   El rango a un lado, los saltos al otro. */

.paginador {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  padding-top: .8rem;
  font-size: var(--texto-sm);
}

.paginador-botones { display: flex; align-items: center; gap: .9rem; }

/* --- Miniatura de mapa ---------------------------------------------------- */

.miniatura {
  flex: 0 0 72px;
  width: 72px;
  height: 48px;
  border-radius: var(--radio-sm);
  overflow: hidden;
  background: var(--color-fondo);
  border: var(--borde-fino) solid var(--color-borde);
  display: flex;
  align-items: center;
  justify-content: center;
}

.miniatura img { width: 100%; height: 100%; object-fit: cover; }

.sin-icono {
  font-size: .6rem;
  text-align: center;
  color: var(--color-texto-tenue);
  text-transform: uppercase;
  letter-spacing: var(--espaciado-versal);
}

.datos { flex: 1; min-width: 0; }
.datos strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Acciones de una fila ------------------------------------------------
   Cada accion es su propio formulario, porque cada una hace algo distinto.
   Se agrupan aqui para que se lean como una sola fila de opciones y queden
   alineadas de una fila a otra. */

.acciones-fila {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .1rem;
}

.acciones-fila form { display: inline-flex; }

/* --- Campos en rejilla ---------------------------------------------------
   Un formulario donde todo va en su propia fila desperdicia el ancho y obliga
   a desplazarse por campos que caben de sobra al lado. Los cortos comparten
   fila; los que necesitan sitio piden la fila entera.

   auto-fit y no un numero de columnas fijo: en un dialogo estrecho o en el
   movil se apilan solos, sin media queries. */

.campos {
  display: grid;
  /* 14rem y no menos: con un minimo pequeno caben tres columnas en un dialogo
     y un campo solo en su fila se queda a un tercio de ancho, que parece roto.
     Con este minimo salen dos, y un campo suelto ocupa la mitad. */
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--espacio-2) var(--espacio-3);
  align-items: end;
}

/* Ocupa toda la fila: nombres y semillas necesitan sitio para leerse. */
.campo-ancho { grid-column: 1 / -1; }

/* El primer label de cada celda no lleva el margen de arriba, o la rejilla
   queda con las filas desalineadas. */
.campos > div > label:first-child { margin-top: 0; }

/* --- Eleccion de edicion -------------------------------------------------
   Radios en vez de un desplegable para que CSS pueda ensenar la lista de
   versiones que corresponde. Sin JavaScript no hay forma de repoblar un
   <select> al cambiar de edicion. */

.edicion .opciones { display: flex; gap: var(--espacio-4); margin-bottom: var(--espacio-2); }

.opcion { display: inline-flex; align-items: center; gap: var(--espacio-1); margin: 0; cursor: pointer; }
.opcion input { width: auto; margin: 0; }
.opcion span { color: var(--color-texto); }

/* Lo que corresponde a la edicion que NO esta marcada se oculta.
   Se cuelga del formulario entero y no del grupo de edicion: hay campos que
   dependen de la edicion mas abajo -el tipo de terreno- y encerrarlos junto a
   los radios solo para que el selector alcanzara habria sido acomodar el HTML
   a una limitacion del CSS. */
form:has(#ed-bedrock:checked) .solo-java,
form:has(#ed-java:checked) .solo-bedrock { display: none; }

/* --- Lista simple --------------------------------------------------------
   Un resumen de dos o tres lineas dentro de un panel: los complementos y si
   estan puestos. Sin vinetas, porque la etiqueta de estado ya hace de marca y
   dos marcas por linea es una de mas. */

.lista-simple {
  list-style: none;
  margin: var(--espacio-3) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-2);
  font-size: var(--texto-sm);
}

.lista-simple li {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
}

/* --- Grupo de etiquetas ---------------------------------------------------
   Varias etiquetas seguidas en una celda. Sueltas se pegaban unas a otras y,
   al no caber, partian por donde les tocaba dejando una sola descolgada. */

.etiquetas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espacio-2);
}

/* --- Ficha de complemento -------------------------------------------------
   Un complemento con su estado, su documentacion y el campo para cambiarle la
   version. Va en su propio recuadro porque son varias cosas por complemento, y
   en una tabla no cabrian sin apretarlas. */

.tarjeta-plugin {
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: var(--espacio-3);
  margin-bottom: var(--espacio-3);
}

.tarjeta-plugin .ayuda { margin-top: var(--espacio-2); }