/* =========================================================
   SM NOTAS
   ========================================================= */
.sm-notas-bloque { margin: 1.5rem 0; }

/* Encabezado */
.sm-notas__header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 2px solid #000; gap: 1rem; }
.sm-notas__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-size: 22px; letter-spacing: 1px; text-transform: uppercase; color: #1a0e3d; margin: 0; }
.sm-notas__dash { color: #C8102E; }
.sm-notas__link { font-size: 12px; font-weight: 700; color: #C8102E; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; white-space: nowrap; }
.sm-notas__link:hover { color: #a50d25; }

/* Grid base */
.sm-notas { display: grid; gap: 1.5rem; }
.sm-notas--cols-1 { grid-template-columns: 1fr; }
.sm-notas--cols-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sm-notas--cols-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sm-notas--cols-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.sm-notas--cols-5 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.sm-notas--cols-6 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* Modo vertical: cada nota es una tarjeta (imagen + body apilados) */
.sm-notas--vertical .sm-nota { display: flex; flex-direction: column; }

/* Modo horizontal: en fila siempre; útil con 1 columna */
.sm-notas--horizontal .sm-nota { /*display: flex;*/ flex-direction: row; gap: 1rem; align-items: flex-start; }

/* ---------- Tarjeta base ---------- */
.sm-nota { display: block; text-decoration: none; color: inherit; transition: opacity 0.2s ease; }
.sm-nota:hover { opacity: 0.92; }

.sm-nota__img { position: relative; background: linear-gradient(135deg, #2d1b5e 0%, #1a0e3d 100%); overflow: hidden; border-radius: 6px; }
.sm-nota__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sm-nota__body { padding: 0.75rem 0 0; }
.sm-nota__tag { color: #C8102E; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 0.35rem; }
.sm-nota__title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 20px; line-height: 1.2; margin: 0 0 0.35rem; color: #1a0e3d; }
.sm-nota__extracto { font-size: 13px; line-height: 1.5; color: #767085; margin: 0 0 0.5rem; }
.sm-nota__meta { font-size: 12px; color: #767085; }

/* =========================================================
   ESTILO: imagen arriba
   ========================================================= */
.sm-notas--img-arriba .sm-nota__img { aspect-ratio: auto; height: var(--sm-notas-img-h, 180px); }
.sm-notas--img-arriba .sm-nota__img img { height: 100%; }

/* =========================================================
   ESTILO: cuadrada izquierda / derecha
   ========================================================= */
.sm-notas--img-cuadrada-izq .sm-nota,
.sm-notas--img-cuadrada-der .sm-nota { display: flex; flex-direction: row; gap: 0.85rem; align-items: flex-start; }

.sm-notas--img-cuadrada-izq .sm-nota__img,
.sm-notas--img-cuadrada-der .sm-nota__img { width: var(--sm-notas-img-sq, 100px); height: var(--sm-notas-img-sq, 100px); flex: 0 0 var(--sm-notas-img-sq, 100px); aspect-ratio: 1 / 1; }

.sm-notas--img-cuadrada-izq .sm-nota__body,
.sm-notas--img-cuadrada-der .sm-nota__body { padding: 0; flex: 1; min-width: 0; }

.sm-notas--img-cuadrada-der .sm-nota__img { order: 2; }
.sm-notas--img-cuadrada-der .sm-nota__body { order: 1; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
	.sm-notas--cols-4, .sm-notas--cols-5, .sm-notas--cols-6 { grid-template-columns: repeat(2, 1fr); }
	.sm-notas--cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.sm-notas { grid-template-columns: 1fr !important; }
	.sm-notas--horizontal .sm-nota { flex-direction: column; }
	.sm-notas__title { font-size: 18px; }
}

/* =========================================================
   AVISOS
   ========================================================= */
.sm-notas-vacio { padding: 1rem; background: #f6f4fb; border-radius: 4px; font-size: 14px; color: #767085; }
/* =========================================================
   AUTO-AJUSTE de columnas según el ancho del contenedor
   ========================================================= */
.sm-notas { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Anula las clases --cols-X cuando el contenedor es angosto */
@media (max-width: 1100px) {
	.sm-notas--cols-3,
	.sm-notas--cols-4,
	.sm-notas--cols-5,
	.sm-notas--cols-6 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
	.sm-notas { grid-template-columns: 1fr !important; }
}

