/*!
 * Mareas · Reserva Pcial. Costa Atlántica TDF
 * Paleta extraída de las piezas institucionales originales.
 * Verde #5A7759 · Naranja #EF9300 · Rojo #E8501F · Celeste #32A9E3 · Amarillo #EED579
 */

.mrc {
	--mrc-verde: #5a7759;
	--mrc-verde-900: #3c513c;
	--mrc-verde-700: #4b6549;
	--mrc-verde-300: #8aa588;
	--mrc-crema: #f6f4ee;
	--mrc-blanco: #ffffff;
	--mrc-tinta: #22301f;
	--mrc-tinta-suave: #5c6a59;
	--mrc-linea: rgba(90, 119, 89, 0.18);
	--mrc-naranja: #ef9300;
	--mrc-rojo: #e8501f;
	--mrc-celeste: #32a9e3;
	--mrc-amarillo: #eed579;
	--mrc-ok: #2f7d4f;
	--mrc-radio: 18px;
	--mrc-radio-chico: 11px;
	--mrc-sombra: 0 10px 30px rgba(34, 48, 31, 0.1);
	--mrc-sombra-alta: 0 16px 44px rgba(34, 48, 31, 0.16);

	box-sizing: border-box;
	max-width: 1120px;
	margin: 0 auto;
	display: grid;
	gap: 22px;
	color: var(--mrc-tinta);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.mrc *,
.mrc *::before,
.mrc *::after {
	box-sizing: border-box;
}

/* Reset defensivo: muchos temas pisan listas, párrafos y tablas. */
.mrc p,
.mrc h2,
.mrc h3,
.mrc dl,
.mrc dd,
.mrc dt,
.mrc figure,
.mrc ul,
.mrc li {
	margin: 0;
	padding: 0;
}

.mrc ul,
.mrc li {
	list-style: none;
}

.mrc table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

.mrc img {
	max-width: 100%;
	height: auto;
	display: block;
}

.mrc a {
	color: inherit;
	text-decoration: none;
}

.mrc button {
	font: inherit;
	cursor: pointer;
}

/* Contenido desplegable del componente.
   La regla [hidden] es obligatoria: el display:grid de abajo gana sobre el
   display:none que el navegador aplica al atributo hidden. */
.mrc-panel {
	display: grid;
	gap: 22px;
	min-width: 0;
}

.mrc-panel[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------
 * Encabezado
 * ------------------------------------------------------------------ */

.mrc-hero {
	position: relative;
	overflow: hidden;
	/* Padding fluido: en pantallas angostas el encabezado se compacta solo,
	   así las píldoras de adentro ganan ancho y no parten el texto. */
	padding: clamp(18px, 4.6vw, 34px) clamp(12px, 4vw, 32px) clamp(16px, 4vw, 28px);
	border-radius: var(--mrc-radio);
	background: linear-gradient(135deg, var(--mrc-verde-900) 0%, var(--mrc-verde) 55%, var(--mrc-verde-700) 100%);
	color: var(--mrc-blanco);
	box-shadow: var(--mrc-sombra);
}

.mrc-hero::after {
	content: "";
	position: absolute;
	right: -70px;
	bottom: -110px;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, rgba(238, 213, 121, 0.28), transparent 62%);
	pointer-events: none;
}

/* Latido verde sobre TODO el recuadro.
   Es una franja de degradado mucho más ancha que la caja que se desplaza
   despacio: se lee como un cambio de tono, no como un halo con forma.
   Usa transform + opacity (y no background-position) para no repintar. */
.mrc-hero::before {
	content: "";
	position: absolute;
	inset: -25%;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(112deg,
		rgba(152, 182, 149, 0) 0%,
		rgba(152, 182, 149, 0.18) 33%,
		rgba(126, 158, 124, 0.30) 50%,
		rgba(152, 182, 149, 0.16) 67%,
		rgba(152, 182, 149, 0) 100%);
	animation: mrc-latido-verde 9s ease-in-out infinite;
}

/* El contenido tiene que quedar por encima del latido. */
.mrc-hero > * {
	position: relative;
	z-index: 1;
}

@keyframes mrc-latido-verde {
	0%   { transform: translate3d(-16%, 0, 0) scale(1.06); opacity: 0.45; }
	50%  { transform: translate3d(16%, 0, 0) scale(1.14); opacity: 1; }
	100% { transform: translate3d(-16%, 0, 0) scale(1.06); opacity: 0.45; }
}

/* Con animaciones reducidas el recuadro queda con un verde parejo,
   sin movimiento: se pierde el latido pero no el tono. */
@media (prefers-reduced-motion: reduce) {
	.mrc-hero::before {
		animation: none;
		transform: none;
		opacity: 0.8;
	}
}

.mrc-hero__titulo {
	margin: 0 0 10px !important;
	font-size: clamp(26px, 4.4vw, 40px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--mrc-blanco);
}

.mrc-hero__bajada {
	max-width: 46ch;
	margin: 0 !important;
	font-size: 16.5px;
	line-height: 1.4; /* más compacto que el 1.55 general */
	color: rgba(255, 255, 255, 0.88);
}

/* Chip de estado del encabezado.
   Es una ALERTA: sólo se muestra cuando hay circulación limitada, y
   sobrevive al colapso del resto del componente.
   Estilo sobrio: fondo rojo muy suave, borde rojo y texto rojo oscuro. */
.mrc-hero__estado {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	/* OJO: el chip es un <p>, y el reset defensivo `.mrc p { padding: 0 }`
	   tiene más especificidad (0,1,1) que esta clase (0,1,0). Sin el
	   !important el padding se ignora y el contenido queda pegado al borde. */
	margin: 16px 0 0 !important;
	padding: 12px 26px !important;
	border-radius: 999px;
	background: #f8c7b8;
	border: 1px solid var(--mrc-rojo);
	color: #96300c;
	font-size: 13.5px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

/* El display:inline-flex de arriba gana sobre el display:none que el
   navegador aplica al atributo hidden: hace falta esta regla explícita. */
.mrc-hero__estado[hidden] {
	display: none;
}

.mrc-hero__estado-ico {
	position: relative;
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--mrc-rojo);
}

.mrc-hero__estado-ico::after {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 2px solid var(--mrc-rojo);
	opacity: 0;
	animation: mrc-pulso 1.8s ease-out infinite;
}

/* Con animaciones reducidas el anillo queda fijo: se pierde el latido,
   pero no la lectura de alerta. */
@media (prefers-reduced-motion: reduce) {
	.mrc-hero__estado-ico::after {
		animation: none;
		opacity: 0.5;
		transform: scale(0.85);
	}
}

.mrc-hero__acciones {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
}

.mrc-hero__reloj {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: clamp(5px, 2vw, 10px);
	padding: clamp(7px, 2.6vw, 9px) clamp(8px, 4vw, 16px);
	border: 1px solid rgba(255, 255, 255, 0.26);
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.16);
	font-variant-numeric: tabular-nums;
}

