/* ==========================================================
   Tabla Hiragana — CSS
   
   Estrategia de layout:
     .tth-outer-wrapper  ← grid maestro de 11 col (desktop) / 6 col (móvil)
       .todo-tabla-hiragana-container  ← grid-column: 1/-1 (fila 1, toda la anchura)
       .tth-n-label                    ← col 1 de fila 2 (= mismo ancho que columna del grid)
       .tth-n-card                     ← col 2 de fila 2 (= mismo ancho que columna del grid)
   
   Estructura de celda con hiragana:
     .tth-cell.tth-cell-wrapper
       ├─ .tth-nav-link  (zona superior – navega al hiragana)
       └─ .tth-speaker   (zona inferior – reproduce audio, SEPARADA del link)
   ========================================================== */


/* ── Outer wrapper: grid maestro ──
   Ambas filas (tabla + fila ん) comparten las mismas columnas.
   El gap se hereda por todos los hijos directos.
*/
.tth-outer-wrapper {
	display: grid;
	grid-template-columns: repeat(11, 1fr);
	column-gap: 2px;
	row-gap: 6px;
	margin: 0 auto;
}

/* ── Grid principal: ocupa toda la primera fila del wrapper ── */
.todo-tabla-hiragana-container {
	grid-column: 1 / -1;
	display: grid;
	grid-template-rows: repeat(6, 1fr);
	grid-template-columns: repeat(11, 1fr);
	grid-auto-flow: column;
	gap: 2px;
	background: var(--color-surface, #f4f4f6);
	border-radius: var(--rounded-lg, 20px);
	overflow: hidden;
	box-shadow: var(--shadow-card, 0 4px 24px rgba(0, 0, 0, 0.07));
	border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.06));
}

/* ── Celda base ── */
.tth-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--color-surface, #fff);
	min-height: 75px;
}

/* Cabecera de vocales: a i u e o */
.tth-cell.tth-header {
	background: #fff0f0;
	color: #1a1a1a;
	font-weight: 700;
	font-size: var(--fs-body-md, 0.95rem);
	aspect-ratio: 1;
}

/* Cabecera de consonantes: -, k-, s-, t-, n-, h-, m-, y-, r-, w- */
.tth-cell.tth-row-header {
	background: #fff0f0;
	color: #1a1a1a;
	font-weight: 700;
	font-size: var(--fs-body-md, 0.95rem);
	aspect-ratio: 1;
}

