/* Estilos del front. Neutros a propósito: el tema hijo manda.
   Todo usa variables CSS para que puedas sobrescribir sin tocar el plugin. */

.oc-btn,
.oc-ficha,
.oc-tabla,
.oc-aviso {
	--oc-acento: #16624a;
	--oc-acento-hover: #0f4a37;
	--oc-borde: #e2e5e9;
	--oc-texto-suave: #5a636e;
	--oc-radio: 8px;
}

/* Botones ------------------------------------------------------------- */
.oc-btn {
	display: inline-block;
	padding: 12px 22px;
	border-radius: var(--oc-radio);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	text-align: center;
	transition: background-color .15s ease;
}
.oc-btn--primario { background: var(--oc-acento); color: #fff; }
.oc-btn--primario:hover { background: var(--oc-acento-hover); color: #fff; }
.oc-btn--secundario {
	background: transparent;
	color: var(--oc-acento);
	border: 2px solid var(--oc-acento);
}
.oc-btn--sm { padding: 8px 14px; font-size: 14px; }

/* Ficha --------------------------------------------------------------- */
.oc-ficha {
	display: flex;
	gap: 20px;
	border: 1px solid var(--oc-borde);
	border-radius: var(--oc-radio);
	padding: 20px;
	margin: 28px 0;
}
.oc-ficha__img { flex: 0 0 180px; }
.oc-ficha__img img { width: 100%; height: auto; border-radius: 6px; }
.oc-ficha__cuerpo { flex: 1; min-width: 0; }
.oc-ficha__titulo { margin: 0 0 10px; font-size: 1.25em; }
.oc-ficha__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center; }
.oc-tag {
	background: #f2f4f6;
	color: var(--oc-texto-suave);
	padding: 4px 10px;
	border-radius: 20px;
	font-size: 13px;
}
.oc-nota { font-weight: 700; color: var(--oc-acento); font-size: 15px; }
.oc-ficha__veredicto { margin: 0 0 14px; color: var(--oc-texto-suave); }
.oc-ficha__listas { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 16px; }
.oc-pros, .oc-contras { list-style: none; margin: 0; padding: 0; font-size: 15px; flex: 1 1 200px; }
.oc-pros li::before { content: "+ "; color: #16624a; font-weight: 700; }
.oc-contras li::before { content: "− "; color: #b32d2e; font-weight: 700; }

/* Tabla comparativa --------------------------------------------------- */
.oc-tabla-wrap { overflow-x: auto; margin: 28px 0; -webkit-overflow-scrolling: touch; }
.oc-tabla { width: 100%; border-collapse: collapse; min-width: 560px; }
.oc-tabla th, .oc-tabla td {
	border: 1px solid var(--oc-borde);
	padding: 12px;
	text-align: left;
	vertical-align: middle;
}
.oc-tabla thead th { background: #f7f8f9; text-align: center; }
.oc-tabla thead img { display: block; margin: 0 auto 8px; max-width: 90px; height: auto; }
.oc-tabla__nombre { font-size: 14px; display: block; }
.oc-tabla tbody th { width: 30%; font-weight: 600; background: #fbfbfc; }
.oc-tabla__destacada td { font-weight: 600; }
.oc-tabla__cta td { text-align: center; }

/* Aviso de afiliados -------------------------------------------------- */
.oc-aviso {
	font-size: 14px;
	color: var(--oc-texto-suave);
	background: #f7f8f9;
	border-left: 3px solid var(--oc-acento);
	padding: 10px 14px;
	margin: 20px 0;
}

/* Móvil: la ficha se apila, la tabla scrollea ------------------------- */
@media (max-width: 640px) {
	.oc-ficha { flex-direction: column; }
	.oc-ficha__img { flex: none; max-width: 200px; }
	.oc-btn { display: block; width: 100%; }
	.oc-tabla tbody th { width: 40%; font-size: 14px; }
}