/* Botón de despliegue: el mismo lenguaje que la píldora del reloj. */
.mrc-hero__toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: 100%;
	margin-left: auto; /* el botón va al lado derecho de la fila */
	min-height: 44px; /* objetivo táctil cómodo */
	padding: clamp(8px, 2.4vw, 11px) clamp(13px, 4vw, 18px);
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 999px;
	background: var(--mrc-amarillo);
	color: #453a0b;
	font-size: clamp(13px, 3.6vw, 14.5px);
	font-weight: 700;
	line-height: 1.15;
	text-align: center; /* si el texto se parte, las líneas quedan centradas */
	transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.mrc-hero__toggle:hover {
	background: #f4e290;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.mrc-hero__toggle:focus-visible {
	outline: 3px solid var(--mrc-blanco);
	outline-offset: 2px;
}

.mrc-hero__toggle-txt {
	min-width: 0;
}

.mrc-hero__chevron {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-top: -3px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.25s ease, margin 0.25s ease;
}

.mrc-hero__toggle[aria-expanded="true"] .mrc-hero__chevron {
	margin-top: 4px;
	transform: rotate(-135deg);
}

/* Hora y fecha con tamaño fluido y sin partirse: la fecha se achica lo
   necesario para que las dos entren en la misma línea. */
