/* Página pública del newsletter (en/ y es/Newsletter.aspx). La edición en
   sí trae sus estilos inline porque es el mismo HTML que el mail; esto sólo
   arma el marco de la página: edición a la izquierda, archivo a la derecha,
   uno abajo del otro en pantallas chicas. Paleta y radios de DESIGN.md
   (azul #17516D del sitio principal). */
.nl-pagina { padding-block: 32px 56px; }
.nl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; align-items: start; }
/* La tabla de la edición es HTML de mail (ver NewsletterHtml.vb): fija 640px
   a propósito para Outlook y no se le puede pedir que encoja como una web.
   overflow-x la contiene dentro de su propia caja en vez de ensanchar toda
   la página en celulares angostos. */
.nl-edicion { min-width: 0; overflow-x: auto; }
.nl-edicion img { max-width: 100%; height: auto; }

.nl-archivo {
    position: sticky;
    top: 90px;
    background: #f4f6f7;
    border: 1px solid #e4e9eb;
    border-radius: 14px;
    padding: 22px;
}
.nl-archivo h2 {
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 14px;
    color: #17516D;
    letter-spacing: -.01em;
}
.nl-archivo ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nl-archivo li a {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    color: #1d2a33;
    text-decoration: none;
    font-size: .9rem;
    transition: background-color .15s ease, color .15s ease;
}
.nl-archivo li a:hover, .nl-archivo li a:focus-visible { background: #e7f0f5; }
.nl-archivo li a.nl-archivo-actual { background: #17516D; color: #fff; font-weight: 700; }
.nl-archivo-cta { font-size: .88rem; margin: 0 0 10px; color: #56636c; }
.nl-archivo .btn-lgc1 { width: 100%; text-align: center; }

.nl-vacio { padding: 48px 0; color: #56636c; text-align: center; }

.nl-aviso-preview {
    background: #fff8ec;
    border: 1px solid #f6d7a8;
    color: #5b3a0c;
    border-radius: 10px;
    padding: 12px 16px;
    font-weight: 600;
    margin-bottom: 20px;
}

@media (max-width: 900px) {
    .nl-layout { grid-template-columns: 1fr; }
    .nl-archivo { position: static; }
}

/* Celulares: las mismas reglas que el <style> del mail
   (NewsletterHtml.EstiloCelular), acotadas a .nl-edicion. Apilan las filas
   de columnas (libros, servicios, agenda), las cifras OA, el índice y el texto
   de la portada, y achican el margen lateral.
   Los !important pisan los estilos inline del HTML de mail. Con esto el
   overflow-x de arriba ya no hace falta; queda como red de seguridad. */
@media (max-width: 600px) {
    .nl-edicion .nl-marco { padding: 0 !important; }
    .nl-edicion .nl-col,
    .nl-edicion .nl-cifra,
    .nl-edicion .nl-idx,
    .nl-edicion .nl-hero {
        display: block !important;
        width: 100% !important;
        padding-right: 0 !important;
        box-sizing: border-box;
    }
    .nl-edicion .nl-col,
    .nl-edicion .nl-cifra { margin-bottom: 16px; }
    .nl-edicion .nl-col-vacia,
    .nl-edicion .nl-hero-vacio,
    .nl-edicion .nl-evd { display: none !important; }
    /* El detalle de cada evento pasa de columna propia a debajo del título. */
    .nl-edicion .nl-evm { display: block !important; }
    .nl-edicion .nl-sec { padding-left: 16px !important; padding-right: 16px !important; }
    /* El logo mide 44 px de alto y ~440 de ancho: por sí solo desborda 375 px. */
    .nl-edicion .nl-logo { width: 200px !important; height: auto !important; }
    .nl-edicion .nl-tapa { max-width: 180px !important; margin-left: auto !important; margin-right: auto !important; }
}

/* Casilla de suscripción del formulario de contacto. */
.nl-casilla { background: #fff8f1; border: 2px solid #F47B20; }
.nl-casilla input[type=checkbox] { width: 18px; height: 18px; margin-right: 8px; accent-color: #1F668E; }
.nl-casilla .form-control:focus { border-color: #1F668E; box-shadow: 0 0 0 .2rem rgba(31, 102, 142, .18); }
.nl-idioma td { padding-right: 16px; }
.nl-idioma input { margin-right: 6px; }

/* Páginas de confirmación y baja: un mensaje, centrado, con aire. */
.nl-mensaje { max-width: 640px; margin-inline: auto; text-align: center; padding-block: 64px; }
.nl-mensaje h1 { font-weight: 800; color: #17516D; margin-bottom: 12px; }
.nl-mensaje p { color: #56636c; margin-bottom: 24px; }

/* Catálogo temático de una edición (en/ y es/NewsletterCatalogo.aspx). Copia
   las tarjetas de libro de en/catResultado.aspx, que las define en un <style>
   propio de esa página: si allá cambia el diseño de la tarjeta, cambiarlo acá
   también. Todo va bajo .nl-catres para no tocar otras páginas. */
.nl-catres-volver { text-align: right; margin-bottom: 10px; }
.nl-catres-btn-volver { display: inline-block; padding: 10px 20px; background-color: #C56666; color: #fff; text-decoration: none; border-radius: 5px; font-weight: 500; transition: background-color .3s; }
.nl-catres-btn-volver:hover, .nl-catres-btn-volver:focus-visible { background-color: #a94f4f; color: #fff; }
.nl-catres-grupo { margin: 28px 0 12px; }
.nl-catres-cant { font-size: .75em; opacity: .7; }
.nl-catres .libro-card { display: flex; flex-direction: column; height: 100%; min-height: 480px; border: 1px solid #e0e0e0; transition: transform .2s ease-in-out, box-shadow .2s ease-in-out; }
.nl-catres .libro-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, .2) !important; }
.nl-catres .libro-card .card-body { display: flex; flex-direction: column; flex: 1; padding: .75rem; }
.nl-catres .libro-card .card-title { min-height: 48px; margin-bottom: .25rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.nl-catres .libro-card .card-subtitle { min-height: 21px; margin-bottom: .25rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; line-height: 1.1; }
.nl-catres .libro-card .btn-container { margin-top: auto; padding-top: .5rem; }
.nl-catres .libro-card .btn { padding: .375rem 1rem; font-size: .9rem; }
.nl-catres .card-img-wrapper { position: relative; height: 320px; overflow: hidden; padding: 8px; flex-shrink: 0; }
.nl-catres .card-img-main { width: 100%; height: 100%; object-fit: cover; }
.nl-catres .cocarda-overlay { position: absolute; top: 10px; right: 10px; width: 60px; height: 60px; z-index: 10; filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, .3)); }
/* La editorial va debajo del autor, en mayúsculas chicas: se distingue del
   autor sin sumar otro color. */
.nl-catres .nl-catres-editorial { font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: #1F668E; margin: 0 0 .25rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.nl-catres .nl-catres-editorial:empty { display: none; }
.nl-catres .row.g-4 > .col { display: flex; }
.nl-catres .row.g-4 > .col > .card { width: 100%; }
@media (min-width: 992px) {
    .nl-catres .libro-card { min-height: 500px; }
}