/* =============================================================================
   Hemeroteca MACN — Frontend Styles
   v1.0.0
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Variables
   ----------------------------------------------------------------------------- */
:root {
	--hmacn-primary:       #1a3a5c;
	--hmacn-primary-dark:  #142e4a;
	--hmacn-accent:        #c8972e;
	--hmacn-bg:            #f5f7fa;
	--hmacn-card-bg:       #ffffff;
	--hmacn-border:        #dde2e8;
	--hmacn-text:          #1e2535;
	--hmacn-text-muted:    #6b7a8d;
	--hmacn-radius:        8px;
	--hmacn-shadow-sm:     0 1px 4px rgba(0, 0, 0, 0.07);
	--hmacn-shadow:        0 2px 10px rgba(0, 0, 0, 0.09);
	--hmacn-shadow-lg:     0 6px 24px rgba(0, 0, 0, 0.13);
	--hmacn-transition:    0.2s ease;
}

/* -----------------------------------------------------------------------------
   Grid
   ----------------------------------------------------------------------------- */
.hmacn-grid {
	display: grid;
	gap: 28px;
	margin: 24px 0;
}

.hmacn-grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.hmacn-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.hmacn-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.hmacn-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.hmacn-grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.hmacn-grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1100px) {
	.hmacn-grid-cols-4,
	.hmacn-grid-cols-5,
	.hmacn-grid-cols-6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
	.hmacn-grid-cols-3,
	.hmacn-grid-cols-4,
	.hmacn-grid-cols-5,
	.hmacn-grid-cols-6 { grid-template-columns: repeat(2, 1fr); }
	.hmacn-grid { gap: 18px; }
}

