/* =============================================================================
 * Bloques estilísticos del blog Micappital
 * =============================================================================
 * Equivale al CSS inline que las plantillas del manual v1.0 inyectaban en
 * cada artículo. Usado a partir de manual v1.2.
 *
 * Histórico:
 *   - v1.0 (mayo 2026): plantillas con CSS inline en HTML (deprecated).
 *   - v1.2 (mayo 2026): plantillas con clases CSS (este archivo).
 *
 * Convención de nombres: BEM (Bloque__Elemento--Modificador) con prefijo `m-`
 * para Micappital. Evita colisiones con Bootstrap o AdminLTE.
 * =============================================================================
 */

/* ----------------------------------------------------------------------------
 * 1. Caja resumen (al inicio del artículo)
 * ---------------------------------------------------------------------------- */
.m-summary-box {
    background-color: #E8F5E9;
    border-left: 5px solid #2E7D32;
    padding: 20px;
    margin-bottom: 25px;
    border-radius: 8px;
}

.m-summary-box__title {
    margin: 0 0 10px 0;
    font-weight: bold;
    font-size: 1.1em;
    color: #1B5E20;
}

.m-summary-box ul {
    margin: 0;
    padding-left: 20px;
}

/* ----------------------------------------------------------------------------
 * 2. Cajas de conclusión (positiva y warning)
 * Variantes con marcadores 👉 al inicio.
 * ---------------------------------------------------------------------------- */
.m-conclusion {
    padding: 12px 16px;
    margin: 15px 0;
    border-radius: 4px;
    border-left: 4px solid;
}

.m-conclusion--positive {
    background: #F1F8E9;
    border-left-color: #689F38;
}

.m-conclusion--warning {
    background: #FFF3E0;
    border-left-color: #E65100;
}

/* ----------------------------------------------------------------------------
 * 3. Caja de ejemplo numérico
 * ---------------------------------------------------------------------------- */
.m-numeric-example {
    background-color: #E8F5E9;
    border: 2px solid #2E7D32;
    padding: 18px;
    margin: 20px 0;
    border-radius: 8px;
}

.m-numeric-example__title {
    margin: 0 0 8px 0;
    font-weight: bold;
    color: #1B5E20;
}

.m-numeric-example__result {
    margin: 0;
    font-size: 1.1em;
    color: #1B5E20;
    font-weight: bold;
}

.m-numeric-example--warning {
    background-color: #FFF3E0;
    border-color: #E65100;
}

.m-numeric-example--warning .m-numeric-example__title,
.m-numeric-example--warning .m-numeric-example__result {
    color: #BF360C;
}

/* ----------------------------------------------------------------------------
 * 4. Pullquote
 * ---------------------------------------------------------------------------- */
.m-pullquote {
    background-color: #FFF3E0;
    border-left: 5px solid #E65100;
    padding: 20px;
    margin: 25px 0;
    border-radius: 8px;
    font-style: italic;
    text-align: center;
}

.m-pullquote__text {
    margin: 0;
    font-size: 1.15em;
    font-weight: bold;
    color: #BF360C;
}

/* ----------------------------------------------------------------------------
 * 5. CTAs (3 slots)
 * ---------------------------------------------------------------------------- */

/* Slot A: caja azul (mid del artículo) */
.m-cta-slot-a {
    background-color: #F5F9FF;
    border: 2px solid #1976D2;
    padding: 20px;
    margin: 25px 0;
    border-radius: 8px;
}

/* Slot B: caja verde grande (final del artículo) */
.m-cta-slot-b {
    background-color: #E8F5E9;
    border: 2px solid #2E7D32;
    padding: 22px;
    margin: 25px 0;
    border-radius: 8px;
}

/* Slot C: caja amarilla sticky (antes del cierre) */
.m-cta-slot-c {
    background-color: #FFF8E1;
    border-left: 5px solid #F57F17;
    padding: 18px;
    margin: 25px 0;
    border-radius: 6px;
    text-align: center;
}

