/* ============================================================
   SECCIÓN DE CONTENIDO PRINCIPAL (.seccion-contenido-principal)
   ============================================================
   Estilos para el contenido dinámico (información de categoría y
   FAQs) que muestran los listados de negocios (negocio_categoria.php).

   El HTML procede de la base de datos (tabla infocategorias) y puede
   incluir encabezados (h2-h6), listas (ul/ol), tablas, enlaces,
   imágenes, etc. sin clases utilitarias. Todo el estilo se define
   aquí acotado a la sección, para no tener que maquetar cada
   listado o tabla a mano y sin afectar al resto de la web.

   Los elementos que traigan clases heredadas del contenido ya
   guardado (faq-list, estadisticas-table, categoriasinfo*) se
   excluyen con :not() para no alterar los textos publicados.

   Paleta (la del diseño actual del sitio):
   - Encabezados / strong: #111827 (gray-900)
   - Texto:                #374151 (gray-700)
   - Texto secundario:     #4b5563 (gray-600)
   - Enlaces:              #dc2626 (red-600) / #b91c1c (hover)
   - Bordes:               #e5e7eb (gray-200) y #ddd en tablas
   ============================================================ */

/* ---------- Base de la sección ---------- */
.seccion-contenido-principal {
    color: #374151;
    font-size: 1rem;
    line-height: 1.75;
    overflow-wrap: break-word;
}

/* ---------- Párrafos ---------- */
.seccion-contenido-principal p {
    margin-bottom: 1rem;
    line-height: 1.75;
}

.seccion-contenido-principal p:last-child {
    margin-bottom: 0;
}

/* ---------- Encabezados ---------- */
/* h2 y h3 conservan los valores que ya tenía la web */
.seccion-contenido-principal h2 {
    font-size: 1.4rem;
    line-height: 1.4;
    font-weight: 700;
    margin-bottom: 1.5rem;
    margin-top: 1rem;
    color: #111827;
}

.seccion-contenido-principal h3 {
    font-size: 1.25rem;
    line-height: 1.4;
    font-weight: 700;
    margin-bottom: 1.5rem;
    margin-top: 1rem;
    color: #111827;
}

.seccion-contenido-principal h4 {
    font-size: 1.125rem;
    line-height: 1.4;
    font-weight: 700;
    margin-bottom: 0.75rem;
    margin-top: 1.25rem;
    color: #111827;
}

.seccion-contenido-principal h5,
.seccion-contenido-principal h6 {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 700;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
    color: #111827;
}

/* Sin margen superior cuando el elemento abre la sección */
.seccion-contenido-principal h2:first-child,
.seccion-contenido-principal h3:first-child,
.seccion-contenido-principal h4:first-child,
.seccion-contenido-principal ul:first-child,
.seccion-contenido-principal ol:first-child,
.seccion-contenido-principal table:first-child {
    margin-top: 0;
}

/* ---------- Enlaces (rojo con subrayado punteado, como en la web) ---------- */
.seccion-contenido-principal a {
    color: #dc2626;
    text-decoration: underline;
    text-decoration-style: dotted;
    transition: text-decoration-style 0.3s ease, color 0.2s ease;
}

.seccion-contenido-principal a:hover {
    color: #b91c1c;
    text-decoration-style: solid;
}

/* ---------- Listas ---------- */
.seccion-contenido-principal ul:not(.faq-list) {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin: 1rem 0;
}

.seccion-contenido-principal ol {
    list-style-type: decimal;
    padding-left: 1.5rem;
    margin: 1rem 0;
}

.seccion-contenido-principal li {
    margin-bottom: 0.5rem;
}

.seccion-contenido-principal li:last-child {
    margin-bottom: 0;
}

/* Listas anidadas */
.seccion-contenido-principal li ul,
.seccion-contenido-principal li ol {
    margin: 0.5rem 0 0;
}

/* ---------- Tablas ---------- */
/* Mismo diseño que las tablas existentes del sitio (.estadisticas-table):
   bordes #ddd, cabecera #f2f2f2, filas alternas #f9f9f9 y hover #f5f5f5 */
.seccion-contenido-principal table:not(.estadisticas-table) {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

.seccion-contenido-principal table:not(.estadisticas-table) th,
.seccion-contenido-principal table:not(.estadisticas-table) td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
    vertical-align: top;
}

.seccion-contenido-principal table:not(.estadisticas-table) th {
    background-color: #f2f2f2;
    color: #111827;
    font-weight: 700;
}

.seccion-contenido-principal table:not(.estadisticas-table) tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.seccion-contenido-principal table:not(.estadisticas-table) tbody tr:hover {
    background-color: #f5f5f5;
}

/* ---------- Otros elementos habituales del contenido ---------- */
.seccion-contenido-principal strong {
    color: #111827;
}

.seccion-contenido-principal img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1rem 0;
}

.seccion-contenido-principal blockquote {
    border-left: 4px solid #e5e7eb;
    padding: 0.5rem 0 0.5rem 1rem;
    margin: 1.5rem 0;
    color: #4b5563;
    font-style: italic;
}

.seccion-contenido-principal hr {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 2rem 0;
}

.seccion-contenido-principal code {
    background-color: #f1f5f9;
    border-radius: 4px;
    padding: 0.125rem 0.375rem;
    font-size: 0.875em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.seccion-contenido-principal pre {
    background-color: #1f2937;
    color: #f9fafb;
    border-radius: 8px;
    padding: 1rem;
    margin: 1.5rem 0;
    overflow-x: auto;
}

.seccion-contenido-principal pre code {
    background-color: transparent;
    color: inherit;
    padding: 0;
}

/* ---------- Tablas en móvil (igual que .estadisticas-table) ---------- */
/* Sin poder envolver las tablas del contenido en un .tabla-container,
   se convierte la propia tabla en contenedor desplazable (display: block
   + overflow-x: auto), el patrón estándar para tablas responsive. */
@media (max-width: 768px) {
    .seccion-contenido-principal table:not(.estadisticas-table) {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* scroll suave en iOS, igual que .tabla-container */
    }

    .seccion-contenido-principal table:not(.estadisticas-table) th,
    .seccion-contenido-principal table:not(.estadisticas-table) td {
        padding: 8px;
        font-size: 13px;
    }
}