/**
 * Estilos Pixel Perfect para Mi Cuenta - Diseño Figma
 * ACM - Associació Catalana de Municipis
 * 
 * Implementación exacta basada en el diseño de Figma
 * @author: ACM Development Team
 * @version: 2.0.0
 */

/* =============================================================================
   VARIABLES CSS - ESPECIFICACIONES FIGMA
   ============================================================================= */
:root {
  /* Colores exactos del diseño */
  --figma-primary: #539ad4;
  --figma-gradient-start: #001b38;
  --figma-gradient-end: #004c9e;
  --figma-text-primary: #000000;
  --figma-text-secondary: rgba(51, 51, 51, 0.96);
  --figma-text-light: #ffffff;
  --figma-gray-100: #f5f5f5;
  --figma-gray-700: #424242;
  --figma-border: #f5f5f5;
  --figma-shadow: rgba(0, 0, 0, 0.06);

  /* Espaciado exacto Figma */
  --figma-gap-main: 24px;
  --figma-gap-cards: 18px;
  --figma-gap-small: 8px;
  --figma-gap-medium: 12px;
  --figma-gap-large: 16px;
  --figma-gap-section: 32px;

  /* Dimensiones exactas */
  --figma-width-total: 1216px;
  --figma-width-dropdown: 240px;
  --figma-border-radius: 10px;
  --figma-border-radius-small: 6px;
  --figma-border-radius-card: 4px;

  /* Tipografía Figma */
  --figma-font-family: "Open Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  --figma-font-secondary: "Poppins", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
}

/* =============================================================================
   RESET Y ESTRUCTURA BASE
   ============================================================================= */

/* FORCE FULL WIDTH - NO SIDEBARS */
.woocommerce-account .acm-myaccount-figma-wrapper {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--figma-gap-main);
  font-family: var(--figma-font-family);
}

/* HIDE ALL SIDEBARS ON ACCOUNT PAGES */
.woocommerce-account #secondary,
.woocommerce-account .sidebar,
.woocommerce-account .widget-area,
.woocommerce-account aside:not(.acm-figma-navigation-dropdown),
.woocommerce-account .dt-sidebar,
.woocommerce-account .secondary-sidebar {
  display: none !important;
}

/* FORCE CONTENT TO FULL WIDTH */
.woocommerce-account #main,
.woocommerce-account .main-content,
.woocommerce-account #content,
.woocommerce-account .content-area {
  width: 100% !important;
  max-width: none !important;
}

/* FORCE MYACCOUNT CONTENT TO AUTO WIDTH */
.woocommerce-account .woocommerce-MyAccount-content {
  width: auto !important;
  max-width: none !important;
  flex: 1 !important;
}

.acm-myaccount-figma-wrapper {
  width: var(--figma-width-total);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--figma-gap-main);
  font-family: var(--figma-font-family);
}

/* Título General */
.acm-figma-heading {
  width: 100%;
}

.acm-figma-title {
  color: #539ad4;
  font-family: "Open Sans", sans-serif;
  font-size: 2.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.045rem;
  margin: 0;
  text-align: left;
}

/* Container principal - CORRECTO según Figma */
.acm-figma-main-container {
  display: flex;
  align-items: flex-start;
  gap: var(--figma-gap-main);
  width: 100%;
}

/* =============================================================================
   NAVEGACIÓN DROPDOWN - PIXEL PERFECT (POSICIÓN CORRECTA)
   ============================================================================= */

.acm-figma-navigation-dropdown {
  width: var(--figma-width-dropdown);
  flex-shrink: 0;
}

.acm-figma-dropdown-menu {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--figma-text-light);
  border-radius: var(--figma-border-radius-small);
  overflow: hidden;
}

/* Header del dropdown */
.acm-figma-dropdown-header {
  padding: 12px 16px;
  background: var(--figma-text-light);
}

.acm-figma-user-greeting {
  font-family: var(--figma-font-family);
  font-size: 14px;
  line-height: 20px;
  color: var(--figma-gray-700);
  margin: 0;
}

.acm-figma-user-greeting .greeting-regular {
  font-weight: 400;
}

.acm-figma-user-greeting .greeting-bold {
  font-weight: 700;
}

/* Divider */
.acm-figma-divider {
  width: 100%;
  height: 1px;
  background: var(--figma-gray-100);
  flex-shrink: 0;
}

/* Menu base */
.acm-figma-dropdown-base {
  display: flex;
  flex-direction: column;
  padding: 4px 0 0;
  background: var(--figma-text-light);
}

/* Dropdown items */
.acm-figma-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--figma-gap-medium);
  padding: 14px 16px;
  text-decoration: none;
  color: var(--figma-text-primary);
  font-family: var(--figma-font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.43;
  transition: all 0.2s ease;
  border-radius: var(--figma-border-radius-small);
}

.acm-figma-dropdown-item:hover {
  background: var(--figma-gray-100);
}

.acm-figma-dropdown-item.acm-active {
  background: var(--figma-primary) !important;
  color: var(--figma-text-light) !important;
  border-radius: var(--figma-border-radius-small);
  text-decoration: none;
}

.acm-figma-dropdown-item.acm-active svg {
  color: var(--figma-text-light) !important;
}

.acm-figma-dropdown-item.acm-active:hover {
  background: var(--figma-primary) !important;
  color: var(--figma-text-light) !important;
  text-decoration: none;
}

.acm-figma-dropdown-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* =============================================================================
   CAMPUS ACM SECTION - Nueva estructura destacada (Figma 2024)
   ============================================================================= */

/* Contenedor principal Campus ACM */
.acm-campus-section {
  display: flex;
  flex-direction: column;
  margin: 0;
}

/* Cuando la sección está expandida, añadir fondo gris sin padding */
.acm-campus-section.acm-section-expanded {
  background: #f7f7f7;
  border-radius: 6px;
}

/* Header Campus ACM - Por defecto se ve como General */
.acm-campus-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  text-decoration: none;
  color: var(--figma-text-primary);
  transition: background-color 0.2s ease;
  border-radius: var(--figma-border-radius-small);
}

/* Hover en estado normal (no activo) */
.acm-campus-header:hover {
  background: var(--figma-gray-100);
}

/* Cuando Campus ACM está activo */
.acm-campus-header.acm-active {
  background: var(--figma-primary) !important;
  border-radius: 6px;
}

.acm-campus-header.acm-active:hover {
  background: #4a8bc2 !important;
}

.acm-campus-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.acm-campus-title span {
  font-family: var(--figma-font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--figma-text-primary);
}

/* Cuando está activo, texto blanco */
.acm-campus-header.acm-active .acm-campus-title span {
  color: #ffffff;
  font-weight: 600;
}

.acm-campus-title svg {
  width: 16px;
  height: 16px;
  color: var(--figma-text-primary) !important;
  flex-shrink: 0;
}