/* Celda vacía (yi, ye, wi, wu, we…) */
.tth-cell.tth-empty {
	background: var(--color-surface, #fff);
	pointer-events: none;
}

/* ── Celda con hiragana: flex-col con link arriba y botón abajo ── */
.tth-cell.tth-cell-wrapper {
	padding: 0;
	align-items: stretch;
	justify-content: flex-start;
	overflow: hidden;
	transition: none;
}

/* Zona de navegación (parte superior) */
.tth-nav-link {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	color: var(--color-on-surface, #1a1a2e);
	padding: 10px 6px 6px;
	transition: background 0.18s ease;
	-webkit-tap-highlight-color: transparent;
}

.tth-nav-link:hover,
.tth-nav-link:focus-visible {
	background: #ffeae8;
	outline: none;
}

.tth-nav-link:hover .tth-hira,
.tth-nav-link:focus-visible .tth-hira {
	color: var(--color-primary, #CB4B40);
}

/* Carácter hiragana */
.tth-hira {
	font-size: var(--fs-headline-lg, 1.8rem);
	font-weight: 600;
	line-height: 1.1;
	transition: color 0.18s;
}

/* Lectura en romaji */
.tth-roma {
	font-size: 0.78rem;
	color: var(--color-on-surface-variant, #666677);
	margin-top: 3px;
	line-height: 1;
}

/* ── Botón de sonido ──
   Es <button> hermano del <a>, NO anidado dentro.
   Zona táctil completamente independiente del link de navegación.
*/
.tth-speaker {
	flex-shrink: 0;
	width: 100%;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff0f0;
	border: none;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	cursor: pointer;
	color: #b8b8c8;
	transition: background 0.18s, color 0.18s, transform 0.12s;
	padding: 0;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

.tth-speaker:hover {
	background: rgba(203, 75, 64, 0.14);
	color: var(--color-primary, #CB4B40);
}

.tth-speaker:active {
	transform: scale(0.93);
}

.tth-speaker:focus-visible {
	outline: 2px solid var(--color-primary, #CB4B40);
	outline-offset: -2px;
}

.tth-speaker.playing {
	background: rgba(203, 75, 64, 0.16);
	color: var(--color-primary, #CB4B40);
}

.tth-speaker.playing svg {
	animation: tth-pulse 0.45s ease;
}

@keyframes tth-pulse {
	0% {
		transform: scale(1);
	}

	40% {
		transform: scale(1.5);
	}

	100% {
		transform: scale(1);
	}
}

/* ══════════════════════════════════════════════════════
   ん  —  Fila 2 del outer wrapper grid
   Hereda el ancho de columna exacto del grid maestro.
   Col 1 → etiqueta "-n"   Col 2 → celda ん
   ══════════════════════════════════════════════════════ */

/* Etiqueta "-n" (columna 1 de la fila 2) */
.tth-n-label {
	/* auto-colocada en col 1, fila 2 por el flujo del grid */
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff0f0;
	color: #1a1a1a;
	font-weight: 700;
	font-size: var(--fs-body-md, 0.95rem);
	border-radius: var(--rounded-md, 12px);
	border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.06));
	box-shadow: var(--shadow-card, 0 2px 10px rgba(0, 0, 0, 0.04));
	/* Misma altura que las celdas del grid (aspect-ratio 1 las hace cuadradas) */
	aspect-ratio: 1;
	min-height: 75px;
}

/* Tarjeta ん (columna 2 de la fila 2) */
.tth-n-card {
	/* auto-colocada en col 2, fila 2 — mismo ancho exacto que una columna del grid */
	border-radius: var(--rounded-md, 12px);
	overflow: hidden;
	border: 1px solid var(--glass-border, rgba(0, 0, 0, 0.06));
	box-shadow: var(--shadow-card, 0 2px 10px rgba(0, 0, 0, 0.04));
	min-height: 75px;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

/* ── Tablet + móvil: layout vertical ──
   Col 1 (etiquetas -/k-/s-…): 36px fijo — solo necesita texto corto.
   Cols 2-6 (hiragana a→o):    1fr cada una — espacio igual y visible.
*/
@media (max-width: 768px) {
	.tth-outer-wrapper {
		grid-template-columns: 36px repeat(5, 1fr);
	}

	.todo-tabla-hiragana-container {
		grid-column: 1 / -1;
		grid-template-columns: 36px repeat(5, 1fr);
		grid-template-rows: auto;
		grid-auto-flow: row;
		max-width: 100%;
	}

	/* En móvil los row-headers son una franja estrecha: quitar aspect-ratio
	   para que no fuercen la columna a ser cuadrada (y por tanto ancha). */
	.tth-cell.tth-row-header {
		aspect-ratio: auto;
		min-height: 0;
		font-size: 0.7rem;
		padding: 4px 2px;
	}

	/* La esquina vacía tampoco necesita ser cuadrada en móvil */
	.tth-cell.tth-header.tth-empty {
		aspect-ratio: auto;
	}

	/* tth-n-label y tth-n-card se auto-colocan en col 1 y 2
	   del outer grid de 36px + 5×1fr → mismo ancho que la tabla */
	.tth-n-label {
		aspect-ratio: auto;
		min-height: 0;
		font-size: 0.7rem;
	}
}

/* ── Móvil pequeño (< 480 px) ── */
@media (max-width: 480px) {
	.tth-hira {
		font-size: 1.1rem;
	}

	.tth-roma {
		font-size: 0.6rem;
	}

	.tth-cell {
		min-height: 58px;
	}

	/* Botón de sonido más alto = zona táctil más generosa en pantallas pequeñas */
	.tth-speaker {
		height: 28px;
	}

	.tth-n-label,
	.tth-n-card {
		min-height: 58px;
	}

	.tth-n-label {
		font-size: 0.8rem;
	}
}