.m-cta-slot-c__title {
    margin: 0 0 8px 0;
    font-size: 1.15em;
    font-weight: bold;
}

.m-cta-slot-c__hook {
    margin: 0 0 12px 0;
    font-style: italic;
}

/* Botones de CTA (compartidos por los 3 slots) */
.m-cta__button {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

.m-cta__button--green {
    background-color: #2E7D32;
    padding: 10px 20px;
}

.m-cta__button--green-large {
    background-color: #2E7D32;
    padding: 12px 24px;
    font-size: 1.05em;
}

.m-cta__button--orange {
    background-color: #F57F17;
    padding: 10px 22px;
}

/* ----------------------------------------------------------------------------
 * 6. Párrafo SEO de cierre
 * ---------------------------------------------------------------------------- */
.m-seo-footer {
    font-size: 0.95em;
    color: #555;
}

/* ----------------------------------------------------------------------------
 * 7. Tabla comparativa
 * ---------------------------------------------------------------------------- */
.m-comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 0.95em;
}

.m-comparison-table thead tr {
    background: #2E7D32;
    color: white;
}

.m-comparison-table th,
.m-comparison-table td {
    padding: 8px 12px;
    border: 1px solid #ddd;
}

.m-comparison-table tbody tr:nth-child(even) {
    background: #f8f9fa;
}

/* Mensaje "no hay artículos" en la vista de categoría vacía. */
.categoria-vacia {
    text-align: center;
    color: #888;
    padding: 2rem 1rem;
    font-size: 1.05rem;
}

/* Smooth scroll global del documento — el botón "Volver arriba" lo aprovecha
   sin tener que pedir behavior:'smooth' desde JS (que falla cuando el scroll
   real está en html o body por una combinación de flex / min-vh-100). */
html {
    scroll-behavior: smooth;
}

/* ============================================
   Botón "Volver arriba" — fijo abajo a la derecha en la vista de noticia.
   Siempre visible (sin lógica de aparecer al scrollear) — más robusto y
   coherente con un patrón "sticky" abajo a la derecha.
   ============================================ */
.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #00cca9;
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    z-index: 9999;
    padding: 0;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.back-to-top:hover {
    background: #00b896;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}
.back-to-top:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}
.back-to-top svg {
    width: 22px;
    height: 22px;
    display: block;
}

.categoria-vacia {
    text-align: center;
    color: #888;
    padding: 2rem 1rem;
    font-size: 1.05rem;
}