@media (max-width: 500px) {
	.hmacn-grid-cols-2,
	.hmacn-grid-cols-3,
	.hmacn-grid-cols-4,
	.hmacn-grid-cols-5,
	.hmacn-grid-cols-6 { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
   Card
   ----------------------------------------------------------------------------- */
.hmacn-card {
	background:     var(--hmacn-card-bg);
	border:         1px solid var(--hmacn-border);
	border-radius:  var(--hmacn-radius);
	box-shadow:     var(--hmacn-shadow-sm);
	overflow:       hidden;
	display:        flex;
	flex-direction: column;
	transition:     box-shadow var(--hmacn-transition), transform var(--hmacn-transition);
}

.hmacn-card:hover {
	box-shadow: var(--hmacn-shadow-lg);
	transform:  translateY(-3px);
}

/* Cover */
.hmacn-card-cover-wrap {
	position:     relative;
	overflow:     hidden;
	background:   #e8ecf1;
	aspect-ratio: 3 / 4;
}

.hmacn-card-cover-wrap > a {
	display: block;
	height:  100%;
}

.hmacn-card-cover-wrap img.hmacn-card-cover {
	width:       100%;
	height:      100%;
	object-fit:  cover;
	display:     block;
	transition:  transform var(--hmacn-transition);
}

.hmacn-card:hover .hmacn-card-cover-wrap img {
	transform: scale(1.04);
}

/* Placeholder when no thumbnail */
.hmacn-cover-placeholder {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           100%;
	height:          100%;
	background:      #dde2e8;
}

.hmacn-cover-placeholder .dashicons {
	font-size: 60px;
	width:     60px;
	height:    60px;
	color:     #a0adb8;
}

/* Edition badge */
.hmacn-card-numero {
	position:      absolute;
	bottom:        10px;
	right:         10px;
	background:    var(--hmacn-primary);
	color:         #fff;
	font-size:     11px;
	font-weight:   600;
	padding:       3px 8px;
	border-radius: 4px;
	letter-spacing: 0.04em;
}

/* Body */
.hmacn-card-body {
	padding:        16px;
	display:        flex;
	flex-direction: column;
	flex:           1;
}

.hmacn-card-title {
	font-size:   15px;
	font-weight: 600;
	margin:      0 0 6px;
	line-height: 1.3;
	color:       var(--hmacn-text);
}

.hmacn-card-title a {
	color:           inherit;
	text-decoration: none;
}

.hmacn-card-title a:hover {
	color: var(--hmacn-primary);
}

.hmacn-card-subtitulo,
.hmacn-card-excerpt {
	font-size:   13px;
	color:       var(--hmacn-text-muted);
	margin:      0 0 10px;
	line-height: 1.45;
}

.hmacn-card-actions {
	margin-top:  auto;
	display:     flex;
	gap:         8px;
	flex-wrap:   wrap;
	padding-top: 10px;
}

.hmacn-card-stats {
	display:     flex;
	gap:         14px;
	margin-top:  10px;
	padding-top: 8px;
	border-top:  1px solid var(--hmacn-border);
	color:       var(--hmacn-text-muted);
	font-size:   12px;
}

.hmacn-card-stats .dashicons {
	font-size:      13px;
	width:          13px;
	height:         13px;
	vertical-align: middle;
	margin-right:   2px;
}

/* -----------------------------------------------------------------------------
   Buttons
   ----------------------------------------------------------------------------- */
.hmacn-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             5px;
	padding:         8px 14px;
	border-radius:   5px;
	font-size:       13px;
	font-weight:     500;
	text-decoration: none;
	cursor:          pointer;
	line-height:     1.2;
	white-space:     nowrap;
	transition:      background var(--hmacn-transition),
	                 color var(--hmacn-transition),
	                 border-color var(--hmacn-transition);
}

.hmacn-btn .dashicons {
	font-size: 15px;
	width:     15px;
	height:    15px;
	flex-shrink: 0;
}

.hmacn-btn-primary {
	background:   var(--hmacn-primary);
	color:        #fff;
	border:       1px solid var(--hmacn-primary);
}

.hmacn-btn-primary:hover,
.hmacn-btn-primary:focus {
	background:   var(--hmacn-primary-dark);
	border-color: var(--hmacn-primary-dark);
	color:        #fff;
}

.hmacn-btn-secondary {
	background: transparent;
	color:      var(--hmacn-primary);
	border:     1px solid var(--hmacn-primary);
}

.hmacn-btn-secondary:hover,
.hmacn-btn-secondary:focus {
	background: var(--hmacn-primary);
	color:      #fff;
}

/* -----------------------------------------------------------------------------
   Tags / Colecciones
   ----------------------------------------------------------------------------- */
.hmacn-tag {
	display:         inline-block;
	background:      var(--hmacn-bg);
	border:          1px solid var(--hmacn-border);
	color:           var(--hmacn-text-muted);
	font-size:       12px;
	padding:         3px 10px;
	border-radius:   20px;
	text-decoration: none;
	margin:          0 4px 4px 0;
	transition:      background var(--hmacn-transition),
	                 color var(--hmacn-transition),
	                 border-color var(--hmacn-transition);
}

.hmacn-tag:hover {
	background:   var(--hmacn-primary);
	color:        #fff;
	border-color: var(--hmacn-primary);
}

/* -----------------------------------------------------------------------------
   Single — header
   ----------------------------------------------------------------------------- */
.hmacn-single-wrap {
	max-width: 980px;
	margin:    0 auto;
	padding:   36px 20px 48px;
}

.hmacn-single-header {
	display:     flex;
	gap:         40px;
	margin-bottom: 40px;
	align-items: flex-start;
}

.hmacn-single-cover {
	flex-shrink: 0;
	width:       200px;
}

.hmacn-single-cover img {
	width:         100%;
	height:        auto;
	border-radius: var(--hmacn-radius);
	box-shadow:    var(--hmacn-shadow);
	display:       block;
}

.hmacn-single-info {
	flex:      1;
	min-width: 0;
}

.hmacn-single-numero {
	display:        inline-block;
	background:     var(--hmacn-accent);
	color:          #fff;
	font-size:      11px;
	font-weight:    700;
	padding:        3px 10px;
	border-radius:  4px;
	margin-bottom:  10px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.hmacn-single-title {
	font-size:   28px;
	font-weight: 700;
	color:       var(--hmacn-text);
	margin:      0 0 10px;
	line-height: 1.2;
}

.hmacn-single-subtitulo {
	font-size:   16px;
	color:       var(--hmacn-text-muted);
	margin:      0 0 18px;
	line-height: 1.5;
}

.hmacn-single-colecciones {
	margin-bottom: 18px;
}

.hmacn-single-actions {
	display:       flex;
	gap:           10px;
	flex-wrap:     wrap;
	margin-bottom: 20px;
}

.hmacn-single-stats {
	display:   flex;
	gap:       18px;
	color:     var(--hmacn-text-muted);
	font-size: 13px;
}

.hmacn-single-stats .dashicons {
	font-size:      16px;
	width:          16px;
	height:         16px;
	vertical-align: middle;
	margin-right:   3px;
}

@media (max-width: 680px) {
	.hmacn-single-header {
		flex-direction: column;
		gap:            22px;
	}

	.hmacn-single-cover { width: 150px; }
	.hmacn-single-title { font-size: 22px; }
}

/* -----------------------------------------------------------------------------
   Viewer
   ----------------------------------------------------------------------------- */
.hmacn-viewer-section {
	margin: 36px 0;
}

.hmacn-viewer-container {
	background:    #2a2a2a;
	border-radius: var(--hmacn-radius);
	overflow:      hidden;
}

/* Toolbar */
.hmacn-viewer-toolbar {
	background:  #1c1c1c;
	display:     flex;
	align-items: center;
	padding:     8px 14px;
	gap:         8px;
	flex-wrap:   wrap;
}

.hmacn-toolbar-btn {
	background:   #3d3d3d;
	color:        #d0d0d0;
	border:       none;
	border-radius: 4px;
	min-width:    32px;
	height:       32px;
	font-size:    18px;
	cursor:       pointer;
	display:      flex;
	align-items:  center;
	justify-content: center;
	transition:   background var(--hmacn-transition);
	padding:      0 6px;
}

.hmacn-toolbar-btn:hover:not(:disabled) {
	background: #555;
	color:      #fff;
}

.hmacn-toolbar-btn:disabled {
	opacity: 0.35;
	cursor:  default;
}

.hmacn-page-info {
	display:     flex;
	align-items: center;
	gap:         6px;
	color:       #c0c0c0;
	font-size:   13px;
}

.hmacn-page-info input[type="number"] {
	width:        46px;
	background:   #3d3d3d;
	border:       1px solid #555;
	color:        #eee;
	text-align:   center;
	border-radius: 4px;
	padding:      4px;
	font-size:    13px;
	-moz-appearance: textfield;
}

.hmacn-page-info input[type="number"]::-webkit-inner-spin-button,
.hmacn-page-info input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.hmacn-toolbar-zoom {
	display:     flex;
	align-items: center;
	gap:         6px;
	margin-left: auto;
	color:       #c0c0c0;
	font-size:   13px;
}

.hmacn-toolbar-download {
	color:           #c0c0c0;
	text-decoration: none;
	display:         flex;
	align-items:     center;
	margin-left:     4px;
}

.hmacn-toolbar-download:hover { color: #fff; }

.hmacn-toolbar-download .dashicons {
	font-size: 20px;
	width:     20px;
	height:    20px;
}

/* Loading / Error states */
.hmacn-viewer-loading,
.hmacn-viewer-error {
	color:       #c0c0c0;
	text-align:  center;
	padding:     70px 24px;
	font-size:   15px;
	line-height: 1.6;
}

.hmacn-viewer-error {
	color: #e8a0a0;
}

/* Spinner */
.hmacn-spinner {
	display:       inline-block;
	width:         22px;
	height:        22px;
	border:        3px solid rgba(255, 255, 255, 0.12);
	border-top-color: #aaa;
	border-radius: 50%;
	animation:     hmacn-spin 0.75s linear infinite;
	vertical-align: middle;
	margin-right:  10px;
}

@keyframes hmacn-spin {
	to { transform: rotate(360deg); }
}

/* Canvas (PDF.js output) */
.hmacn-pdf-canvas {
	display:   block;
	margin:    16px auto;
	max-width: 100%;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Fallback iframe */
.hmacn-pdf-iframe {
	width:   100%;
	height:  740px;
	border:  none;
	display: block;
}

@media (max-width: 600px) {
	.hmacn-pdf-iframe { height: 520px; }
}

/* -----------------------------------------------------------------------------
   Single — content body
   ----------------------------------------------------------------------------- */
.hmacn-single-content {
	margin:      36px 0;
	padding-top: 36px;
	border-top:  1px solid var(--hmacn-border);
	color:       var(--hmacn-text);
	font-size:   15px;
	line-height: 1.7;
}

/* -----------------------------------------------------------------------------
   Navigation between revistas
   ----------------------------------------------------------------------------- */
.hmacn-nav-revistas {
	display:    flex;
	gap:        16px;
	margin-top: 44px;
	padding-top: 28px;
	border-top: 1px solid var(--hmacn-border);
}

.hmacn-nav-link {
	display:         flex;
	flex-direction:  column;
	text-decoration: none;
	background:      var(--hmacn-card-bg);
	border:          1px solid var(--hmacn-border);
	border-radius:   var(--hmacn-radius);
	padding:         16px 20px;
	flex:            1;
	transition:      border-color var(--hmacn-transition), box-shadow var(--hmacn-transition);
}

.hmacn-nav-link:hover {
	border-color: var(--hmacn-primary);
	box-shadow:   var(--hmacn-shadow);
}

.hmacn-nav-next { text-align: right; align-items: flex-end; }

.hmacn-nav-arrow {
	font-size:   24px;
	color:       var(--hmacn-primary);
	line-height: 1;
}

.hmacn-nav-label {
	font-size:      11px;
	color:          var(--hmacn-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	margin:         4px 0;
}

.hmacn-nav-title {
	font-size:   14px;
	font-weight: 600;
	color:       var(--hmacn-text);
}

@media (max-width: 500px) {
	.hmacn-nav-revistas { flex-direction: column; }
}

/* -----------------------------------------------------------------------------
   Archive
   ----------------------------------------------------------------------------- */
.hmacn-archive-wrap {
	max-width: 1120px;
	margin:    0 auto;
	padding:   36px 20px 60px;
}

.hmacn-archive-header {
	margin-bottom: 32px;
}

.hmacn-archive-title {
	font-size:   30px;
	font-weight: 700;
	color:       var(--hmacn-text);
	margin:      0 0 8px;
}

.hmacn-archive-description {
	color:       var(--hmacn-text);
	font-size:   15px;
	line-height: 1.7;
	margin:      20px 0 0;
	max-width:   820px;
}

.hmacn-archive-description p {
	margin: 0 0 14px;
}

.hmacn-archive-description p:last-child {
	margin-bottom: 0;
}

.hmacn-archive-description a {
	color:           var(--hmacn-primary);
	text-decoration: underline;
}

.hmacn-archive-description strong,
.hmacn-archive-description b {
	font-weight: 600;
	color:       var(--hmacn-text);
}

/* -----------------------------------------------------------------------------
   Pagination
   ----------------------------------------------------------------------------- */
.hmacn-pagination {
	margin-top:      44px;
	display:         flex;
	justify-content: center;
	flex-wrap:       wrap;
	gap:             6px;
}

.hmacn-pagination .page-numbers {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	min-width:       36px;
	height:          36px;
	padding:         0 10px;
	border-radius:   5px;
	border:          1px solid var(--hmacn-border);
	color:           var(--hmacn-text);
	text-decoration: none;
	font-size:       14px;
	transition:      background var(--hmacn-transition), color var(--hmacn-transition);
}

.hmacn-pagination .page-numbers.current,
.hmacn-pagination .page-numbers:hover {
	background:   var(--hmacn-primary);
	color:        #fff;
	border-color: var(--hmacn-primary);
}

/* -----------------------------------------------------------------------------
   Empty state
   ----------------------------------------------------------------------------- */
.hmacn-empty {
	text-align: center;
	color:      var(--hmacn-text-muted);
	padding:    48px 20px;
	font-size:  15px;
}