/* Cuando está activo, icono blanco */
.acm-campus-header.acm-active .acm-campus-title svg {
  color: #ffffff !important;
}

.acm-campus-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.acm-campus-chevron svg {
  width: 16px;
  height: 16px;
  color: var(--figma-text-primary) !important;
  transition: transform 0.3s ease;
}

/* Cuando está activo, chevron blanco */
.acm-campus-header.acm-active .acm-campus-chevron svg {
  color: #ffffff !important;
}

/* Subitems Campus ACM */
.acm-campus-subitems {
  display: none;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s ease;
}

.acm-campus-subitems.acm-expanded {
  display: flex;
}

.acm-campus-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 14px 32px;
  font-family: var(--figma-font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--figma-text-primary);
  text-decoration: none;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.acm-campus-item:hover {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
}

.acm-campus-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--figma-text-primary);
}

/* Campus item activo */
.acm-campus-item.acm-active {
  background: var(--figma-primary) !important;
  color: #ffffff !important;
  border-radius: 4px;
}

.acm-campus-item.acm-active svg {
  color: #ffffff !important;
}

.acm-campus-item.acm-active:hover {
  background: #4a8bc2 !important;
}

/* Estado cuando la sección está expandida */
.acm-campus-section.acm-section-expanded {
  background: #f7f7f7;
}

/* Secretaria académica - Sub-items anidados */
.acm-campus-item-parent {
  cursor: pointer;
}

.acm-campus-item-content {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
}

.acm-secretaria-subitems {
  display: none;
  flex-direction: column;
  width: 100%;
  margin-top: 0;
}

.acm-secretaria-subitems.acm-expanded {
  display: flex;
}

.acm-secretaria-subitem {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 10px 16px 10px 48px;
  font-family: var(--figma-font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--figma-text-primary);
  text-decoration: none;
  transition: background-color 0.2s ease;
  position: relative;
}

.acm-secretaria-subitem:hover {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
}

.acm-secretaria-subitem.acm-active {
  background: var(--figma-primary);
  border-radius: 6px;
  font-weight: 600;
  color: #ffffff;
}

.acm-secretaria-subitem.acm-active svg {
  color: #ffffff;
}

/* Iconos más pequeños para sub-items (14px) */
.acm-secretaria-subitem svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--figma-text-primary);
}

/* Bold para "Certificats" */
.acm-secretaria-subitem:first-child span {
  font-weight: 700;
}

/* Líneas conectoras visuales */
.acm-connector-line {
  position: absolute;
  left: 39px;
  top: 1px;
  width: 5px;
  height: 18px;
  border-left: 1px solid #d3cccc;
  border-bottom: 1px solid #d3cccc;
  border-bottom-left-radius: 2px;
}

/* Línea para el segundo item */
.acm-secretaria-subitem:nth-child(2) .acm-connector-line {
  height: 45px;
  top: -26px;
}

/* Línea para el tercer item */
.acm-secretaria-subitem:nth-child(3) .acm-connector-line {
  height: 43px;
  top: -24px;
}

/* Línea para el cuarto item */
.acm-secretaria-subitem:nth-child(4) .acm-connector-line {
  height: 43px;
  top: -24px;
}

/* Línea para el último item */
.acm-secretaria-subitem-last .acm-connector-line {
  height: 43px;
  top: -24px;
}

/* =============================================================================
   SECCIONES COLAPSABLES (Jurídics, Central compres, Altres)
   ============================================================================= */

.acm-section-collapsible {
  display: flex;
  flex-direction: column;
}

.acm-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0 14px 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.acm-section-header:hover {
  background-color: rgba(245, 245, 245, 0.5);
}

.acm-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.acm-section-title span {
  font-family: var(--figma-font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--figma-text-primary);
}

.acm-section-title svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.acm-section-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.acm-section-chevron svg {
  width: 16px;
  height: 16px;
  color: var(--figma-text-primary);
  transition: transform 0.3s ease;
}

/* =============================================================================
   SECCIÓN CON SUBSECCIONES (Legacy - mantener para compatibilidad)
   ============================================================================= */

/* Sección con subsecciones */
.acm-figma-section {
  display: flex;
  flex-direction: column;
  margin: 0px;
  padding: 0;
}

/* Fondo gris cuando la sección está expandida */
.acm-figma-section.acm-section-expanded {
  background: var(--figma-gray-100);

  border-radius: var(--figma-border-radius-small);
  margin: 0px;
}

.acm-figma-sections-container {
  display: flex;
  flex-direction: column;
  padding: 0 0px;
}

.acm-figma-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--figma-gap-medium);
  padding: 14px 0 14px 16px;
  cursor: pointer;
}

.acm-figma-section-title {
  display: flex;
  align-items: center;
  gap: var(--figma-gap-medium);
}

.acm-figma-section-title span {
  font-family: var(--figma-font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.43;
  color: var(--figma-text-primary);
}

/* Subitems - Funcionalidad desplegable */
.acm-figma-subitems {
  display: none;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s ease;
}

.acm-figma-subitems.acm-expanded {
  display: flex;
  background: var(--figma-gray-100);
  border-radius: var(--figma-border-radius-small);
  margin: 0 10px;
}

.acm-figma-subitems .acm-figma-dropdown-item {
  padding: 12px 0 12px 17px;
}

/* Chevron styling según Figma */
.acm-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.acm-chevron svg {
  width: 10px;
  height: 6px;
  color: #000000;
  transition: transform 0.3s ease;
}

/* Headers de sección - estilo original del Figma */
.acm-figma-section-header {
  cursor: pointer;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
}

.acm-figma-section-header:hover {
  background-color: rgba(245, 245, 245, 0.5);
}

/* =============================================================================
   CONTENIDO PRINCIPAL - CORRECTO
   ============================================================================= */

.acm-figma-dashboard-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.acm-figma-main-content {
  display: flex;
  flex-direction: column;
  gap: var(--figma-gap-section);
}

/* Header con avatar */
.acm-figma-header {
  display: flex;
  align-items: flex-start;
  gap: var(--figma-gap-large);
  width: 100%;
}

.acm-figma-avatar-section {
  display: flex;
  align-items: center;
  gap: var(--figma-gap-large);
  flex-shrink: 0;
}

.acm-figma-avatar-container {
  width: 100px;
  height: 100px;
  position: relative;
}

.acm-figma-avatar-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

.acm-figma-user-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--figma-gap-medium);
  padding-top: 2px;
  flex: 1;
}

