@charset "UTF-8";
/* ==========================================================================
   ATRAMIA MATERIALES - PANEL DE ADMINISTRACION
   --------------------------------------------------------------------------
   Capa de aplicacion: el lujo es la claridad y la densidad. Tablas legibles,
   cero movimiento decorativo, todo a un clic de distancia.

   Depende de /css/tokens.css. Solo tokens.
   ========================================================================== */

/* ==========================================================================
   1. ESTRUCTURA DE DOS COLUMNAS
   ========================================================================== */

.admin {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 100vh;
  background-color: var(--color-superficie-hundida);
}

/* Sin esto, el minimo automatico de la rejilla es el ancho del contenido
   y la barra de navegacion desborda la pagina en pantallas estrechas. */
.admin__nav,
.admin__contenido {
  min-width: 0;
}

.admin__nav {
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-xs);
  padding: var(--espaciado-lg) var(--espaciado-md);
  background-color: var(--color-superficie);
  border-right: 1px solid var(--color-borde-tenue);
}

.admin__marca {
  font-family: var(--fuente-estructura);
  font-size: var(--texto-base);
  font-weight: var(--peso-titular);
  color: var(--color-texto);
  margin-bottom: var(--espaciado-md);
}

.admin__marca::after {
  content: "";
  display: block;
  width: var(--espaciado-lg);
  height: 2px;
  margin-top: var(--espaciado-2xs);
  background-color: var(--color-acento);
  border-radius: var(--radio-completo);
}

.admin__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin__enlace {
  display: block;
  padding: var(--espaciado-2xs) var(--espaciado-sm);
  font-size: var(--texto-sm);
  color: var(--color-texto-secundario);
  text-decoration: none;
  border-radius: var(--radio-sm);
}

.admin__enlace:hover {
  background-color: var(--color-superficie-tenue);
  color: var(--color-texto);
}

/* El activo se marca con tinte y filete, nunca con relleno solido. */
.admin__enlace--activo {
  background-color: var(--color-acento-tenue);
  color: var(--color-texto-acento);
  font-weight: var(--peso-medio);
  box-shadow: inset 2px 0 0 var(--color-acento);
}

.admin__salir {
  margin-top: auto;
  padding: var(--espaciado-2xs) var(--espaciado-sm);
  font-size: var(--texto-sm);
  color: var(--color-texto-auxiliar);
  text-decoration: none;
}

.admin__salir:hover {
  color: var(--color-texto);
}

.admin__contenido {
  padding: var(--espaciado-xl) var(--espaciado-xl) var(--espaciado-4xl);
  max-width: var(--ancho-ancho);
}

.admin__titulo {
  font-size: var(--texto-seccion);
  font-weight: var(--peso-titular);
  line-height: 1.2;
  margin: 0 0 var(--espaciado-lg);
}

.admin__nota {
  font-size: var(--texto-sm);
  color: var(--color-texto-auxiliar);
  margin: 0 0 var(--espaciado-lg);
}

/* ==========================================================================
   2. AVISO DE SUPLANTACION
   Permanente y muy visible: quien administra debe saber siempre que no
   esta viendo su propia cuenta.
   ========================================================================== */

.suplantacion {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espaciado-md);
  padding: var(--espaciado-2xs) var(--espaciado-md);
  background-color: var(--color-acento);
  color: var(--color-acento-contraste);
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
}

.suplantacion__boton {
  padding: 2px var(--espaciado-sm);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  color: var(--color-acento);
  background-color: var(--color-acento-contraste);
  border: 0;
  border-radius: var(--radio-xs);
  cursor: pointer;
}

/* ==========================================================================
   3. CIFRAS DEL RESUMEN
   ========================================================================== */

.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--espaciado-sm);
  margin-bottom: var(--espaciado-xl);
}

.cifra {
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-3xs, 2px);
  padding: var(--espaciado-md);
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde-tenue);
  border-radius: var(--radio-md);
}

.cifra--alerta {
  border-color: var(--color-error-borde);
  background-color: var(--color-error-fondo);
}

.cifra__valor {
  font-family: var(--fuente-estructura);
  font-size: var(--texto-2xl);
  font-weight: var(--peso-titular);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--color-texto);
}

.cifra__etiqueta {
  font-size: var(--texto-xs);
  color: var(--color-texto-auxiliar);
}

/* ==========================================================================
   4. BLOQUES Y FORMULARIOS
   ========================================================================== */

.bloque {
  padding: var(--espaciado-lg);
  margin-bottom: var(--espaciado-lg);
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde-tenue);
  border-radius: var(--radio-md);
}

.bloque__titulo {
  display: flex;
  align-items: center;
  gap: var(--espaciado-xs);
  font-size: var(--texto-lg);
  font-weight: var(--peso-titular);
  margin: 0 0 var(--espaciado-md);
}

.filtro,
.linea-formulario {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--espaciado-sm);
  margin-bottom: var(--espaciado-lg);
}

.linea-formulario--suelta {
  margin-top: var(--espaciado-md);
  margin-bottom: 0;
}

.filtro__texto {
  flex: 1 1 240px;
  max-width: 360px;
}

