/* ============================================================
   Compatibilidad de contenido importado
   ------------------------------------------------------------
   Estilos para el HTML que llega desde WordPress / Divi /
   Ultimate Addons y que sirve pagina.php desde la tabla `paginas`.

   Contexto importante: sanitizeRichHtml() elimina el atributo
   `style` y las etiquetas <script>/<style>/<iframe>. Por eso los
   estilos inline que traía el contenido original NO se aplican
   y todas las decisiones de estilo deben vivir aquí.

   Reemplaza estos ~34 estilos inline que se perdían:
     font-weight:300  x13  |  font-style:normal x13
     text-align       x9   |  width             x8
     height:60px      x4   |  border-collapse   x1
   ============================================================ */

/* ------------------------------------------------------------
   1. Base tipográfica y de bloque
   ------------------------------------------------------------ */
.info-page h1,
.info-page h2,
.info-page h3,
.info-page h4,
.info-page h5,
.info-page h6 {
    color: var(--ip-title, var(--primary, #2B8888));
    line-height: 1.3;
    margin: 1.75rem 0 0.75rem;
}
.info-page h1 { font-size: clamp(1.6rem, 3.2vw, 2.1rem); font-weight: 800; margin-top: 0; }
.info-page h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); font-weight: 700; }
.info-page h3 { font-size: 1.2rem; font-weight: 700; }
.info-page h4 { font-size: 1.05rem; font-weight: 700; }

