/* Fondo a pantalla completa centrado con flex (ayudado por clases de Bootstrap) */
body {
  background-color: #141414; /* Fallback si no carga la imagen */
  background-image: url('/images/fondo/fondo.jpg'); /* Ajusta la ruta de tu imagen de fondo */
  background-size: cover;
  background-position: center;
  margin: 0; /* Quita márgenes */
}

/* Contenedor con efecto de "parpadeo" */
.parpadeo {
  animation: parpadeo 1.5s infinite;
  border-radius: 8px;
  background-color: rgba(34, 34, 34, 0.8); /* Fondo semitransparente */
}

@keyframes parpadeo {
  0% {
    box-shadow:
      0 0 10px rgba(0, 255, 255, 0.5),
      0 0 20px rgba(0, 255, 255, 0.6),
      0 0 30px rgba(0, 255, 255, 0.7),
      0 0 40px rgba(0, 255, 255, 0.8);
  }
  50% {
    box-shadow:
      0 0 5px rgba(0, 81, 255, 0.637),
      0 0 10px rgba(0, 255, 255, 0.4),
      0 0 15px rgba(0, 255, 255, 0.5),
      0 0 20px rgba(0, 255, 255, 0.6);
  }
  100% {
    box-shadow:
      0 0 10px rgba(0, 255, 255, 0.5),
      0 0 20px rgba(0, 255, 255, 0.6),
      0 0 30px rgba(0, 255, 255, 0.7),
      0 0 40px rgba(0, 255, 255, 0.8);
  }
}

/* Ajustes del logo */
.logo {
  display: block;
  margin: 0 auto 20px;
  max-width: 100%;
  height: auto;
}

/* =================================================
   SOLUCIÓN DE VISIBILIDAD PARA MENSAJES DE CHATGPT
   =================================================
   
   Este CSS corrige el problema de texto blanco sobre fondo blanco
   que ocurre específicamente con los mensajes de la plataforma ChatGPT/OpenAI.
   
   Las reglas están diseñadas para cubrir múltiples escenarios posibles
   de implementación en el HTML generado por PHP.
*/

/* --------------------------------------------------
   ESCENARIO A: Clase aplicada al body o contenedor principal
   -------------------------------------------------- */
   
/* Cuando el body tiene la clase platform-chatgpt */
body.platform-chatgpt .recuadro-mensaje p,
body.platform-chatgpt .recuadro-mensaje span,
body.platform-chatgpt .recuadro-mensaje div,
body.platform-chatgpt .recuadro-mensaje {
    color: #333333 !important;
    text-shadow: none !important;
}

/* Variante con contenedor principal */
.platform-chatgpt .recuadro-mensaje p,
.platform-chatgpt .recuadro-mensaje span,
.platform-chatgpt .recuadro-mensaje div,
.platform-chatgpt .recuadro-mensaje {
    color: #333333 !important;
    text-shadow: none !important;
}

/* --------------------------------------------------
   ESCENARIO B: Clase específica en el contenedor del mensaje
   -------------------------------------------------- */
   
/* Cuando el contenedor del mensaje tiene clase platform-chatgpt */
.recuadro-mensaje.platform-chatgpt,
.recuadro-mensaje.platform-chatgpt p,
.recuadro-mensaje.platform-chatgpt span,
.recuadro-mensaje.platform-chatgpt div,
.recuadro-mensaje.platform-chatgpt * {
    color: #333333 !important;
    text-shadow: none !important;
}

/* Variantes adicionales de nomenclatura */
.recuadro-mensaje.chatgpt,
.recuadro-mensaje.chatgpt p,
.recuadro-mensaje.chatgpt span,
.recuadro-mensaje.chatgpt div,
.recuadro-mensaje.chatgpt * {
    color: #333333 !important;
    text-shadow: none !important;
}

.recuadro-mensaje.openai,
.recuadro-mensaje.openai p,
.recuadro-mensaje.openai span,
.recuadro-mensaje.openai div,
.recuadro-mensaje.openai * {
    color: #333333 !important;
    text-shadow: none !important;
}

/* --------------------------------------------------
   ESCENARIO C: Atributo data-platform
   -------------------------------------------------- */
   
/* Cuando se usa data-platform="chatgpt" */
.recuadro-mensaje[data-platform="chatgpt"],
.recuadro-mensaje[data-platform="chatgpt"] p,
.recuadro-mensaje[data-platform="chatgpt"] span,
.recuadro-mensaje[data-platform="chatgpt"] div,
.recuadro-mensaje[data-platform="chatgpt"] * {
    color: #333333 !important;
    text-shadow: none !important;
}

/* Variantes adicionales del atributo data */
.recuadro-mensaje[data-platform="openai"],
.recuadro-mensaje[data-platform="openai"] p,
.recuadro-mensaje[data-platform="openai"] span,
.recuadro-mensaje[data-platform="openai"] div,
.recuadro-mensaje[data-platform="openai"] * {
    color: #333333 !important;
    text-shadow: none !important;
}

.recuadro-mensaje[data-plataforma="chatgpt"],
.recuadro-mensaje[data-plataforma="chatgpt"] p,
.recuadro-mensaje[data-plataforma="chatgpt"] span,
.recuadro-mensaje[data-plataforma="chatgpt"] div,
.recuadro-mensaje[data-plataforma="chatgpt"] * {
    color: #333333 !important;
    text-shadow: none !important;
}

