.enarmango-dashboard {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columnas en desktop por defecto */
    gap: 1.5rem;
    width: 100%;        /* Ocupa el 100% del ancho de su contenedor padre */
    max-width: 100%;    /* No exceder el 100% del ancho del padre */
    box-sizing: border-box; /* Padding y border se incluyen en el width/height */
    margin-left: auto;  /* Centrar el grid si el padre es más ancho (opcional) */
    margin-right: auto; /* Centrar el grid si el padre es más ancho (opcional) */
    /* Añadir un max-width si quieres limitar el ancho en pantallas muy grandes */
    /* max-width: 1200px; */
}

.circle-wrapper {
  display: inline-block;
  width: 120px; /* Ajusta a tu gusto */
  height: 120px;
  margin: 0 auto;
  position: relative;
  text-align: center;
}
.circular-chart {
  max-width: 100%;
  max-height: 100%;
  display: block;
  margin: 0 auto;
}
.circle-bg {
  fill: none;
  stroke: #eee; /* color de fondo del círculo */
  stroke-width: 3.8;
}
.circle {
  fill: none;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke: #4caf50;  /* color del trazo del progreso */
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dasharray 1s ease-out;
}
.percentage {
  font-size: 0.6em;
  text-anchor: middle;
  fill: #333;
  font-weight: bold;
  dominant-baseline: middle;
}