.filtro__select {
  flex: 0 0 160px;
}

.linea-formulario__campo {
  display: flex;
  flex-direction: column;
  gap: var(--espaciado-2xs);
  font-size: var(--texto-sm);
  color: var(--color-texto-secundario);
}

.linea-formulario__campo--ancho {
  flex: 1 1 320px;
}

.rejilla-formulario {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--espaciado-md);
  align-items: start;
  margin-bottom: var(--espaciado-md);
}

.campo--ancho {
  grid-column: 1 / -1;
}

.campo--casilla {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--espaciado-xs);
  font-size: var(--texto-sm);
}

.campo--acciones {
  display: flex;
  align-items: flex-end;
}

.entrada-numero {
  max-width: 110px;
  font-variant-numeric: tabular-nums;
}

.pista {
  font-size: var(--texto-sm);
  color: var(--color-texto-auxiliar);
  margin: 0 0 var(--espaciado-md);
}

.vacio {
  padding: var(--espaciado-2xl);
  text-align: center;
  color: var(--color-texto-auxiliar);
  background-color: var(--color-superficie);
  border: 1px dashed var(--color-borde);
  border-radius: var(--radio-md);
}

/* ==========================================================================
   5. TABLAS
   ========================================================================== */

.tabla-envoltorio {
  /* position relative para que el texto solo-lectores (absolute) quede
     contenido aqui y no empuje el ancho de la pagina en movil. */
  position: relative;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde-tenue);
  border-radius: var(--radio-md);
  margin-bottom: var(--espaciado-md);
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-sm);
}

.tabla th {
  padding: var(--espaciado-xs) var(--espaciado-sm);
  text-align: left;
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-texto-auxiliar);
  border-bottom: 1px solid var(--color-borde);
  white-space: nowrap;
}

.tabla td {
  padding: var(--espaciado-xs) var(--espaciado-sm);
  border-bottom: 1px solid var(--color-borde-tenue);
  vertical-align: middle;
}

.tabla tbody tr:last-child td {
  border-bottom: 0;
}

.tabla tbody tr:hover {
  background-color: var(--color-superficie-tenue);
}

.tabla__grupo td {
  padding-top: var(--espaciado-sm);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-texto-auxiliar);
  background-color: var(--color-superficie-tenue);
}

.tabla__grupo:hover td {
  background-color: var(--color-superficie-tenue);
}

.tabla__principal {
  display: block;
  color: var(--color-texto);
}

.tabla__secundario {
  display: block;
  font-size: var(--texto-xs);
  color: var(--color-texto-auxiliar);
}

.tabla__centro {
  text-align: center;
}

.tabla__acciones {
  text-align: right;
  white-space: nowrap;
}

.tabla__detalle {
  max-width: 320px;
  overflow-wrap: anywhere;
}

.tabla--matriz td:not(:first-child) {
  text-align: center;
}

/* ==========================================================================
   6. PASTILLAS Y BARRAS
   ========================================================================== */

.pastilla {
  display: inline-block;
  padding: 1px var(--espaciado-xs);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  border-radius: var(--radio-completo);
  white-space: nowrap;
}

.pastilla--neutro {
  background-color: var(--color-superficie-tenue);
  color: var(--color-texto-secundario);
}

.pastilla--exito {
  background-color: var(--color-exito-fondo);
  color: var(--color-exito-texto);
}

.pastilla--aviso {
  background-color: var(--color-aviso-fondo);
  color: var(--color-aviso-texto);
}

.pastilla--error {
  background-color: var(--color-error-fondo);
  color: var(--color-error-texto);
}

.barra {
  display: block;
  width: 100%;
  max-width: 120px;
  height: 4px;
  margin-top: 3px;
  background-color: var(--color-superficie-tenue);
  border-radius: var(--radio-completo);
  overflow: hidden;
}

.barra__relleno {
  display: block;
  height: 100%;
  background-color: var(--color-acento);
  border-radius: var(--radio-completo);
}

/* ==========================================================================
   7. PAGINACION
   ========================================================================== */

.paginacion {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaciado-2xs);
}

.paginacion__enlace {
  display: inline-block;
  min-width: 32px;
  padding: var(--espaciado-2xs);
  text-align: center;
  font-size: var(--texto-sm);
  color: var(--color-texto-secundario);
  text-decoration: none;
  border: 1px solid var(--color-borde-tenue);
  border-radius: var(--radio-sm);
}

.paginacion__enlace:hover {
  border-color: var(--color-borde-fuerte);
  color: var(--color-texto);
}

.paginacion__enlace--activo {
  background-color: var(--color-acento-tenue);
  border-color: var(--color-acento);
  color: var(--color-texto-acento);
  font-weight: var(--peso-medio);
}

/* ==========================================================================
   8. MOVIL
   ========================================================================== */

@media (max-width: 860px) {
  .admin {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin__nav {
    border-right: 0;
    border-bottom: 1px solid var(--color-borde-tenue);
  }

  .admin__lista {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .admin__salir {
    margin-top: var(--espaciado-xs);
  }

  .admin__contenido {
    padding: var(--espaciado-lg) var(--espaciado-md) var(--espaciado-2xl);
  }
}