/*
Theme Name: Patriot News 24/7
Theme URI: https://patriotnews24.com/
Author: Your Name
Author URI: https://your-website.com/
Description: A professional news theme for American patriots, designed for clarity, authority, and impact. Based on the Patriot News 24/7 strategic plan.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: patriotnews24
*/

  /*
   * Mejoras de CSS para la clase .prose de Tailwind.
   * Esto hará que el contenido de tus páginas (FAQ, About Us, etc.)
   * sea mucho más legible y profesional.
  */

  /* Aumenta el espaciado entre líneas en los párrafos */
  .prose p {
    line-height: 1.75;
    margin-bottom: 1.25em; /* Añade espacio debajo de cada párrafo */
  }

  /* Da más aire a los títulos de las secciones */
  .prose h3 {
    margin-top: 2.5em; /* Más espacio arriba del título */
    margin-bottom: 1em; /* Más espacio debajo del título */
  }

  /* Estiliza las preguntas (etiquetas <strong>) para que destaquen */
  .prose p > strong {
    display: block; /* Hace que la pregunta ocupe su propia línea */
    font-size: 1.125rem; /* Un poco más grande que el texto normal */
    font-weight: 700;
    color: #1e293b; /* Un color un poco más oscuro (slate-800) */
    margin-top: 1.5em; /* Espacio antes de cada pregunta */
    margin-bottom: 0.5em;
  }

  /* Mejora el espaciado de las listas */
  .prose ul,
  .prose ol {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    line-height: 1.7;
  }
  
  /*
 * Estilos para las listas de beneficios en las páginas de contenido.
 * Esto dará a la lista en la página "Donate" y otras similares un aspecto profesional.
*/

/* Primero, quitamos los estilos por defecto de la lista */
.prose .wp-block-list {
    list-style: none;
    padding-left: 0;
    margin-top: 1.5em;
    margin-bottom: 2em;
}

/* Damos estilo a cada elemento de la lista */
.prose .wp-block-list li {
    position: relative;
    padding-left: 2.25rem; /* Espacio para el icono */
    margin-bottom: 1rem; /* Espacio entre cada punto */
    line-height: 1.6;
}

/* Añadimos un icono de checkmark para un impacto visual */
.prose .wp-block-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.5rem; /* Tamaño del icono */
    line-height: 1;
    font-weight: bold;
    color: #b91c1c; /* Color rojo de la marca (red-700) */
}

/* Estilizamos el texto en negrita dentro de cada punto */
.prose .wp-block-list li strong {
    color: #1e3a8a; /* Un azul oscuro y serio (blue-900) */
    font-family: 'Roboto Slab', serif; /* Usamos la fuente de los títulos */
}

/*
 * ===================================================================
 * CSS Personalizado para la Página de Suscripción de Paid Member Subscriptions
 * Objetivo: Mejorar el diseño por defecto para que coincida con la marca
 * Patriot News 24/7.
 *
 * Instrucciones: Copia y pega este código en Apariencia > Personalizar > CSS Adicional
 * en tu panel de administración de WordPress.
 * ===================================================================
*/

/* --- Estilo General del Contenedor de Planes --- */
.pmpro-body-levels .pmpro_content,
.pms-form-container {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Estilo para cada plan de suscripción --- */
.pms-subscription-plan {
    border: 2px solid #e5e7eb; /* Borde gris claro */
    background-color: #ffffff;
    border-radius: 0.75rem; /* Esquinas más redondeadas */
    padding: 2rem;
    margin-bottom: 1.5rem;
    transition: all 0.2s ease-in-out;
}

/* Efecto al seleccionar un plan */
.pms-subscription-plan input[type="radio"]:checked + .pms-subscription-plan-content {
    /* Este selector es conceptual, podría necesitar ajuste dependiendo del HTML exacto del plugin */
}

/* --- Resaltar el Plan Anual (Liberty Guard) --- */
/* NOTA: Tendrás que encontrar el ID específico de tu plan "Liberty Guard".
   Usa la herramienta de inspección de tu navegador. Generalmente es algo como "pms-subscription-plan-123".
   Reemplaza '#pms-subscription-plan-YOUR_PLAN_ID' con el ID correcto.
*/
#pms-subscription-plan-120 { /* Ejemplo, ajusta este ID */
    border-color: #ca8a04; /* Borde dorado/ámbar */
    position: relative;
    background-color: #fffbeb; /* Un fondo muy ligero para destacarlo */
}

