/**
 * Junciera — sala de escribir y archivo del Diario.
 * Tokens del padre. Nada de color inventado.
 */

.junciera-entrar {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sgf-space-12) var(--sgf-space-4);
	min-height: calc(100svh - var(--sgf-nav-height));
}

.junciera-entrar__inner {
	width: min(440px, 100%);
	text-align: center;
}

.junciera-entrar__title {
	margin: 0;
	font-family: var(--sgf-font-body);
	font-size: 28px;
	font-weight: 500;
	line-height: 36px;
	letter-spacing: -0.01em;
	color: var(--sgf-color-text);
}

.junciera-entrar__text {
	margin: var(--sgf-space-3) 0 0;
	font-size: 16px;
	line-height: 24px;
	color: var(--sgf-color-muted);
}

.junciera-entrar__form {
	display: flex;
	flex-direction: column;
	gap: var(--sgf-space-4);
	margin-top: var(--sgf-space-7);
}

.junciera-entrar__form input[type="email"] {
	height: 56px;
	padding: 0 var(--sgf-space-4);
	border: 1px solid var(--sgf-color-border);
	border-radius: 0;
	background: var(--sgf-color-bg);
	color: var(--sgf-color-text);
	font: inherit;
	text-align: center;
}

.junciera-entrar__ok {
	margin: 0;
	font-size: var(--sgf-text-sm);
	color: var(--sgf-color-muted);
}

.junciera-mesa {
	display: grid;
	grid-template-columns: minmax(180px, 240px) minmax(0, 42rem);
	gap: var(--sgf-space-12);
	max-width: 1100px;
	margin: 0 auto;
	padding: var(--sgf-space-10) var(--sgf-space-6) var(--sgf-space-16);
}

@media (max-width: 767px) {
	.junciera-mesa {
		grid-template-columns: 1fr;
		padding-top: var(--sgf-space-6);
	}
}

.junciera-mesa__list ul {
	list-style: none;
	margin: var(--sgf-space-6) 0;
	padding: 0;
}

.junciera-mesa__list a {
	color: var(--sgf-color-text);
	text-decoration: none;
}

.junciera-mesa__nuevo,
.junciera-mesa__salir {
	display: inline-block;
	font-size: var(--sgf-text-sm);
	color: var(--sgf-color-muted);
}

.junciera-mesa__item {
	margin: 0 0 var(--sgf-space-4);
}

.junciera-mesa__item.is-on a {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.junciera-mesa__item-title {
	display: block;
}

.junciera-mesa__item-status {
	display: block;
	margin-top: 2px;
	font-size: var(--sgf-text-xs);
	letter-spacing: var(--sgf-tracking-wide);
	text-transform: uppercase;
	color: var(--sgf-color-muted);
}

.junciera-mesa__sheet {
	display: flex;
	flex-direction: column;
	gap: var(--sgf-space-5);
	min-width: 0;
}

.junciera-mesa__photo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 180px;
	border: 1px dashed var(--sgf-color-border);
	color: var(--sgf-color-muted);
	font-size: var(--sgf-text-sm);
	cursor: pointer;
	overflow: hidden;
}

.junciera-mesa__photo img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
}

.junciera-mesa__photo img[hidden] {
	display: none;
}

.junciera-mesa__sheet input[type="text"] {
	width: 100%;
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--sgf-color-text);
	font-family: var(--sgf-font-display);
	font-size: clamp(var(--sgf-text-2xl), 4vw, var(--sgf-text-3xl));
	font-weight: 400;
	line-height: var(--sgf-leading-tight);
	letter-spacing: var(--sgf-tracking-tight);
}

.junciera-mesa__sheet textarea {
	width: 100%;
	min-height: 50vh;
	border: 0;
	padding: 0;
	background: transparent;
	color: var(--sgf-color-text);
	font-family: var(--sgf-font-body);
	font-size: var(--sgf-text-md);
	line-height: var(--sgf-leading-loose);
	resize: vertical;
}

.junciera-mesa__sheet input:focus,
.junciera-mesa__sheet textarea:focus {
	outline: none;
}

.junciera-mesa__note {
	margin: 0;
	font-size: var(--sgf-text-sm);
	color: var(--sgf-color-muted);
}

.junciera-mesa__actions {
	display: flex;
	gap: var(--sgf-space-3);
	flex-wrap: wrap;
	position: sticky;
	bottom: 0;
	padding: var(--sgf-space-4) 0;
	background: var(--sgf-color-bg);
}

.junciera-diario {
	padding: var(--sgf-space-16) 0 var(--sgf-space-24);
}

.junciera-diario__head {
	margin-bottom: var(--sgf-space-12);
}

.junciera-diario__title {
	margin: 0;
	font-family: var(--sgf-font-display);
	font-size: var(--sgf-text-3xl);
	font-weight: 400;
	letter-spacing: var(--sgf-tracking-tight);
}

.junciera-diario__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* EL LISTADO ES LO QUE HACE QUE PAREZCA UN BLOG
   =============================================
   Antes cada entrada era una fecha y un titulo, uno encima de otro y
   nada mas. Eso no es un blog: es un indice. Lo que deja decidir si
   merece la pena entrar es la entradilla, y lo que separa una entrada
   de la siguiente es un filete, no un hueco.

   Miniatura a la izquierda y texto a la derecha, con la miniatura
   pequena a proposito: en un diario manda lo escrito, no la foto. Si
   una entrada no tiene foto, la columna desaparece y el texto ocupa
   todo —de ahi `auto` y no un ancho fijo. */

