/* ==========================================================================
   CGE Descargas por Categoría – Estilos frontend + editor
   ========================================================================== */

:root {
	--cge-blue-dark:  #1a4e9a;
	--cge-blue:       #2563eb;
	--cge-blue-bg:    #f0f6fc;
	--cge-text:       #1f2937;
	--cge-text-muted: #6b7280;
	--cge-white:      #ffffff;
	--cge-border:     #d0dff0;
	--cge-radius:     4px;
	--cge-frame-from: #5ab4e8;
	--cge-frame-to:   #1a4e9a;
}



/* ── Cuadrícula: columnas 1fr dentro del contenedor restringido ────────── */
.cge-descargas-grid {
	display: grid;
	gap:     4rem;
}

.cge-descargas-grid.columns-1 { grid-template-columns: 1fr; }
.cge-descargas-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }
.cge-descargas-grid.columns-3 { grid-template-columns: repeat(3, 1fr); }
.cge-descargas-grid.columns-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Tarjeta ───────────────────────────────────────────────────────────── */
.cge-descarga-card {
	background:
		linear-gradient(var(--cge-white), var(--cge-white)) padding-box,
		linear-gradient(160deg, var(--cge-frame-from) 0%, var(--cge-frame-to) 100%) border-box;
	
	border-radius:   var(--cge-radius);
	cursor:          pointer;
	overflow:        hidden;
	display:         flex;
	flex-direction:  column;
	transition:      transform 0.2s ease, box-shadow 0.2s ease;
	-webkit-user-select: none;
	user-select:     none;
	outline:         none;
}

.cge-descarga-card:hover {
	transform:  translateY(-3px);
	box-shadow: 0 6px 18px rgba(26, 78, 154, 0.2);
}

.cge-descarga-card:focus-visible {
	outline:        2px solid var(--cge-blue);
	outline-offset: 2px;
}

/* ── Área de imagen: altura fija 200px, background-image en capas ─────── */
/*  Capas (igual al original):
    1. imagen del paquete (si existe)
    2. linear-gradient blanco→transparente (fade al pie)
    3. imagen de fondo del bloque (fallback siempre visible)            */
.card-image-area {
	height:              200px;
	background-size:     cover;
	background-position: top center;
	background-repeat:   no-repeat;
	background-color:    var(--cge-blue-bg);
	position:            relative;
	overflow:            hidden;
}

/* Título superpuesto visible al hacer hover (igual que .titulo-descargas-sin-imagen) */
.card-title-hover {
	position:        absolute;
	inset:           0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         12px;
	background:      rgba(255, 255, 255, 0.88);
	font-size:       0.78rem;
	font-weight:     700;
	text-transform:  uppercase;
	color:           var(--cge-blue-dark);
	text-align:      center;
	letter-spacing:  0.03em;
	line-height:     1.3;
	opacity:         0;
	transition:      opacity 0.2s ease;
}

.cge-descarga-card:hover .card-title-hover,
.cge-descarga-card:focus-visible .card-title-hover {
	opacity: 1;
}

/* ── Cuerpo: título estático + metadatos ──────────────────────────────── */
.card-body {
	padding:         10px 12px 14px;
	text-align:      center;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	gap:             4px;
}

.card-title {
	font-size:       1rem;
	font-weight:     700;
	text-transform:  uppercase;
	color:           var(--cge-blue-dark);
	line-height:     1.3;
	margin:          0;
	letter-spacing:  0.03em;
	display:         -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow:        hidden;
}

.card-meta {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            2px;
	font-size:      1rem;
	color:          var(--cge-text-muted);
}