/* Añadir una cinta de "Best Value" o "Most Popular" */
#pms-subscription-plan-120::before {
    content: 'BEST VALUE';
    position: absolute;
    top: -1px;
    right: 20px;
    background-color: #ca8a04; /* Color dorado/ámbar */
    color: #ffffff;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 0 0 0.5rem 0.5rem;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.05em;
}


/* --- Estilo del Contenido del Plan --- */
.pms-subscription-plan-name {
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827; /* Azul oscuro */
    margin: 0;
}

.pms-subscription-plan-price {
    font-family: 'Roboto Slab', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e3a8a; /* Un azul más vibrante */
    margin-top: 0.25rem;
}

.pms-subscription-plan-description {
    font-size: 1rem !important;
    color: #475569; /* Gris azulado (slate-600) */
    margin-top: 0.75rem;
    line-height: 1.6;
}

/* --- Estilo de la Sección de Pago --- */
#pms-payment-details-fields h4,
.pms-payment-details h4 {
    font-family: 'Roboto Slab', serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 0.5rem;
}

/* Mejora los campos de Stripe para que se vean más limpios */
.StripeElement {
    background-color: white;
    padding: 12px 14px;
    border-radius: 0.375rem;
    border: 1px solid #d1d5db;
}

.StripeElement--focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); /* Sombra roja sutil al enfocar */
    border-color: #ef4444; /* Borde rojo */
}

/* Estilo del botón de envío */
#pms-submit-button,
.pms-form-submit input[type="submit"] {
    background-color: #b91c1c !important; /* Rojo de la marca */
    color: #ffffff !important;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: 100%;
    padding: 1rem;
    border-radius: 0.5rem;
    border: none;
    transition: background-color 0.2s ease-in-out;
}

#pms-submit-button:hover,
.pms-form-submit input[type="submit"]:hover {
    background-color: #991b1b !important; /* Rojo más oscuro al pasar el ratón */
}


/*
 * ===================================================================
 * CSS Personalizado para la Página de Suscripción de Paid Member Subscriptions
 * Objetivo: Mejorar el diseño por defecto para que coincida con la marca
 * Patriot News 24/7.
 *
 * Instrucciones: Copia y pega este código en Apariencia > Personalizar > CSS Adicional
 * en tu panel de administración de WordPress.
 * ===================================================================
*/

/* --- Estilo General del Contenedor de Planes --- */
.pmpro-body-levels .pmpro_content,
.pms-form-container {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* --- Estilo para cada plan de suscripción --- */
.pms-subscription-plan {
    border: 2px solid #e5e7eb; /* Borde gris claro */
    background-color: #ffffff;
    border-radius: 0.75rem; /* Esquinas más redondeadas */
    padding: 2rem;
    margin-bottom: 1.5rem;
    transition: all 0.2s ease-in-out;
}

/* Efecto al seleccionar un plan */
.pms-subscription-plan input[type="radio"]:checked + .pms-subscription-plan-content {
    /* Este selector es conceptual, podría necesitar ajuste dependiendo del HTML exacto del plugin */
}

/* --- Resaltar el Plan Anual (Liberty Guard) --- */
/* NOTA: Tendrás que encontrar el ID específico de tu plan "Liberty Guard".
   Usa la herramienta de inspección de tu navegador. Generalmente es algo como "pms-subscription-plan-123".
   Reemplaza '#pms-subscription-plan-YOUR_PLAN_ID' con el ID correcto.
*/
#pms-subscription-plan-120 { /* Ejemplo, ajusta este ID */
    border-color: #ca8a04; /* Borde dorado/ámbar */
    position: relative;
    background-color: #fffbeb; /* Un fondo muy ligero para destacarlo */
}

/* Añadir una cinta de "Best Value" o "Most Popular" */
#pms-subscription-plan-120::before {
    content: 'BEST VALUE';
    position: absolute;
    top: -1px;
    right: 20px;
    background-color: #ca8a04; /* Color dorado/ámbar */
    color: #ffffff;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 0 0 0.5rem 0.5rem;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 0.05em;
}


/* --- Estilo del Contenido del Plan --- */
.pms-subscription-plan-name {
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827; /* Azul oscuro */
    margin: 0;
}

.pms-subscription-plan-price {
    font-family: 'Roboto Slab', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e3a8a; /* Un azul más vibrante */
    margin-top: 0.25rem;
}

.pms-subscription-plan-description {
    font-size: 1rem;
    color: #475569; /* Gris azulado (slate-600) */
    margin-top: 0.75rem;
    line-height: 1.6;
}