.acm-figma-date {
  font-family: var(--figma-font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.36;
  color: var(--figma-text-secondary);
}

.acm-figma-user-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.acm-figma-user-name {
  font-family: var(--figma-font-family);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.36;
  color: var(--figma-text-secondary);
  margin: 0;
}

.acm-figma-greeting-text {
  font-family: var(--figma-font-family);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.36;
  color: var(--figma-text-secondary);
  margin: 0;
}

/* =============================================================================
   TARJETAS PRINCIPALES 2x2
   ============================================================================= */

.acm-figma-main-cards {
  display: flex;
  flex-direction: column;
  gap: var(--figma-gap-cards);
  width: 100%;
}

.acm-figma-cards-row {
  display: flex;
  align-items: stretch;
  gap: var(--figma-gap-cards);
  width: 100%;
}

.acm-figma-main-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--figma-gap-cards);
  padding: 16px 24px;
  background: linear-gradient(
    170deg,
    var(--figma-gradient-start) 0%,
    var(--figma-gradient-end) 100%
  );
  border-radius: var(--figma-border-radius);
  box-shadow: 0px 0px 10px var(--figma-shadow);
  position: relative;
  overflow: hidden;
  flex: 1;

  cursor: pointer;
  transition: transform 0.2s ease;

  height: 16.25rem !important;
  padding: 1rem 1.5rem;
  flex-direction: column;
  align-items: center;
  gap: 1.125rem;
  flex: 1 0 0;
}

.acm-figma-main-card:hover {
  transform: translateY(-2px);
}

.acm-figma-card-content {
  display: flex;
  align-items: center;
  width: 100%;
  z-index: 2;
  position: relative;
}

.acm-figma-card-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: -2px;
}

.acm-figma-card-title {
  font-family: var(--figma-font-family);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.36;
  letter-spacing: -0.02em;
  color: var(--figma-text-light);
  margin: 0;
  text-align: center;
}

.acm-figma-card-subtitle {
  font-family: var(--figma-font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.36;
  letter-spacing: -0.02em;
  color: var(--figma-text-light);
  margin: 0;
  text-align: center;
}

.acm-figma-card-image {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  overflow: hidden;
  max-height: 300px;
}

.acm-figma-card-image img {
  width: auto;
  height: auto;
  object-fit: cover;
}

.acm-figma-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0px;
  width: 146.92px;
  height: 141.35px;

  z-index: 1;
  background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="135" height="98" viewBox="0 0 135 98" fill="none"><g clip-path="url(%23clip0_462_4664)"><path d="M-82.3994 93.32L-70.6341 18.3782L-55.0522 16.9039L-67.4088 95.6288L-82.3954 93.3152L-82.3994 93.32ZM-25.3455 88.8526L-17.2619 13.3328L-1.92842 11.8821L-10.3346 90.4291L-25.3455 88.8526ZM-108.111 63.407L-98.8774 21.0548L-83.1135 19.5633L-103.438 112.797L-108.111 63.407ZM-53.7529 105.175L-43.4818 15.8136L-28.1217 14.3603L-38.7534 106.868L-53.7485 105.175L-53.7529 105.175ZM27.3562 98.632L36.323 8.26292L51.6343 6.81425L42.3833 100.096L27.3607 98.6315L27.3562 98.632ZM-10.188 100.261L12.615 10.506L28.5654 8.99691L4.44646 103.917L-10.188 100.261ZM42.4733 104.313L68.9466 5.1718L84.9635 3.65637L57.066 108.142L42.4774 104.308L42.4733 104.313ZM96.5816 114.997L112.559 36.1564L127.359 39.1065L111.377 117.943L96.5771 114.997L96.5816 114.997ZM74.1212 121.766L86.0404 13.618L101.047 15.2439L89.123 123.388L74.1168 121.767L74.1212 121.766Z" fill="white" fill-opacity="0.4"/></g><defs><clipPath id="clip0_462_4664"><rect width="236.708" height="119.587" fill="white" transform="matrix(0.995554 -0.0941939 -0.0941939 -0.995554 -100.736 141.352)"/></clipPath></defs></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  bottom: 0px;
  width: 150px;
  height: 100px;
  left: 0px;
}

/* Ajustes específicos por tarjeta */
.acm-formacio .acm-figma-card-image {
  bottom: -6px;
  right: 0;
  top: auto;
}

.acm-formacio .acm-figma-card-image img {
  width: 370px;
  height: 247px;
}

.acm-juridics .acm-figma-card-image {
  top: auto;
  right: 0;
  bottom: -7px;
}

.acm-juridics .acm-figma-card-image img {
  width: 259px;
  height: 227px;
}

.acm-central-compres .acm-figma-card-image {
  top: auto;
  right: -140px;
  bottom: -87px;
}

.acm-central-compres .acm-figma-card-image img {
  width: 474px;
  height: 309px;
}

.acm-altres .acm-figma-card-image {
  top: auto;
  right: -70px;
  bottom: -7px;
}

.acm-altres .acm-figma-card-image img {
  width: 515px;
  height: 343px;
}

/* =============================================================================
   SECCIÓN ACCESOS RÁPIDOS
   ============================================================================= */

.acm-figma-quick-access {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--figma-gap-cards);
  width: 100%;
  padding-bottom: 1.5rem;
}

.acm-figma-quick-access-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--figma-gap-small);
  width: 100%;
}

.acm-figma-section-title {
  font-family: var(--figma-font-family);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.36;
  letter-spacing: -0.02em;
  color: var(--figma-text-primary);
  margin: 0;
  text-align: left;
  width: 950px;
}

.acm-figma-quick-cards {
  display: flex;
  align-items: stretch;
  gap: 18px;
  width: 100%;
}

.acm-figma-quick-card {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: var(--figma-text-light);
  border: 1px solid #f5f5f5;
  border-radius: 4px;

  flex: 1;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.acm-figma-quick-card.acm-single-line {
  min-height: 65px;
}

.acm-figma-quick-card:hover {
  border-color: var(--figma-primary);
  transform: translateY(-1px);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.06);
}

