/* -------------------------------------------------------------------------
 * assets/style.css
 *
 * Estilos públicos del shortcode [documentos_dian].
 * Paleta de colores exacta solicitada, aplicada mediante variables CSS
 * en :root para facilitar futuros ajustes de marca.
 * ------------------------------------------------------------------------- */

/* Respaldo: importa las tipografías desde Google Fonts por si el theme
   (The7) no las estuviera cargando ya. Si el theme las carga, este
   @import simplemente reutiliza la misma fuente sin duplicar peso visual. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@600&family=Inter:wght@400;500;600&display=swap');

:root {
	--fondo:        #FDF6EC; /* Fondo de la sección */
	--acordeon:     #EAD9C4; /* Barra del año */
	--tarjeta:      #FFFFFF; /* Fondo de tarjeta */
	--borde:        #EDE0D0; /* Borde de tarjeta */
	--icono-bg:     #F4C6B0; /* Fondo del ícono */
	--terracota:    #A6492E; /* Botones, íconos, acentos */
	--terracota-h:  #8A3A22; /* Hover de botones */
	--titulo:       #4A3328; /* Títulos */
	--texto:        #6B5B4F; /* Cuerpo */
	--meta:         #8A7A6E; /* Metadatos */
}

/* Sección contenedora general */
.apco-doc-seccion {
	background-color: var(--fondo);
	padding: 32px 16px;
}

.apco-doc-container {
	max-width: 1000px;
	margin: 0 auto;
}

.apco-doc-vacio {
	font-family: 'Inter', sans-serif;
	color: var(--texto);
	text-align: center;
}

/* Acordeón por año */
.apco-doc-acordeon {
	margin-bottom: 20px;
}

/* Quita el marcador nativo (triángulo) de <summary> en todos los navegadores */
.apco-doc-acordeon-barra {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: var(--acordeon);
	border-radius: 12px 12px 0 0;
	padding: 16px 20px;
	user-select: none;
}

.apco-doc-acordeon-barra::-webkit-details-marker {
	display: none;
}

/* Cuando el acordeón está cerrado, la barra recupera las esquinas
   redondeadas completas (no hay contenedor de tarjetas debajo visible). */
.apco-doc-acordeon:not([open]) .apco-doc-acordeon-barra {
	border-radius: 12px;
}

.apco-doc-acordeon-titulo {
	font-family: 'Fraunces', serif;
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--titulo);
}

.apco-doc-chevron {
	color: var(--titulo);
	transition: transform 0.25s ease;
	flex-shrink: 0;
}

/* La flecha rota 180° cuando el acordeón está abierto */
.apco-doc-acordeon[open] > .apco-doc-acordeon-barra .apco-doc-chevron {
	transform: rotate(180deg);
}

/* Contenedor de tarjetas dentro de cada año */
.apco-doc-tarjetas {
	background-color: var(--tarjeta);
	border-radius: 0 0 12px 12px;
	padding: 20px;
}

/* Tarjeta individual de documento */
.apco-doc-tarjeta {
	display: flex;
	align-items: center;
	gap: 16px;
	background-color: var(--tarjeta);
	border: 1px solid var(--borde);
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(74, 51, 40, 0.08);
	padding: 16px;
	margin-bottom: 12px;
}

.apco-doc-tarjeta:last-child {
	margin-bottom: 0;
}

/* Ícono cuadrado con esquinas redondeadas y fondo salmón */
.apco-doc-icono {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background-color: var(--icono-bg);
	color: var(--terracota);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Bloque de texto: título, descripción y línea meta */
.apco-doc-contenido {
	flex: 1 1 auto;
	min-width: 0; /* Permite que el texto largo se trunque/ajuste correctamente en flex */
}

.apco-doc-titulo {
	font-family: 'Fraunces', serif;
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--titulo);
	margin: 0 0 4px 0;
}

.apco-doc-descripcion {
	font-family: 'Inter', sans-serif;
	font-size: 0.9rem;
	color: var(--texto);
	margin: 0 0 6px 0;
}

.apco-doc-meta {
	font-family: 'Inter', sans-serif;
	font-size: 0.8rem;
	color: var(--meta);
	margin: 0;
}

/* Botones de acción a la derecha de la tarjeta */
.apco-doc-acciones {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
}

.apco-doc-boton {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 0.85rem;
	color: #FFFFFF;
	background-color: var(--terracota);
	border: none;
	border-radius: 8px;
	padding: 8px 18px;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

.apco-doc-boton:hover,
.apco-doc-boton:focus {
	background-color: var(--terracota-h);
	color: #FFFFFF;
}

.apco-doc-enlace-descarga {
	font-family: 'Inter', sans-serif;
	font-size: 0.8rem;
	color: var(--terracota);
	text-decoration: underline;
	white-space: nowrap;
}

.apco-doc-enlace-descarga:hover,
.apco-doc-enlace-descarga:focus {
	color: var(--terracota-h);
}

/* Responsive: en móvil las tarjetas apilan el contenido y los botones bajan */
@media (max-width: 600px) {
	.apco-doc-tarjeta {
		flex-wrap: wrap;
	}

	.apco-doc-contenido {
		flex-basis: calc(100% - 64px);
	}

	.apco-doc-acciones {
		flex-direction: row;
		align-items: center;
		width: 100%;
		margin-top: 12px;
		gap: 12px;
	}

	.apco-doc-boton {
		flex: 1 1 auto;
	}
}