/* --- Estilo de la Sección de Pago --- */
#pms-payment-details-fields h4,
.pms-payment-details h4 {
    font-family: 'Roboto Slab', serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 0.5rem;
}

/* Mejora los campos de Stripe para que se vean más limpios */
.StripeElement {
    background-color: white;
    padding: 12px 14px;
    border-radius: 0.375rem;
    border: 1px solid #d1d5db;
}

.StripeElement--focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1); /* Sombra roja sutil al enfocar */
    border-color: #ef4444; /* Borde rojo */
}

/* --- ESTILO DEL BOTÓN DE ENVÍO MEJORADO --- */
#pms-submit-button,
.pms-form-submit input[type="submit"],
input[name="pms_new_subscription"][type="submit"] {
    background-color: #b91c1c !important; /* Rojo de la marca */
    color: #ffffff !important;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    
    padding: 1rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer; /* Añade cursor de puntero */
    transition: all 0.2s ease-in-out;
}

#pms-submit-button:hover,
.pms-form-submit input[type="submit"]:hover,
input[name="pms_new_subscription"][type="submit"]:hover {
    background-color: #991b1b !important; /* Rojo más oscuro al pasar el ratón */
    transform: translateY(-2px); /* Ligero levantamiento al pasar el ratón */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra para dar profundidad */
}


/*
 * ===================================================================
 * CSS Personalizado para la Página de Cuenta y Confirmación
 * de Paid Member Subscriptions.
 * Objetivo: Mejorar el diseño para que coincida con la marca Patriot News 24/7.
 * ===================================================================
*/

/* --- 1. Mensaje de Éxito de Suscripción --- */
.pms_success-messages-wrapper p {
    background-color: #dcfce7; /* Verde claro (green-100) */
    border: 1px solid #22c55e; /* Borde verde (green-500) */
    color: #166534; /* Texto verde oscuro (green-800) */
    padding: 1.5rem;
    border-radius: 0.5rem;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.pms_success-messages-wrapper .pms-notice-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 1.1em;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.25rem;
}

/* --- 2. Tabla de Detalles de la Suscripción --- */
.pms-account-subscription-details-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    overflow: hidden; /* Para que el borde redondeado afecte a las filas */
}

.pms-account-subscription-details-table tr {
    border-bottom: 1px solid #e5e7eb; /* slate-200 */
}

.pms-account-subscription-details-table tr:last-child {
    border-bottom: none;
}

.pms-account-subscription-details-table td {
    padding: 1rem 1.5rem;
    font-size: 1rem;
    color: #475569; /* slate-600 */
    vertical-align: middle;
}

/* La primera columna (la etiqueta, ej: "Status") */
.pms-account-subscription-details-table td:first-child {
    font-weight: 700;
    color: #1e293b; /* slate-800 */
    width: 30%;
}

/* Estilo para el estado "Active" */
.pms-account-subscription-details-table .status-active {
    font-weight: 700;
    color: #16a34a; /* green-600 */
}


/* --- 3. Estilo para los Botones de Acción --- */
.pms-account-subscription-details-table__actions td {
    /* Contenedor de los botones */
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem; /* Espacio entre botones */
}

.pms-account-subscription-action-link {
    display: inline-block;
    padding: 0.6rem 1rem;
    border-radius: 0.375rem;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 700;
    text-align: center;
    transition: all 0.2s ease-in-out;
}

/* Botón principal (Cambiar) */
a.pms-account-subscription-action-link__change {
    background-color: #2563eb; /* blue-600 */
    color: white;
}

a.pms-account-subscription-action-link__change:hover {
    background-color: #1d4ed8; /* blue-700 */
    transform: translateY(-1px);
}

/* Botones secundarios/destructivos (Cancelar, Abandonar) */
a.pms-account-subscription-action-link__cancel,
a.pms-account-subscription-action-link__abandon {
    background-color: #e5e7eb; /* slate-200 */
    color: #334155; /* slate-700 */
}

a.pms-account-subscription-action-link__cancel:hover,
a.pms-account-subscription-action-link__abandon:hover {
    background-color: #b91c1c; /* red-700 */
    color: white;
}


/*
 * ===================================================================
 * CSS Personalizado para el Formulario de Login de Paid Member Subscriptions
 * Objetivo: Mejorar el diseño para que coincida con la marca Patriot News 24/7.
 *
 * Instrucciones: Copia y pega este código en Apariencia > Personalizar > CSS Adicional
 * en tu panel de administración de WordPress.
 * ===================================================================
*/