.info-page p {
    margin: 0 0 1rem;
    color: var(--text-dark, #10102e);
    font-size: var(--ip-text-size, 1.05rem);
    line-height: var(--ip-line-height, 1.75);
}
.info-page ul,
.info-page ol {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
    color: var(--text-dark, #10102e);
    line-height: var(--ip-line-height, 1.75);
}
.info-page li { margin-bottom: 0.4rem; }

.info-page a {
    color: var(--ip-accent, var(--accent-main, #008000));
    text-decoration: underline;
    text-underline-offset: 2px;
}
.info-page a:hover { text-decoration: none; }

.info-page img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

.info-page figure { margin: 1.25rem 0; }
.info-page figcaption {
    color: var(--text-gray, #6b6d73);
    font-size: 0.88rem;
    text-align: center;
    margin-top: 0.5rem;
}

.info-page hr {
    border: 0;
    border-top: 1px solid #e8e8ec;
    margin: 1.75rem 0;
}

/* ------------------------------------------------------------
   2. Alineación (convenciones de WordPress)
   Reemplaza los style="text-align:..." que eliminaba el saneador
   ------------------------------------------------------------ */
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft   { float: left; margin: 0 1.25rem 0.75rem 0; }
.alignright  { float: right; margin: 0 0 0.75rem 1.25rem; }
.alignnone   { margin: 0.75rem 0; }
.alignwide   { max-width: 1100px; margin-left: auto; margin-right: auto; }
.alignfull   { width: 100%; }

.has-text-align-left    { text-align: left; }
.has-text-align-center  { text-align: center; }
.has-text-align-right   { text-align: right; }
.has-text-align-justify { text-align: justify; }

/* WordPress aplica font-weight:300 + font-style:normal a los
   párrafos del editor en bloque. Se replica aquí con la fuente
   del proyecto para no depender de estilos inline. */
.info-page .has-text-align-left,
.info-page .has-text-align-justify {
    font-weight: 400;
    font-style: normal;
}

/* ------------------------------------------------------------
   3. Clases residuales de WordPress / Divi
   Los identificadores con hash (_1210dd7, c03cafe9, ultp-block-*)
   no tienen significado: aquí se neutralizan y se deja que manden
   las clases semánticas de las secciones 4 y 5.
   ------------------------------------------------------------ */
.info-page .wp-block-image { margin: 1.25rem 0; }
.info-page .size-full    { width: auto; }
.info-page .size-large   { max-width: 1024px; height: auto; }
.info-page .size-medium  { max-width: 768px; height: auto; }
.info-page .size-thumbnail { max-width: 150px; height: auto; }

.info-page .wp-caption { max-width: 100%; }
.info-page .wp-caption-text {
    color: var(--text-gray, #6b6d73);
    font-size: 0.88rem;
    text-align: center;
}

/* Sustituye <div class="wp-block-spacer" style="height:60px"> */
.info-page .wp-block-spacer { height: 60px; }

.info-page .is-style-regular { margin: 0; }

.info-page .screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Envoltura de scroll de Elementor (ds-scroll-area).
   Sus "gutters" son barras de decorado que en el CSS original de
   Elementor quedan ocultas; aquí deben ocultarse también o aparecen
   como bloques vacíos con &nbsp; antes de la tabla. */
.info-page .ds-scroll-area { display: block; }
.info-page .ds-scroll-area__horizontal-gutter,
.info-page .ds-scroll-area__vertical-gutter,
.info-page .ds-scroll-area__gutters { display: none; }

/* ------------------------------------------------------------
   4. Rejilla de Ultimate Addons (Divi)
   Reemplaza los style="font-style:normal;font-weight:300" de las
   celdas y restituye el layout de 2 columnas.
   ------------------------------------------------------------ */
.ultp-row-wrapper {
    margin: 0 0 1.25rem;
}
.ultp-row-content {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0 -0.5rem;
}
.ultp-column-wrapper {
    flex: 1 1 45%;
    min-width: 260px;
    margin: 0 0.5rem;
    box-sizing: border-box;
}
.ultp-column-wrapper > p {
    margin: 0;
    padding: 0.85rem 1rem;
    background: var(--bg-gray, #f8f8f8);
    border-left: 3px solid var(--ip-accent, var(--accent-main, #008000));
    border-radius: 6px;
    font-size: 0.98rem;
    line-height: 1.65;
    font-weight: 400;
    font-style: normal;
    text-align: left;
}
.ultp-column-wrapper > p strong:first-child {
    color: var(--ip-title, var(--primary, #2B8888));
}

@media (max-width: 640px) {
    .ultp-column-wrapper { flex: 1 1 100%; min-width: 0; }
}

/* ------------------------------------------------------------
   5. Tarjetas de contenido institucional
   Clases propias del contenido importado. Todas siguen el mismo
   patrón visual que las clases info-* de info-pages.css.
   ------------------------------------------------------------ */

/* 5.1 Encabezado interno de página (lo emite pagina.php:136) */
.info-page-header {
    margin: 0 0 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 3px solid var(--ip-accent, var(--accent-main, #008000));
    text-align: left;
}

/* 5.2 Ficha del director / unidad a cargo */
.director-info,
.encargado-info,
.juez-info {
    background: var(--bg-gray, #f8f8f8);
    border-left: 4px solid var(--ip-title, var(--primary, #2B8888));
    border-radius: 8px;
    padding: 1.1rem 1.4rem;
    margin: 0 0 1.5rem;
}
.director-info p,
.encargado-info p,
.juez-info p {
    margin: 0 0 0.4rem;
    line-height: 1.6;
}
.director-info p:last-child,
.encargado-info p:last-child,
.juez-info p:last-child { margin-bottom: 0; }
.director-info strong,
.encargado-info strong,
.juez-info strong { color: var(--ip-title, var(--primary, #2B8888)); }

.juez-info h2 {
    margin: 0 0 0.85rem;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ip-accent, var(--accent-main, #008000));
}

/* 5.3 Bloque destacado (misión, objetivo, reseñas) */
.info-destacada {
    background: linear-gradient(180deg, #f4faf4 0%, #ffffff 100%);
    border: 1px solid #dcebdc;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin: 0 0 1.5rem;
}
.info-destacada h3 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ip-accent, var(--accent-main, #008000));
}
.info-destacada p { margin: 0 0 1rem; }
.info-destacada p:last-child { margin-bottom: 0; }

/* 5.4 Horario de atención */
.horario-box {
    background: #fff8e6;
    border: 1px solid #f2dfae;
    border-left: 4px solid #d99b1c;
    border-radius: 8px;
    padding: 1.1rem 1.4rem;
    margin: 0 0 1.5rem;
}
.horario-box p { margin: 0; line-height: 1.7; }
.horario-box strong { color: #8a6100; }

/* 5.5 Secretaría / contacto interno */
.secretaria-info,
.oficina-info {
    background: #eef4fb;
    border: 1px solid #d3e2f3;
    border-radius: 8px;
    padding: 1.1rem 1.4rem;
    margin: 0 0 1.5rem;
}
.secretaria-info p,
.oficina-info p { margin: 0 0 0.4rem; line-height: 1.6; }
.secretaria-info p:last-child,
.oficina-info p:last-child { margin-bottom: 0; }
.secretaria-info strong,
.oficina-info strong { color: #1c4e80; }

/* 5.6 Listado de oficinas a cargo */
.oficinas-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.85rem;
    margin: 0 0 1.5rem;
}
.oficina-item {
    background: #fff;
    border: 1px solid #e8e8ec;
    border-top: 3px solid var(--ip-title, var(--primary, #2B8888));
    border-radius: 8px;
    padding: 0.95rem 1.1rem;
}
.oficina-item p { margin: 0; line-height: 1.6; }
.oficina-item strong {
    color: var(--ip-title, var(--primary, #2B8888));
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* 5.7 Cajas de servicio / competencias / trámites / multas */
.servicio-box,
.competencia-item,
.tramite-item,
.multa-item,
.deberes-box {
    background: #fff;
    border: 1px solid #e8e8ec;
    border-left: 3px solid var(--ip-title, var(--primary, #2B8888));
    border-radius: 8px;
    padding: 0.85rem 1.1rem;
    margin: 0 0 0.75rem;
}
.servicio-box p,
.competencia-item p,
.tramite-item p,
.multa-item p,
.deberes-box p { margin: 0; line-height: 1.65; }
.servicio-box strong,
.competencia-item strong,
.tramite-item strong,
.multa-item strong,
.deberes-box strong {
    color: var(--ip-title, var(--primary, #2B8888));
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
}

.competencia-item { border-left-color: var(--ip-accent, var(--accent-main, #008000)); }
.tramite-item     { border-left-color: #1c4e80; }
.multa-item       { border-left-color: #b91c1c; }
.deberes-box      { background: var(--bg-gray, #f8f8f8); }

/* 5.8 Detalle con icono (usado enAdmin&Finanzas) */
.icono-finanzas {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--ip-accent, var(--accent-main, #008000));
    color: #fff;
    font-size: 1.1rem;
    flex: 0 0 auto;
}

/* ------------------------------------------------------------
   6. Tablas del contenido importado
   Sustituye los style="width:..%;text-align:justify" y
   border-collapse:collapse que perdía el saneador.
   ------------------------------------------------------------ */
.info-page table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.5rem;
    font-size: 0.98rem;
}
.info-page th,
.info-page td {
    padding: 0.85rem 1rem;
    border: 1px solid #e2e2e6;
    color: var(--text-dark, #10102e);
    text-align: left;
    vertical-align: middle;
    line-height: 1.6;
}
.info-page th {
    background: var(--bg-gray, #f8f8f8);
    color: var(--ip-title, var(--primary, #2B8888));
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
}
.info-page tbody tr:nth-child(even) { background: #fbfbfc; }
.info-page tbody tr:hover { background: #f2f8f2; }
.info-page td img { max-width: 200px; height: auto; }

/* En pantallas estrechas la tabla hace scroll en vez de romper */
@media (max-width: 640px) {
    .info-page table { display: block; overflow-x: auto; white-space: nowrap; }
    .info-page th, .info-page td { white-space: normal; min-width: 140px; }
}

/* 6.1 Tabla de tarifas del Teatro Municipal */
.tmc-tabla { font-size: 0.95rem; }
.tmc-tabla th,
.tmc-tabla td { text-align: center; }
.tmc-tabla th:first-child,
.tmc-tabla td:first-child { text-align: left; white-space: nowrap; }
.tmc-tabla td:last-child { font-weight: 700; color: var(--ip-accent, var(--accent-main, #008000)); }

/* 6.1b Tablas gestionadas desde el panel ([tabla id=N]).
   Escritorio propio (sin el nowrap ni el verde final de la tabla de
   tarifas) y modo tarjeta en móvil usando el data-label de cada celda,
   así ninguna tabla nueva necesita CSS por página. */
.tmc-tabla.tmc-gestionada { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tmc-tabla.tmc-gestionada th,
.tmc-tabla.tmc-gestionada td {
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
    border: 1px solid #e3e3e3;
    padding: 9px 12px;
}
.tmc-tabla.tmc-gestionada thead th {
    background: #0A0249;
    color: #fff;
    font-size: 0.9rem;
}
.tmc-tabla.tmc-gestionada tbody tr:nth-child(even) { background: #f7f7f9; }
.tmc-tabla.tmc-gestionada td:last-child { font-weight: 400; color: inherit; }
@media only screen and (max-width: 640px) {
    .tmc-tabla.tmc-gestionada,
    .tmc-tabla.tmc-gestionada thead,
    .tmc-tabla.tmc-gestionada tbody,
    .tmc-tabla.tmc-gestionada th,
    .tmc-tabla.tmc-gestionada td,
    .tmc-tabla.tmc-gestionada tr { display: block; }
    .tmc-tabla.tmc-gestionada thead {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }
    .tmc-tabla.tmc-gestionada tr {
        background: #fff;
        border: 1px solid #e3e3e3;
        border-radius: 8px;
        margin-bottom: 0.9rem;
        overflow: hidden;
    }
    .tmc-tabla.tmc-gestionada td {
        border: none;
        border-bottom: 1px solid #eee;
        min-width: 0;
    }
    .tmc-tabla.tmc-gestionada tbody tr:nth-child(even) { background: #fff; }
    .tmc-tabla.tmc-gestionada td::before {
        content: attr(data-label);
        display: block;
        font-weight: 700;
        font-size: 0.8rem;
        color: #0A0249;
        margin-bottom: 0.2rem;
    }
    .tmc-tabla.tmc-gestionada td:last-child { border-bottom: none; }
}

.tmc-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 2rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e8e8ec;
}

/* 6.2 Botón de descarga de trípticos / formularios */
.triptico-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0;
    padding: 0.7rem 1.4rem;
    border-radius: 8px;
    background: var(--ip-accent, var(--accent-main, #008000));
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
    border: 0;
    cursor: pointer;
    transition: filter 0.15s ease;
}
.triptico-btn:hover { filter: brightness(1.1); }

/* Variante envolvente: sanitizeRichHtml() no conserva el atributo class en
   <a> (solo href/title/target/rel), asi que el boton puede marcarse sobre un
   <div class="triptico-btn"> que envuelve al enlace. */
.triptico-btn > a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}
.triptico-btn > a:hover { text-decoration: none; }

/* Enlace a PDF suelto dentro del cuerpo */
.uploaded-pdf {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
}
.uploaded-pdf::after {
    content: "\f0c5";              /* fa-file-pdf */
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 6 Brands", sans-serif;
    font-weight: 900;
    color: #b91c1c;
    font-size: 0.9em;
}

/* ------------------------------------------------------------
   7. Limpieza de floats en móvil
   ------------------------------------------------------------ */
@media (max-width: 640px) {
    .info-page .alignleft,
    .info-page .alignright {
        float: none;
        margin: 0.75rem auto;
        display: block;
    }
    .oficinas-list { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   8. Contenido embebido sustituido por un enlace
   ------------------------------------------------------------
   El importador cambia cada <iframe> por este bloque porque
   sanitizeRichHtml() no admite iframe. Sin estilo, el texto
   aparece suelto y no queda claro qué es. */
.info-page .embed-pendiente {
    border: 1px solid #d9d9d9;
    border-left: 4px solid #b91c1c;
    background: #f8f8f8;
    border-radius: 8px;
    padding: 1rem 1.15rem;
    margin: 1.5rem 0;
}
.info-page .embed-pendiente p {
    margin: 0 0 0.35rem;
}
.info-page .embed-pendiente p:last-child {
    margin-bottom: 0;
}
.info-page .embed-pendiente strong {
    display: block;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b6d73;
}