/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
/* ======== BASE TIPOGRÁFICA ======== */

body {
  background-color: rgb(48, 48, 48);
  color: #eeeeee;
  font-family: "Segoe UI";
  font-size: 12pt;
  line-height: 1.48;
  margin:  1.2cm 3.7cm 0 4.8cm;
  padding: 0;
}

/* Interlineado universal uniforme */
body, p, h1, h2, h3, h4, h5, h6, li, span, div, blockquote {
  line-height: 1.48;
}


/* ======== PÁRRAFOS ======== */

p {
  margin: 0 0 12pt 0;             /* separación suave */
}


/* ======== ENCABEZADOS ======== */

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  margin-top: 12pt;
  margin-bottom: 12pt;
  line-height: 1.48;
  color: #eeeeee;
}

h1 { font-size: 20pt; }
h2 { font-size: 16pt; }
h3 { font-size: 14pt; }
h4 { font-size: 13pt; }
h5 { font-size: 12pt; }
h6 { font-size: 11pt; }


/* ======== LISTAS ======== */

ul, ol {
  margin: 10px 0 10px 26px;
  padding-left: 8px;
}

li {
  margin-bottom: 6px;
}


/* ======== NEGRITA Y CURSIVA ======== */

strong, b {
  font-weight: 600;
}

em, i {
  font-style: italic;
}


/* ======== CITAS (blockquote) ======== */

blockquote {
  border-left: 4px solid rgba(255,255,255,0.5);
  padding-left: 12px;
  margin: 12pt 0;
  color: #ffffff;
}


/* ======== TABLAS ======== */

.chatgpt-table {
    border-collapse: collapse;
    width: auto;
    margin: 10px 0;
}

/* Encabezado */
.chatgpt-table th {
    font-weight: 600;
    text-align: center;
    padding: 8px;
    border: 1px solid rgba(255,255,255,0.15);
}

/* Celdas cuadradas */
.chatgpt-table td {
    border: 1px solid rgba(255,255,255,0.15); 
    padding: 0;
    text-align: center;
    vertical-align: middle;

    /* Para mantener forma de cuadrado */
    width: 80px;
    height: 0;
    padding-top: 80px;
    position: relative;
}

/* Contenido centrado */
.chatgpt-table td > div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Estilo del título con enlace */
.titulo-enlace {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13pt;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    transition: color 0.2s ease;
}

.titulo-enlace:hover {
    color: rgba(255, 255, 255, 1);
}

/* Descripción */
.descripcion {
    color: rgba(255, 255, 255, 1);
    font-size: 12pt;
    margin-top: 4px;
    display: block;
}

/* Responsive */
@media (max-width: 800px) {
    .chatgpt-table,
    .chatgpt-table tr,
    .chatgpt-table td {
        width: 100%;
        display: block;
    }

    .chatgpt-table td {
        height: auto;
        padding-top: 16px;
        margin-bottom: 20px;
    }

    .chatgpt-table td > div {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
    }
}

/* ======== ELEMENTOS INLINE ======== */
span, div {
  margin-top: 12pt;
  margin-bottom: 12pt;
  padding: 0;
}

/* ======== ENLACES ======== */
a {
  color: #eeeeee;
  font-weight: 600;
}


.search-bar {
  display: flex;
  align-items: stretch; /* input y botón alineados en altura */
  width: 100%;
  max-width: 600px;
  margin-top: 12pt;
  margin-bottom: 12pt;
}

.search-bar input {
  flex: 1;
  padding: 0 12px;              /* espacio lateral */
  border-radius: 8px 0 0 8px;   /* solo esquinas izquierda redondeadas */
  border: 1px solid rgba(255,255,255,1); 
  background-color: rgb(48,48,48);
  color: #ffffff;
  font-size: 12pt;
  line-height: 1.48;            /* altura del renglón */
  outline: none;
}

/* Botón Buscar integrado al input */
.search-bar .search-btn {
  padding: 0 14px;
  border-radius: 0 8px 8px 0;  /* solo esquinas derecha redondeadas */
  border: 1px solid rgba(255,255,255,1);
  border-left: none;            /* se une con el input */
  background-color: rgba(255,255,255,0.9); /* un solo color tenue */
  color: rgb(48, 48, 48);
  font-size: 12pt;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.search-bar .search-btn:hover {
  background-color: rgba(255,255,255,1);
}

.section-divider {
  height: 1px; 
  background-color: rgba(255,255,255,0.2); /* línea blanca tenue */
  margin-top: 18pt;
  margin-bottom: 18pt; /* separación arriba y abajo */
  width: 100%;
}