/* ===========================================================
   Reseñas Públicas — estilos moderno / minimalista
   =========================================================== */

.rp-wrapper {
	--rp-bg: #ffffff;
	--rp-bg-soft: #f7f8fa;
	--rp-border: #e6e8eb;
	--rp-text: #14171a;
	--rp-text-muted: #6b7280;
	--rp-accent: #1d9bf0;
	--rp-accent-dark: #1a8cd8;
	--rp-star: #f5a623;
	--rp-star-empty: #dcdfe3;
	--rp-radius: 14px;
	--rp-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.04);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--rp-text);
	max-width: 640px;
	margin: 0 auto;
	box-sizing: border-box;
}
.rp-wrapper *, .rp-wrapper *::before, .rp-wrapper *::after { box-sizing: border-box; }

/* ---------- Formulario ---------- */
.rp-formulario {
	background: var(--rp-bg);
	border: 1px solid var(--rp-border);
	border-radius: var(--rp-radius);
	padding: 24px;
	box-shadow: var(--rp-shadow);
}
.rp-form-titulo {
	margin: 0 0 18px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.rp-campo { margin-bottom: 16px; }
.rp-campo label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--rp-text);
}
.rp-hint { font-weight: 400; color: var(--rp-text-muted); }
.rp-input {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--rp-border);
	border-radius: 10px;
	background: var(--rp-bg-soft);
	font-size: 14px;
	color: var(--rp-text);
	transition: border-color .15s ease, background .15s ease;
	font-family: inherit;
}
.rp-input:focus {
	outline: none;
	border-color: var(--rp-accent);
	background: var(--rp-bg);
}
textarea.rp-input { resize: vertical; min-height: 90px; }

.rp-honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.rp-label-secundaria { margin-top: 14px; }

.rp-chips-categoria {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.rp-chip {
	--rp-chip-color: #6b7280;
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	background: color-mix(in srgb, var(--rp-chip-color) 12%, white);
	color: var(--rp-chip-color);
	border: 1.5px solid color-mix(in srgb, var(--rp-chip-color) 35%, white);
	transition: all .15s ease;
}
.rp-chip:hover {
	background: color-mix(in srgb, var(--rp-chip-color) 22%, white);
}
.rp-chip.rp-chip-activo {
	background: var(--rp-chip-color);
	color: #fff;
	border-color: var(--rp-chip-color);
	box-shadow: 0 2px 8px color-mix(in srgb, var(--rp-chip-color) 45%, transparent);
}

/* Estrellas seleccionables (formulario) */
.rp-estrellas {
	display: flex;
	gap: 4px;
	font-size: 26px;
	line-height: 1;
	user-select: none;
}
.rp-estrella {
	color: var(--rp-star-empty);
	cursor: pointer;
	transition: color .1s ease, transform .1s ease;
}
.rp-estrella:hover { transform: scale(1.12); }
.rp-estrella.rp-activa { color: var(--rp-star); }
.rp-rating-texto {
	display: inline-block;
	margin-top: 6px;
	font-size: 13px;
	color: var(--rp-text-muted);
	font-weight: 600;
}

/* Fotos */
input[type="file"]#rp-fotos {
	width: 100%;
	padding: 8px;
	border: 1px dashed var(--rp-border);
	border-radius: 10px;
	background: var(--rp-bg-soft);
	font-size: 13px;
}
.rp-fotos-preview {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	flex-wrap: wrap;
}
.rp-fotos-preview .rp-foto-item {
	position: relative;
	width: 72px;
	height: 72px;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--rp-border);
}
.rp-fotos-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-fotos-preview .rp-foto-quitar {
	position: absolute;
	top: 2px;
	right: 2px;
	background: rgba(0,0,0,.6);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 18px;
	height: 18px;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
	cursor: pointer;
	padding: 0;
}

.rp-boton-enviar {
	width: 100%;
	background: linear-gradient(135deg, var(--rp-accent), #7c5cff);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 12px 18px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(29,155,240,0.28);
	transition: transform .1s ease, box-shadow .15s ease, opacity .15s ease;
}
.rp-boton-enviar:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(29,155,240,0.35); }
.rp-boton-enviar:disabled { opacity: .6; cursor: not-allowed; }

