/* ===============================
   ESTILOS GENERALES DEL DASHBOARD
=============================== */

/* Reset de estilos para evitar herencias del tema */
.wcm-root,
.wcm-root * {
    all: revert;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif !important;
}

/* Variables compartidas se definen en wc-mascotas-common.css */

/* Tarjetas del dashboard (CON ALTURA UNIFORME) */
.wcm-dash-container {
    display: grid;
    /* Crea columnas responsivas: se ajustarán automáticamente al espacio disponible */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
    align-items: stretch; /* Asegura que todos los items de una fila se estiren a la misma altura */
}

.wcm-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: center; /* Mantenemos por si hay elementos no-flex */
    position: relative;
    transition: background 0.2s ease;
    
    /* Convertimos la tarjeta en un contenedor Flexbox vertical */
    display: flex;
    flex-direction: column;
    align-items: center; /* <-- AÑADIR ESTA LÍNEA */
}

/* NUEVA REGLA: Empuja los botones hacia la parte inferior de la tarjeta */
.wcm-card .wcm-panel-btn {
    margin-top: auto; /* ¡Esta es la magia! Empuja este elemento y los que le siguen hacia abajo */
}
.wcm-card:hover {
    background: #f9f9f9;
}
/* Mueve la tarjeta "Agregar mascota" al final del grid */
.wcm-add-card {
    order: 1;
}

/* Tarjeta "Agregar nueva mascota" */
.wcm-add-card {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.wcm-add-icon {
    width: 40px;
    display: block;
    margin-bottom: 10px;
}

/* Imagen en tarjetas */
.wcm-image {
    width: 70px !important;
    height: 70px !important;
    border-radius: 50%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

/* Botones de acciones en la ficha: Editar y Borrar */
.wcm-card-buttons {
    position: absolute;
    top: 5px;
    right: 5px;
    display: none;
    gap: 5px;
}
.wcm-card:hover .wcm-card-buttons {
    display: flex;
}
.wcm-card-buttons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid;
    transition: background 0.3s ease, border-color 0.3s ease;
    position: relative;
}
.wcm-card-buttons img {
    width: 100%;
    height: 100%;
    padding: 2px;
    object-fit: contain;
}

/* Botón Editar */
.wcm-edit-btn {
    border-color: #4D2DCE!important;
    background: transparent;
}
.wcm-edit-btn:hover {
    background: #4D2DCE;
}
.wcm-edit-btn:hover img {
    filter: brightness(0) invert(1);
}

/* Botón Borrar */
.wcm-delete-btn {
    border-color: #EA4E64!important;
    background: transparent;
}
.wcm-delete-btn:hover {
    background: #EA4E64;
}
.wcm-delete-btn:hover img {
    filter: brightness(0) invert(1);
}

/* Botón "Estos productos harán feliz a..." */
.wcm-happy-button {
    display: block;
    width: 100%;
    font-size: 11px !important;
    margin-top: 10px;
    padding: 5px 20px !important;
    border: none;
    border-radius: 30px;
    background: #4D2DCE;
    color: #fff !important;
    cursor: pointer;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    text-decoration: none !important;
    transition: background 0.3s ease;
}
.wcm-happy-button:hover {
    background: #CBBBFF;
    color: #1F0979 !important;
}

/* Reducir espacios entre elementos de la ficha */
.wcm-pet-info-item {
    margin: 2px 0;
    font-size: 14px;
    line-height: 1.2;
}

/* Nuevo botón "Ver el Panel de mis mascota" */
.wcm-panel-btn {
    display: block;
    width: 100%;
    font-size: 12px !important;
    margin-top: 10px;
    padding: 5px 20px !important;
    border: 1px solid #4D2DCE!important;
    border-radius: 30px;
    background: #fff;
    color: #4D2DCE!important;
    cursor: pointer;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
    text-decoration: none !important;
    transition: background 0.3s ease;
}
.wcm-panel-btn:hover {
    background: #CBBBFF;
    color: #1F0979 !important;
}

@media (max-width: 768px) {
  .wcm-dash-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
  }
  .wcm-card {
      width: auto;
  }
  .wcm-card-buttons {
      display: flex !important;
      flex-direction: column;
      gap: 10px;
  }
  .wcm-card-buttons a {
      width: 26px !important;
      height: 26px !important;
  }
}

/* ===============================
   FORMULARIO DE MASCOTAS
=============================== */
.wcm-form-two-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}
.wcm-col-left,
.wcm-col-right {
    flex: 1 1 0px;
    min-width: 280px;
    padding:15px;
}
@media (max-width: 768px) {
    .wcm-form-two-cols {
        flex-direction: column;
    }
}