.acm-figma-quick-icon {
  width: 32px;
  height: 32px;
  background: var(--figma-primary);
  color: var(--figma-text-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.acm-figma-quick-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: -2px;
  flex: 1;
}

.acm-figma-quick-content .acm-single-line {
  gap: 2px;
}

.acm-figma-quick-title {
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.36181640625em;
  letter-spacing: -2%;
  color: #000000;
  margin: 0;
  text-align: left;
}

.acm-figma-quick-subtitle {
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.36181640625em;
  letter-spacing: -2%;
  color: #539ad4;
  margin: 0;
  text-align: left;
}

.acm-figma-quick-arrow {
  top: 7px;
  right: 16px;
  width: 20px;
  height: 20px;
  color: #539ad4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.acm-figma-quick-card.acm-single-line .acm-figma-quick-arrow {
  top: 50%;
  right: 16px;
}

/* =============================================================================
   ORDERS PAGE - PIXEL PERFECT FIGMA
   ============================================================================= */

/* Container principal de orders */
.acm-figma-orders-content {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* Tabla de orders según Figma */
.acm-figma-orders-table {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.06),
    0px 1px 3px 0px rgba(16, 24, 40, 0.1),
    0px 0px 6px 2px rgba(16, 24, 40, 0.04),
    0px 12px 16px -4px rgba(16, 24, 40, 0.08);
  overflow: hidden;
  width: 100%;
}

/* Header de la tabla */
.acm-figma-table-header {
  display: flex;
  background: #539ad4;
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4285714285714286em;
}

.acm-figma-header-cell {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 24px;
  min-height: 1.5rem;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
}

/* Anchos específicos según Figma */
.acm-figma-header-cell.acm-order-number {
  flex: 1;
  min-width: 200px;
}

.acm-figma-header-cell.acm-order-date {
  width: 157px;
  flex-shrink: 0;
}

.acm-figma-header-cell.acm-order-status {
  width: 167px;
  flex-shrink: 0;
  justify-content: center;
}

.acm-figma-header-cell.acm-order-total {
  width: 282px;
  flex-shrink: 0;
}

.acm-figma-header-cell.acm-order-actions {
  width: 94px;
  flex-shrink: 0;
  justify-content: flex-end;
}

/* Chevron en headers */
.acm-figma-header-cell svg {
  width: 10px;
  height: 6px;
  color: #ffffff;
}

/* Cuerpo de la tabla */
.acm-figma-table-body {
  display: flex;
  flex-direction: column;
}

.acm-figma-table-row {
  display: flex;
  border-bottom: 1px solid #e5e5e5;
}

.acm-figma-table-row:last-child {
  border-bottom: none;
}

/* Celdas del cuerpo */
.acm-figma-cell {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  min-height: 72px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4285714285714286em;
  color: #000000;
}

/* Anchos específicos para celdas */
.acm-figma-cell.acm-order-number {
  flex: 1;
  min-width: 200px;
}

.acm-figma-cell.acm-order-date {
  width: 157px;
  flex-shrink: 0;
}

.acm-figma-cell.acm-order-status {
  width: 167px;
  flex-shrink: 0;
  justify-content: center;
}

.acm-figma-cell.acm-order-total {
  width: 282px;
  flex-shrink: 0;
}

.acm-figma-cell.acm-order-actions {
  width: 94px;
  flex-shrink: 0;
  justify-content: flex-end;
  gap: 4px;
  padding: 16px;
}

/* Contenido de celdas */
.acm-figma-cell-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.acm-figma-order-title a {
  font-weight: 600;
  font-size: 14px;
  color: #000000;
  text-decoration: none;
}

.acm-figma-order-title a:hover {
  color: #539ad4;
}

.acm-figma-order-subtitle {
  font-weight: 400;
  font-size: 14px;
  color: #666666;
}

.acm-figma-date-text {
  font-weight: 400;
  font-size: 14px;
  color: #000000;
}

/* Status badge según Figma */
.acm-figma-status-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 6px;
  background: #ecfdf3;
  border-radius: 16px;
  width: fit-content;
}

.acm-figma-status-dot {
  width: 6px;
  height: 6px;
  background: #10b981;
  border-radius: 50%;
  flex-shrink: 0;
}

.acm-figma-status-text {
  font-family: "Open Sans", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.5em;
  color: #065f46;
}

/* Estados específicos */
.acm-status-completed .acm-figma-status-badge {
  background: #ecfdf3;
}

.acm-status-completed .acm-figma-status-dot {
  background: #10b981;
}

.acm-status-completed .acm-figma-status-text {
  color: #065f46;
}

.acm-status-processing .acm-figma-status-badge {
  background: #fef3c7;
}

.acm-status-processing .acm-figma-status-dot {
  background: #f59e0b;
}

.acm-status-processing .acm-figma-status-text {
  color: #92400e;
}

.acm-status-pending .acm-figma-status-badge {
  background: #fee2e2;
}

.acm-status-pending .acm-figma-status-dot {
  background: #ef4444;
}

.acm-status-pending .acm-figma-status-text {
  color: #991b1b;
}

/* Total text */
.acm-figma-total-text {
  font-weight: 400;
  font-size: 14px;
  color: #000000;
}

/* Botón "Veure" según Figma */
.acm-figma-view-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: #539ad4;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4285714285714286em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  transition: all 0.2s ease;
}

.acm-figma-view-button:hover {
  background: #4a8bc2;
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0px 2px 4px 0px rgba(16, 24, 40, 0.1);
}

/* =============================================================================
   RESPONSIVE DESIGN
   ============================================================================= */

@media (max-width: 1280px) {
  .acm-myaccount-figma-wrapper {
    width: 100%;
    max-width: var(--figma-width-total);
    padding: 0 24px;
  }
}

