/* ==========================================================================
   MediActiv - reviews.css - Sistema de reseñas
   Página "Reseñas", bloque de la ficha de producto, carrusel de la home,
   formulario (sección normal sin JS; modal con JS) y avisos de Mi cuenta.
   Depende de los tokens de main.css. NO tocar main.css (encoding frágil).
   ========================================================================== */

/* utilidad accesible (el tema no la traía) */
.screen-reader-text{
	position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
	overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ------------------------------------------------------------- estrellas */
.mc-stars{position:relative;display:inline-block;line-height:0;vertical-align:middle}
.mc-stars__bg,.mc-stars__fg{display:inline-flex;gap:2px}
/* el SVG no trae atributo fill: sin esto se pintaría negro y no tomaría el color
   de cada capa (fondo gris / relleno bronce). */
.mc-stars svg{width:16px;height:16px;fill:currentColor;flex:0 0 auto}
.mc-stars__bg{color:var(--mc-line)}
.mc-stars__fg{
	position:absolute;top:0;left:0;bottom:0;right:auto;
	color:var(--mc-accent);
	width:var(--mc-stars,0%);overflow:hidden;white-space:nowrap;
}

/* ---------------------------------------------------------------- página */
.mc-reviews{padding:clamp(28px,4vw,52px) 0 clamp(56px,7vw,88px)}
.mc-reviews .mc-sechead{margin-bottom:clamp(1.4rem,2.4vw,2.2rem)}
.mc-reviews__intro{max-width:660px;color:var(--mc-muted);margin-top:.6rem}

/* aviso tras enviar */
.mc-revmsg{
	max-width:760px;margin:0 auto clamp(20px,3vw,32px);padding:1rem 1.2rem;
	border-radius:10px;font-size:.95rem;line-height:1.6;
}
.mc-revmsg--ok{background:#EAF3F0;border:1px solid #BFDCD2;color:#1F5647}
.mc-revmsg--error{background:#FBEEE8;border:1px solid #F0CDBC;color:#8A3B18}

/* resumen: nota media + barras + CTA */
.mc-reviews__summary{
	display:grid;grid-template-columns:minmax(200px,1fr) minmax(260px,1.4fr) minmax(220px,1fr);
	gap:clamp(20px,3vw,44px);align-items:center;
	background:var(--mc-bg-2);border:1px solid var(--mc-line);border-radius:16px;
	padding:clamp(22px,3vw,34px);margin-bottom:clamp(24px,3.4vw,40px);
}
.mc-reviews__score{text-align:center}
.mc-reviews__avg{display:block;font-size:clamp(2.6rem,6vw,3.6rem);font-weight:700;line-height:1;color:var(--mc-ink)}
.mc-reviews__score .mc-stars{margin:.5rem 0 .4rem}
.mc-reviews__score .mc-stars svg{width:20px;height:20px}
.mc-reviews__count{display:block;font-size:.85rem;color:var(--mc-muted)}

.mc-reviews__bars{list-style:none;margin:0;padding:0;display:grid;gap:.42rem}
.mc-reviews__bars a{
	display:grid;grid-template-columns:74px 1fr 34px;align-items:center;gap:.6rem;
	font-size:.8rem;color:var(--mc-muted);padding:.12rem .2rem;border-radius:6px;
}
.mc-reviews__bars a:hover,.mc-reviews__bars a:focus-visible{background:rgba(23,44,58,.05);color:var(--mc-ink)}
.mc-reviews__bars a.is-active{background:rgba(203,141,97,.14);color:var(--mc-ink)}
.mc-reviews__bar{display:block;height:7px;border-radius:99px;background:var(--mc-line);overflow:hidden}
.mc-reviews__bar span{display:block;height:100%;background:var(--mc-accent);border-radius:99px}
.mc-reviews__bar-n{text-align:right;font-variant-numeric:tabular-nums}

.mc-reviews__write{text-align:center}
/* sin opiniones todavía: el bloque queda solo con la llamada a escribir la primera */
.mc-reviews__summary.is-empty{grid-template-columns:1fr;justify-items:center}
.mc-reviews__incentive{margin:.75rem 0 0;font-size:.8rem;line-height:1.5;color:var(--mc-muted)}

/* barra de filtros */
.mc-reviews__toolbar{
	display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
	gap:1rem;margin-bottom:clamp(18px,2.4vw,28px);scroll-margin-top:110px;
}
.mc-reviews__filters{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.mc-reviews__filters select{
	font-family:inherit;font-size:.85rem;color:var(--mc-ink);background:var(--mc-bg);
	border:1px solid var(--mc-line);border-radius:8px;padding:.62rem .9rem;
	/* min-width:0 + max-width evitan que los nombres largos de producto
	   estiren el select más allá del ancho de la pantalla. */
	max-width:260px;min-width:0;text-overflow:ellipsis;
}
.mc-reviews__filters .mc-btn{padding:.72em 1.4em;font-size:.68rem}
.mc-reviews__reset{font-size:.8rem;color:var(--mc-accent-2);text-decoration:underline}
.mc-reviews__total{margin:0;font-size:.85rem;color:var(--mc-muted)}

/* rejilla de reseñas */
.mc-reviews__grid{
	display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.6vw,24px);
	align-items:start;
}
.mc-review{
	display:flex;flex-direction:column;height:100%;
	background:var(--mc-bg);border:1px solid var(--mc-line);border-radius:14px;
	padding:clamp(18px,1.6vw,24px);
}
.mc-review__head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.7rem}
.mc-review__date{font-size:.75rem;color:var(--mc-muted)}
.mc-review__title{font-size:1rem;line-height:1.35;font-weight:600;margin:0 0 .5rem;color:var(--mc-ink)}
.mc-review__body{font-size:.92rem;line-height:1.65;color:var(--mc-muted);white-space:pre-line}
.mc-review__foot{
	margin-top:auto;padding-top:1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;
	font-size:.8rem;color:var(--mc-ink);
}
.mc-review__author{font-weight:600}
.mc-review__verified{display:inline-flex;align-items:center;gap:.3em;color:var(--mc-green);font-weight:600;font-size:.76rem}
.mc-review__verified svg{width:14px;height:14px;fill:currentColor}
.mc-review__product{
	flex-basis:100%;font-size:.78rem;color:var(--mc-accent-d);text-decoration:underline;
	text-underline-offset:2px;
}

.mc-reviews__more{text-align:center;margin:clamp(24px,3vw,36px) 0 0}
.mc-reviews__empty{
	text-align:center;color:var(--mc-muted);background:var(--mc-bg-2);
	border-radius:14px;padding:clamp(28px,4vw,44px);margin:0;
}

/* aviso legal (Ley 4/2022) */
.mc-reviews__legal{
	margin-top:clamp(32px,4vw,52px);padding-top:clamp(20px,2.4vw,28px);
	border-top:1px solid var(--mc-line);
	font-size:.8rem;line-height:1.7;color:var(--mc-muted);max-width:860px;
}

/* ----------------------------------------------------------- formulario */
.mc-revform{margin-top:clamp(32px,4vw,52px)}
.mc-revform__box{
	background:var(--mc-bg-2);border:1px solid var(--mc-line);border-radius:16px;
	padding:clamp(22px,3vw,36px);max-width:720px;margin-inline:auto;position:relative;
}
.mc-revform__title{font-size:clamp(1.4rem,3vw,1.9rem);margin:0 0 .4rem}
.mc-revform__note{margin:0 0 1.4rem;font-size:.88rem;color:var(--mc-muted)}
.mc-revform__close{
	position:absolute;top:10px;right:12px;background:none;border:0;cursor:pointer;
	font-size:1.7rem;line-height:1;color:var(--mc-muted);padding:.2rem .4rem;
}
.mc-revform__close:hover{color:var(--mc-ink)}
.mc-revform__grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.mc-revform__actions{margin:1.4rem 0 0}
.mc-revform__legal{margin:1rem 0 0;font-size:.75rem;line-height:1.6;color:var(--mc-muted)}
.mc-hp{position:absolute;left:-9999px}

.mc-field{margin:0 0 1rem;display:block}
.mc-field label{display:block;font-size:.8rem;font-weight:600;letter-spacing:.02em;margin-bottom:.35rem;color:var(--mc-ink)}
.mc-field small{display:block;margin-top:.3rem;font-size:.74rem;color:var(--mc-muted);font-weight:400}
.mc-field input[type=text],
.mc-field input[type=email],
.mc-field select,
.mc-field textarea{
	width:100%;font-family:inherit;font-size:.92rem;color:var(--mc-ink);background:var(--mc-bg);
	border:1px solid var(--mc-line);border-radius:8px;padding:.72rem .9rem;
}
.mc-field textarea{resize:vertical;min-height:120px}
.mc-field input:focus-visible,.mc-field select:focus-visible,.mc-field textarea:focus-visible{
	outline:2px solid var(--mc-accent);outline-offset:1px;border-color:transparent;
}
.mc-field--check label{display:flex;align-items:flex-start;gap:.55rem;font-weight:400;font-size:.85rem;color:var(--mc-muted)}
/* el CSS global del tema pone width:100% a los input: la casilla se comía la
   línea entera y echaba el texto fuera del recuadro. */
.mc-field--check input[type=checkbox]{
	width:auto;min-width:0;flex:0 0 auto;margin:.25rem 0 0;
	inline-size:16px;block-size:16px;accent-color:var(--mc-accent);
}

/* selector de estrellas: radios reales, orden inverso en el DOM (5..1) */
.mc-rating{border:0;padding:0;margin:0 0 1.1rem}
.mc-rating legend{font-size:.8rem;font-weight:600;color:var(--mc-ink);margin-bottom:.35rem;padding:0}
.mc-rating__stars{display:inline-flex;flex-direction:row-reverse;gap:.2rem}
.mc-rating__stars input{position:absolute;opacity:0;width:1px;height:1px}
.mc-rating__stars label{margin:0;cursor:pointer;color:var(--mc-line);line-height:0}
.mc-rating__stars label svg{width:30px;height:30px;fill:currentColor;transition:color .15s ease,transform .15s ease}
.mc-rating__stars label:hover svg{transform:scale(1.08)}
.mc-rating__stars input:checked ~ label,
.mc-rating__stars label:hover,
.mc-rating__stars label:hover ~ label{color:var(--mc-accent)}
.mc-rating__stars input:focus-visible + label{outline:2px solid var(--mc-accent);outline-offset:2px;border-radius:4px}

/* modal (solo cuando el JS lo activa) */
.mc-revform.is-modal{
	position:fixed;inset:0;z-index:120;margin:0;
	background:rgba(16,34,48,.55);
	display:flex;align-items:flex-start;justify-content:center;
	padding:clamp(14px,4vh,56px) 16px;overflow-y:auto;
}
/* [hidden] debe ganar al display:flex del modal; si no, el overlay invisible
   se queda encima y se come todos los clics de la página. */
.mc-revform[hidden],
.mc-revform.is-modal[hidden]{display:none!important}
.mc-revform.is-modal .mc-revform__box{background:var(--mc-bg);width:100%;box-shadow:0 24px 60px rgba(16,34,48,.28)}
body.mc-revform-open{overflow:hidden}

/* -------------------------------------------------- ficha de producto */
.mc-product-reviews{
	max-width:var(--mc-wrap);margin:clamp(36px,5vw,64px) auto 0;padding-inline:var(--mc-gut);
	scroll-margin-top:110px;
}
.mc-product-reviews h2{font-size:clamp(1.4rem,3vw,2rem);margin:0}
.mc-product-reviews__head{
	display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;
	margin-bottom:clamp(18px,2.4vw,26px);
}
.mc-product-reviews__avg{display:flex;align-items:center;gap:.5rem;margin:0;font-size:.9rem;color:var(--mc-muted)}
.mc-product-reviews__avg strong{color:var(--mc-ink);font-size:1.05rem}
.mc-product-reviews__head .mc-btn{margin-left:auto}
.mc-product-reviews__empty{color:var(--mc-muted);margin:0}
.mc-product-reviews__more{margin:1.4rem 0 0}

/* ------------------------------------------------------ franja home */
.mc-revcar{padding:clamp(46px,6vw,86px) 0;background:var(--mc-bg-2);scroll-margin-top:110px}
.mc-revcar__wrap{max-width:var(--mc-wrap);margin-inline:auto;padding-inline:var(--mc-gut);position:relative}
.mc-revcar .mc-revmsg{margin-inline:0}

/* título + frase a la izquierda, botón a la derecha pegado al borde inferior */
.mc-revband{display:flex;align-items:flex-end;justify-content:space-between;gap:1.2rem 3rem}
.mc-revband__copy{max-width:640px;text-align:left}
.mc-revband__title{margin:0;text-align:left}
.mc-revband__text{margin:.7rem 0 0;color:var(--mc-muted);font-size:1rem;line-height:1.65}
.mc-revband__btn{flex:0 0 auto}

/* carrusel tipo widget de reseñas de Google */
.mc-gcar{position:relative;margin-top:clamp(26px,3.4vw,40px)}
.mc-gcar__track{
	--gap:16px;
	display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * var(--gap)) / 3);
	gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
	scrollbar-width:none;padding:4px 2px 10px;
}
.mc-gcar__track::-webkit-scrollbar{display:none}
.mc-gcard{
	scroll-snap-align:start;display:flex;flex-direction:column;gap:.6rem;
	background:#fff;border-radius:10px;padding:20px 20px 18px;
	box-shadow:0 1px 2px rgba(60,64,67,.18),0 1px 4px 1px rgba(60,64,67,.10);
}
.mc-gcard__head{display:flex;align-items:center;gap:.75rem}
.mc-gcard__avatar{
	flex:0 0 40px;width:40px;height:40px;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	color:#fff;font-weight:600;font-size:1.05rem;line-height:1;
}
.mc-gcard__who{display:flex;flex-direction:column;min-width:0}
.mc-gcard__name{display:inline-flex;align-items:center;gap:.3rem;font-weight:600;font-size:.92rem;color:#202124}
.mc-gcard__check{width:15px;height:15px;fill:#1A73E8;flex:0 0 auto}
.mc-gcard__date{font-size:.78rem;color:#70757A}
.mc-gcard .mc-stars{margin:0}
.mc-gcard .mc-stars svg{width:17px;height:17px}
.mc-gcard .mc-stars__fg{color:#FBBC04}
.mc-gcard .mc-stars__bg{color:#DADCE0}
.mc-gcard__text{
	font-size:.9rem;line-height:1.6;color:#3C4043;white-space:pre-line;
	display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;
}
.mc-gcard__text strong{color:#202124}
.mc-gcard.is-open .mc-gcard__text{-webkit-line-clamp:unset;display:block}
.mc-gcard__more{
	align-self:flex-start;background:none;border:0;padding:0;cursor:pointer;
	font:inherit;font-size:.82rem;font-weight:600;color:#70757A;
}
.mc-gcard__more:hover{color:#202124;text-decoration:underline}
.mc-gcard__product{margin-top:auto;font-size:.78rem;color:var(--mc-accent-d);text-decoration:underline;text-underline-offset:2px}

.mc-gcar__nav{
	position:absolute;top:50%;transform:translateY(-50%);z-index:2;
	width:40px;height:40px;border-radius:50%;border:0;padding:0;
	background:#fff;color:#3C4043;cursor:pointer;
	display:flex;align-items:center;justify-content:center;
	box-shadow:0 1px 3px rgba(60,64,67,.3),0 4px 8px 3px rgba(60,64,67,.15);
	transition:background .2s ease;
}
.mc-gcar__nav svg{width:24px;height:24px;fill:currentColor}
.mc-gcar__nav:hover{background:#F1F3F4}
.mc-gcar__nav:focus-visible{outline:2px solid var(--mc-accent);outline-offset:2px}
.mc-gcar__nav[hidden]{display:none}
.mc-gcar__nav--prev{left:-20px}
.mc-gcar__nav--next{right:-20px}

.mc-revcar__all{text-align:center;margin:clamp(22px,3vw,32px) 0 0}

/* ------------------------------------------------ aviso en Mi cuenta */
/* mismo patrón que las tarjetas del tema (.mc-world, .mc-founder): fondo alterno
   + borde fino, sin pestaña de color lateral. */
.mc-revcta{
	background:var(--mc-bg-2);border:1px solid var(--mc-line);
	border-radius:12px;padding:clamp(18px,2.4vw,26px);margin:0 0 1.6rem;
}
.mc-revcta__title{margin:0 0 .35rem;font-weight:700;color:var(--mc-ink)}
.mc-revcta__title::before{
	content:"";display:block;width:34px;height:2px;background:var(--mc-accent);
	margin-bottom:.7rem;
}
.mc-revcta__text{margin:0 0 1rem;font-size:.9rem;color:var(--mc-muted)}

/* --------------------------------------------------------- responsive */
@media (max-width:1024px){
	.mc-reviews__summary{grid-template-columns:1fr 1fr;gap:1.6rem}
	.mc-reviews__write{grid-column:1 / -1}
	.mc-reviews__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1024px){
	.mc-gcar__track{grid-auto-columns:calc((100% - var(--gap)) / 2)}
}
@media (max-width:768px){
	.mc-product-reviews__head .mc-btn{margin-left:0;width:100%}
	.mc-revband{flex-direction:column;align-items:flex-start}
	.mc-gcar__track{grid-auto-columns:100%}
	/* flechas dentro de la pantalla: el canal lateral es de solo 16px */
	.mc-gcar__nav{width:36px;height:36px}
	.mc-gcard{padding-inline:36px}
	.mc-gcar__nav--prev{left:-8px}
	.mc-gcar__nav--next{right:-8px}
}
@media (max-width:640px){
	.mc-reviews__summary{grid-template-columns:1fr;text-align:center}
	.mc-reviews__bars a{grid-template-columns:66px 1fr 28px}
	.mc-reviews__grid{grid-template-columns:1fr}
	.mc-revform__grid{grid-template-columns:1fr}
	.mc-reviews__filters{width:100%}
	.mc-reviews__filters select{flex:1 1 100%;width:100%;max-width:100%;min-width:0}
}