/* Imagen upload */
.wcm-image-upload-container {
    margin-bottom: 20px;
}
.wcm-image-wrapper {
    position: relative;
    width: 150px;
    height: 150px;
    border: 2px dashed #ccc;
    border-radius: 100px;
    overflow: hidden;
    cursor: pointer;
}
.wcm-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}
.wcm-image-overlay {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    background: rgba(0,0,0,0.2);
    color: #fff;
    display: flex;
    font-weight: 600;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    font-size: 14px;
}
.wcm-image-wrapper:hover .wcm-image-overlay {
    opacity: 1;
}
@media (max-width: 768px) {
    .wcm-image-overlay {
        opacity: 1 !important;
    }
}

/* Dropdown genérico (para juguetes y gustos) */
.custom-select {
    position: relative;
    margin-bottom: 20px;
    border-bottom: 1px solid #adadad;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    padding: 6px 8px;
}
.custom-select-display {
    cursor: pointer;
}
.custom-select-title {
    font-size: 12px;
    font-weight: bold;
    color: #333;
    margin-bottom: 4px;
}
.custom-select-selected {
    font-size: 10px;
    color: #777;
    min-height: 16px;
}
.custom-select .wcm-juguetes-options,
.custom-select .wcm-gustos-options {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 2px);
    background: #fff;
    border: 1px solid #ddd;
    max-height: 220px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    display: none;
    z-index: 999;
}
.custom-select.is-open .wcm-juguetes-options,
.custom-select.is-open .wcm-gustos-options {
    display: block;
}
.custom-select .wcm-juguetes-options li,
.custom-select .wcm-gustos-options li {
    padding: 6px 10px;
    cursor: pointer;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    align-items: center;
}
.custom-select li:last-child {
    border-bottom: none;
}
.custom-select li.selected {
    background: #d4ebf2;
}
.custom-select li:hover {
    background: #f2f2f2;
}
.select-placeholder {
    color: #999;
    pointer-events: none;
}
.custom-select .toggle-button {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='%23888' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'%3E%3C/path%3E%3C/svg%3E");
    background-size: 14px 14px;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}
.wcm-juguetes-checkbox,
.wcm-gustos-checkbox {
    margin-right: 12px;
}

/* Botones del formulario */
.wcm-form-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}
.wcm-form-buttons button,
.wcm-form-buttons a {
    width: 50%;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    font-size: 14px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.3s ease, border-color 0.3s ease;
    border-radius: 9999px;
}
.wcm-save-btn {
    background: #4D2DCE;
    color: #fff;
    border-color: #4D2DCE;
}
.wcm-save-btn:hover {
    background: #CBBBFF;
}
.wcm-cancel-btn {
    background: #CBBBFF;
    color: #333;
    border-color: #CBBBFF;
}
.wcm-cancel-btn:hover {
    background: #B0A1E0;
}
.wcm-btn-icon {
    font-weight: 300;
    margin-right: 5px;
}

/* Campo "Tipo de Mascota" */
.wcm-tipo-mascota-options {
    display: inline-flex;
    gap: 10px;
    margin-top: 5px;
}
.wcm-tipo-mascota-btn {
    border: 1px solid #CBBBFF;
    border-radius: 9999px;
    padding: 5px 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    background: #fff;
    color: #4D2DCE;
}
.wcm-tipo-mascota-btn input {
    display: none;
}
.wcm-tipo-mascota-btn img.wcm-tipo-icon {
    width: 20px;
    margin-right: 5px;
}
.wcm-tipo-mascota-btn.active,
.wcm-tipo-mascota-btn:hover {
    background: #4D2DCE;
    border-color: #4D2DCE;
    color: #fff;
}
.wcm-tipo-mascota-btn.active img.wcm-tipo-icon,
.wcm-tipo-mascota-btn:hover img.wcm-tipo-icon {
    filter: brightness(0) invert(1);
}

/* Tooltip */
.my-tooltip {
    position: absolute;
    padding: 4px 8px;
    background: #333;
    color: #fff;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    display: none;
    z-index: 9999;
}
.my-tooltip::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #333;
}