@media (max-width: 992px) {
    .m-mas-sobre__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .m-mas-sobre__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* ============================================
   ESTADO DE PUBLICACIÓN — Toggle radio en crear/editar
   ============================================ */
.m-estado-toggle {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.m-estado-toggle__opt {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.6rem 0.85rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.m-estado-toggle__opt:hover {
    background: #f7f7f7;
}
.m-estado-toggle__opt input[type="radio"]:checked + span {
    color: #1565C0;
}
.m-estado-toggle__opt input[type="radio"] {
    margin-top: 0.25rem;
}
.m-estado-toggle__opt small {
    color: #777;
    font-weight: 400;
}

/* ============================================
   BADGE / BANNER de estado (reutilizables)
   ============================================ */
.m-badge-borrador {
    display: inline-block;
    background: #FF9800;
    color: #fff;
    padding: 0.2em 0.6em;
    border-radius: 4px;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.m-badge-publicado {
    display: inline-block;
    background: #4CAF50;
    color: #fff;
    padding: 0.2em 0.6em;
    border-radius: 4px;
    font-size: 2rem;
    font-weight: 600;
    white-space: nowrap;
}

.m-banner-borrador {
    background: #FFF3E0;
    border-left: 4px solid #FF9800;
    padding: 0.75rem 1rem;
    margin: 0;
    color: #E65100;
    font-size: 0.95rem;
}
.m-banner-borrador strong { color: #E65100; }
.m-banner-borrador a {
    color: #1565C0;
    margin-left: 0.5rem;
    text-decoration: none;
}
.m-banner-borrador a:hover { text-decoration: underline; }

/* ============================================
   LISTADO ADMIN — /blogWeb/listadoAdmin
   ============================================ */
.m-adminblog {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}
.m-adminblog h1 { margin-bottom: 1.5rem; }

.m-adminblog__filtros {
    border-bottom: 1px solid #eee;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
}
.m-adminblog__tabs {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}
.m-adminblog__tab a {
    display: inline-block;
    padding: 0.5em 1em;
    border-radius: 999px;
    text-decoration: none;
    color: #444;
    font-size: 2rem;
    transition: background 0.2s ease;
}
.m-adminblog__tab a:hover { background: #eee; }
.m-adminblog__tab--active a {
    background: #1565C0;
    color: #fff;
    font-weight: 600;
}

.m-adminblog__form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: #f7f7f7;
    border-radius: 4px;
}
.m-adminblog__form label {
    font-size: 2rem;
    margin: 0 0.25rem 0 0;
}
.m-adminblog__form select,
.m-adminblog__form input[type="search"] {
    padding: 0.4em 0.6em;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 2rem;
}
.m-adminblog__form button {
    padding: 0.4em 1em;
    background: #1565C0;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 2rem;
}
.m-adminblog__form button:hover { background: #0d47a1; }
.m-adminblog__clear {
    color: #777;
    font-size: 2rem;
    text-decoration: none;
}
.m-adminblog__clear:hover { color: #1565C0; }

.m-adminblog__resumen {
    color: #666;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.m-adminblog__tabla {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    background: #fff;
}
.m-adminblog__tabla th,
.m-adminblog__tabla td {
    padding: 0.6em 0.75em;
    border-bottom: 1px solid #eee;
    text-align: left;
    vertical-align: middle;
    font-size: 2rem;
}
/* Cuando los títulos son largos y la fila crece, todo el contenido inline de
   la fila (select, badge, botones) se alinea al centro vertical sin depender
   de flex. Aseguramos vertical-align en TODOS los hijos para anular el
   `baseline` por defecto de inline-block que descuadra los botones. */
.m-adminblog__tabla td > * {
    vertical-align: middle;
}
.m-adminblog__tabla td a.m-btn,
.m-adminblog__tabla td button.m-btn,
.m-adminblog__tabla td .m-cat-select,
.m-adminblog__tabla td .m-badge-borrador,
.m-adminblog__tabla td .m-badge-publicado {
    vertical-align: middle;
}
.m-adminblog__tabla th {
    background: #fafafa;
    font-weight: 600;
}

/* Cabecera de columna clicable para ordenar (actualmente solo "Fecha").
   Mayor especificidad para evitar que `.m-adminblog__tabla a { color:#1565C0 }`
   pinte el link, queremos un estilo más sutil. */
.m-adminblog__tabla a.m-adminblog__th-sort {
    color: #444;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
}
.m-adminblog__tabla a.m-adminblog__th-sort:hover {
    color: #1565C0;
    text-decoration: none;
}
.m-adminblog__th-sort-arrow {
    color: #1565C0;
    font-weight: 700;
}
.m-adminblog__tabla a {
    color: #1565C0;
    text-decoration: none;
}
.m-adminblog__tabla a:hover { text-decoration: underline; }
.m-adminblog__fila--borrador { background: #FFFBF0; }
.m-adminblog__vacio {
    text-align: center;
    padding: 2rem;
    color: #999;
}

/* La celda de acciones NO usa flex: el flex pisa el vertical-align: middle del
   <td>, lo que desalinea los botones cuando la fila crece por un título largo.
   Mantenemos los hijos como inline-block con un pequeño margen entre ellos. */
.m-adminblog__acciones {
    white-space: nowrap;
}
.m-adminblog__acciones > .m-btn + .m-btn {
    margin-left: 0.3rem;
}
.m-btn {
    display: inline-block;
    padding: 0.35em 0.75em;
    border-radius: 4px;
    font-size: 2rem;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    line-height: 1.3;
}
/* Subimos especificidad para ganar a `.m-adminblog__tabla a { color: #1565C0; }`
   sin necesidad de !important. El botón "Editar" siempre con texto blanco. */
.m-btn--editar,
.m-adminblog__tabla a.m-btn--editar {
    background: #1565C0;
    color: #fff;
}
.m-btn--editar:hover,
.m-adminblog__tabla a.m-btn--editar:hover {
    background: #0d47a1;
    color: #fff;
    text-decoration: none;
}
.m-toggle-publicacion {
    background: #FF9800;
    color: #fff;
    border: none;
}
.m-toggle-publicacion:hover { background: #F57C00; }
.m-toggle-publicacion:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Variante deshabilitada para los botones cuando blog_lock_editar está
   activo. Es un <span>, no clicable, con apariencia "off". */
.m-btn--disabled {
    background: #e5e5e5;
    color: #999;
    cursor: not-allowed;
}
.m-btn--disabled:hover {
    background: #e5e5e5;
    color: #999;
}

/* Título de la noticia cuando la edición está bloqueada — sin link, gris. */
.m-titulo-disabled {
    color: #666;
    cursor: not-allowed;
}

/* ============================================
   Toggle "Borradores" en la home del blog y en /blogWeb/categoria/{slug}.
   Solo se renderiza para admin. Texto blanco siempre. Fondo gris oscuro
   cuando inactivo (borradores ocultos) y verde cuando activo (borradores
   visibles). Sin iconos: el color del fondo es la pista visual.
   ============================================ */
.m-borrador-toggle {
    display: inline-block;
    padding: 0.45em 1.1em;
    margin-left: 0.5rem;
    border: none;
    border-radius: 6px;
    background: #444;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}
.m-borrador-toggle:hover {
    background: #333;
    color: #fff;
    text-decoration: none;
}
.m-borrador-toggle--active {
    background: #16a34a;
    color: #fff;
}
.m-borrador-toggle--active:hover {
    background: #15803d;
    color: #fff;
}

/* ============================================
   Cards de noticia que son borrador (admin con ?borradores=1).
   Indicador visual: el contenedor del título tiene fondo gris (#d3d3d3) en
   lugar del blanco habitual. Sin badge, sin borde — solo el bloque inferior
   cambia de color para que el admin lo identifique de un vistazo.
   ============================================ */
.card-title-container-new.borrador {
    background-color: #d3d3d3;
}

.m-adminblog__paginacion {
    display: flex;
    gap: 0.3rem;
    justify-content: center;
    flex-wrap: wrap;
}
.m-adminblog__paginacion a {
    padding: 0.4em 0.75em;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #444;
    font-size: 2rem;
}
.m-adminblog__paginacion a:hover { background: #eee; }
.m-adminblog__pag--active {
    background: #1565C0;
    color: #fff;
    border-color: #1565C0;
}
.m-adminblog__pag--active:hover {
    background: #1565C0;
    color: #fff;
}

/* Pill de categoría (legacy — la tabla del listado admin ahora usa
   .m-cat-select; el pill se conserva por si se reutiliza en otras vistas). */
.m-cat-pill {
    display: inline-block;
    padding: 0.2em 0.6em;
    border-radius: 999px;
    color: #fff;
    font-size: 2rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Dropdown inline de categoría en la celda "Categoría" del listadoAdmin.
   Bordereo izquierdo coloreado (inline style en la vista) según la categoría
   actual para mantener pista visual rápida del cluster. */
.m-cat-select {
    padding: 0.35em 0.5em;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 2rem;
    background: #fff;
    cursor: pointer;
    min-width: 8em;
}
.m-cat-select:focus {
    outline: 2px solid #1565C0;
    outline-offset: 1px;
}
.m-cat-select:disabled {
    opacity: 0.6;
    cursor: wait;
}

@media (max-width: 768px) {
    .m-adminblog__tabla {
        display: block;
        overflow-x: auto;
    }
}