.junciera-diario__item + .junciera-diario__item {
	margin-top: var(--sgf-space-9);
	padding-top: var(--sgf-space-9);
	border-top: 1px solid var(--sgf-color-border);
}

/* Una sola columna de partida. `grid-template-columns: auto 1fr` a
   secas crea SIEMPRE dos pistas, tenga foto la entrada o no: la de
   prueba no tiene, y su texto se quedaba en 451px con 220 vacios al
   lado. Las columnas solo existen si hay algo que poner en ellas.

   El `:has()` vive DENTRO del `@media` a proposito: `:has()` suma
   especificidad, asi que si estuviera fuera le ganaria a la regla de
   movil y el telefono se quedaria con dos columnas. */
.junciera-diario__item a {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: var(--sgf-space-4);
	color: var(--sgf-color-text);
	text-decoration: none;
}

@media (min-width: 600px) {
	.junciera-diario__item a:has(.junciera-diario__thumb) {
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--sgf-space-7);
	}
}

.junciera-diario__thumb {
	display: block;
	width: 100%;
	overflow: hidden;
}

@media (min-width: 600px) {
	.junciera-diario__thumb { width: 180px; }
}

.junciera-diario__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--sgf-ratio-cuadrada);
	object-fit: cover;
	transition: transform var(--sgf-duration-slow) var(--sgf-ease-out);
}

.junciera-diario__texto {
	display: grid;
	gap: var(--sgf-space-2);
}

.junciera-diario__meta {
	font-size: var(--sgf-text-xs);
	letter-spacing: var(--sgf-tracking-wide);
	text-transform: uppercase;
	color: var(--sgf-color-muted);
}

.junciera-diario__name {
	font-family: var(--sgf-font-display);
	font-size: var(--sgf-text-2xl);
	line-height: var(--sgf-leading-snug);
}

.junciera-diario__sumario {
	max-width: 58ch;
	font-size: var(--sgf-text-sm);
	line-height: var(--sgf-lead-sm);
	color: var(--sgf-color-muted);
}

/* «Leer» no es un boton: es la senal de que la fila entera es un
   enlace. Subrayado a distancia, que es como se marca un enlace de
   texto en el resto de la casa. */
.junciera-diario__leer {
	margin-top: var(--sgf-space-2);
	font-size: var(--sgf-text-xs);
	letter-spacing: var(--sgf-tracking-wide);
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 0.35em;
	color: var(--sgf-color-text);
}

/* Toda la fila responde a la vez: el raton esta sobre un enlace, no
   sobre cinco trozos sueltos. */
@media (hover: hover) and (pointer: fine) {
	.junciera-diario__item a:hover .junciera-diario__thumb img {
		transform: scale(1.03);
	}

	.junciera-diario__item a:hover .junciera-diario__name {
		color: var(--sgf-color-muted);
	}
}

.junciera-diario__item a:focus-visible {
	outline: 2px solid var(--sgf-color-text);
	outline-offset: var(--sgf-space-3);
}

.junciera-diario__empty {
	color: var(--sgf-color-muted);
}

.junciera-entrada__hero img {
	display: block;
	width: 100%;
	max-height: 70vh;
	object-fit: cover;
}

.junciera-entrada__header {
	padding: var(--sgf-space-12) 0 var(--sgf-space-8);
}

.junciera-entrada__meta {
	margin: 0 0 var(--sgf-space-4);
	font-size: var(--sgf-text-xs);
	letter-spacing: var(--sgf-tracking-wide);
	text-transform: uppercase;
	color: var(--sgf-color-muted);
}

.junciera-entrada__title {
	margin: 0;
	font-family: var(--sgf-font-display);
	font-size: clamp(var(--sgf-text-3xl), 5vw, var(--sgf-text-4xl));
	font-weight: 400;
	line-height: var(--sgf-leading-tight);
	letter-spacing: var(--sgf-tracking-tight);
}

.junciera-entrada__content {
	padding-bottom: var(--sgf-space-24);
	font-size: var(--sgf-text-md);
	line-height: var(--sgf-leading-loose);
}

.junciera-entrada__content > * {
	max-width: 68ch;
}

.junciera-entrada__content > * + * {
	margin-top: 1.2em;
}

/* ═══════════════════════════════════════════════════════════
   LA SALIDA DE UNA ENTRADA
   ═══════════════════════════════════════════════════════════

   Dos puertas al Diario: una arriba, para quien se ha equivocado de
   entrada y lo sabe en el primer párrafo; otra abajo, para quien la
   ha leído entera y pregunta qué más hay. Son dos momentos distintos
   y por eso tienen dos formas: arriba un enlace discreto que no
   compite con el titular, abajo un botón.
   ─────────────────────────────────────────────────────────── */

.junciera-entrada__volver {
	margin: 0 0 1.5rem;
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.junciera-entrada__volver a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: #5e584f;
	text-decoration: none;
	transition: color 0.2s ease;
}

.junciera-entrada__volver a:hover {
	color: #1a1814;
}

.junciera-entrada__cierre {
	display: flex;
	justify-content: center;
	margin-top: 4rem;
	padding-top: 3rem;
	border-top: 1px solid rgb(26 24 20 / 0.14);
}