.ArticleCmd__socialShareLt.commonStyle__dFlex.commonStyle__alignCenter {
    display: none;
}
div#footer {
    display: none;
}
.ticketDetail span[data-id="newComment"]{
display:none;
}
div#plusBtn {
    display: none;
}

/* Estilos generales para el contenedor de gestiones de cuenta */
#cuenta-gestiones-container {
  font-family: 'Inter', sans-serif; /* Fuente base */
  max-width: 28rem; /* Ancho máximo ligeramente reducido */
  margin: 2rem auto; /* Centrado horizontal con margen superior/inferior */
  padding: 2rem; /* Relleno general aumentado */
  text-align: center; /* Centrar todo el contenido */
  background-color: #ffffff; /* Fondo blanco para destacar sobre #f3f5f7 */
  border-radius: 0.75rem; /* Bordes más redondeados (12px) */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Sombra más suave y difusa */
}

/* Título de la sección */
#cuenta-gestiones-container .gestion-title {
  font-size: 1.375rem; /* Tamaño de fuente ligeramente mayor (22px) */
  line-height: 1.875rem;
  font-weight: 600; /* Semi-negrita */
  color: #1f2937; /* Color de texto oscuro (gray-800) */
  margin-bottom: 1.25rem; /* Margen inferior aumentado */
}

/* Icono */
#cuenta-gestiones-container .gestion-icon {
  display: block;
  width: 3.5rem; /* Tamaño del icono ligeramente reducido (56px) */
  height: 3.5rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem; /* Margen inferior aumentado */
  color: #3b82f6; /* Color del icono azul (blue-500) */
}
/* Contenedor de los enlaces */
#cuenta-gestiones-container .gestion-links {
  /* No necesita estilos específicos aquí */
}

/* Párrafos dentro del contenedor de enlaces (para espaciado) */
#cuenta-gestiones-container .gestion-links p {
  margin-bottom: 1rem; /* Espacio entre los enlaces (16px) */
}
/* Eliminar margen del último párrafo */
#cuenta-gestiones-container .gestion-links p:last-child {
  margin-bottom: 0;
}

/* Estilo de los enlaces (ahora más como botones) */
#cuenta-gestiones-container .gestion-link {
  display: inline-block; /* Para aplicar padding y background */
  width: 100%; /* Ocupar todo el ancho disponible */
  padding: 0.75rem 1rem; /* Relleno vertical y horizontal (12px, 16px) */
  background-color: #f3f4f6; /* Fondo gris muy claro (gray-100) */
  color: #1f2937; /* Color de texto oscuro (gray-800) */
  border: 1px solid #e5e7eb; /* Borde sutil (gray-200) */
  border-radius: 0.375rem; /* Bordes redondeados (6px) */
  text-decoration: none; /* Sin subrayado */
  font-weight: 500; /* Peso medio */
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, transform 0.1s ease; /* Transiciones suaves */
  box-sizing: border-box; /* Asegura que padding/border no aumenten el ancho */
}

/* Efecto hover de los enlaces */
#cuenta-gestiones-container .gestion-link:hover {
  background-color: #e5e7eb; /* Fondo gris más oscuro (gray-200) */
  border-color: #d1d5db; /* Borde gris (gray-300) */
  color: #111827; /* Texto más oscuro (gray-900) */
}

/* Efecto active (al hacer clic) */
#cuenta-gestiones-container .gestion-link:active {
    transform: translateY(1px); /* Efecto de presión */
}

/* --- Estilos Generales del Contenedor de Tarjetas --- */
/* Asegúrate de que la fuente Inter esté disponible, por ejemplo, importándola aquí o en el HTML */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Contenedor principal para las tarjetas */
.portal-ayuda-cards-container {
    font-family: 'Inter', sans-serif;   /* Aplica la fuente Inter al contenedor y sus hijos */
    display: grid;                     /* Usa un sistema de rejilla para colocar las tarjetas */
    grid-template-columns: 1fr;        /* Por defecto, las tarjetas ocupan una columna (para móviles) */
    gap: 24px;                         /* Espacio entre las tarjetas */
    max-width: 900px;                  /* Ancho máximo del contenedor de tarjetas */
    width: 100%;                       /* El contenedor ocupa todo el ancho disponible hasta el máximo */
    /* MODIFICADO: Margen superior 0, auto horizontal, 20px abajo para separación inferior */
    margin: 0 auto 20px;
    /* MODIFICADO: Padding superior 0, 20px horizontal, 20px abajo para espacio interno inferior y lateral */
    padding: 0 20px 20px;
    box-sizing: border-box;            /* Asegura que el padding no aumente el ancho total */
    justify-items: center;             /* Centra las tarjetas dentro de sus celdas de la rejilla */
}

/* --- Estilos de las Tarjetas --- */