@media (max-width: 1024px) {
  /* Stack cards vertically on tablet and mobile */
  .acm-figma-cards-row {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .acm-figma-main-card {
    width: 100% !important;
    padding: 12px 20px;
    min-height: 200px !important;
  }

  .acm-figma-card-title {
    font-size: 22px;
  }

  .acm-figma-card-subtitle {
    font-size: 14px;
  }

  .acm-figma-quick-card {
    padding: 16px;
  }

  .acm-figma-quick-title {
    font-size: 14px;
  }

  .acm-figma-quick-subtitle {
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .acm-figma-title {
    font-size: 1.875rem; /* 30px */
    letter-spacing: -0.0375rem;
  }

  .acm-figma-main-container {
    flex-direction: column !important;
  }

  .acm-figma-navigation-dropdown {
    width: 100% !important;
    order: -1 !important;
  }

  .acm-figma-main-cards {
    gap: 16px !important;
  }

  .acm-figma-cards-row {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .acm-figma-main-card {
    width: 100% !important;
    min-height: 180px !important;
    height: auto !important;
  }

  .acm-figma-quick-cards {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .acm-figma-quick-card {
    width: 100% !important;
  }

  .acm-figma-header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
  }

  .acm-figma-avatar-section {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .acm-figma-avatar-container {
    width: 80px;
    height: 80px;
  }

  .acm-figma-user-info {
    width: 100%;
    align-items: center;
  }

  .acm-figma-user-details {
    text-align: center;
  }

  .acm-figma-section-title {
    width: 100%;
    font-size: 18px;
  }

  .acm-figma-quick-access {
    margin-top: 24px;
  }
}

@media (max-width: 480px) {
  .acm-figma-title {
    font-size: 1.5rem; /* 24px */
    letter-spacing: -0.03rem;
  }

  .acm-myaccount-figma-wrapper {
    padding: 0 16px;
  }

  .acm-figma-main-card {
    min-height: 200px;
  }

  .acm-figma-card-title {
    font-size: 20px;
  }

  .acm-figma-user-name {
    font-size: 24px;
  }
}

/* =============================================================================
   ORDERS TABLE - Tabla de Comandes (Figma 2024)
   ============================================================================= */

.acm-orders-content-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.acm-orders-table-container {
  background: #ffffff;
  border-radius: 0;
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
    0px 0px 6px 2px rgba(16, 24, 40, 0.04), 0px 1px 3px 0px rgba(16, 24, 40, 0.1),
    0px 1px 2px 0px rgba(16, 24, 40, 0.06);
  overflow: hidden;
}

.acm-orders-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

/* Table Header */
.acm-orders-table thead {
  background: var(--figma-primary);
}

.acm-orders-th {
  padding: 12px 24px;
  text-align: left;
  font-family: var(--figma-font-family);
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  color: #ffffff;
  height: 44px;
}

/* Table Body */
.acm-orders-table tbody {
  background: #ffffff;
}

.acm-orders-row {
  border-bottom: 1px solid #e5e7eb;
  transition: background-color 0.2s ease;
}

.acm-orders-row:hover {
  background-color: rgba(83, 154, 212, 0.02);
}

.acm-orders-td {
  padding: 16px 24px;
  font-family: var(--figma-font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #000000;
  height: 72px;
  vertical-align: middle;
}

/* Número de pedido */
.acm-orders-number {
  flex: 1;
}

.acm-orders-number-wrapper {
  display: flex;
  flex-direction: column;
}

.acm-orders-number-text {
  font-family: var(--figma-font-family);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #000000;
}

/* Fecha */
.acm-orders-date {
  width: 157px;
}

/* Estado - Badge */
.acm-orders-status {
  width: 167px;
  text-align: center;
}

.acm-orders-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 8px;
  border-radius: 16px;
  background: #ecfdf3;
}

/* Badge para estado "completed" / "Completada" */
.acm-badge-completed,
.acm-badge-processing,
.acm-badge-on-hold {
  background: #ecfdf3;
}

.acm-badge-completed .acm-badge-text,
.acm-badge-processing .acm-badge-text,
.acm-badge-on-hold .acm-badge-text {
  color: #067647;
}

.acm-badge-completed .acm-badge-dot,
.acm-badge-processing .acm-badge-dot,
.acm-badge-on-hold .acm-badge-dot {
  background: #17b26a;
}

/* Badge para otros estados */
.acm-badge-pending {
  background: #fef3c7;
}

.acm-badge-pending .acm-badge-text {
  color: #92400e;
}

.acm-badge-pending .acm-badge-dot {
  background: #f59e0b;
}

.acm-badge-cancelled,
.acm-badge-failed {
  background: #fee2e2;
}

.acm-badge-cancelled .acm-badge-text,
.acm-badge-failed .acm-badge-text {
  color: #991b1b;
}

.acm-badge-cancelled .acm-badge-dot,
.acm-badge-failed .acm-badge-dot {
  background: #ef4444;
}

.acm-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.acm-badge-text {
  font-family: var(--figma-font-family);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

/* Total */
.acm-orders-total {
  width: 282px;
}

/* Acciones - Botón "veure" */
.acm-orders-actions {
  width: 94px;
  text-align: right;
}

.acm-orders-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  background: var(--figma-primary);
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  text-decoration: none;
  border-radius: 0;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  transition: all 0.2s ease;
  cursor: pointer;
}

.acm-orders-view-btn:hover {
  background: #4a8bc2;
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0px 2px 4px 0px rgba(16, 24, 40, 0.1);
}

/* Responsive */
@media (max-width: 1024px) {
  .acm-orders-table-container {
    overflow-x: auto;
  }

  .acm-orders-table {
    min-width: 900px;
  }
}

@media (max-width: 768px) {
  .acm-orders-th,
  .acm-orders-td {
    padding: 12px 16px;
    font-size: 12px;
  }

  .acm-orders-number-text {
    font-size: 12px;
  }

  .acm-orders-view-btn {
    padding: 6px 10px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .acm-orders-table {
    min-width: 700px;
  }

  .acm-orders-th,
  .acm-orders-td {
    padding: 8px 12px;
  }
}

/* ========================================
   CURSOS TABLE (ELS MEUS CURSOS) - FIGMA 2024
   ======================================== */

/* Contenedor principal */
.acm-courses-content-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Card principal */
.acm-courses-card {
  background: #ffffff;
  border-radius: 0;
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
    0px 0px 6px 2px rgba(16, 24, 40, 0.04), 0px 1px 3px 0px rgba(16, 24, 40, 0.1),
    0px 1px 2px 0px rgba(16, 24, 40, 0.06);
  overflow: hidden;
  margin-bottom: 24px;
}

/* Header del card */
.acm-courses-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #eaecf0;
}

.acm-courses-card-title {
  font-family: var(--figma-font-family);
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: var(--figma-text-primary);
  margin: 0;
}

.acm-courses-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
  border-radius: 16px;
  padding: 2px 8px;
  font-family: var(--figma-font-family);
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  color: #344054;
}

/* Contenedor de la tabla */
.acm-courses-table-container {
  background: #ffffff;
  overflow-x: auto;
}

/* Tabla base */
.acm-courses-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  font-family: var(--figma-font-family);
}

/* Header de la tabla */
.acm-courses-table thead {
  background: var(--figma-primary);
}

.acm-courses-th {
  padding: 12px 24px;
  text-align: left;
  font-family: var(--figma-font-family);
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  color: #ffffff;
  height: 44px;
  border: none;
}

.acm-courses-th-actions {
  width: 60px;
}

/* Filas */
.acm-courses-row {
  border-bottom: 1px solid #eaecf0;
  transition: background-color 0.2s ease;
}

.acm-courses-row:hover {
  background: #f9fafb;
}

/* Celdas */
.acm-courses-td {
  padding: 16px 24px;
  font-family: var(--figma-font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--figma-text-secondary);
  height: 72px;
  vertical-align: middle;
  border: none;
}

/* Columna Nombre del curso */
.acm-courses-name {
  max-width: 400px;
}

.acm-courses-name-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.acm-courses-name-text {
  font-family: var(--figma-font-family);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--figma-text-primary);
}

.acm-courses-id {
  font-family: var(--figma-font-family);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #667085;
}

/* Columna Inscripciones */
.acm-courses-inscriptions {
  font-family: var(--figma-font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--figma-text-primary);
  text-align: center;
}

/* Columna Fechas */
.acm-courses-dates {
  font-family: var(--figma-font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--figma-text-secondary);
  white-space: nowrap;
}

/* Columna Estado */
.acm-courses-status {
  /* Estilos para badges más abajo */
}

/* Badges de estado - Sistema de tres colores */
.acm-courses-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 6px;
  border-radius: 16px;
  font-family: var(--figma-font-family);
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

/* Badge dot */
.acm-courses-badge .acm-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Badge verde - "Aceptada" */
.acm-badge-accepted {
  background: #ecfdf3;
}

.acm-badge-accepted .acm-badge-text {
  color: #067647;
}

.acm-badge-accepted .acm-badge-dot {
  background: #17b26a;
}

/* Badge azul - "En espera" */
.acm-badge-waiting {
  background: #cdf5f9;
}

.acm-badge-waiting .acm-badge-text {
  color: #175cd3;
}

.acm-badge-waiting .acm-badge-dot {
  background: #1570ef;
}

/* Badge amarillo - "Pagament pendent" */
.acm-badge-pending-payment {
  background: #fdf8ec;
}

.acm-badge-pending-payment .acm-badge-text {
  color: #764706;
}

.acm-badge-pending-payment .acm-badge-dot {
  background: #f59e0b;
}

/* Columna Acciones (flecha) */
.acm-courses-actions {
  text-align: center;
  width: 60px;
}

.acm-courses-arrow-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
  text-decoration: none;
}