.rp-mensaje {
	margin-top: 12px;
	font-size: 13px;
	font-weight: 600;
	min-height: 1em;
}
.rp-mensaje.rp-mensaje-ok { color: #17a34a; }
.rp-mensaje.rp-mensaje-error { color: #e0245e; }

/* ---------- Filtros del feed ---------- */
.rp-filtros {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 16px;
	padding: 14px;
	background: var(--rp-bg-soft);
	border: 1px solid var(--rp-border);
	border-radius: var(--rp-radius);
}
.rp-filtro-campo { flex: 1 1 150px; }
.rp-filtro-campo label {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--rp-text-muted);
	font-weight: 700;
	margin-bottom: 4px;
}

/* ---------- Feed estilo Twitter ---------- */
.rp-feed-lista {
	border: 1px solid var(--rp-border);
	border-radius: var(--rp-radius);
	overflow: hidden;
	background: var(--rp-bg);
}
.rp-tarjeta {
	--rp-cat-color: var(--rp-accent);
	display: flex;
	gap: 12px;
	padding: 16px 16px 16px 14px;
	border-bottom: 1px solid var(--rp-border);
	border-left: 4px solid var(--rp-cat-color);
	transition: background .1s ease;
}
.rp-tarjeta:last-child { border-bottom: none; }
.rp-tarjeta:hover { background: color-mix(in srgb, var(--rp-cat-color) 5%, var(--rp-bg)); }

.rp-tarjeta-avatar {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--rp-cat-color), color-mix(in srgb, var(--rp-cat-color) 60%, #7c5cff));
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 15px;
	box-shadow: 0 2px 6px color-mix(in srgb, var(--rp-cat-color) 40%, transparent);
}

.rp-badge-categoria {
	display: inline-flex;
	align-items: center;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	background: color-mix(in srgb, var(--rp-cat-color) 15%, white);
	color: var(--rp-cat-color);
}
.rp-tarjeta-cuerpo { flex: 1; min-width: 0; }
.rp-tarjeta-cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px;
	font-size: 14px;
}
.rp-tarjeta-autor { font-weight: 700; }
.rp-tarjeta-comercio { color: var(--rp-text); font-weight: 600; }
.rp-tarjeta-punto { color: var(--rp-text-muted); }
.rp-tarjeta-fecha { color: var(--rp-text-muted); }

.rp-tarjeta-rating {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 6px 0 8px;
}
.rp-estrellas-estaticas { font-size: 14px; letter-spacing: 1px; }
.rp-e-llena { color: var(--rp-star); }
.rp-e-media { color: var(--rp-star); opacity: .5; }
.rp-e-vacia { color: var(--rp-star-empty); }
.rp-tarjeta-rating-num { font-size: 12px; color: var(--rp-text-muted); font-weight: 700; }

.rp-tarjeta-texto {
	margin: 0 0 10px;
	font-size: 14.5px;
	line-height: 1.45;
	white-space: pre-line;
	word-wrap: break-word;
}

.rp-tarjeta-fotos {
	display: grid;
	gap: 6px;
	border-radius: 12px;
	overflow: hidden;
}
.rp-tarjeta-fotos-1 { grid-template-columns: 1fr; }
.rp-tarjeta-fotos-2 { grid-template-columns: 1fr 1fr; }
.rp-tarjeta-fotos-3 { grid-template-columns: 1fr 1fr; }
.rp-tarjeta-fotos-3 a:first-child { grid-row: span 2; }
.rp-tarjeta-fotos img {
	width: 100%;
	height: 100%;
	max-height: 260px;
	object-fit: cover;
	display: block;
}

.rp-cargando, .rp-sin-resultados {
	padding: 32px 16px;
	text-align: center;
	color: var(--rp-text-muted);
	font-size: 14px;
}

.rp-boton-cargar-mas {
	display: block;
	width: 100%;
	margin-top: 12px;
	padding: 11px;
	background: var(--rp-bg-soft);
	border: 1px solid var(--rp-border);
	border-radius: 999px;
	font-weight: 700;
	font-size: 14px;
	color: var(--rp-accent);
	cursor: pointer;
	transition: background .15s ease;
}
.rp-boton-cargar-mas:hover { background: #eef7ff; }

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
	.rp-formulario { padding: 16px; border-radius: 10px; }
	.rp-estrellas { font-size: 22px; }
	.rp-tarjeta { padding: 12px; gap: 10px; }
	.rp-tarjeta-avatar { width: 38px; height: 38px; font-size: 13px; }
}