.mrc-hero__hora {
	font-size: clamp(17px, 5.4vw, 21px);
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.mrc-hero__fecha {
	font-size: clamp(10px, 3.9vw, 14px);
	color: rgba(255, 255, 255, 0.82);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * Semáforo general
 * ------------------------------------------------------------------ */

.mrc-global {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 17px 22px;
	border-radius: var(--mrc-radio-chico);
	border: 1px solid transparent;
	transition: background 0.25s ease, border-color 0.25s ease;
}

.mrc-global__ico {
	position: relative;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
}

.mrc-global__ico::after {
	content: "";
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	border: 3px solid currentColor;
	opacity: 0;
	animation: mrc-pulso 2.1s ease-out infinite;
}

.mrc-global__txt {
	display: grid;
	gap: 2px;
}

.mrc-global__txt strong {
	font-size: 17.5px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.mrc-global__txt em {
	font-style: normal;
	font-size: 14.5px;
	opacity: 0.86;
}

.mrc-global.is-libre {
	background: #eef6ef;
	border-color: #c6dfca;
	color: #245c37;
}

.mrc-global.is-libre .mrc-global__ico {
	background: var(--mrc-ok);
	color: var(--mrc-ok);
}

.mrc-global.is-restringido {
	background: #fdeee9;
	border-color: #f4c3b3;
	color: #96300c;
}

.mrc-global.is-restringido .mrc-global__ico {
	background: var(--mrc-rojo);
	color: var(--mrc-rojo);
}

@keyframes mrc-pulso {
	0% { transform: scale(0.55); opacity: 1; }
	70% { transform: scale(1.3); opacity: 0; }
	100% { transform: scale(1.3); opacity: 0; }
}

/* Con animaciones reducidas el anillo no late, pero queda FIJO y visible:
   si desapareciera, el punto perdería su lectura de estado. */
@media (prefers-reduced-motion: reduce) {
	.mrc-global__ico::after {
		animation: none;
		opacity: 0.6;
		transform: scale(0.85);
	}
}

/* ---------------------------------------------------------------------
 * Tarjetas de sitios sensibles
 * ------------------------------------------------------------------ */

.mrc-sitios {
	display: grid;
	gap: 18px;
	/* min(290px, 100%) evita desborde horizontal en pantallas de 320px. */
	grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
}

.mrc-sitio {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--mrc-linea);
	border-radius: var(--mrc-radio);
	background: var(--mrc-blanco);
	box-shadow: var(--mrc-sombra);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.mrc-sitio:hover {
	transform: translateY(-3px);
	box-shadow: var(--mrc-sombra-alta);
}

.mrc-sitio__banda {
	display: block;
	height: 7px;
	background: var(--mrc-color, var(--mrc-verde));
}

.mrc-sitio.is-restringido .mrc-sitio__banda {
	background: repeating-linear-gradient(
		115deg,
		var(--mrc-rojo) 0 14px,
		#c33f13 14px 28px
	);
}

.mrc-sitio__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
}

.mrc-sitio__encabezado {
	display: grid;
	gap: 3px;
}

.mrc-sitio__etiqueta {
	margin: 0 !important;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-align: left;
	color: var(--mrc-verde);
}

.mrc-sitio__nombre {
	margin: 0 !important;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: -0.015em;
	color: var(--mrc-tinta);
}

.mrc-sitio__estado {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	margin: 0 !important;
}

.mrc-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	background: #eef6ef;
	color: #245c37;
	border: 1px solid #c6dfca;
	white-space: nowrap;
}

.mrc-chip::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.mrc-sitio.is-restringido .mrc-chip {
	background: #fdeee9;
	color: #96300c;
	border-color: #f4c3b3;
}

.mrc-sitio__cuenta {
	font-size: 13.5px;
	color: var(--mrc-tinta-suave);
	font-variant-numeric: tabular-nums;
}

.mrc-sitio__figura {
	margin: 0 !important;
	border-radius: var(--mrc-radio-chico);
	overflow: hidden;
	background: var(--mrc-verde);
}

.mrc-sitio__figura img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
}