.acm-courses-arrow-link:hover {
  background: #f3f4f6;
}

.acm-courses-arrow-link svg {
  width: 20px;
  height: 20px;
  color: #525252;
}

/* Empty state */
.acm-courses-empty-state {
  padding: 48px 24px;
  text-align: center;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
    0px 0px 6px 2px rgba(16, 24, 40, 0.04);
}

.acm-courses-empty-state p {
  font-family: var(--figma-font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--figma-text-secondary);
  margin: 0;
}

/* ========================================
   RESPONSIVE - CURSOS TABLE
   ======================================== */

@media (max-width: 1024px) {
  .acm-courses-th,
  .acm-courses-td {
    padding: 12px 16px;
  }

  .acm-courses-name {
    max-width: 300px;
  }
}

@media (max-width: 768px) {
  .acm-courses-card-header {
    padding: 16px 20px;
  }

  .acm-courses-table-container {
    overflow-x: scroll;
  }

  .acm-courses-table {
    min-width: 700px;
  }

  .acm-courses-th,
  .acm-courses-td {
    padding: 10px 12px;
    font-size: 13px;
  }

  .acm-courses-name-text {
    font-size: 13px;
  }

  .acm-courses-id {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .acm-courses-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .acm-courses-th,
  .acm-courses-td {
    padding: 8px 12px;
  }
}

/* ========================================
   CERTIFICATS PAGE - FIGMA 2024
   ======================================== */

/* Contenedor principal */
.acm-certificats-content-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Sección de introducción */
.acm-certificats-intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.acm-certificats-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.acm-certificats-intro-title {
  font-family: var(--figma-font-family);
  font-weight: 700;
  font-size: 24px;
  line-height: normal;
  color: #000000;
  margin: 0;
}

.acm-certificats-intro-description {
  font-family: var(--figma-font-family);
  font-weight: 400;
  font-size: 18px;
  line-height: 25px;
  color: #000000;
  margin: 0;
}

.acm-certificats-intro-description strong {
  font-weight: 700;
}

/* Botón de acceso a Moodle */
.acm-certificats-moodle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 18px;
  background: var(--figma-primary);
  color: #ffffff;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  border-radius: 0;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  transition: all 0.2s ease;
}

.acm-certificats-moodle-btn:hover {
  background: #4285c4;
  color: #ffffff;
  text-decoration: none;
}

/* Card de tabla */
.acm-certificats-card {
  background: #ffffff;
  border-radius: 0;
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
    0px 0px 6px 2px rgba(16, 24, 40, 0.04), 0px 1px 3px 0px rgba(16, 24, 40, 0.1),
    0px 1px 2px 0px rgba(16, 24, 40, 0.06);
  overflow: hidden;
  width: 952px;
  max-width: 100%;
}

/* Header del card */
.acm-certificats-card-header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 68px;
  padding: 20px 24px 0;
  background: #ffffff;
  border-bottom: 1px solid #e5e5e5;
}

.acm-certificats-card-title {
  font-family: var(--figma-font-family);
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  color: #141414;
  margin: 0;
}

/* Contenedor de la tabla */
.acm-certificats-table-container {
  background: #ffffff;
  overflow-x: auto;
}

/* Tabla base */
.acm-certificats-table {
  width: 100%;
  border-collapse: collapse;
  background: #ffffff;
  font-family: var(--figma-font-family);
}

/* Header de la tabla */
.acm-certificats-table thead {
  background: var(--figma-primary);
}

.acm-certificats-th {
  padding: 12px 24px;
  text-align: left;
  font-family: var(--figma-font-family);
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  color: #ffffff;
  height: 44px;
  border: none;
}

.acm-certificats-th-sortable {
  display: flex;
  align-items: center;
  gap: 4px;
}

.acm-certificats-th-sortable svg {
  width: 10.667px;
  height: 10.667px;
  color: #ffffff;
}

.acm-certificats-th-actions {
  width: 80px;
}

/* Filas */
.acm-certificats-row {
  border-bottom: 1px solid #eaecf0;
  transition: background-color 0.2s ease;
}

.acm-certificats-row:hover {
  background: #f9fafb;
}

/* Celdas */
.acm-certificats-td {
  padding: 16px 24px;
  font-family: var(--figma-font-family);
  height: 72px;
  vertical-align: middle;
  border: none;
}

/* Nombre del certificado */
.acm-certificats-name {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #141414;
}

/* Fechas y código */
.acm-certificats-date,
.acm-certificats-code {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #667085;
}

/* Columna de acciones (botón descarga) */
.acm-certificats-actions {
  text-align: right;
  padding-right: 16px;
}

.acm-certificats-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
  text-decoration: none;
}

.acm-certificats-download-btn:hover {
  background: #f3f4f6;
}

.acm-certificats-download-btn svg {
  width: 20px;
  height: 20px;
  color: #525252;
}

/* Empty state */
.acm-certificats-empty-state {
  padding: 48px 24px;
  text-align: center;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
    0px 0px 6px 2px rgba(16, 24, 40, 0.04);
}

.acm-certificats-empty-state p {
  font-family: var(--figma-font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--figma-text-secondary);
  margin: 0;
}

/* ========================================
   RESPONSIVE - CERTIFICATS PAGE
   ======================================== */

@media (max-width: 1024px) {
  .acm-certificats-card {
    width: 100%;
  }

  .acm-certificats-th,
  .acm-certificats-td {
    padding: 12px 16px;
  }
}