/* Estilo individual para cada tarjeta */
.ticket-card {
    background-color: #ffffff;         /* Fondo blanco para las tarjetas */
    border-radius: 12px;               /* Bordes redondeados para un aspecto suave */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Sombra sutil */
    padding: 16px 24px 24px;           /* Padding: 16px arriba, 24px horizontal, 24px abajo */
    display: flex;                     /* Permite organizar el contenido interno flexiblemente */
    flex-direction: column;            /* Coloca los elementos internos uno debajo del otro */
    justify-content: space-between;    /* Distribuye el espacio: el contenido arriba, el botón abajo */
    text-align: center;                /* Centra el texto dentro de la tarjeta */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Transición suave */
    width: 100%;                       /* La tarjeta ocupa el ancho de su celda de rejilla */
    max-width: 400px;                  /* Ancho máximo para una tarjeta individual, ajustado para mejor proporción */
    min-height: 370px;                 /* Altura mínima para mantener consistencia visual */
    box-sizing: border-box;            /* Asegura que el padding no aumente el ancho total de la tarjeta */
}

/* Tarjeta Principal ("Crear Ticket") */
.ticket-card--primary {
    border: 2px solid #2563eb;        /* Borde azul para destacar */
}

/* Tarjeta Secundaria ("Ver Tickets") */
.ticket-card--secondary {
    border: 2px solid #e5e7eb;        /* Borde gris claro, más sutil */
}


/* Efecto al pasar el ratón por encima de la tarjeta */
.ticket-card:hover {
    transform: translateY(-4px);       /* Mueve la tarjeta ligeramente hacia arriba */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Sombra más pronunciada */
}

/* Contenedor para agrupar el icono, título y descripción */
.card-content-wrapper {
    flex-grow: 1; /* Permite que este contenedor crezca y empuje el botón hacia abajo */
}

/* Contenedor del icono principal de la tarjeta */
.card-icon-container {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;               /* Espacio debajo del icono */
}

/* Estilo para los iconos SVG dentro del contenedor de iconos */
.card-icon-container svg {
    width: 48px;                       /* Ancho del icono */
    height: 48px;                      /* Alto del icono */
    color: #2563eb;                    /* Color azul para el icono */
}

/* Título de la tarjeta */
.card-title {
    font-size: 1.65rem;                /* Tamaño de fuente aumentado (ej. aprox 26px) */
    font-weight: 700;                  /* Texto en negrita */
    color: #1f2937;                    /* Color de texto gris oscuro */
    margin-top: 0;
    margin-bottom: 12px;               /* Espacio debajo del título */
}

/* Descripción de la tarjeta */
.card-description {
    font-size: 1rem;                   /* Tamaño de fuente aumentado (ej. 16px) */
    color: #4b5563;                    /* Color de texto gris medio */
    margin-bottom: 24px;               /* Espacio debajo de la descripción */
    line-height: 1.6;                  /* Altura de línea ligeramente aumentada */
}

/* --- Estilos de los Botones --- */

/* Estilo base común para los botones */
.card-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-weight: 600;
    font-size: 1rem;
    padding: 12px 16px;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
    margin-top: auto;                  /* Asegura que el botón se empuje hacia abajo */
    box-sizing: border-box;
}

/* Botón Principal ("Crear Ticket") */
.card-button--primary {
    background-color: #2563eb;         /* Fondo azul */
    color: #ffffff;                    /* Texto blanco */
    border: 2px solid #2563eb;         /* Borde del mismo color que el fondo */
}

.card-button--primary:hover {
    background-color: #1d4ed8;         /* Azul más oscuro al pasar el ratón */
    border-color: #1d4ed8;
    transform: translateY(-2px);
}

/* Botón Secundario ("Ver Tickets") - Estilo Outline */
.card-button--secondary {
    background-color: #ffffff;         /* Fondo blanco */
    color: #2563eb;                    /* Texto azul */
    border: 2px solid #2563eb;         /* Borde azul */
}

.card-button--secondary:hover {
    background-color: #eff6ff;         /* Fondo azul muy claro al pasar el ratón */
    color: #1d4ed8;                    /* Texto azul más oscuro */
    border-color: #1d4ed8;             /* Borde azul más oscuro */
    transform: translateY(-2px);
}


/* Efecto al hacer clic en el botón */
.card-button:active {
    transform: translateY(0px);        /* Devuelve el botón a su posición original al hacer clic */
}

/* Estilo para los iconos SVG dentro de los botones */
.card-button svg {
    width: 20px;                       /* Ancho del icono del botón */
    height: 20px;                      /* Alto del icono del botón */
    margin-left: 8px;                  /* Espacio a la izquierda del icono */
}

/* --- Diseño Responsivo --- */

/* Estilos para pantallas medianas y grandes (ej. tablets y ordenadores) */
@media (min-width: 768px) {
    .portal-ayuda-cards-container {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* Dos columnas, permitiendo que se encojan si es necesario */
    }
    .ticket-card{
         max-width: none; /* Permitir que las tarjetas ocupen el espacio de la columna del grid */
    }
}

/* Ajustes para pantallas muy pequeñas si es necesario */
@media (max-width: 480px) {
    .portal-ayuda-cards-container {
        /* MODIFICADO: Padding superior 0, 10px horizontal, 10px abajo para pantallas pequeñas */
        padding: 0 10px 10px;
        gap: 16px;     /* Menos espacio entre tarjetas */
    }
    .ticket-card {
        padding: 16px; /* Menos padding interno en las tarjetas */
        min-height: auto; /* Altura automática en móviles */
    }
    .card-title {
        font-size: 1.4rem;
    }
    .card-description {
        font-size: 0.9rem;
    }
    .card-button {
        font-size: 0.9rem;
        padding: 10px 14px;
    }
}