/**
 * Editor de tarjetas — presentacion.
 *
 * Los colores salen de variables con un valor de reserva, para que el bloque no
 * quede ilegible si el tema cambia. Ya paso en el pie de guiafinanciera: un gris
 * fijo sobre un fondo verde daba 1,11:1 de contraste y no se leia nada.
 */

.te-editor {
	--te-borde: #e3e1dc;
	--te-texto: #1f2328;
	--te-apagado: #5d646d;
	--te-fondo: #ffffff;
	--te-suave: #f6f5f2;
	--te-accion: #b02a5b;
	--te-accion-texto: #ffffff;

	margin: 0 0 2.5rem;
	color: var(--te-texto);
	font-size: 16px;
	line-height: 1.5;
}

@media (prefers-color-scheme: dark) {
	.te-editor {
		--te-borde: #343a42;
		--te-texto: #eceff3;
		--te-apagado: #a5aeb8;
		--te-fondo: #171a1f;
		--te-suave: #1f242b;
	}
}

/* El atributo `hidden` del HTML esconde con `display:none`, pero eso viene de
   la hoja del navegador y CUALQUIER regla propia con `display` le gana. Abajo
   hay varias (.te-cuerpo es grid, los botones son inline-block), asi que
   `hidden` dejaba de funcionar: el boton de quitar la foto se veia sin haber
   foto, y al cargar se veian a la vez el editor y el mensaje de «preparando».

   Con el selector de clase delante gana esta y vuelve a funcionar, sin tener
   que recurrir a !important. */
.te-editor [hidden] {
	display: none;
}

.te-cargando {
	padding: 2rem 1rem;
	text-align: center;
	color: var(--te-apagado);
	background: var(--te-suave);
	border-radius: 14px;
}

.te-cuerpo {
	display: grid;
	/* La tarjeta se lleva algo más de ancho que el formulario: es el producto,
	   y cuanto más grande se vea antes decide el visitante si le sirve. */
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 1.75rem;
	align-items: start;
	padding: 1.25rem;
	background: var(--te-suave);
	border: 1px solid var(--te-borde);
	border-radius: 16px;
}

/* En movil la tarjeta va arriba y los campos debajo: hay que ver lo que se
   escribe sin tener que subir y bajar. */
@media (max-width: 782px) {
	.te-cuerpo {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.25rem;
	}
}

/* La tarjeta se queda a la vista mientras se escribe. Es lo que se esta
   editando: si desaparece al bajar al formulario, se escribe a ciegas. */
.te-lienzo {
	position: sticky;
	top: 1rem;
	background: var(--te-fondo);
	border-radius: 12px;
	padding: .6rem;
	box-shadow: 0 2px 14px rgba(0, 0, 0, .10);
	/* Sin tope de alto, una tarjeta mas alta que la ventana se pega por
	   arriba y se sale por abajo igual. */
	max-height: calc(100vh - 2rem);
	max-height: calc(100dvh - 2rem);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* En movil la tarjeta va arriba y pegada, ocupando como mucho el 44 % de la
   pantalla: se ve siempre y debajo queda sitio para escribir. Antes era
   «static» y al bajar al primer campo se veia el 0 %. */
@media (max-width: 782px) {
	.te-lienzo {
		top: .5rem;
		z-index: 5;
		max-height: 44vh;
		max-height: 44dvh;
	}
}

.te-lienzo canvas {
	display: block;
	width: 100%;
	height: auto;
	max-height: calc(100vh - 3.2rem);
	max-height: calc(100dvh - 3.2rem);
	/* El canvas es un elemento reemplazado: con el ancho al 100 % y el alto
	   limitado, el dibujo se estiraria. contain lo encaja sin deformar. */
	object-fit: contain;
	border-radius: 6px;
}

@media (max-width: 782px) {
	.te-lienzo canvas {
		max-height: calc(44vh - 1.2rem);
		max-height: calc(44dvh - 1.2rem);
	}
}

.te-titulo {
	margin: 0 0 .25rem;
	font-size: 1.15rem;
	line-height: 1.3;
}

.te-ayuda {
	margin: 0 0 1rem;
	font-size: .9rem;
	color: var(--te-apagado);
}

/* ── las paletas ───────────────────────────────────────────────────────── */

.te-paletas {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 1.25rem;
}

.te-paleta {
	display: flex;
	align-items: center;
	gap: .35rem;
	padding: .3rem .6rem .3rem .35rem;
	background: var(--te-fondo);
	border: 2px solid var(--te-borde);
	border-radius: 999px;
	cursor: pointer;
	font: inherit;
	font-size: .8rem;
	color: var(--te-texto);
}

.te-paleta span {
	width: 17px;
	height: 17px;
	border-radius: 50%;
	/* El borde va en gris medio y no en negro translúcido: sobre el fondo
	   oscuro del modo noche un borde negro no se ve, y una muestra de color
	   claro quedaba flotando sin contorno. */
	border: 1px solid rgba(128, 128, 128, .55);
}

.te-paleta .te-paleta-nombre {
	width: auto;
	height: auto;
	border: 0;
	border-radius: 0;
	margin-left: .2rem;
}

.te-paleta.es-activa {
	border-color: var(--te-accion);
}

.te-paleta:focus-visible {
	outline: 3px solid var(--te-accion);
	outline-offset: 2px;
}

/* ── los campos ────────────────────────────────────────────────────────── */

.te-campo {
	margin: 0 0 .75rem;
}

.te-campo label {
	display: block;
	margin-bottom: .2rem;
	font-size: .82rem;
	font-weight: 600;
	color: var(--te-apagado);
}

.te-campo input {
	width: 100%;
	box-sizing: border-box;
	padding: .55rem .7rem;
	font: inherit;
	font-size: 1rem; /* 16px o menos hace que el movil haga zoom al tocar */
	color: var(--te-texto);
	background: var(--te-fondo);
	border: 1px solid var(--te-borde);
	border-radius: 8px;
}

.te-campo input:focus {
	outline: 2px solid var(--te-accion);
	outline-offset: 1px;
	border-color: var(--te-accion);
}

/* ── los botones ───────────────────────────────────────────────────────── */

.te-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: 1.25rem;
}