@media (max-width: 768px) {
  .acm-certificats-intro-title {
    font-size: 20px;
  }

  .acm-certificats-intro-description {
    font-size: 16px;
    line-height: 22px;
  }

  .acm-certificats-moodle-btn {
    width: 100%;
    max-width: 400px;
  }

  .acm-certificats-card-header {
    padding: 16px 20px 0;
  }

  .acm-certificats-table-container {
    overflow-x: scroll;
  }

  .acm-certificats-table {
    min-width: 700px;
  }

  .acm-certificats-th,
  .acm-certificats-td {
    padding: 10px 12px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .acm-certificats-intro-title {
    font-size: 18px;
  }

  .acm-certificats-intro-description {
    font-size: 14px;
    line-height: 20px;
  }

  .acm-certificats-th,
  .acm-certificats-td {
    padding: 8px 12px;
  }
}

/* ========================================
   PLACEHOLDER PAGES - GENERAL STYLE
   ======================================== */

.acm-placeholder-content-wrapper {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
}

.acm-placeholder-message {
  background: #ffffff;
  border-radius: 8px;
  padding: 48px 32px;
  text-align: center;
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
    0px 0px 6px 2px rgba(16, 24, 40, 0.04);
}

.acm-placeholder-title {
  font-family: var(--figma-font-family);
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  color: var(--figma-text-primary);
  margin: 0 0 16px 0;
}

.acm-placeholder-description {
  font-family: var(--figma-font-family);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--figma-text-secondary);
  margin: 0;
}

@media (max-width: 768px) {
  .acm-placeholder-content-wrapper {
    padding: 24px 16px;
  }

  .acm-placeholder-message {
    padding: 32px 24px;
  }

  .acm-placeholder-title {
    font-size: 20px;
    line-height: 28px;
  }

  .acm-placeholder-description {
    font-size: 14px;
    line-height: 22px;
  }
}

/* ===================================
   CAMPUS ACM PAGE STYLES
   =================================== */

.acm-campus-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

/* Header con avatar */
.acm-campus-header {
  display: flex;
  gap: 16px;
  align-items: center;
}

.acm-campus-avatar {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  overflow: hidden;
  flex-shrink: 0;
}

.acm-campus-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.acm-campus-user-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 2px;
  justify-content: center;
}

.acm-campus-date {
  font-family: var(--figma-font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: rgba(51, 51, 51, 0.96);
}

.acm-campus-name-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.acm-campus-name {
  font-family: var(--figma-font-family);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  color: rgba(51, 51, 51, 0.96);
  margin: 0;
}

.acm-campus-greeting {
  font-family: var(--figma-font-family);
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  color: rgba(51, 51, 51, 0.96);
  margin: 0;
}

/* Stats Card */
.acm-campus-stats-card {
  background: #ffffff;
  border: 1px solid #efefef;
  border-radius: 10px;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.acm-campus-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.acm-campus-stat-label {
  font-family: var(--figma-font-family);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #475467;
  margin: 0;
}

.acm-campus-stat-value {
  font-family: var(--figma-font-family);
  font-weight: 700;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.72px;
  color: #539ad4;
  margin: 0;
}

.acm-campus-stat-divider {
  width: 1px;
  height: 60px;
  background: #f3f3f3;
  border-radius: 200px;
}

/* Courses Grid */
.acm-campus-courses-grid {
  display: flex;
  gap: 18px;
}

.acm-campus-card {
  background: #ffffff;
  border: 1px solid #efefef;
  border-radius: 10px;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
}

.acm-campus-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.acm-campus-card-title {
  font-family: var(--figma-font-family);
  font-weight: 700;
  font-size: 16px;
  line-height: normal;
  letter-spacing: -0.32px;
  color: #000000;
  margin: 0;
}

.acm-campus-courses-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.acm-campus-course-item {
  display: flex;
  gap: 12px;
  align-items: center;
}

.acm-campus-course-image {
  width: 76px;
  height: 48px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.acm-campus-course-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.acm-campus-course-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.acm-campus-course-title {
  font-family: var(--figma-font-family);
  font-weight: 600;
  font-size: 14px;
  line-height: normal;
  color: #000000;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.acm-campus-progress-bar {
  width: 100%;
  height: 6px;
  position: relative;
  border-radius: 8px;
}

.acm-campus-progress-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: #eaeaea;
  border-radius: 4px;
}

.acm-campus-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 6px;
  background: #539ad4;
  border-radius: 4px;
}

.acm-campus-course-divider {
  width: 100%;
  height: 1px;
  background: #f3f3f3;
  border-radius: 200px;
}

/* Pagination */
.acm-campus-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #eaecf0;
  padding-top: 16px;
}

.acm-campus-pagination-btn {
  background: #ffffff;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-center;
  cursor: pointer;
  width: 36px;
  height: 36px;
}

.acm-campus-pagination-btn:hover {
  background: #f9fafb;
}