.meta-item  { display: block; }
.meta-label { font-weight: 600; color: #4b5563; }

/* ── Estado vacío ─────────────────────────────────────────────────────── */
.cge-descargas-placeholder,
.cge-descargas-empty {
	border:        2px dashed var(--cge-border);
	border-radius: var(--cge-radius);
	padding:       24px;
	text-align:    center;
	color:         var(--cge-text-muted);
	background:    var(--cge-blue-bg);
	font-size:     0.9rem;
}

/* ── Modal overlay ────────────────────────────────────────────────────── */
.cge-modal-overlay {
	position:        fixed;
	inset:           0;
	background:      rgba(0, 0, 0, 0.65);
	z-index:         999999;
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         16px;
	animation:       cge-overlay-in 0.15s ease;
}

@keyframes cge-overlay-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

body.cge-modal-open { overflow: hidden; }

/* ── Modal ────────────────────────────────────────────────────────────── */
.cge-modal {
	background:    var(--cge-white);
	border-radius: var(--cge-radius);
	max-width:     640px;
	width:         100%;
	max-height:    92vh;
	overflow-y:    auto;
	position:      relative;
	box-shadow:    0 24px 64px rgba(0, 0, 0, 0.35);
	animation:     cge-modal-in 0.2s ease;
}

@keyframes cge-modal-in {
	from { transform: translateY(20px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

/* Botón cerrar – esquina superior derecha sobre la cabecera azul */
.cge-modal-close {
	position:        absolute;
	top:             10px;
	right:           12px;
	background:      none;
	border:          none;
	padding:         6px;
	cursor:          pointer;
	border-radius:   var(--cge-radius);
	z-index:         10;
	transition:      background 0.15s;
	display:         flex;
	align-items:     center;
	justify-content: center;
}
.cge-modal-close svg line            { stroke: #fff; }
.cge-modal-close:hover svg line,
.cge-modal-close:focus-visible svg line { stroke: #333; }
.cge-modal-close:hover,
.cge-modal-close:focus-visible {
	background:     rgba(255,255,255,0.2);
	outline:        2px solid rgba(255,255,255,0.6);
	outline-offset: 2px;
}

/* Cabecera: fondo azul oscuro + título centrado en blanco */
.cge-modal-header {
	background:    var(--cge-blue-dark);
	padding:       16px 48px 16px 20px;
	border-radius: var(--cge-radius) var(--cge-radius) 0 0;
}
.cge-modal-title {
	font-size:      0.92rem;
	font-weight:    700;
	color:          var(--cge-white);
	text-transform: uppercase;
	text-align:     center;
	line-height:    1.35;
	margin:         0;
	letter-spacing: 0.04em;
}

/* Cuerpo: imagen + fecha + descripción + metadatos */
.cge-modal-body { padding: 0; }

/* Área de imagen del modal: 300px de alto, background-image */
.cge-modal-image-area {
	height:              300px;
	background-size:     cover;
	background-position: top center;
	background-repeat:   no-repeat;
	background-color:    var(--cge-blue-bg);
}

.cge-modal-date-wrap {
	padding:   8px 20px 0;
}
.cge-modal-date { font-size: 0.82rem; color: var(--cge-text-muted); }

.cge-modal-description {
	padding:     12px 20px;
	font-size:   0.9rem;
	color:       var(--cge-text);
	line-height: 1.65;
}
.cge-modal-description p:first-child { margin-top: 0; }
.cge-modal-description p:last-child  { margin-bottom: 0; }

.cge-modal-meta {
	display:   flex;
	flex-wrap: wrap;
	gap:       8px 20px;
	padding:   0 20px 12px;
	font-size: 0.82rem;
	color:     var(--cge-text-muted);
}
.cge-meta-item  { white-space: nowrap; }
.cge-meta-label { font-weight: 600; color: #4b5563; }

/* Pie: botón descarga centrado */
.cge-modal-footer {
	padding:         16px 20px;
	display:         flex;
	gap:             12px;
	justify-content: center;
	flex-wrap:       wrap;
	border-top:      1px solid var(--cge-border);
	border-radius:   0 0 var(--cge-radius) var(--cge-radius);
	background:      #f8faff;
}
.cge-modal-download-btn,
.cge-modal-view-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             8px;
	padding:         10px 22px;
	border-radius:   var(--cge-radius);
	font-weight:     700;
	font-size:       0.9rem;
	text-decoration: none !important;
	transition:      background 0.2s, transform 0.1s;
	border:          none;
	cursor:          pointer;
}
.cge-modal-download-btn {
	background: var(--cge-blue-dark);
	color:      var(--cge-white) !important;
}
.cge-modal-view-btn {
	background: #e8f0fe;
	color:      var(--cge-blue-dark) !important;
	border:     1px solid var(--cge-blue-dark);
}
.cge-modal-download-btn:hover,
.cge-modal-download-btn:focus-visible {
	background:     var(--cge-blue);
	color:          var(--cge-white) !important;
	transform:      translateY(-1px);
	outline:        2px solid var(--cge-blue);
	outline-offset: 2px;
}
.cge-modal-view-btn:hover,
.cge-modal-view-btn:focus-visible {
	background:     var(--cge-blue-dark);
	color:          var(--cge-white) !important;
	transform:      translateY(-1px);
	outline:        2px solid var(--cge-blue-dark);
	outline-offset: 2px;
}
.cge-modal-download-btn svg,
.cge-modal-view-btn svg { flex-shrink: 0; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 700px) {
	.cge-descargas-grid.columns-3,
	.cge-descargas-grid.columns-4 { grid-template-columns: repeat(2, 1fr); }
	.cge-modal-image-area          { height: 200px; }
}
@media (max-width: 480px) {
	.cge-descargas-grid { grid-template-columns: 1fr !important; }
	.cge-modal          { max-height: 95vh; }
}

/* ── Editor ───────────────────────────────────────────────────────────── */
.cge-descargas-editor-placeholder {
	border:        2px dashed var(--cge-border);
	border-radius: var(--cge-radius);
	padding:       48px 24px;
	text-align:    center;
	background:    var(--cge-blue-bg);
}
.cge-placeholder-icon .dashicons {
	font-size:     52px;
	width:         52px;
	height:        52px;
	color:         #4a9dd4;
	margin-bottom: 12px;
}
.block-editor-page .cge-modal-overlay { display: none !important; }