/* Hereda del tema (af-app-plugins, af-app-pages); solo casuística de negocio */

.af-servicios--embedded .af-app-usuario-shell {
  grid-template-columns: 1fr;
}
.af-servicios--embedded.af-app-usuario-wrapper {
  padding: clamp(16px, 1.2vw + 10px, 28px);
}
.af-servicios--embedded,
.af-servicios--embedded .af-app-usuario-main {
  min-width: 0;
}

.af-services-form select,
.af-services-form input,
.af-services-form textarea {
  min-height: 44px;
}

/* Campo color para categorías - específico servicios */
.af-color-field {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.af-color-field input[type="color"] {
  width: 64px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--af-usuario-border, rgba(9, 174, 184, 0.12));
  border-radius: 0;
  background: #fff;
}
.af-color-badge {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 0;
  border: 1px solid rgba(15, 23, 42, 0.18);
  vertical-align: middle;
  margin-right: 8px;
}
.af-color-text {
  font-size: 12px;
  color: var(--af-usuario-muted, #4b4f58);
}

.af-services-wrapper .af-app-table-wrapper {
  margin-top: 24px;
}

/* Botones compactos en tabla */
.af-services-wrapper .af-app-table__actions .af-app-usuario-button {
  padding: 8px 14px;
  font-size: 13px;
}

@media (max-width: 720px) {
  .af-services-wrapper .af-app-table__actions .af-app-usuario-button--danger {
    padding: 8px 14px;
    font-size: 13px;
    width: auto;
  }
}

/* Separador bajo el header del formulario "Añadir nuevo" */
#af-app-servicios-section-form .af-app-usuario-section__header {
  border-bottom: 1px solid var(--af-usuario-border, rgba(9, 174, 184, 0.12));
  padding-bottom: 12px;
}
#af-app-servicios-section-form .af-app-usuario-form {
  margin-top: 18px;
}

/* Hover sutil en filas de ambas tablas */
.af-services-wrapper .af-app-table tbody tr:hover td {
  background: rgba(9, 174, 184, 0.05);
}

/* Botón submit: corregir herencia de ancho global (Foundation/WP) */
.af-services-wrapper .af-app-usuario-button--primary {
  width: auto;
  min-width: 160px;
}

/* Grid del formulario de categorías: nombre más ancho que color */
.af-services-wrapper .af-services-category-grid {
  grid-template-columns: 2fr 1fr;
}

@media (max-width: 600px) {
  .af-services-wrapper .af-services-category-grid {
    grid-template-columns: 1fr;
  }
}

/* Sidebar: título y nav */
.af-services-wrapper .af-app-usuario-profile-role {
  font-size: 18px;
  font-weight: 600;
  opacity: 0.9;
}
.af-services-wrapper .af-app-usuario-aside {
  border-radius: var(--af-usuario-radius, 0);
  padding: 28px 24px;
}
.af-services-wrapper .af-app-usuario-avatar {
  width: 62px;
  height: 62px;
  border-radius: 50%;  /* Avatar de persona: círculo (excepción al rectangular) */
}
.af-services-wrapper .af-app-usuario-nav__item {
  display: flex;
  align-items: center;
  min-height: 44px;
  line-height: 1.2;
  font-size: 16px;
}
.af-services-wrapper .af-app-usuario-nav__item.is-active {
  background: rgba(9, 174, 184, 0.18);
  border-color: rgba(9, 174, 184, 0.35);
}
.af-services-wrapper .af-app-usuario-nav__item span {
  line-height: 1.2;
}
.af-services-wrapper .af-app-usuario-profile-card {
  gap: 16px;
}