/* --- Contenedor Principal del Formulario --- */
.pmpro-body-login .pmpro_content,
form#pms_login {
    max-width: 500px; /* Un ancho más contenido para un formulario de login */
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
    padding: 2.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* --- Estilo para cada campo del formulario --- */
#pms_login p {
    margin-bottom: 1.5rem;
}

/* --- Etiquetas (Labels) --- */
#pms_login label {
    display: block;
    font-weight: 600;
    color: #334155; /* slate-700 */
    margin-bottom: 0.5rem;
}

/* --- Campos de Texto (Inputs) --- */
#pms_login input[type="text"],
#pms_login input[type="password"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db; /* gray-300 */
    border-radius: 0.375rem;
    transition: all 0.2s ease-in-out;
}

#pms_login input[type="text"]:focus,
#pms_login input[type="password"]:focus {
    border-color: #b91c1c; /* red-700 */
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.1);
    outline: none;
}

/* --- Checkbox de "Remember Me" --- */
#pms_login .login-remember {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#pms_login .login-remember label {
    margin-bottom: 0; /* Quitamos el margen inferior para alinear */
    font-weight: normal;
    color: #475569; /* slate-600 */
}

#pms_login .login-remember input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    border-color: #d1d5db;
}

#pms_login .login-remember input[type="checkbox"]:checked {
    background-color: #b91c1c; /* red-700 */
    border-color: #b91c1c;
}

/* --- Botón de Login --- */
#pms_login .login-submit input#wp-submit {
    background-color: #b91c1c !important; /* Rojo de la marca */
    color: #ffffff !important;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: 100%;
    padding: 1rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

#pms_login .login-submit input#wp-submit:hover {
    background-color: #991b1b !important; /* Rojo más oscuro */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* --- Enlaces Extra (Register | Lost Password) --- */
#pms_login .login-extra {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.875rem;
}

#pms_login .login-extra a {
    color: #1e3a8a; /* Azul oscuro */
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

#pms_login .login-extra a:hover {
    color: #b91c1c; /* Rojo al pasar el ratón */
    text-decoration: underline;
}

#pms_login .login-extra .separator {
    margin: 0 0.5rem;
    color: #9ca3af; /* gray-400 */
}


/*
 * ===================================================================
 * CSS Personalizado para los Formularios de Cuenta de Paid Member Subscriptions
 * Incluye: Login, Edit Profile, etc.
 * Objetivo: Mejorar el diseño para que coincida con la marca Patriot News 24/7.
 *
 * Instrucciones: Copia y pega este código en Apariencia > Personalizar > CSS Adicional
 * en tu panel de administración de WordPress.
 * ===================================================================
*/

/* --- Estilos Comunes para Contenedores de Formularios --- */
.pmpro-body-login .pmpro_content,
form#pms_login,
form#pms_edit-profile-form {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
    padding: 2.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* --- Estilos Comunes para Campos de Formulario --- */
#pms_login p,
#pms_edit-profile-form .pms-field {
    margin-bottom: 1.5rem;
}

/* --- Etiquetas Comunes (Labels) --- */
#pms_login label,
#pms_edit-profile-form label {
    display: block;
    font-weight: 600;
    color: #334155; /* slate-700 */
    margin-bottom: 0.5rem;
}

/* --- Campos de Texto Comunes (Inputs) --- */
#pms_login input[type="text"],
#pms_login input[type="password"],
#pms_edit-profile-form input[type="text"],
#pms_edit-profile-form input[type="password"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db; /* gray-300 */
    border-radius: 0.375rem;
    transition: all 0.2s ease-in-out;
    background-color: #ffffff;
}

#pms_login input[type="text"]:focus,
#pms_login input[type="password"]:focus,
#pms_edit-profile-form input[type="text"]:focus,
#pms_edit-profile-form input[type="password"]:focus {
    border-color: #b91c1c; /* red-700 */
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.1);
    outline: none;
}

/* --- Estilo para campos deshabilitados (como el Username en Edit Profile) --- */
#pms_edit-profile-form input:disabled {
    background-color: #f3f4f6; /* gray-100 */
    cursor: not-allowed;
    color: #6b7280; /* gray-500 */
}


/* --- Estilos Específicos del Formulario de Login --- */
#pms_login .login-remember {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#pms_login .login-remember label {
    margin-bottom: 0;
    font-weight: normal;
    color: #475569; /* slate-600 */
}

#pms_login .login-remember input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    border-color: #d1d5db;
}

#pms_login .login-remember input[type="checkbox"]:checked {
    background-color: #b91c1c; /* red-700 */
    border-color: #b91c1c;
}

#pms_login .login-extra {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.875rem;
}

