#categoriaSucursalesContainer {
  margin-top: 16px;
}

/* DRAWER BODY */
.categorias-drawer-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md-12);
}

/* FOOTER */
.categorias-drawer-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-md-12);
  padding: var(--space-lg-16);
  border-top: 1px solid var(--color-border-light);
  background: var(--color-surface);
  flex-shrink: 0;
}

/* UPLOAD */
#categoriaUploadContainer {
  min-height: 220px;
}

/* ICON PREVIEW */
#categoriaIconPreview {
  background: var(--color-preview-bg);
  color: var(--color-primary);
}

/* COLOR PREVIEW */
#categoriaColorPreview {
  border: 1px solid var(--color-border);
}

/* SELECTOR TEXT */
#categoriaIconText,
#categoriaColorText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* TEXTAREA */
#categoriaDescripcion {
  min-height: 120px;
}

/* DRAWER SCROLL */
.global-drawer-body {
  scroll-behavior: smooth;
}

/* ACTIVE PREVIEW */
.categorias-drawer-preview-active {
  border: 2px solid var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* IMAGE PREVIEW */
.categorias-drawer-image-preview {
  width: 100%;
  height: 220px;
  border-radius: var(--radius-lg-16);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface-secondary);
}

.categorias-drawer-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* SECTION TITLE */
.categorias-drawer-section-title {
  font-size: var(--font-md-14);
  font-weight: var(--font-semibold-600);
  color: var(--color-text);
  margin-bottom: var(--space-sm-08);
}

/* SWITCH BLOCK */
.categorias-drawer-switch-block {
  padding-top: var(--space-sm-08);
  border-top: 1px solid var(--color-border-light);
}

/* SUCURSALES */
.categorias-drawer-sucursales-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-md-12);
}

.categorias-drawer-sucursal-card {
  padding: var(--space-md-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg-16);
  background: var(--color-card-bg);
}

.categorias-drawer-sucursal-name {
  font-size: var(--font-md-14);
  font-weight: var(--font-semibold-600);
  color: var(--color-text);
}

.categorias-drawer-sucursal-desc {
  margin-top: 2px;
  font-size: var(--font-sm-12);
  color: var(--color-text-secondary);
}

/* INFO CARD */
.categorias-drawer-info-card {
  margin-bottom: var(--space-md-12);
}

/* IMAGENES CATEGORIA */
.categorias-drawer-images-grid {
  display: flex;
  align-items: center;
  gap: var(--space-md-12);
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: var(--space-xs-04) 0;
}

.categorias-drawer-image-item {
  position: relative;
  flex-shrink: 0;
}

.categorias-drawer-image-preview {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--color-border);
  background: var(--color-surface-secondary);
  box-shadow: var(--shadow-xs);
}

.categorias-drawer-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* IMAGEN PRINCIPAL */
.categorias-drawer-image-principal {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-warning);
  color: var(--color-text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  box-shadow: var(--shadow-sm);
  z-index: 2;
  cursor: pointer;
}

.categorias-drawer-image-principal.active {
  background: var(--color-success);
}

/* ELIMINAR */
.categorias-drawer-image-delete {
  position: absolute;
  right: -4px;
  top: -4px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: var(--color-error);
  color: var(--color-text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 11px;
  box-shadow: var(--shadow-sm);
  z-index: 2;
}

.categorias-drawer-image-delete:hover {
  filter: brightness(0.92);
}

/* BOTON AGREGAR */
.categorias-drawer-images-toolbar {
  margin-bottom: var(--space-md-12);
}

/* SCROLL */
.categorias-drawer-images-grid::-webkit-scrollbar {
  height: 6px;
}

.categorias-drawer-images-grid::-webkit-scrollbar-thumb {
  background: var(--color-scroll-thumb);
  border-radius: 999px;
}

.categorias-sucursales-categoria-info {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 14px 16px;

  border-radius: var(--radius-lg-16);

  background: var(--color-primary-light);

  border: 1px solid var(--color-primary);
}

.categorias-sucursales-categoria-info i {
  font-size: 18px;
  color: var(--color-primary);
}

.categorias-sucursales-categoria-info span {
  font-size: var(--font-md-14);
  font-weight: var(--font-semibold-600);
  color: var(--color-text);
}

#categoriaSucursalesContainer {
  margin-top: 16px;

  display: flex;
  flex-direction: column;

  gap: 12px;
}

.categorias-sucursales-item {
  padding: 14px 16px;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-lg-16);

  background: var(--color-surface);

  display: flex;

  align-items: center;

  justify-content: space-between;

  transition: all 0.2s ease;
}

.categorias-sucursales-item:hover {
  border-color: var(--color-primary);

  box-shadow: var(--shadow-sm);
}

/* MOBILE */
@media (max-width: 768px) {
  .categorias-drawer-footer {
    flex-direction: column-reverse;
  }
  .categorias-drawer-footer button {
    width: 100%;
  }
  #categoriaUploadContainer {
    min-height: 180px;
  }
}