/*
 * tenant-create.css
 * ------------------
 * Cargado por: panel/tircloud_panel/templates/base.html (siempre, en la
 * cabecera común de toda la aplicación):
 *   <link rel="stylesheet" href=".../tenant-create.css">
 * Al estar en base.html se aplica en cualquier página, pero sus clases
 * solo se usan realmente dentro del diálogo/formulario global de "Crear
 * tenant" (accesible desde la navegación principal en cualquier
 * pantalla del panel, de ahí que se cargue globalmente en vez de en una
 * plantilla específica): la barra visual de asignación de
 * almacenamiento entre bases de datos/filestore y el estado de error del
 * formulario avanzado de creación.
 */

/* Bloque de "asignación de almacenamiento" del formulario de creación de
   tenant: muestra cómo se reparte el disco contratado (p.ej. entre base
   de datos y filestore) con una barra de progreso y su detalle numérico,
   en una grilla de 3 columnas (etiqueta, etiqueta, barra/detalle). */
.storage-allocation {
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  display: grid;
  gap: 6px 18px;
  grid-template-columns: max-content max-content minmax(180px, 1fr);
  padding: 10px 12px;
}
/* Etiqueta (span) de cada valor dentro del bloque (p.ej. "Usado" /
   "Disponible"): en mayúsculas, tamaño mínimo y color atenuado, siguiendo
   el patrón de "eyebrow" del resto del panel. */
.storage-allocation > div span {
  color: var(--muted);
  display: block;
  font-size: 9px;
  text-transform: uppercase;
}
/* Valor numérico destacado (p.ej. "3.2 GB") debajo de cada etiqueta. */
.storage-allocation > div strong { font-size: 14px; }
/* Barra de progreso nativa que representa gráficamente el porcentaje de
   almacenamiento usado del contrato: coloreada con el color primario del
   panel, ocupa el ancho completo de su columna (ver también la regla de
   la media query, que la hace ocupar el ancho de las 2 columnas en
   móvil). */
.storage-allocation progress {
  accent-color: var(--primary);
  height: 8px;
  width: 100%;
}
/* Texto explicativo debajo de la barra de progreso (p.ej. "Quedan X GB
   disponibles en el contrato"): ocupa el ancho completo de las 3
   columnas de la grilla (grid-column:1/-1) para ir en su propia fila. */
.storage-allocation p {
  color: var(--muted);
  font-size: 10px;
  grid-column: 1 / -1;
}
/* Estado inválido del bloque de almacenamiento (p.ej. cuando el tamaño
   solicitado supera lo disponible en el contrato): fondo/borde en rojo
   de "peligro" en vez del fondo/borde neutros por defecto. */
.storage-allocation.is-invalid {
  background: var(--danger-bg);
  border-color: var(--red);
}
/* En estado inválido, tanto el texto explicativo (p) como el valor
   "disponible" (marcado en el HTML con el atributo de datos
   [data-storage-available], usado también por JavaScript para
   actualizar ese número dinámicamente) cambian a color rojo para
   resaltar el problema. */
.storage-allocation.is-invalid p,
.storage-allocation.is-invalid [data-storage-available] { color: var(--red); }
/* Cualquier botón deshabilitado dentro del formulario avanzado de
   creación de tenant (p.ej. el botón de "Crear" mientras el
   almacenamiento solicitado es inválido, ver .is-invalid arriba): se
   atenúa y cambia el cursor para indicar que no es interactivo. */
.advanced-form button:disabled {
  cursor: not-allowed;
  opacity: .5;
}
/* Responsive (<=680px): la grilla de 3 columnas (etiqueta, etiqueta,
   barra) pasa a 2 columnas iguales, y la barra de progreso pasa a
   ocupar toda la fila (grid-column:1/-1) en vez de compartir columna con
   las etiquetas, para que no quede demasiado angosta. */
@media (max-width: 680px) {
  .storage-allocation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .storage-allocation progress { grid-column: 1 / -1; }
}