.acm-campus-pagination-text {
  font-family: var(--figma-font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #344054;
  margin: 0;
}

.acm-campus-pagination-current,
.acm-campus-pagination-total {
  font-weight: 600;
}

/* Secretaria Section */
.acm-campus-secretaria-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.acm-campus-secretaria-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.acm-campus-secretaria-title-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.acm-campus-secretaria-logo {
  width: 44px;
  height: 29px;
}

.acm-campus-secretaria-title {
  font-family: var(--figma-font-family);
  font-weight: 700;
  font-size: 18px;
  line-height: normal;
  letter-spacing: -0.36px;
  color: #539ad4;
  margin: 0;
}

.acm-campus-secretaria-link {
  font-family: var(--figma-font-family);
  font-weight: 700;
  font-size: 14px;
  line-height: normal;
  letter-spacing: -0.28px;
  color: #539ad4;
  text-decoration: none;
}

.acm-campus-secretaria-link:hover {
  text-decoration: underline;
}

.acm-campus-secretaria-cards {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.acm-campus-secretaria-row {
  display: flex;
  gap: 18px;
}

.acm-campus-secretaria-row-single {
  display: flex;
  gap: 18px;
  width: 467px;
}

.acm-campus-secretaria-card {
  flex: 1;
  height: 158px;
  background: linear-gradient(118.07deg, #001b38 7.64%, #004c9e 203.38%);
  border-radius: 10px;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  transition: transform 0.2s ease;
}

.acm-campus-secretaria-card:hover {
  transform: translateY(-2px);
}

.acm-campus-secretaria-card-half {
  max-width: 467px;
}

.acm-campus-secretaria-card-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding-bottom: 2px;
}

.acm-campus-secretaria-card-title {
  font-family: var(--figma-font-family);
  font-weight: 700;
  font-size: 24px;
  line-height: normal;
  letter-spacing: -0.48px;
  color: #ffffff;
  margin: 0 0 0 0;
}

.acm-campus-secretaria-card-subtitle {
  font-family: var(--figma-font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: normal;
  letter-spacing: -0.28px;
  color: #ffffff;
  margin: 0;
}

.acm-campus-secretaria-card-image {
  position: absolute;
  right: 0;
  top: 5px;
  height: 173px;
  z-index: 1;
  pointer-events: none;
}

.acm-campus-secretaria-card-image img {
  height: 100%;
  width: auto;
  object-fit: cover;
}

/* CTA Button */
.acm-campus-cta {
  display: flex;
}

.acm-campus-cta-btn {
  background: #539ad4;
  color: #ffffff;
  font-family: var(--figma-font-family);
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  padding: 8px 12px;
  border-radius: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  transition: background 0.2s ease;
}

.acm-campus-cta-btn:hover {
  background: #3d88c2;
}

/* Responsive */
@media (max-width: 1024px) {
  .acm-campus-courses-grid {
    flex-direction: column;
  }

  .acm-campus-secretaria-row {
    flex-direction: column;
  }

  .acm-campus-secretaria-row-single {
    width: 100%;
  }

  .acm-campus-secretaria-card-half {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .acm-campus-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .acm-campus-stats-card {
    flex-direction: column;
    padding: 16px;
    gap: 16px;
  }

  .acm-campus-stat-divider {
    width: 100%;
    height: 1px;
  }

  .acm-campus-name {
    font-size: 24px;
  }

  .acm-campus-greeting {
    font-size: 16px;
  }
}

/* ===================================
   ORDERS EMPTY STATE
   =================================== */

.acm-orders-empty-state {
  width: 100%;
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
}

.acm-orders-empty-message {
  background: #ffffff;
  border-radius: 8px;
  padding: 48px 32px;
  text-align: center;
  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
    0px 0px 6px 2px rgba(16, 24, 40, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.acm-orders-empty-title {
  font-family: var(--figma-font-family);
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
  color: var(--figma-text-primary);
  margin: 0;
}

.acm-orders-empty-description {
  font-family: var(--figma-font-family);
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: var(--figma-text-secondary);
  margin: 0;
  max-width: 500px;
}

.acm-orders-empty-btn {
  background: #539ad4;
  color: #ffffff;
  font-family: var(--figma-font-family);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  transition: background 0.2s ease;
}

.acm-orders-empty-btn:hover {
  background: #3d88c2;
}

@media (max-width: 768px) {
  .acm-orders-empty-state {
    padding: 24px 16px;
  }

  .acm-orders-empty-message {
    padding: 32px 24px;
  }

  .acm-orders-empty-title {
    font-size: 20px;
    line-height: 28px;
  }

  .acm-orders-empty-description {
    font-size: 14px;
    line-height: 22px;
  }
}

/* ===================================
   UPLOAD FILES PAGE (Penjar documentació)
   =================================== */

.acm-upload-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

/* Header */
.acm-upload-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.acm-upload-title {
  font-family: var(--figma-font-family);
  font-weight: 700;
  font-size: 24px;
  line-height: normal;
  color: #000000;
  margin: 0;
}

.acm-upload-description {
  font-family: var(--figma-font-family);
  font-weight: 400;
  font-size: 18px;
  line-height: 25px;
  color: #000000;
  margin: 0;
}

/* Sections container */
.acm-upload-sections {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Individual section */
.acm-upload-section {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  align-items: flex-start;
}

/* Label column */
.acm-upload-label {
  flex: 1 0 0;
  max-width: 280px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  line-height: 20px;
  font-size: 14px;
}

.acm-upload-label-title {
  font-family: var(--figma-font-family);
  font-weight: 700;
  color: #539ad4;
  margin: 0;
}

.acm-upload-label-description {
  font-family: var(--figma-font-family);
  font-weight: 400;
  color: #475467;
  margin: 0;
}

/* Upload content column */
.acm-upload-content {
  flex: 1 0 0;
  max-width: 512px;
  min-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Dropzone */
.acm-upload-dropzone {
  background: #f7f7f7;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.acm-upload-dropzone-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  width: 100%;
}

.acm-upload-icon {
  background: #ffffff;
  border-radius: 9999px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.acm-upload-icon svg {
  color: #539ad4;
  stroke: #539ad4;
}

.acm-upload-dropzone-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  width: 100%;
}

.acm-upload-action {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

.acm-upload-btn {
  font-family: var(--figma-font-family);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #539ad4;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}

.acm-upload-btn:hover {
  text-decoration: underline;
}

.acm-upload-or {
  font-family: var(--figma-font-family);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #475467;
}

.acm-upload-hint {
  font-family: var(--figma-font-family);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #475467;
  text-align: center;
  margin: 0;
}

/* Uploaded file item */
.acm-upload-file-item {
  background: #ffffff;
  border: 1px solid #eaecf0;
  padding: 16px;
  display: flex;
  gap: 4px;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

.acm-upload-file-content {
  flex: 1;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
}

/* File icon */
.acm-upload-file-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  position: relative;
}

.acm-upload-file-icon-page {
  position: absolute;
  bottom: 0;
  left: 17.5%;
  right: 2.5%;
  top: 0;
  background: #f9fafb;
  border: 1px solid #d0d5dd;
  border-radius: 2px;
}

.acm-upload-file-icon-label {
  position: absolute;
  bottom: 15%;
  left: 2.5%;
  right: 32.5%;
  top: 45%;
  background: #d92d20;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 10px;
  color: #ffffff;
  padding: 2px 3px;
  box-sizing: border-box;
}

/* File info */
.acm-upload-file-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.acm-upload-file-text {
  display: flex;
  flex-direction: column;
  line-height: 20px;
  font-size: 14px;
  width: 100%;
}

.acm-upload-file-name {
  font-family: var(--figma-font-family);
  font-weight: 600;
  color: #344054;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acm-upload-file-size {
  font-family: var(--figma-font-family);
  font-weight: 400;
  color: #475467;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Progress bar */
.acm-upload-file-progress {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
}

.acm-upload-progress-bar {
  flex: 1;
  height: 8px;
  position: relative;
  border-radius: 8px;
  min-width: 0;
}

.acm-upload-progress-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: #eaecf0;
  border-radius: 9999px;
}

.acm-upload-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 8px;
  background: #539ad4;
  border-radius: 9999px;
}

.acm-upload-progress-text {
  font-family: var(--figma-font-family);
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #344054;
  white-space: nowrap;
}

/* Checkbox */
.acm-upload-file-checkbox {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 16px;
  height: 16px;
  background: #539ad4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.acm-upload-file-checkbox svg {
  color: #ffffff;
  stroke: #ffffff;
}

/* Responsive */
@media (max-width: 768px) {
  .acm-upload-section {
    flex-direction: column;
  }

  .acm-upload-label {
    max-width: 100%;
    min-width: 0;
  }

  .acm-upload-content {
    max-width: 100%;
    min-width: 0;
  }

  .acm-upload-title {
    font-size: 20px;
  }

  .acm-upload-description {
    font-size: 16px;
    line-height: 22px;
  }
}