.mrc-datos {
	display: grid;
	gap: 3px;
	margin: 0 !important;
}

.mrc-datos dt {
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mrc-color, var(--mrc-verde));
}

.mrc-datos dd {
	margin: 0 0 9px !important;
	font-size: 14.5px;
	color: var(--mrc-tinta);
}

.mrc-datos dd:last-child {
	margin-bottom: 0 !important;
}

.mrc-ventanas {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px dashed var(--mrc-linea);
}

.mrc-ventanas__tit {
	display: block;
	margin-bottom: 8px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mrc-tinta-suave);
}

.mrc-ventanas__lista {
	display: grid;
	gap: 7px;
	margin: 0 !important;
}

.mrc-ventanas__lista li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 10px;
	background: var(--mrc-crema);
	font-variant-numeric: tabular-nums;
}

.mrc-ventanas__lista b {
	font-size: 15.5px;
	font-weight: 800;
	color: var(--mrc-tinta);
}

.mrc-ventanas__lista span {
	font-size: 12.5px;
	color: var(--mrc-tinta-suave);
}

.mrc-ventanas__lista em {
	margin-left: auto;
	font-style: normal;
	font-size: 11.5px;
	color: var(--mrc-tinta-suave);
	opacity: 0.85;
}

.mrc-ventanas__vacio {
	font-size: 13.5px;
	color: var(--mrc-tinta-suave);
}

/* ---------------------------------------------------------------------
 * Aviso
 * ------------------------------------------------------------------ */

.mrc-aviso {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 17px 20px;
	border-radius: var(--mrc-radio-chico);
	border: 1px solid #e2cf8f;
	background: #fdf7e2;
}

.mrc-aviso__ico {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--mrc-amarillo);
	color: #6b5410;
	font-weight: 900;
	font-size: 16px;
}

.mrc-aviso p {
	margin: 0 !important;
	font-size: 15px;
	color: #5b4a13;
}

.mrc-aviso strong {
	font-weight: 800;
}

/* ---------------------------------------------------------------------
 * Encabezado plegable (tarjeta de mareas)
 * ------------------------------------------------------------------ */

.mrc-acordeon__h {
	margin: 0 !important;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.mrc-acordeon__btn {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 44px; /* objetivo táctil cómodo */
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	text-align: left;
}

.mrc-acordeon__btn:focus-visible {
	outline: 3px solid var(--mrc-verde);
	outline-offset: 3px;
	border-radius: 6px;
}

.mrc-acordeon__titulo {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--mrc-tinta);
}

.mrc-acordeon__sub {
	margin-left: auto;
	font-size: 13.5px;
	color: var(--mrc-tinta-suave);
}

.mrc-acordeon__chevron {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin-left: 4px;
	border-right: 2px solid var(--mrc-tinta-suave);
	border-bottom: 2px solid var(--mrc-tinta-suave);
	transform: rotate(45deg);
	transition: transform 0.25s ease;
}

.mrc-acordeon__btn[aria-expanded="true"] .mrc-acordeon__chevron {
	transform: rotate(-135deg);
}

.mrc-acordeon__cuerpo {
	padding-top: 16px;
}

.mrc-mareas {
	padding: 22px;
	border: 1px solid var(--mrc-linea);
	border-radius: var(--mrc-radio);
	background: var(--mrc-blanco);
	box-shadow: var(--mrc-sombra);
}

/* ---------------------------------------------------------------------
 * Tabla de mareas
 * ------------------------------------------------------------------ */

.mrc-tabla {
	font-variant-numeric: tabular-nums;
}

.mrc-tabla thead th {
	padding: 0 12px 10px;
	border-bottom: 2px solid var(--mrc-linea);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--mrc-tinta-suave);
	text-align: left;
}

.mrc-tabla thead th:nth-child(n + 2) {
	text-align: right;
}

.mrc-tabla tbody th,
.mrc-tabla tbody td {
	padding: 12px;
	border-bottom: 1px solid var(--mrc-linea);
	font-size: 15px;
}

.mrc-tabla tbody th {
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
}

.mrc-tabla tbody td {
	text-align: right;
}