/* Componentes de formulario modernos */
input[type="date"].wcm-modern-date {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    background: #fff url("../img/icons/icono-calendario.svg") no-repeat right 8px center;
    background-size: 24px 24px;
    border-bottom: 1px solid #adadad;
    border-radius: 4px;
    padding: 8px 40px 8px 5px;
    font-size: 16px !important; /* 16px para evitar zoom en iOS */
    color: #333;
    line-height: normal;
    height: auto;
    cursor: pointer;
}
input[type="date"].wcm-modern-date::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer;
}
#wc-mascotas-form input,
#wc-mascotas-form select,
#wc-mascotas-form textarea {
    border: none;
    border-bottom: 1px solid #adadad;
    background: none;
    outline: none;
    padding: 8px 0;
    font-size: 14px;
    color: #333;
}
.wcm-modern-select {
    display: none;
}
#wc-mascotas-form .choices__inner {
    border: none;
    border-bottom: 1px solid #adadad;
    border-radius: 0;
    background: none;
    padding: 8px 0;
    font-size: 14px;
    color: #333;
}

/* Barra de progreso */
.wcm-progress-wrapper {
	margin-top: 8px;
}
.wcm-progress-bar {
	background-color: #e0e0e0;
	border-radius: 10px;
	height: 6px;
	overflow: hidden;
}
.wcm-progress-fill {
	background-color: #4caf50;
	height: 6px;
	width: 0;
	transition: width 0.6s ease-in-out;
}
.wcm-progress-text {
	font-size: 0.85em;
	text-align: center;
	margin-top: 4px;
	color: #333;
}

/* ===============================================
   ESTILOS PARA EL PANEL DE RECOMENDACIONES v2
=============================================== */

/* Cabecera de la sección de recomendaciones */
.wcm-recommendations-header {
    text-align: center;
    background: radial-gradient(ellipse at top left, var(--aurora-bg-start), transparent 50%),
                radial-gradient(ellipse at bottom right, var(--aurora-bg-end), transparent 60%);
    background-color: #f7f5fc;
    padding: 25px 20px;
    border-radius: 24px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-bottom: 30px;
}

.wcm-recommendations-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--text-color-primary);
}

.wcm-recommendations-subtitle,
.wcm-recommendations-context-intro {
    font-size: 14px;
    font-weight: 300;
    color: var(--text-color-secondary);
    margin: 0;
}

.wcm-recommendations-context-intro {
    margin-top: 8px;
}

.wcm-recommendations-context-intro strong {
    color: var(--aurora-card-highlight);
}

/* Contenedor principal y TABS */
.wcm-tabs-nav {
    display: flex;
    list-style: none;
    padding: 5px;
    margin-bottom: 25px;
    background-color: rgba(140, 82, 255, 0.07);
    border-radius: 12px;
    gap: 0;
}

.wcm-tabs-nav li {
    flex: 1;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color-primary);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.wcm-tab-icon {
    width: 20px;
    height: 20px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.wcm-tabs-nav li:hover {
    color: var(--aurora-card-highlight);
}

.wcm-tabs-nav li:hover .wcm-tab-icon {
    opacity: 1;
}

.wcm-tabs-nav li.active {
    background: #fff;
    color: var(--aurora-card-highlight);
    box-shadow: 0 4px 12px -2px rgba(140, 82, 255, 0.2);
    transform: translateY(-1px);
}

.wcm-tabs-nav li.active .wcm-tab-icon {
    opacity: 1;
}

.wcm-tab-content {
    display: none;
}
.wcm-tab-content.active {
    display: block;
}

/* Grid de Recomendaciones */
.wcm-recommendations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    padding: 20px 0;
    align-items: stretch;
}

@media (max-width: 768px) {
    .wcm-recommendations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tarjeta de Producto Recomendado */
.wcm-rec-card {
    background: var(--aurora-card-bg);
    -webkit-backdrop-filter: blur(var(--aurora-blur));
    backdrop-filter: blur(var(--aurora-blur));
    border: 1px solid var(--aurora-card-border);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    color: inherit;
    position: relative;
    height: 100%;
}
.wcm-rec-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}
.wcm-rec-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    position: relative;
    z-index: 2;
}
.wcm-rec-image-wrapper {
    background: #f9f9f9;
    padding: 10px;
    text-align: center;
}
.wcm-rec-image-wrapper img {
    max-width: 100%;
    object-fit: contain;
    border-radius: 10px;
}
.wcm-rec-content {
    padding: 10px;
    text-align: center;
    flex-grow: 1;
}
.wcm-rec-title {
    font-size: 14px!important;
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--text-color-primary);
    min-height: 48px;
    text-decoration: none!important;
}

