@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
    --marca-azul: #1b2341;
    --marca-naranja: #ea630b;
    --marca-amarillo: #fab513;
    --texto: #26304b;
    --texto-suave: #58627b;
    --fondo: #f5f7fb;
    --borde: #e2e7f0;
    --sombra: 0 16px 42px rgba(27, 35, 65, .08);
}

html { scroll-behavior: smooth; }
body.sionline-app { min-height: 100vh; background: var(--fondo); color: var(--texto); font-family: 'Poppins', 'Segoe UI', sans-serif; }
body.sionline-app a { color: var(--marca-azul); text-underline-offset: 3px; }
body.sionline-app a:hover { color: #a84406; }
body.sionline-app :focus-visible { outline: 3px solid var(--marca-naranja); outline-offset: 3px; }
.marca-barra { background: var(--marca-azul); border-bottom: 4px solid var(--marca-naranja); }
.marca-barra .marca-logo { display: block; width: clamp(170px, 22vw, 230px); height: auto; }
.marca-barra .nav-link, .marca-barra .marca-enlace { color: #fff; text-decoration: none; font-weight: 500; }
.marca-barra .nav-link:hover, .marca-barra .marca-enlace:hover { color: #ffcf8a; }
.marca-barra .nav-link[aria-current="page"] { color: #ffcf8a; border-bottom: 2px solid var(--marca-naranja); }
.marca-barra .btn-salir { border: 1px solid #b9c0d1; color: #fff; }
.marca-barra .btn-salir:hover { background: #fff; color: var(--marca-azul); }
.marca-pagina { padding-block: clamp(28px, 5vw, 56px) 70px; }
.marca-pagina--estrecha { max-width: 800px; }
.marca-pagina--media { max-width: 1000px; }
.marca-pagina--ancha { max-width: 1140px; }
.marca-miga { display: inline-flex; gap: .35rem; align-items: center; margin-bottom: 22px; font-size: .91rem; font-weight: 600; text-decoration: none; }
.marca-eyebrow { color: #a84406; font-size: .77rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.marca-titulo { color: var(--marca-azul); font-weight: 700; letter-spacing: -.035em; line-height: 1.18; }
.marca-subtitulo { color: var(--texto-suave); max-width: 68ch; line-height: 1.65; }
.marca-superficie { background: #fff; border: 1px solid var(--borde); border-radius: 18px; box-shadow: var(--sombra); }
.marca-superficie .card-body { padding: clamp(22px, 3vw, 34px); }
.marca-tarjeta { display: block; height: 100%; padding: 26px; text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; }
.marca-tarjeta:hover { transform: translateY(-3px); box-shadow: 0 20px 46px rgba(27, 35, 65, .13); }
.marca-tarjeta__icono { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: #fff1e5; color: #a84406; font-size: 1.5rem; }
.marca-tarjeta h2 { color: var(--marca-azul); font-size: 1.12rem; font-weight: 700; margin: 16px 0 8px; }
.marca-tarjeta p { color: var(--texto-suave); margin: 0; font-size: .94rem; line-height: 1.55; }
.marca-flecha { display: inline-block; margin-top: 18px; font-weight: 700; }
.marca-nota { padding: 15px 18px; border-left: 4px solid var(--marca-amarillo); border-radius: 0 10px 10px 0; background: #fff9e9; color: var(--texto); }
.marca-estado { display: inline-block; padding: 5px 11px; border-radius: 100px; font-size: .77rem; font-weight: 700; }
.marca-estado--publicado, .marca-estado--activo { color: #145c38; background: #e3f5eb; }
.marca-estado--borrador, .marca-estado--inactivo { color: #72541a; background: #fff2cf; }
.marca-estado--programado { color: #214c82; background: #e5efff; }
.marca-tabla { overflow: hidden; }
.marca-tabla .table { margin: 0; }
.marca-tabla th { color: var(--texto-suave); font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: #f8faff; border-bottom-color: var(--borde); }
.marca-tabla td { vertical-align: middle; padding-block: 18px; border-bottom-color: var(--borde); }
.marca-tabla tr:last-child td { border-bottom: 0; }
.marca-forma .form-label { color: var(--marca-azul); font-weight: 600; }
.marca-forma .form-control { min-height: 48px; border-color: #cdd5e2; border-radius: 10px; }
.marca-forma textarea.form-control { min-height: 0; }
.marca-forma .form-control:focus, .marca-forma .form-check-input:focus { border-color: var(--marca-naranja); box-shadow: 0 0 0 .2rem rgba(234, 99, 11, .17); }
.marca-forma .form-check-input:checked { background-color: var(--marca-azul); border-color: var(--marca-azul); }
.marca-forma .form-text { color: var(--texto-suave); }
.marca-forma .campo-ayuda { margin: 7px 0 0; color: var(--texto-suave); font-size: .83rem; line-height: 1.5; }
body.sionline-app .btn { border-radius: 10px; padding: .65rem 1rem; font-weight: 600; }
body.sionline-app .btn-sm { padding: .4rem .7rem; }
body.sionline-app .btn-primary { background: var(--marca-azul); border-color: var(--marca-azul); color: #fff; }
body.sionline-app .btn-primary:hover { background: #303e6b; border-color: #303e6b; }
body.sionline-app .btn-outline-primary { color: var(--marca-azul); border-color: var(--marca-azul); }
body.sionline-app .btn-outline-primary:hover { background: var(--marca-azul); color: #fff; }
body.sionline-app .btn-success { background: #a84406; border-color: #a84406; color: #fff; }
body.sionline-app .btn-success:hover { background: #843703; border-color: #843703; }
.marca-pie { margin-top: auto; padding: 26px 0; border-top: 1px solid var(--borde); color: var(--texto-suave); font-size: .82rem; }
.marca-login { background: radial-gradient(circle at 90% 5%, #ffe1b4, transparent 26%), var(--fondo); }
.marca-login__logo { display: block; width: min(280px, 75vw); height: auto; margin: 0 auto 24px; }
.marca-login__contenedor { max-width: 480px; margin: min(9vh, 90px) auto; }
.marca-login__encabezado { text-align: center; margin-bottom: 25px; }
.marca-articulo { max-width: 760px; font-size: 1.04rem; line-height: 1.8; }
.marca-articulo__cuerpo { white-space: pre-wrap; overflow-wrap: anywhere; }
.marca-articulo__cuerpo--html { white-space: normal; }
.marca-articulo__cuerpo--html :is(h2, h3) { color: var(--marca-azul); line-height: 1.3; margin: 1.5em 0 .5em; }
.marca-articulo__cuerpo--html p { margin-bottom: 1em; }
.marca-articulo__cuerpo--html blockquote { border-left: 4px solid var(--marca-naranja); padding-left: 1rem; color: var(--texto-suave); }
.marca-articulo__cuerpo--html a.marca-boton, .marca-editor a.marca-boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .65rem 1.2rem; border: 2px solid var(--marca-azul); border-radius: 10px; background: var(--marca-azul); color: #fff; font-weight: 600; line-height: 1.35; text-align: center; text-decoration: none; }
.marca-articulo__cuerpo--html a.marca-boton:hover, .marca-editor a.marca-boton:hover { background: #303e6b; border-color: #303e6b; color: #fff; }
.marca-articulo__cuerpo--html a.marca-boton:focus-visible, .marca-editor a.marca-boton:focus-visible { outline: 3px solid var(--marca-naranja); outline-offset: 3px; }
.marca-editor { min-height: 22rem !important; overflow-wrap: anywhere; line-height: 1.65; }
.marca-editor:empty::before { content: 'Empieza a escribir el artículo…'; color: var(--texto-suave); }
.marca-editor :is(h2, h3) { color: var(--marca-azul); }
.marca-enlace-editor { padding: 1.25rem; border: 1px solid var(--borde); border-radius: 12px; background: #f8faff; }
[hidden] { display: none !important; }
.marca-articulo__meta { color: var(--texto-suave); font-size: .9rem; }
.marca-articulo__resumen { color: #38445e; font-size: 1.17rem; line-height: 1.7; }
.marca-imagen { display: block; width: 100%; max-width: 800px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; }
.marca-lista-articulo { padding: 24px 0; border-bottom: 1px solid var(--borde); }
.marca-lista-articulo:last-child { border-bottom: 0; }
.marca-lista-articulo h2 a { text-decoration: none; }
@media (max-width: 650px) {
    .marca-barra .marca-logo { width: 170px; }
    .marca-barra__interior { align-items: flex-start !important; }
    .marca-barra__acciones { gap: 12px !important; }
    .marca-tabla { border: 0; box-shadow: none; background: transparent; }
    .marca-tabla thead { display: none; }
    .marca-tabla tr { display: block; margin-bottom: 14px; padding: 12px 18px; border: 1px solid var(--borde); border-radius: 14px; background: #fff; }
    .marca-tabla td { display: block; padding: 6px 0; border: 0; }
    .marca-tabla td[data-etiqueta]::before { content: attr(data-etiqueta) ': '; color: var(--texto-suave); font-size: .79rem; font-weight: 600; }
}