.mrc-tabla tbody tr:last-child th,
.mrc-tabla tbody tr:last-child td {
	border-bottom: 0;
}

.mrc-punto {
	display: inline-block;
	vertical-align: middle;
	margin-right: 8px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.mrc-tabla__fila--alta .mrc-punto {
	background: var(--mrc-celeste);
}

.mrc-tabla__fila--baja .mrc-punto {
	background: var(--mrc-naranja);
}

.mrc-tabla__fila--alta td:first-of-type {
	font-weight: 800;
	color: #1d6f96;
}

.mrc-mareas__coef {
	margin: 14px 0 0 !important;
	font-size: 13.5px;
	color: var(--mrc-tinta-suave);
}

.mrc-mareas__coef b {
	color: var(--mrc-tinta);
}

/* ---------------------------------------------------------------------
 * Galería de piezas
 * ------------------------------------------------------------------ */

.mrc-posters {
	border: 1px solid var(--mrc-linea);
	border-radius: var(--mrc-radio);
	background: var(--mrc-blanco);
	box-shadow: var(--mrc-sombra);
	overflow: hidden;
}

.mrc-posters summary {
	padding: 17px 22px;
	font-size: 15.5px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 10px;
}

.mrc-posters summary::-webkit-details-marker {
	display: none;
}

.mrc-posters summary::before {
	content: "+";
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--mrc-verde);
	color: var(--mrc-blanco);
	font-weight: 800;
	font-size: 15px;
	line-height: 1;
}

.mrc-posters[open] summary::before {
	content: "−";
}