.wcm-rec-price {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--aurora-card-highlight);
    text-decoration: none!important;
}
.precio-desde-label {
    font-size: 14px;
    font-weight: 400;
}
/* ===============================================
   AJUSTES PARA FEEDBACK DE RECOMENDACIONES (V3)
=============================================== */

/* Contenedor de los botones de feedback */
.wcm-rec-feedback {
    position: absolute;
    top: 8px; /* Ajusta la distancia desde arriba */
    right: 8px; /* Ajusta la distancia desde la derecha */
    display: flex;
    flex-direction: column; /* Apila los botones verticalmente */
    align-items: center; /* Centra los botones horizontalmente en su columna */
    gap: 8px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    transform: scale(0.9); /* Inicia un poco más pequeño */
    z-index: 3; /* Asegura que esté sobre el contenido */
}

/* Muestra los botones al hacer hover sobre la tarjeta */
.wcm-rec-card:hover .wcm-rec-feedback {
    opacity: 1;
    transform: scale(1); /* Vuelve al tamaño normal */
}

/* Estilo general para cada botón de feedback */
.wcm-rec-feedback-btn {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

.wcm-rec-feedback-btn img,
.wcm-rec-feedback-btn svg {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}

.wcm-rec-feedback-btn {
    color: #4a5568;
}
.wcm-rec-feedback-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Estilo específico para el botón "Me gusta" */
.wcm-rec-feedback-btn--like:hover {
    background-color: #e6fffa;
    border-color: #38a169;
    color: #38a169;
}

/* Estilo específico para el botón "No me gusta" */
.wcm-rec-feedback-btn--dislike:hover {
    background-color: #fff5f5;
    border-color: #e53e3e;
    color: #e53e3e;
}

.wcm-rec-price {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--aurora-card-highlight);
    text-decoration: none;
    line-height: 1.3;
}

/* Formato para el texto "IVA Incluido" */
.wcm-rec-price .woocommerce-price-suffix {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: var(--text-color-secondary);
    margin-top: 2px;
}


/* "La Razón" de la recomendación v5: Transición a ancho completo */
.wcm-rec-reason {
    background: #f7f5ff;
    padding: 12px 5px 5px 5px;
    border-top: 1px dashed #dcd6f7;
    text-align: left;
    font-size: 12px;
    color: #5947a5;
    position: relative;
    z-index: 2;
    margin-top: auto;
    display: flex;
    flex-direction: column;
}

.wcm-rec-reason-content {
    display: flex;
    align-items: flex-start;
    gap: 8px; /* Espacio inicial entre icono y texto */
    width: 100%;
    transition: gap 0.3s ease-in-out; /* Transición suave para el espacio */
}

.wcm-rec-reason-icon {
    font-size: 1.2em;
    line-height: 1.5;
    flex-shrink: 0;
    /* Transición para todas las propiedades que cambiarán */
    transition: opacity 0.3s ease, width 0.3s ease-in-out, margin-right 0.3s ease-in-out;
    width: 20px; /* Ancho explícito para poder animarlo */
    overflow: hidden; /* Evita desbordamientos durante la transición */
}

.wcm-rec-reason-text {
    margin: 0;
    line-height: 1.1;
    transition: max-height 0.4s ease-out;
    overflow: hidden;
    flex-grow: 1;
}

.wcm-rec-reason-text.is-truncated {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 42px; /* 14px * 1.5 * 2 líneas */
}

.wcm-rec-reason-toggle {
    background: none!important;
    border: none;
    padding: 5px;
    margin: 5px auto -5px auto;
    cursor: pointer;
    width: 30px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wcm-chevron {
    width: 10px;
    height: 10px;
    border-style: solid;
    border-color: #5947a5;
    border-width: 0 2.5px 2.5px 0;
    display: inline-block;
    transform: rotate(45deg);
    transition: transform 0.3s ease-in-out;
}

/* Cuando la sección está expandida... */
.wcm-rec-reason.is-expanded .wcm-chevron {
    transform: rotate(-135deg); /* El chevron apunta hacia arriba */
}

/* 1. El contenedor del contenido elimina el 'gap' para que no quede espacio extra */
.wcm-rec-reason.is-expanded .wcm-rec-reason-content {
    gap: 0;
}

/* 2. El icono se colapsa a ancho cero y se vuelve invisible */
.wcm-rec-reason.is-expanded .wcm-rec-reason-icon {
    opacity: 0;
    width: 0;
    margin-right: 0; /* Asegura que no quede margen */
}

/* 3. El texto se justifica para una apariencia de lectura completa */
.wcm-rec-reason.is-expanded .wcm-rec-reason-text {
    text-align: justify;
    padding-left: 5px;
    padding-right: 5px;
}

/* Mensaje sin resultados */
.wcm-no-results {
    text-align: center;
    font-size: 1.2em;
    color: #777;
    padding: 40px;
    background: #fafafa;
    border-radius: 8px;
}
/* ===============================================
   NUEVO: CENTRO DE ACCIONES Y MISIONES (ACORDEÓN)
=============================================== */

.wcm-action-center-panel {
    background: radial-gradient(ellipse at top left, var(--aurora-bg-start), transparent 50%),
                radial-gradient(ellipse at bottom right, var(--aurora-bg-end), transparent 60%);
    background-color: #f7f5fc;
    border-radius: 24px;
    padding: 25px;
    margin-bottom: 30px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 8px 32px rgba(99, 95, 128, 0.1);
    transition: all 0.4s ease-in-out;
}

/* --- Estilos de la cabecera del acordeón --- */
.wcm-acordeon-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; /* Evita el destello azul en móviles */
}