/* --------------------------------------------------
   REGLAS ADICIONALES DE SEGURIDAD
   -------------------------------------------------- */
   
/* Forzar color de texto para cualquier elemento que contenga "chatgpt" en su clase */
[class*="chatgpt"] {
    color: #333333 !important;
}

[class*="openai"] {
    color: #333333 !important;
}

/* Asegurar que los enlaces dentro de mensajes ChatGPT también sean visibles */
.recuadro-mensaje.platform-chatgpt a,
.recuadro-mensaje[data-platform="chatgpt"] a,
[class*="chatgpt"] a {
    color: #0066cc !important;
    text-decoration: underline !important;
}

/* --------------------------------------------------
   COMPATIBILIDAD CON FONDOS DINÁMICOS
   -------------------------------------------------- */
   
/* En caso de que el fondo cambie, asegurar contraste */
.recuadro-mensaje.platform-chatgpt,
.recuadro-mensaje[data-platform="chatgpt"],
[class*="chatgpt"] {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid #ddd !important;
    padding: 10px !important;
}

/* =================================================
   SOLUCIÓN DEFINITIVA PARA CONTENIDO DE EMAILS
   =================================================
   
   Esta sección contiene las reglas CSS específicas para solucionar
   el problema de texto blanco en mensajes de ChatGPT/OpenAI.
   
   Basado en el análisis del código, el contenido se renderiza en
   inicio.php línea 426-430 dentro del contenedor .email-content
*/

/* --------------------------------------------------
   REGLAS DE ALTA ESPECIFICIDAD PARA EMAIL-CONTENT
   -------------------------------------------------- */

/* Forzar color oscuro para TODOS los elementos de texto dentro del contenedor email-content */
.email-content,
.email-content *,
.email-content p,
.email-content span,
.email-content div,
.email-content td,
.email-content th,
.email-content li,
.email-content h1,
.email-content h2,
.email-content h3,
.email-content h4,
.email-content h5,
.email-content h6,
.email-content strong,
.email-content b,
.email-content em,
.email-content i,
.email-content u,
.email-content small,
.email-content code,
.email-content pre {
    color: #212529 !important;
    text-shadow: none !important;
}

/* Forzar fondo claro para elementos que puedan tener fondo oscuro */
.email-content,
.email-content div,
.email-content table,
.email-content td,
.email-content th {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* Sobrescribir estilos inline específicos comunes de ChatGPT/OpenAI */
.email-content [style*="color: white"],
.email-content [style*="color: #fff"],
.email-content [style*="color: #ffffff"],
.email-content [style*="color:white"],
.email-content [style*="color:#fff"],
.email-content [style*="color:#ffffff"] {
    color: #212529 !important;
}

.email-content [style*="background-color: black"],
.email-content [style*="background-color: #000"],
.email-content [style*="background-color: #000000"],
.email-content [style*="background-color:black"],
.email-content [style*="background-color:#000"],
.email-content [style*="background-color:#000000"] {
    background-color: #f8f9fa !important;
    background: #f8f9fa !important;
}

/* Asegurar que enlaces sean visibles */
.email-content a,
.email-content a:link,
.email-content a:visited {
    color: #0066cc !important;
    text-decoration: underline !important;
}

.email-content a:hover,
.email-content a:focus {
    color: #0052a3 !important;
}

/* --------------------------------------------------
   REGLAS ESPECÍFICAS PARA PATRONES DE CHATGPT
   -------------------------------------------------- */

/* Detectar y corregir elementos con texto común de ChatGPT */
.email-content *:contains("ChatGPT"),
.email-content *:contains("OpenAI"),
.email-content *:contains("verification"),
.email-content *:contains("código"),
.email-content *:contains("code") {
    color: #212529 !important;
    background-color: #f8f9fa !important;
}

/* Corregir divs con fondos oscuros que son comunes en mensajes de ChatGPT */
.email-content div[style*="background"],
.email-content div[style*="background-color"],
.email-content span[style*="background"],
.email-content span[style*="background-color"] {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

/* --------------------------------------------------
   REGLAS DE EMERGENCIA - MÁXIMA PRIORIDAD
   -------------------------------------------------- */

/* Si todas las reglas anteriores fallan, estas reglas de emergencia forzarán visibilidad */
.email-content {
    /* Forzar que todos los elementos sean visibles */
    -webkit-text-fill-color: #212529 !important;
    -webkit-text-stroke-color: #212529 !important;
    text-fill-color: #212529 !important;
    text-stroke-color: #212529 !important;
}

/* Regla nuclear: forzar color en absolutamente todos los elementos */
.email-content * {
    color: #212529 !important;
    background-color: transparent !important;
}

/* Asegurar que el contenedor principal tenga fondo blanco */
.email-content {
    background-color: #ffffff !important;
    background: #ffffff !important;
    padding: 15px !important;
}

/* --------------------------------------------------
   REGLAS DE COMPATIBILIDAD
   -------------------------------------------------- */

/* Asegurar que el contenido siga siendo responsive */
.email-content {
    max-width: 100% !important;
    overflow-x: auto !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
}

/* Mantener márgenes y espaciado adecuado */
.email-content p {
    margin-bottom: 10px !important;
}

.email-content table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.email-content td,
.email-content th {
    padding: 8px !important;
    border: 1px solid #ddd !important;
}