.mrc-posters__grid {
	display: grid;
	gap: 13px;
	padding: 0 22px 22px;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.mrc-poster {
	display: block;
	overflow: hidden;
	border: 1px solid var(--mrc-linea);
	border-radius: var(--mrc-radio-chico);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mrc-poster:hover {
	transform: translateY(-3px);
	box-shadow: var(--mrc-sombra);
}

.mrc-poster img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.mrc-poster span {
	display: block;
	padding: 9px 11px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--mrc-tinta);
	background: var(--mrc-crema);
}

/* ---------------------------------------------------------------------
 * Lightbox
 * ------------------------------------------------------------------ */

.mrc-lightbox {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgba(20, 28, 19, 0.88);
}

.mrc-lightbox[hidden] {
	display: none;
}

.mrc-lightbox img {
	max-width: min(92vw, 780px);
	max-height: 88vh;
	border-radius: 12px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.mrc-lightbox__cerrar {
	position: absolute;
	top: 18px;
	right: 22px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	font-size: 27px;
	line-height: 1;
}

.mrc-lightbox__cerrar:hover {
	background: rgba(255, 255, 255, 0.3);
}

/* ---------------------------------------------------------------------
 * Pie
 * ------------------------------------------------------------------ */

.mrc-fuente {
	margin: 0 !important;
	font-size: 12.5px;
	color: var(--mrc-tinta-suave);
	text-align: center;
}

.mrc-fuente a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mrc-fuente__alerta {
	display: block;
	margin-bottom: 7px;
	padding: 8px 12px;
	border-radius: 9px;
	background: #fdf7e2;
	border: 1px solid #e2cf8f;
	color: #6b5410;
}

/* ---------------------------------------------------------------------
 * Responsive
 *
 * Soporta desde 320px (iPhone SE) en adelante.
 *   <= 1024px  tablet horizontal
 *   <=  768px  tablet vertical  -> las 3 fichas se apilan
 *   <=  560px  celular          -> la tabla pasa a filas apiladas
 *   <=  380px  celular chico
 * ------------------------------------------------------------------ */

/* Nada puede desbordar su columna, ni con nombres largos. */
.mrc-panel > *,
.mrc-sitio,
.mrc-sitio__cuerpo,
.mrc-sitio__encabezado,
.mrc-acordeon__btn {
	min-width: 0;
}

.mrc-hero__titulo,
.mrc-sitio__nombre,
.mrc-sitio__etiqueta,
.mrc-ventanas__lista b {
	overflow-wrap: break-word;
}

@media (max-width: 1024px) {
	.mrc-sitios {
		grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	}
}

@media (max-width: 768px) {
	.mrc,
	.mrc-panel {
		gap: 18px;
	}

	/* Las tres fichas a ancho completo, una debajo de otra. */
	.mrc-sitios {
		grid-template-columns: 1fr;
	}

	.mrc-posters__grid {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}
}

@media (max-width: 560px) {
	.mrc,
	.mrc-panel {
		gap: 14px;
	}

	.mrc-hero {
		border-radius: 14px;
	}

	.mrc-hero__bajada {
		font-size: 15.5px;
	}

	/* Reloj, botón y alerta: los tres centrados. */
	.mrc-hero__acciones {
		flex-direction: column;
		align-items: center;
		gap: 10px;
		margin-top: 16px;
	}

	.mrc-hero__reloj {
		justify-content: center;
	}

	/* Hay que anular el margin-left: auto que en escritorio empuja el
	   botón a la derecha; si no, el centrado no tiene efecto. */
	.mrc-hero__toggle {
		justify-content: center;
		margin-left: 0;
	}

	/* La alerta es inline-flex, así que para centrarla necesita ancho
	   propio y márgenes automáticos. */
	.mrc-hero__estado {
		display: flex;
		width: fit-content;
		margin: 16px auto 0 !important;
	}

	.mrc-mareas {
		padding: 16px;
	}

	.mrc-acordeon__titulo {
		font-size: 18px;
	}

	.mrc-acordeon__sub {
		font-size: 12.5px;
	}

	.mrc-posters summary {
		padding: 15px 16px;
		font-size: 14.5px;
	}

	.mrc-posters__grid {
		padding: 0 16px 16px;
		gap: 10px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mrc-aviso {
		padding: 14px 15px;
		gap: 11px;
	}

	.mrc-aviso p {
		font-size: 14.5px;
	}

	.mrc-sitio__cuerpo {
		padding: 16px;
		gap: 12px;
	}

	.mrc-sitio__nombre {
		font-size: 18px;
	}

	.mrc-ventanas__lista li {
		flex-wrap: wrap;
	}

	.mrc-ventanas__lista em {
		width: 100%;
		margin-left: 0;
	}

	/* ---- La tabla de mareas pasa a filas apiladas ---- */

	/* Fuera de la vista, pero disponible para lectores de pantalla. */
	.mrc-tabla thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}

	.mrc-tabla,
	.mrc-tabla tbody,
	.mrc-tabla tr,
	.mrc-tabla th,
	.mrc-tabla td {
		display: block;
		width: 100%;
	}

	.mrc-tabla tbody tr {
		margin-bottom: 10px;
		padding: 12px 14px;
		border: 1px solid var(--mrc-linea);
		border-left: 4px solid var(--mrc-verde-300);
		border-radius: var(--mrc-radio-chico);
		background: var(--mrc-crema);
	}

	.mrc-tabla tbody tr:last-child {
		margin-bottom: 0;
	}

	.mrc-tabla__fila--alta {
		border-left-color: var(--mrc-celeste);
	}

	.mrc-tabla__fila--baja {
		border-left-color: var(--mrc-naranja);
	}

	.mrc-tabla tbody th {
		padding: 0 0 9px;
		border-bottom: 1px dashed var(--mrc-linea);
		font-size: 15px;
		white-space: normal;
	}

	.mrc-tabla tbody td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 14px;
		padding: 8px 0;
		border-bottom: 0;
		font-size: 15px;
		text-align: right;
	}

	.mrc-tabla tbody td::before {
		content: attr(data-label);
		font-size: 11px;
		font-weight: 800;
		letter-spacing: 0.09em;
		text-transform: uppercase;
		color: var(--mrc-tinta-suave);
	}

	.mrc-tabla tbody td:last-child {
		padding-bottom: 0;
	}
}

@media (max-width: 380px) {
	.mrc-hero__titulo {
		font-size: 23px;
	}

	.mrc-sitio__nombre {
		font-size: 17px;
	}

	.mrc-posters__grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------
 * Ajustes en el escritorio de WordPress
 * ------------------------------------------------------------------ */

.mrc-admin__estado th {
	width: 220px;
}