.wcm-acordeon-header h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-color-primary);
    margin: 0 0 8px 0;
    text-align: left;
}

.wcm-acordeon-header p {
    font-size: 15px;
    color: var(--text-color-secondary);
    text-align: left;
    max-width: 600px;
    margin: 0;
}

/* --- Indicador de flecha (abierto/cerrado) --- */
.wcm-acordeon-indicator {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease-in-out;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234D2DCE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Rotación de la flecha cuando el acordeón está abierto */
.wcm-action-center-panel.is-open .wcm-acordeon-indicator {
    transform: rotate(180deg);
}

/* --- Contenido del acordeón (la lista de misiones) --- */
.wcm-acordeon-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, padding-top 0.4s ease-in-out;
}

.wcm-action-center-panel.is-open .wcm-acordeon-content {
    /* Un valor alto para asegurar que quepa todo el contenido */
    max-height: 2000px; 
    padding-top: 25px; /* Espacio que se añade al abrir */
}

.wcm-missions-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Transición para el colapso suave */
    transition: max-height 0.3s ease-in-out;
}

/* --- Lógica para "Mostrar menos / más" con efecto de difuminado --- */
.wcm-acordeon-content {
    /* Añadimos position relative para que la máscara se posicione correctamente */
    position: relative;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out, padding-top 0.4s ease-in-out;
}

.wcm-missions-list.is-collapsed {
    /* Muestra aprox. 2 items y medio + scroll */
    max-height: 250px; 
    overflow-y: auto;
    padding-right: 10px; /* Espacio para el scrollbar */

    /* El efecto de difuminado/máscara en la parte inferior */
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}

.wcm-acordeon-controls {
    text-align: center;
    margin-top: 20px;
}

.wcm-control-button {
    background: none;
    border: 1px solid #CBBBFF;
    color: #4D2DCE;
    padding: 6px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.2s ease;
}

.wcm-control-button:hover {
    background: #f0edff;
}

/* Estilos de los items de misión (sin cambios mayores) */
.wcm-mission-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #fff;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #EAEFF7;
    transition: all 0.2s ease-in-out;
}

.wcm-mission-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(99, 95, 128, 0.08);
}