.spinner {
  border: 3px solid #f3f3f3; /* Gris claro */
  border-top: 3px solid #005073; /* Azul oscuro */
  border-radius: 50%;
  width: 18px;
  height: 18px;
  animation: spin 1s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

  /* *** NUEVOS ESTILOS para la tarjeta de historial *** */
  .enarmango-sim-history-card {
      /* Hereda .enarmango-card o define estilos específicos */
      /*grid-column: span 2; /* Hacer que ocupe las dos columnas si quieres */
      /* O quitar grid-column si quieres que sea una tarjeta más */
  }
  .enarmango-sim-list {
      list-style: none;
      padding: 0;
      margin: 0;
      max-height: 400px; /* Altura máxima con scroll si hay muchos */
      overflow-y: auto; /* Habilitar scroll vertical */
      border-top: 1px solid #eee; /* Separador opcional */
      margin-top: 1em; /* Espacio antes de la lista */
  }
  .enarmango-sim-list li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 5px; /* Padding vertical y un poco horizontal */
      border-bottom: 1px solid #f0f0f0;
      gap: 10px; /* Espacio entre info y acción */
  }
   .enarmango-sim-list li:last-child {
       border-bottom: none;
   }
  .sim-info {
      flex-grow: 1; /* Ocupa el espacio disponible */
      display: flex;
      flex-direction: column; /* Título arriba, estado abajo */
      gap: 2px;
      overflow: hidden; /* Para truncar texto largo si es necesario */
  }
  .sim-title {
      font-weight: 600;
      color: #333;
      white-space: nowrap; /* Evitar salto de línea */
      overflow: hidden; /* Ocultar desbordamiento */
      text-overflow: ellipsis; /* Añadir ... */
      font-size: 0.95em;
  }
  .sim-status {
      font-size: 0.85em;
      color: #555;
  }
  .sim-status.in-progress { /* Clase específica para 'En proceso' */
      font-style: italic;
      color: #888;
  }
   .sim-status.score { /* Clase específica para puntajes */
       font-weight: bold;
   }
  .sim-action {
      flex-shrink: 0; /* Evita que el botón se encoja */
  }
  .sim-link {
      /* Reutiliza tu clase .enarmango-button o crea una nueva */
      display: inline-block;
      padding: 5px 12px; /* Botón más pequeño */
      background: #0073aa; /* Azul o el color que prefieras */
      color: #fff !important; /* Forzar color blanco */
      text-decoration: none !important;
      border-radius: 4px;
      font-size: 0.8em; /* Letra más pequeña */
      text-align: center;
      min-width: 100px; /* Ancho mínimo para alinear botones */
      box-sizing: border-box;
  }
  .sim-link:hover {
      background: #005073; /* Color al pasar el ratón */
  }
   .sim-link.view-results { background-color: #4CAF50; } /* Verde para resultados */
   .sim-link.view-results:hover { background-color: #45a049; }
   .sim-link.view-ranking { background-color: #2196F3; } /* Azul para ranking */
   .sim-link.view-ranking:hover { background-color: #1e88e5; }
   .sim-link.continue-sim { background-color: #ff9800; } /* Naranja para continuar */
   .sim-link.continue-sim:hover { background-color: #fb8c00; }

   .no-sims-message {
       text-align: center;
       color: #777;
       padding: 20px;
       font-style: italic;
   }
   
.sim-action {
    display: flex; /* Para alinear botones horizontalmente */
    gap: 8px; /* Espacio entre botones */
    align-items: center;
}

.sim-link.btn-redo-simulador {
    background-color: #6c757d; /* Gris neutro */
    padding: 5px 8px; /* Hacerlo más cuadrado para el icono */
    min-width: auto; /* Quitar ancho mínimo si solo es icono */
    font-size: 1em; /* Ajustar tamaño del icono si es necesario */
    line-height: 1; /* Asegurar que el icono se centre bien */
}
.sim-link.btn-redo-simulador:hover {
    background-color: #5a6268;
}
/* Estilo para cuando está cargando (se añade/quita con JS) */
.sim-link.btn-redo-simulador.loading {
    cursor: wait;
    opacity: 0.7;
}
.sim-link.btn-redo-simulador.loading::before {
     content: '⏳'; /* O un spinner CSS */
     margin-right: 3px;
     display: inline-block;
     animation: spin 1s linear infinite; /* Reutiliza tu animación de spinner */
}

/***** Portada no registrados ****/

.enarmango-button {
    display: inline-block;
    margin: 0.3em;
    padding: 0.6em 1.2em;
    background: #0073aa;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 500;
  }
  .enarmango-button:hover {
    background: #008bc9;
  }

.spinner {
  border: 3px solid #f3f3f3; /* Gris claro */
  border-top: 3px solid #005073; /* Azul oscuro */
  border-radius: 50%;
  width: 18px;
  height: 18px;
  animation: spin 1s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* --- Estilos para el Contenedor del Gráfico --- */
.enarmango-chart-container {
    position: relative; /* MUY IMPORTANTE para que Chart.js calcule el tamaño */
    width: 100%;      /* Ocupa el ancho disponible de la tarjeta */
    max-width: 100%;  /* Asegura que no se desborde de la tarjeta */
    height: 280px;    /* Altura fija razonable para desktop */
    margin: 20px 0;   /* Margen vertical, sin margen horizontal 'auto' */
}




/* --- Ajustes menores generales (ya los tenías, solo confirmar/ajustar) --- */


.enarmango-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1em 1.5em;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    box-sizing: border-box; /* Asegura que el padding no aumente el tamaño total */
    overflow: hidden;
    position: relative;
}

/* Título dentro de la tarjeta */
.enarmango-card h2 {
    margin-top: 0;
    word-break: break-word; /* Romper palabras largas si es necesario */
}

/* Título de sección (H4) */
.enarmango-card h4 {
     word-break: break-word; /* También aplicar a h4 */
}

/* La tarjeta del historial ocupa 2 columnas en desktop por defecto */
.enarmango-sim-history-card {
    grid-column: span 2;
}


/* El contenedor que añadiste */
.enarmango-heatmap {
    width: 100%;       /* Asegura que ocupe el ancho disponible */
    overflow-x: auto;  /* Mantiene el scroll horizontal si es necesario en pantallas pequeñas */
    padding-bottom: 5px; /* Pequeño espacio por si aparece la barra de scroll */
    box-sizing: border-box;
}

/* La tabla dentro del contenedor */
.enarmango-heatmap table {
    border-collapse: collapse !important; /* Forzar colapso */
    border-spacing: 0 !important;           /* Elimina cualquier espacio entre celdas */
    width: auto;             /* Que la tabla tome el ancho de su contenido */
    /* Opcional: Si quieres que se centre dentro del div si hay espacio de sobra */
    /* margin-left: auto; */
    /* margin-right: auto; */
}

/* Celdas de etiquetas de día (Lun, Mar...) - la primera celda de cada fila */
.enarmango-heatmap tbody tr td:first-child {
    /* Forzar sobreescritura de estilos inline conflictivos */
    padding: 0 2px 0 4px !important;   /* Quitar padding derecho, forzar */
    text-align: right !important;      /* Alinear a la derecha, forzar */
    line-height: 10px !important;     /* Mantener line-height del PHP, forzar */
    font-size: 12px !important;      /* Mantener font-size del PHP, forzar */
    vertical-align: middle !important;/* Mantener v-align del PHP, forzar */
    white-space: nowrap !important;    /* Mantener nowrap del PHP, forzar */

    /* Estilos adicionales para asegurar la apariencia deseada */
    border: none !important;             /* Quitar cualquier borde */
    border-right: 1px solid #eee !important; /* Separador suave, forzar */
    background-color: transparent !important; /* Sin fondo */
    width: auto; /* Ancho basado en texto */
}

/* Celdas de datos (los cuadrados de colores/blancos) */
.enarmango-heatmap tbody tr td:not(:first-child) {
    /* Forzar sobreescritura de estilos inline */
    padding: 0 !important;             /* Sin padding, forzar */
    margin: 0 !important;              /* Sin margen, forzar */
    line-height: 0 !important;         /* Para celdas vacías, forzar */
    border: 1px solid #ccc !important; /* Borde consistente, forzar */
    width: 6px !important;             /* Ancho fijo, forzar */
    height: 6px !important;            /* Altura fija, forzar */

    /* Estilos que no necesitan !important (a menos que también estén inline) */
    box-sizing: border-box;
    cursor: pointer; /* Heredado del PHP, probablemente no necesita !important */
    /* background-color es puesto inline por PHP, así que no lo tocamos aquí */
}

/* Ajustar altura de fila si es necesario (debería coincidir con height de celdas + bordes) */
.enarmango-heatmap tbody tr {
    height: auto !important; /* Quitar altura fija de la fila si la tenía, dejar que las celdas definan */
}

.enarmango-account-link {
    position: absolute;     /* Posicionamiento absoluto */
    top: 10px;              /* Distancia desde el borde superior */
    right: 15px;             /* Distancia desde el borde derecho */
    color: #555;              /* Color del icono */
    text-decoration: none;  /* Quitar subrayado */
    line-height: 1;         /* Evitar espacio extra vertical */
    padding: 5px;           /* Pequeño área de clic extra */
    z-index: 5;             /* Asegurar que esté por encima de otro contenido si es necesario */
    transition: color 0.2s ease; /* Transición suave para hover */
}

/* 3. Estilos del icono (Dashicon en este caso) */
.enarmango-account-link .dashicons {
    font-size: 24px; /* Tamaño del icono */
    width: 24px;     /* Forzar ancho */
    height: 24px;    /* Forzar alto */
    vertical-align: middle; /* Alinear verticalmente */
}

/* 4. Efecto Hover */
.enarmango-account-link:hover,
.enarmango-account-link:focus {
    color: #0073aa; /* Cambiar a azul WP al pasar el ratón/foco */
    outline: none;  /* Quitar outline por defecto en focus */
}

/* --- Estilos Notificación Simulador en Proceso --- */
.inprogress-notice-container {
    background-color: #fff3cd; /* Amarillo pálido alerta */
    color: #856404; /* Texto oscuro para contraste */
    border: 1px solid #ffeeba;
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 20px; /* Espacio antes del grid del dashboard */
    display: flex; /* Para alinear texto y botón */
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.inprogress-notice-container p {
    margin: 0;
    flex-grow: 1; /* Ocupa espacio disponible */
    font-size: 0.95em;
}

.inprogress-notice-container .notice-action .enarmango-button {
    background-color: #ff9800;
    color: white !important;
    padding: 8px 15px;
    font-size: 0.9em;
    white-space: nowrap;
    border: none; /* Asegurar que no tenga borde por defecto si es button */
    cursor: pointer; /* Asegurar cursor */
}
.inprogress-notice-container .notice-action .enarmango-button:hover {
    background-color: #fb8c00;
}

/* Estilo específico para el botón Descartar */
.inprogress-notice-container .notice-action .notice-close-btn {
    background-color: #f0f0f0; /* Fondo gris claro */
    color: #555 !important;   /* Texto gris oscuro */
    border: 1px solid #ccc;    /* Borde sutil */
    padding: 7px 12px; /* Ligeramente menos padding vertical */
}
.inprogress-notice-container .notice-action .notice-close-btn:hover {
    background-color: #e0e0e0; /* Gris más oscuro al pasar */
    color: #333 !important;
    border-color: #bbb;
}


/* --- Estilos Notificación Límite/Licencia --- */
.license-notice-container {
    background-color: #fff3cd; /* Amarillo alerta (puedes cambiarlo) */
    color: #856404;
    border: 1px solid #ffeeba;
    /* Borde izquierdo más grueso para destacar */
    border-left: 5px solid #ffc107; /* Amarillo más fuerte */
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 20px; /* Espacio antes del siguiente elemento */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Sombra sutil opcional */
}

.license-notice-container p {
    margin: 0;
    flex-grow: 1; /* Ocupa el espacio disponible */
    font-size: 0.95em;
    font-weight: 500; /* Un poco más de énfasis */
    line-height: 1.4;
}

.license-notice-container .notice-action {
    flex-shrink: 0; /* Evita que el botón se encoja */
}

/* Estilo para el botón específico de esta notificación */
.license-notice-container .notice-action .button-warning {
    background-color: #ffc107; /* Amarillo advertencia */
    color: #212529 !important; /* Texto oscuro para contraste */
    /* Hereda padding, border-radius, etc. de .enarmango-button */
    font-weight: bold; /* Hacerlo más llamativo */
    padding: 8px 15px; /* Ajustar tamaño */
    font-size: 0.9em;
    white-space: nowrap;
}
.license-notice-container .notice-action .button-warning:hover {
    background-color: #e0a800; /* Amarillo más oscuro */
    color: #000 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}




/* =========================================== */
/* === ESTILOS RESPONSIVOS PARA MÓVILES === */
/* =========================================== */
@media (max-width: 768px) {

    /* --- Ajustes del Grid Principal --- */
    .enarmango-dashboard {
      grid-template-columns: 1fr; /* Forzar 1 columna */
      gap: 1rem; /* Reducir espacio entre tarjetas */
    }

    /* --- Ajustes de Tarjetas Individuales --- */
    .enarmango-card {
       padding: 1em; /* Reducir padding interno de las tarjetas */
    }

    /* Asegurar que la tarjeta del historial ocupe solo 1 columna */
    .enarmango-sim-history-card {
        grid-column: span 1; /* Sobreescribir el span 2 de desktop */
    }

    /* --- Ajustes del Contenedor del Gráfico --- */
    .enarmango-chart-container {
        height: 220px; /* Altura ligeramente menor */
        margin: 15px 0; /* Ajustar margen vertical */
    }

     /* --- Ajustes Lista Historial (Opcional) --- */
     /* Hacer que los botones de acción se apilen si no caben */
     .enarmango-sim-list li {
         /* flex-wrap: wrap; */ /* Descomenta si quieres que los botones bajen */
         /* gap: 5px; */       /* Ajustar espacio si se envuelven */
     }
     .sim-action {
         /* flex-basis: 100%; */ /* Descomenta si quieres que los botones siempre estén debajo en móvil */
         /* justify-content: center; */ /* Centrar botones si están debajo */
         /* margin-top: 8px; */ /* Espacio si están debajo */
     }
    .enarmango-account-link {
        top: 8px;    /* Un poco menos de espacio */
        right: 10px; /* Un poco menos de espacio */
        padding: 3px;
    }

    .enarmango-account-link .dashicons {
        font-size: 20px; /* Icono un poco más pequeño */
        width: 20px;
        height: 20px;
    }
    
        .inprogress-notice-container {
        flex-direction: column; /* Apilar en móvil */
        text-align: center;
        padding: 15px;
    }
    .inprogress-notice-container .notice-action {
        margin-top: 10px;
        width: 100%; /* Ocupar ancho */
        justify-content: center; /* Centrar botones */
    }
    
        .license-notice-container {
        flex-direction: column; /* Apilar texto y botón */
        text-align: center;
        padding: 15px;
    }
    .license-notice-container .notice-action {
        margin-top: 10px;
        width: 100%; /* Ocupar ancho */
        display: flex; /* Para centrar botón */
        justify-content: center;
    }
     .license-notice-container .notice-action .enarmango-button {
         width: auto; /* No forzar ancho completo */
         max-width: 250px;
     }


} /* === FIN DEL BLOQUE @media (max-width: 768px) === */