#pms_login .login-extra a {
    color: #1e3a8a; /* Azul oscuro */
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

#pms_login .login-extra a:hover {
    color: #b91c1c; /* Rojo al pasar el ratón */
    text-decoration: underline;
}

#pms_login .login-extra .separator {
    margin: 0 0.5rem;
    color: #9ca3af; /* gray-400 */
}


/* --- Estilos Comunes para Botones de Envío --- */
#pms_login .login-submit input#wp-submit,
#pms_edit-profile-form input[type="submit"] {
    background-color: #b91c1c !important; /* Rojo de la marca */
    color: #ffffff !important;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: 100%;
    padding: 1rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

#pms_login .login-submit input#wp-submit:hover,
#pms_edit-profile-form input[type="submit"]:hover {
    background-color: #991b1b !important; /* Rojo más oscuro */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Eliminar el estilo de lista (viñetas) en el formulario de editar perfil */
#pms_edit-profile-form ul.pms-form-fields-wrapper {
    list-style: none;
    padding: 0;
}


/*
 * ===================================================================
 * CSS Personalizado para los Formularios de Cuenta de Paid Member Subscriptions
 * Incluye: Login, Edit Profile, Payments, etc.
 * Objetivo: Mejorar el diseño para que coincida con la marca Patriot News 24/7.
 *
 * Instrucciones: Copia y pega este código en Apariencia > Personalizar > CSS Adicional
 * en tu panel de administración de WordPress.
 * ===================================================================
*/

/* --- Estilos Comunes para Contenedores de Formularios y Contenido de Cuenta --- */
.pmpro-body-login .pmpro_content,
.pmpro-body-account .pmpro_content, /* Aplica a todas las páginas de la cuenta */
form#pms_login,
form#pms_edit-profile-form {
    max-width: 800px; /* Ancho más generoso para las páginas de cuenta */
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
    padding: 2.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* --- NUEVO: Estilos para la Navegación de la Cuenta (Subscriptions, Edit Profile, etc.) --- */
nav.pms-account-navigation {
    margin-bottom: 2rem;
    border-bottom: 2px solid #e5e7eb; /* slate-200 */
}

nav.pms-account-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1.5rem;
}

nav.pms-account-navigation a {
    display: block;
    padding-bottom: 1rem;
    font-weight: 600;
    color: #475569; /* slate-600 */
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease-in-out;
}

nav.pms-account-navigation a:hover {
    color: #1e3a8a; /* blue-900 */
    border-bottom-color: #9ca3af; /* gray-400 */
}

/* Estilo para el enlace activo */
nav.pms-account-navigation a.pms-account-navigation-link--active {
    color: #b91c1c; /* red-700 */
    border-bottom-color: #b91c1c;
}


/* --- NUEVO: Estilo para la Tabla de Historial de Pagos --- */
table#pms-payment-history {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

table#pms-payment-history thead {
    background-color: #f8fafc; /* slate-50 */
}

table#pms-payment-history th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    color: #334155; /* slate-700 */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #e5e7eb; /* slate-200 */
}

table#pms-payment-history tbody tr {
    border-bottom: 1px solid #f1f5f9; /* slate-100 */
}

table#pms-payment-history tbody tr:last-child {
    border-bottom: none;
}

table#pms-payment-history td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    color: #475569;
}

/* Estilo para el estado "Completed" */
table#pms-payment-history .status-completed {
    color: #166534;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 1.0rem;
    text-align: center;
	padding: 0.5rem;
}


/* --- Estilos Comunes para Campos de Formulario --- */
#pms_login p,
#pms_edit-profile-form .pms-field {
    margin-bottom: 1.5rem;
}

/* --- Etiquetas Comunes (Labels) --- */
#pms_login label,
#pms_edit-profile-form label {
    display: block;
    font-weight: 600;
    color: #334155; /* slate-700 */
    margin-bottom: 0.5rem;
}

/* --- Campos de Texto Comunes (Inputs) --- */
#pms_login input[type="text"],
#pms_login input[type="password"],
#pms_edit-profile-form input[type="text"],
#pms_edit-profile-form input[type="password"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db; /* gray-300 */
    border-radius: 0.375rem;
    transition: all 0.2s ease-in-out;
    background-color: #ffffff;
}

#pms_login input[type="text"]:focus,
#pms_login input[type="password"]:focus,
#pms_edit-profile-form input[type="text"]:focus,
#pms_edit-profile-form input[type="password"]:focus {
    border-color: #b91c1c; /* red-700 */
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.1);
    outline: none;
}