.wcm-mission-pet-info { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.wcm-mission-pet-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; aspect-ratio: 1 / 1; }
.wcm-mission-pet-info strong { font-weight: 600; }
.wcm-mission-details { flex-grow: 1; display: flex; flex-direction: column; }
.wcm-mission-text { font-size: 14px; color: #333; }
.wcm-mission-points { font-size: 12px; font-weight: 500; color: #1e8a53; margin-top: 2px; }
.wcm-mission-button { background-color: #4D2DCE; color: #fff !important; padding: 8px 20px; border-radius: 30px; font-weight: 600; font-size: 13px; text-decoration: none !important; white-space: nowrap; transition: background-color 0.2s ease; }
.wcm-mission-button:hover { background-color: #3a1dbd; }

/* --- Responsividad para el Centro de Acciones (Mobile-first) --- */
@media (max-width: 768px) {
    .wcm-acordeon-header {
        /* Permite que el texto se ajuste si es muy largo */
        align-items: flex-start;
    }
    .wcm-acordeon-title {
        flex-grow: 1;
    }
    .wcm-acordeon-indicator {
        margin-left: 10px;
        flex-shrink: 0;
    }
    .wcm-mission-item { flex-direction: column; align-items: stretch; gap: 10px; }
    .wcm-mission-details { text-align: center; margin-bottom: 10px; }
    .wcm-mission-pet-info { justify-content: center; }
    .wcm-mission-button { text-align: center; }
}
/* ===============================================
   NUEVO: PANEL DE RECOMPENSAS (V4 - Final y Corregido)
=============================================== */

.wcm-rewards-panel {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 20px;
    background: #f7f5ff;
    border: 1px solid #dcd6f7;
    border-radius: 12px;
    padding: 15px 60px 15px 20px; /* Espacio a la derecha para el botón de cierre */
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(99, 95, 128, 0.08);
}

.wcm-rewards-text-wrapper {
    flex: 1 1 auto;
    min-width: 250px;
}

.wcm-rewards-panel h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color-primary);
    margin: 0;
    display: inline;
    margin-right: 8px;
}

.wcm-rewards-panel p {
    font-size: 14px;
    color: var(--text-color-secondary);
    margin: 0;
    display: inline;
}

.wcm-rewards-button {
    display: inline-block;
    background-color: #4D2DCE;
    color: #fff !important;
    padding: 8px 20px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.wcm-rewards-button:hover {
    background-color: #3a1dbd;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* --- CORRECCIÓN DEL BOTÓN DE CIERRE --- */
.wcm-rewards-dismiss {
    position: absolute;
    top: 12px; /* Posición fija desde arriba */
    right: 12px; /* Posición fija desde la derecha */
    background: transparent;
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s ease;
    
    /* Centrado perfecto de la 'x' con Flexbox */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px; /* Ajuste de tamaño para la 'x' */
    color: var(--text-color-secondary);
}

.wcm-rewards-dismiss:hover {
    background: rgba(0,0,0,0.08);
    color: var(--text-color-primary);
    transform: rotate(90deg);
}
/* --- FIN DE LA CORRECCIÓN --- */


/* Ajustes para móviles */
@media (max-width: 768px) {
    .wcm-rewards-panel {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px; /* Padding uniforme en móvil */
    }

    .wcm-rewards-panel h3,
    .wcm-rewards-panel p {
        display: block;
        text-align: left;
    }

    .wcm-rewards-panel p {
        margin-top: 5px;
    }

    .wcm-rewards-button {
        margin-top: 15px;
        width: 100%;
        text-align: center;
    }

    .wcm-rewards-dismiss {
        top: 10px;
        right: 10px;
    }
}
/* ===============================================
   FORMULARIO DE MASCOTAS (V5 - DISEÑO FINAL CORREGIDO)
=============================================== */

.wcm-form-v3 { 
    max-width: 900px; 
    margin: 0 auto; 
}
.wcm-form-v3 h2 { 
    text-align: center; 
    font-size: 2em; 
    color: var(--text-color-primary); 
}
.wcm-form-v3 > p { 
    text-align: center; 
    color: var(--text-color-secondary); 
    margin-bottom: 2em; 
}

.wcm-form-grid { 
    display: grid; 
    grid-template-columns: 1fr 1.5fr; 
    gap: 25px; 
    align-items: start; 
}
.wcm-form-col-left .wcm-form-card { 
    position: sticky; 
    top: 20px; 
}

.wcm-form-card {
    background: #fff; 
    border-radius: 16px; 
    padding: 15px;
    box-shadow: 0 8px 32px rgba(99, 95, 128, 0.08);
    display: flex; 
    flex-direction: column; 
    gap: 20px;
}
.wcm-form-card h4 {
    margin: 0 0 10px; 
    color: var(--aurora-card-highlight);
    border-bottom: 1px solid #f0f0f0; 
    padding-bottom: 10px;
}
.wcm-form-card p { 
    text-align: left; 
    margin: 0; 
}
.wcm-form-card label { 
    font-weight: 600; 
    font-size: 14px; 
    color: var(--text-color-primary); 
}

/* --- BLOQUE DE PERFIL (IMAGEN + NOMBRE) v2.2 --- */
.wcm-profile-header-block {
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: #f7f5ff;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
}

.wcm-image-upload-container {
    flex-shrink: 0;
    position: relative; /* Contexto de posicionamiento del icono */
    width: 100px;
    height: 100px;
}

.wcm-image-wrapper {
    width: 100px; 
    height: 100px; 
    border-radius: 50%;
    cursor: pointer;
    border: 4px solid #fff; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    /* ANTES: overflow: hidden;  -> CORTABA EL ICONO */
    overflow: visible; /* permite que el icono salga sin recortarse */
}

.wcm-image-wrapper:hover { 
    transform: scale(1.05); 
}

#wcm-image-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    /* El recorte circular lo hace la IMAGEN para mantener el look */
    border-radius: 50%;
}

.wcm-edit-icon {
    position: absolute; 
    bottom: -4px; 
    right: -4px;
    width: 32px; 
    height: 32px;
    background-color: #4D2DCE;
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    border: 2px solid #fff; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 10;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.wcm-image-upload-container:hover .wcm-edit-icon {
    transform: scale(1.1);
}

.wcm-edit-icon img { 
    width: 16px; 
    height: 16px; 
    filter: brightness(0) invert(1); 
}

.wcm-pet-name-container { 
    flex-grow: 1; 
}

.wcm-pet-name-container label {
    font-size: 14px; 
    color: var(--aurora-card-highlight); 
    font-weight: 600; 
}

.wcm-pet-name-container input {
    width: 100%; 
    font-size: 24px !important; 
    font-weight: 700;
    border: none; 
    border-bottom: 2px solid #dcd6f7;
    background: transparent; 
    padding: 5px 0;
}

.wcm-pet-name-container input:focus { 
    outline: none; 
    border-bottom-color: #4D2DCE; 
}

/* Responsividad para el bloque de perfil */
@media (max-width: 768px) {
    .wcm-profile-header-block {
        flex-direction: column;
    }
    .wcm-pet-name-container {
        width: 100%;
        text-align: center;
    }
    .wcm-pet-name-container input {
        text-align: center;
    }
}

/* --- Selector Tipo Mascota --- */
.wcm-tipo-mascota-btn.active img.wcm-tipo-icon {
    filter: brightness(0) invert(1);
}

/* --- Formulario Multi-Paso --- */
.wcm-form-step { display: none; }
.wcm-form-step.active { display: block; animation: fadeIn 0.5s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* --- Navegación: botones con MISMO ancho (CORREGIDO) --- */
.wcm-form-navigation {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 10px;
    margin-top: 25px;
    align-items: stretch;
}

.wcm-form-nav-btn {
    padding: 12px 20px; /* Ajustamos padding para móvil */
    font-size: 15px; /* Ajustamos fuente para móvil */
    border-radius: 30px;
    border: 2px solid;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    justify-self: stretch;
}

/* Botón "Anterior" con estilo tenue */
.wcm-prev-btn {
    background-color: #f0f0f0;
    color: #555;
    border-color: #f0f0f0;
}
.wcm-prev-btn:hover {
    background-color: #e0e0e0;
    border-color: #e0e0e0;
}

/* Botones principales "Siguiente" y "Guardar" */
.wcm-next-btn,
.wcm-save-btn {
    background-color: #4D2DCE;
    color: #fff;
    border-color: #4D2DCE;
}
.wcm-next-btn:hover,
.wcm-save-btn:hover {
    background-color: #3a1dbd;
    border-color: #3a1dbd;
}

/* --- Mobile First --- */
@media (max-width: 768px) {
    .wcm-form-grid { grid-template-columns: 1fr; }
    .wcm-form-col-left .wcm-form-card { position: static; }
    .wcm-profile-header-block { flex-direction: column; }
    .wcm-pet-name-container { width: 100%; text-align: center; }
    .wcm-pet-name-container input { text-align: center; }
}

 /* Evitar Zoom en iOS */
.wcm-form-card input, 
.wcm-form-card .choices__input, 
.wcm-modern-date { font-size: 16px !important; }

/* Checkbox Múltiple Mejorado */
.custom-select li label { 
    display: flex; 
    width: 100%; 
    cursor: pointer; 
    align-items: center; 
    font-weight: normal; 
    padding: 5px; 
}
/* AÑADE ESTO AL FINAL DE LA SECCIÓN DEL FORMULARIO */

/* Botón "Anterior" con estilo más tenue */
.wcm-prev-btn { 
    background-color: #f0f0f0; /* Fondo gris claro */
    color: #555; /* Texto más oscuro */
    border-color: #f0f0f0; /* Borde del mismo color */
}

.wcm-prev-btn:hover {
    background-color: #e0e0e0;
}

/* En móvil, ajustamos el tamaño de los botones para que quepan */
@media (max-width: 768px) {
    .wcm-form-nav-btn {
        padding: 10px 15px; /* Hacemos el padding un poco más pequeño */
        font-size: 14px; /* Reducimos ligeramente la fuente */
    }
}
/* Estilo del precio del producto recomendado */
.wcm-rec-price {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--aurora-card-highlight);
    text-decoration: none;
    line-height: 1.3; /* Ajusta el interlineado para dar espacio */
}

/* NUEVO: Formato para el texto "IVA Incluido" */
.wcm-rec-price .woocommerce-price-suffix {
    display: block; /* Hace que ocupe su propia línea */
    font-size: 10px;
    font-weight: 400; /* Letra más ligera */
    color: var(--text-color-secondary); /* Un color más suave */
    margin-top: 2px;
}

/*** Estilos Armonizados para el Widget de Lista de Mascotas v2.1

/* ==========================================================================
   1. Estilos Base del Widget
   ========================================================================== */

/* Usamos la clase del widget para evitar afectar otros elementos */
.elementor-widget-wc-mascotas-list .wcm-pets-widget-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espacio entre la lista y el botón de agregar */
}

/* ==========================================================================
   2. Lista de Mascotas
   ========================================================================== */

.elementor-widget-wc-mascotas-list .wcm-pets-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.elementor-widget-wc-mascotas-list .wcm-pet-item-link {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    padding: 10px;
    border-radius: 8px;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.elementor-widget-wc-mascotas-list .wcm-pet-item-link:hover {
    background-color: #f7f5ff;
}

.elementor-widget-wc-mascotas-list .wcm-pet-thumb img {
    display: block;
    object-fit: cover;
}

/* ==========================================================================
   3. Botón "Agregar Mascota" (con variantes)
   ========================================================================== */

/* Estilos base compartidos por ambas versiones (Botón y Enlace) */
.elementor-widget-wc-mascotas-list .wcm-add-pet-button {
    display: inline-flex; /* Usamos inline-flex para que no ocupe todo el ancho */
    align-items: center;
    gap: 10px; /* Espacio entre texto e icono */
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    width: fit-content; /* Se ajusta al contenido */
    align-self: flex-start; /* Se alinea a la izquierda por defecto */
}

/* --- A. Estilos específicos para el modo BOTÓN (por defecto) --- */
.elementor-widget-wc-mascotas-list.wcm-add-pet-style-button .wcm-add-pet-button {
    justify-content: space-between; /* Mantenemos este solo para el botón */
    border: 1px solid #dcd6f7;
    border-radius: 8px;
    padding: 12px 15px;
    width: 100%; /* El botón ocupa todo el ancho */
}

.elementor-widget-wc-mascotas-list.wcm-add-pet-style-button .wcm-add-pet-button:hover {
    background-color: #f7f5ff;
    border-color: #4D2DCE;
    color: #4D2DCE;
}

/* Efecto de movimiento del icono solo en modo botón */
.elementor-widget-wc-mascotas-list.wcm-add-pet-style-button .wcm-add-pet-button:hover .wcm-button-icon {
    transform: translateX(3px);
}

/* --- B. CORRECCIÓN 1: Estilos para anular y crear el modo ENLACE DE TEXTO --- */
.elementor-widget-wc-mascotas-list.wcm-add-pet-style-link .wcm-add-pet-button {
    background: none;
    border: none;
    padding: 0;
    border-radius: 0;
    color: #4D2DCE; /* Un color base para el enlace */
}

.elementor-widget-wc-mascotas-list.wcm-add-pet-style-link .wcm-add-pet-button:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* ==========================================================================
   4. Escenarios Vacíos
   ========================================================================== */

.elementor-widget-wc-mascotas-list .wcm-empty-state-wrapper {
    padding: 20px;
    border: 2px dashed #e0e0e0;
    border-radius: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra los elementos hijos */
    gap: 15px;
}

.elementor-widget-wc-mascotas-list .wcm-empty-state-image {
    margin: 0;
}

/* --- CORRECCIÓN 2: Eliminamos el 'max-width' para dar control al widget --- */
.elementor-widget-wc-mascotas-list .wcm-empty-state-image img {
    height: auto;
    opacity: 0.7;
    display: block;
}

.elementor-widget-wc-mascotas-list .wcm-empty-state-title {
    font-size: 1.2em;
    font-weight: 600;
    margin: 0;
}

.elementor-widget-wc-mascotas-list .wcm-empty-state-text {
    color: #555;
    margin: 0;
    max-width: 400px; /* Evita que el texto sea demasiado ancho en pantallas grandes */
}

.elementor-widget-wc-mascotas-list .wcm-empty-state-button {
    display: inline-block;
    background-color: #4D2DCE;
    color: #fff !important; /* !important para asegurar sobre estilos de tema */
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    border: none;
    transition: background-color 0.2s ease;
}

.elementor-widget-wc-mascotas-list .wcm-empty-state-button:hover {
    background-color: #3b21a4;
}