.te-boton {
	padding: .75rem 1.3rem;
	font: inherit;
	font-weight: 600;
	border-radius: 10px;
	border: 2px solid transparent;
	cursor: pointer;
}

.te-boton-principal {
	flex: 1 1 14rem;
	background: var(--te-accion);
	color: var(--te-accion-texto);
}

.te-boton-principal:hover {
	filter: brightness(1.08);
}

.te-boton-suave {
	background: transparent;
	color: var(--te-apagado);
	border-color: var(--te-borde);
}

.te-boton:focus-visible {
	outline: 3px solid var(--te-accion);
	outline-offset: 2px;
}

.te-nota {
	margin: .75rem 0 0;
	min-height: 1.25em;
	font-size: .88rem;
	color: var(--te-apagado);
}

.te-aviso {
	padding: 1rem;
	background: #fff4e5;
	color: #6b3f00;
	border-radius: 10px;
}

/* ─── la rejilla de las galerias ─────────────────────────────────────────── */

.te-seccion {
	margin: 2rem 0 1rem;
	font-size: 1.5rem;
	line-height: 1.25;
}

.te-galeria {
	display: grid;
	/* auto-fill con un minimo: las fichas se reparten solas segun el ancho,
	   sin tener que declarar puntos de ruptura uno a uno. */
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 1.5rem;
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
}

.te-ficha {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: 12px;
	transition: transform .15s ease;
}

.te-ficha:hover,
.te-ficha:focus-visible {
	transform: translateY(-3px);
}

.te-ficha:focus-visible {
	outline: 3px solid #b02a5b;
	outline-offset: 4px;
}

.te-ficha-lienzo {
	display: block;
	border-radius: 10px;
	overflow: hidden;
	background: #f1efeb;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

.te-ficha-lienzo canvas {
	display: block;
	width: 100%;
	height: auto;
}

.te-ficha-pie {
	display: block;
	padding: .65rem .2rem 0;
}

.te-ficha-titulo {
	display: block;
	font-size: .95rem;
	line-height: 1.3;
}

.te-ficha-accion {
	display: block;
	margin-top: .15rem;
	font-size: .82rem;
	color: #b02a5b;
	font-weight: 600;
}

.te-lista {
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
}

.te-lista li {
	padding: .8rem 0;
	border-bottom: 1px solid rgba(127, 127, 127, .22);
}

.te-lista a {
	font-weight: 600;
}

.te-lista span {
	display: block;
	margin-top: .15rem;
	font-size: .9rem;
	opacity: .78;
}

/* ─── poner una foto propia ──────────────────────────────────────────────── */

.te-foto {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin: 0 0 1.1rem;
	padding: .85rem .95rem;
	background: var(--te-fondo);
	border: 1px dashed var(--te-borde);
	border-radius: 10px;
}

/* La etiqueta hace de botón porque un <input type="file"> se ve distinto en
   cada navegador y en ninguno se parece al resto de la interfaz. */
.te-foto-boton,
.te-foto-quitar {
	/* Botones de verdad: no se estiran a todo el ancho ni parten el texto en
	   dos líneas. Tal como estaban parecían dos tarjetas vacías apiladas. */
	flex: 0 0 auto;
	padding: .55rem 1rem;
	font-size: .9rem;
	white-space: nowrap;
}

.te-foto-boton {
	cursor: pointer;
}

/* El teclado llega al <input>, que está oculto; el aro de foco tiene que
   verse en la etiqueta o no hay forma de saber dónde estás. */
#te-foto-archivo:focus-visible + .te-foto-quitar,
.te-foto-boton:focus-within,
#te-foto-archivo:focus-visible ~ .te-foto-boton {
	outline: 3px solid var(--te-accion);
	outline-offset: 2px;
}

.te-foto-nota {
	/* Ocupa su propia fila completa debajo de los botones, en vez de pelearse
	   con ellos por el hueco que sobra y partirse en tres líneas desiguales. */
	flex: 1 0 100%;
	margin: .1rem 0 0;
	font-size: .84rem;
	line-height: 1.5;
	color: var(--te-apagado);
}