/* --- Estilo para campos deshabilitados (como el Username en Edit Profile) --- */
#pms_edit-profile-form input:disabled {
    background-color: #f3f4f6; /* gray-100 */
    cursor: not-allowed;
    color: #6b7280; /* gray-500 */
}


/* --- Estilos Específicos del Formulario de Login --- */
#pms_login .login-remember {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#pms_login .login-remember label {
    margin-bottom: 0;
    font-weight: normal;
    color: #475569; /* slate-600 */
}

#pms_login .login-remember input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    border-color: #d1d5db;
}

#pms_login .login-remember input[type="checkbox"]:checked {
    background-color: #b91c1c; /* red-700 */
    border-color: #b91c1c;
}

#pms_login .login-extra {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.875rem;
}

#pms_login .login-extra a {
    color: #1e3a8a; /* Azul oscuro */
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

#pms_login .login-extra a:hover {
    color: #b91c1c; /* Rojo al pasar el ratón */
    text-decoration: underline;
}

#pms_login .login-extra .separator {
    margin: 0 0.5rem;
    color: #9ca3af; /* gray-400 */
}


/* --- Estilos Comunes para Botones de Envío --- */
#pms_login .login-submit input#wp-submit,
#pms_edit-profile-form input[type="submit"] {
    background-color: #b91c1c !important; /* Rojo de la marca */
    color: #ffffff !important;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: 100%;
    padding: 1rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

#pms_login .login-submit input#wp-submit:hover,
#pms_edit-profile-form input[type="submit"]:hover {
    background-color: #991b1b !important; /* Rojo más oscuro */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Eliminar el estilo de lista (viñetas) en el formulario de editar perfil */
#pms_edit-profile-form ul.pms-form-fields-wrapper {
    list-style: none;
    padding: 0;
}


/*
 * ===================================================================
 * CSS Personalizado para los Formularios de Cuenta de Paid Member Subscriptions
 * Incluye: Login, Edit Profile, Payments, Password Reset, etc.
 * Objetivo: Mejorar el diseño para que coincida con la marca Patriot News 24/7.
 *
 * Instrucciones: Copia y pega este código en Apariencia > Personalizar > CSS Adicional
 * en tu panel de administración de WordPress.
 * ===================================================================
*/

/* --- Estilos Comunes para Contenedores de Formularios y Contenido de Cuenta --- */
.pmpro-body-login .pmpro_content,
.pmpro-body-account .pmpro_content, /* Aplica a todas las páginas de la cuenta */
form#pms_login,
form#pms_edit-profile-form,
form#pms_recover_password_form { /* Añadido el formulario de reseteo de contraseña */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
    padding: 2.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* --- Estilos para la Navegación de la Cuenta (Subscriptions, Edit Profile, etc.) --- */
nav.pms-account-navigation {
    margin-bottom: 2rem;
    border-bottom: 2px solid #e5e7eb; /* slate-200 */
}

nav.pms-account-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1.5rem;
}

nav.pms-account-navigation a {
    display: block;
    padding-bottom: 1rem;
    font-weight: 600;
    color: #475569; /* slate-600 */
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease-in-out;
}

nav.pms-account-navigation a:hover {
    color: #1e3a8a; /* blue-900 */
    border-bottom-color: #9ca3af; /* gray-400 */
}

/* Estilo para el enlace activo */
nav.pms-account-navigation a.pms-account-navigation-link--active {
    color: #b91c1c; /* red-700 */
    border-bottom-color: #b91c1c;
}


/* --- Estilo para la Tabla de Historial de Pagos --- */
table#pms-payment-history {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

table#pms-payment-history thead {
    background-color: #f8fafc; /* slate-50 */
}

table#pms-payment-history th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    color: #334155; /* slate-700 */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #e5e7eb; /* slate-200 */
}

table#pms-payment-history tbody tr {
    border-bottom: 1px solid #f1f5f9; /* slate-100 */
}

table#pms-payment-history tbody tr:last-child {
    border-bottom: none;
}

table#pms-payment-history td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    color: #475569;
}

/* Estilo para el estado "Completed" */
table#pms-payment-history .status-completed {
    background-color: #dcfce7;
    color: #166534;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.75rem;
    text-align: center;
    display: inline-block;
}


/* --- Estilos Comunes para Campos de Formulario --- */
#pms_login p,
#pms_edit-profile-form .pms-field,
#pms_recover_password_form p {
    margin-bottom: 1.5rem;
}

/* --- Etiquetas Comunes (Labels) --- */
#pms_login label,
#pms_edit-profile-form label,
#pms_recover_password_form label {
    display: block;
    font-weight: 600;
    color: #334155; /* slate-700 */
    margin-bottom: 0.5rem;
}

/* --- Campos de Texto Comunes (Inputs) --- */
#pms_login input[type="text"],
#pms_login input[type="password"],
#pms_edit-profile-form input[type="text"],
#pms_edit-profile-form input[type="password"],
#pms_recover_password_form input[type="text"] { /* Añadido el campo de reseteo */
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db; /* gray-300 */
    border-radius: 0.375rem;
    transition: all 0.2s ease-in-out;
    background-color: #ffffff;
}

#pms_login input[type="text"]:focus,
#pms_login input[type="password"]:focus,
#pms_edit-profile-form input[type="text"]:focus,
#pms_edit-profile-form input[type="password"]:focus,
#pms_recover_password_form input[type="text"]:focus { /* Añadido el campo de reseteo */
    border-color: #b91c1c; /* red-700 */
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.1);
    outline: none;
}

/* --- Estilo para campos deshabilitados --- */
#pms_edit-profile-form input:disabled {
    background-color: #f3f4f6; /* gray-100 */
    cursor: not-allowed;
    color: #6b7280; /* gray-500 */
}


/* --- Estilos Específicos del Formulario de Login --- */
#pms_login .login-remember {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#pms_login .login-remember label {
    margin-bottom: 0;
    font-weight: normal;
    color: #475569; /* slate-600 */
}

#pms_login .login-remember input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    border-radius: 0.25rem;
    border-color: #d1d5db;
}

#pms_login .login-remember input[type="checkbox"]:checked {
    background-color: #b91c1c; /* red-700 */
    border-color: #b91c1c;
}

#pms_login .login-extra {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.875rem;
}

#pms_login .login-extra a {
    color: #1e3a8a; /* Azul oscuro */
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

#pms_login .login-extra a:hover {
    color: #b91c1c; /* Rojo al pasar el ratón */
    text-decoration: underline;
}

#pms_login .login-extra .separator {
    margin: 0 0.5rem;
    color: #9ca3af; /* gray-400 */
}


/* --- Estilos Comunes para Botones de Envío --- */
#pms_login .login-submit input#wp-submit,
#pms_edit-profile-form input[type="submit"],
#pms_recover_password_form input[type="submit"] { /* Añadido el botón de reseteo */
    background-color: #b91c1c !important; /* Rojo de la marca */
    color: #ffffff !important;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: 100%;
    padding: 1rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

#pms_login .login-submit input#wp-submit:hover,
#pms_edit-profile-form input[type="submit"]:hover,
#pms_recover_password_form input[type="submit"]:hover { /* Añadido el botón de reseteo */
    background-color: #991b1b !important; /* Rojo más oscuro */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* --- Estilos para eliminar viñetas en listas de formularios --- */
#pms_edit-profile-form ul.pms-form-fields-wrapper,
#pms_recover_password_form ul.pms-form-fields-wrapper {
    list-style: none;
    padding: 0;
}

/*
 * ===================================================================
 * CSS Personalizado para los Formularios de Cuenta de Paid Member Subscriptions
 * Incluye: Login, Edit Profile, Payments, Password Reset, Register, etc.
 * Objetivo: Mejorar el diseño para que coincida con la marca Patriot News 24/7.
 *
 * Instrucciones: Copia y pega este código en Apariencia > Personalizar > CSS Adicional
 * en tu panel de administración de WordPress.
 * ===================================================================
*/

/* --- Estilos Comunes para Contenedores de Formularios y Contenido de Cuenta --- */
.pmpro-body-login .pmpro_content,
.pmpro-body-account .pmpro_content, /* Aplica a todas las páginas de la cuenta */
form#pms_login,
form#pms_edit-profile-form,
form#pms_recover_password_form,
form#pms_register-form { /* Añadido el formulario de registro */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
    padding: 2.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* --- Estilos para la Navegación de la Cuenta --- */
nav.pms-account-navigation {
    margin-bottom: 2rem;
    border-bottom: 2px solid #e5e7eb;
}

nav.pms-account-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1.5rem;
}

nav.pms-account-navigation a {
    display: block;
    padding-bottom: 1rem;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease-in-out;
}

nav.pms-account-navigation a:hover {
    color: #1e3a8a;
    border-bottom-color: #9ca3af;
}

nav.pms-account-navigation a.pms-account-navigation-link--active {
    color: #b91c1c;
    border-bottom-color: #b91c1c;
}


/* --- Estilo para la Tabla de Historial de Pagos --- */
table#pms-payment-history {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

table#pms-payment-history thead {
    background-color: #f8fafc;
}

table#pms-payment-history th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #e5e7eb;
}

table#pms-payment-history tbody tr {
    border-bottom: 1px solid #f1f5f9;
}

table#pms-payment-history tbody tr:last-child {
    border-bottom: none;
}

table#pms-payment-history td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    color: #475569;
}

table#pms-payment-history .status-completed {
    background-color: #dcfce7;
    color: #166534;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.75rem;
    text-align: center;
    display: inline-block;
}


/* --- Estilos Comunes para Campos de Formulario --- */
#pms_login p,
#pms_edit-profile-form .pms-field,
#pms_recover_password_form p,
#pms_register-form .pms-field { /* Añadido el formulario de registro */
    margin-bottom: 1.5rem;
}

/* --- Etiquetas Comunes (Labels) --- */
#pms_login label,
#pms_edit-profile-form label,
#pms_recover_password_form label,
#pms_register-form label {
    display: block;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.5rem;
}

/* --- Campos de Texto Comunes (Inputs) --- */
#pms_login input[type="text"],
#pms_login input[type="password"],
#pms_edit-profile-form input[type="text"],
#pms_edit-profile-form input[type="password"],
#pms_recover_password_form input[type="text"],
#pms_register-form input[type="text"], /* Añadido registro */
#pms_register-form input[type="password"] { /* Añadido registro */
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    transition: all 0.2s ease-in-out;
    background-color: #ffffff;
}

#pms_login input[type="text"]:focus,
#pms_login input[type="password"]:focus,
#pms_edit-profile-form input[type="text"]:focus,
#pms_edit-profile-form input[type="password"]:focus,
#pms_recover_password_form input[type="text"]:focus,
#pms_register-form input[type="text"]:focus, /* Añadido registro */
#pms_register-form input[type="password"]:focus { /* Añadido registro */
    border-color: #b91c1c;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.1);
    outline: none;
}

#pms_edit-profile-form input:disabled {
    background-color: #f3f4f6;
    cursor: not-allowed;
    color: #6b7280;
}


/* --- NUEVO: Estilos para la sección de selección de planes en el registro --- */
#pms_register-form .pms-field-subscriptions .pms-subscription-plan {
    border: 2px solid #e5e7eb;
    background-color: #ffffff;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

#pms_register-form .pms-field-subscriptions .pms-subscription-plan:hover {
    border-color: #ca8a04;
}

#pms_register-form .pms-field-subscriptions input[type="radio"] {
    display: inline-block; /* Ocultamos el radio button por defecto */
}

/* Estilo cuando un plan está seleccionado */
#pms_register-form .pms-field-subscriptions input[type="radio"]:checked + label + .pms-subscription-plan-description {
    /* Aquí podrías añadir un estilo para el plan seleccionado, pero el borde ya lo hace evidente */
}
#pms_register-form .pms-field-subscriptions .pms-subscription-plan input[type="radio"]:checked + * {
    /* Es difícil seleccionar el div padre, así que lo dejamos así por simplicidad de CSS puro */
}


#pms_register-form .pms-subscription-plan-name,
#pms_register-form .pms-subscription-plan-price {
    font-family: 'Oswald', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
}

#pms_register-form .pms-subscription-plan-description {
    font-size: 0.9rem;
    color: #475569;
    margin-top: 0.5rem;
}

#pms_register-form .pms-subscription-plan-auto-renew label {
    font-weight: normal;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}


/* --- Estilos Comunes para Botones de Envío --- */
#pms_login .login-submit input#wp-submit,
#pms_edit-profile-form input[type="submit"],
#pms_recover_password_form input[type="submit"],
#pms_register-form input[type="submit"] { /* Añadido el botón de registro */
    background-color: #b91c1c !important;
    color: #ffffff !important;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width: 100%;
    padding: 1rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    margin-top: 1.5rem;
}

#pms_login .login-submit input#wp-submit:hover,
#pms_edit-profile-form input[type="submit"]:hover,
#pms_recover_password_form input[type="submit"]:hover,
#pms_register-form input[type="submit"]:hover { /* Añadido el botón de registro */
    background-color: #991b1b !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* --- Estilos para eliminar viñetas en listas de formularios --- */
#pms_edit-profile-form ul.pms-form-fields-wrapper,
#pms_recover_password_form ul.pms-form-fields-wrapper,
#pms_register-form ul.pms-form-fields-wrapper {
    list-style: none;
    padding: 0;
}