/* HQ Comparison Table — Styles */

.hq-comparison-table-wrap {
	width:      100%;
	overflow-x: auto;           /* scroll horizontal en móvil */
	-webkit-overflow-scrolling: touch;
}

.hq-comparison-table {
	width:          100%;
	min-width:      560px;
	box-shadow:     0 4px 24px rgba(0,0,0,0.08);
}

.hq-ct-table {
	width:           100%;
	border-collapse: collapse;
	table-layout:    fixed;
}

/* ── Header */
.hq-ct-th {
	padding:        18px 20px;
	font-size:      0.95em;
	font-weight:    700;
	text-align:     center;
	letter-spacing: 0.02em;
	border-bottom:  2px solid rgba(255,255,255,0.12);
}

.hq-ct-label-col {
	text-align: left;
	width:      32%;
}

.hq-ct-th.hq-ct-highlighted {
	font-size: 1.05em;
}

/* ── Rows */
.hq-ct-row:nth-child(odd)  .hq-ct-td { background-color: #ffffff; }
.hq-ct-striped .hq-ct-row:nth-child(even) .hq-ct-td { background-color: #f8fafc; }

.hq-ct-td {
	padding:      15px 20px;
	text-align:   center;
	font-size:    0.93em;
	border-bottom: 1px solid rgba(0,0,0,0.06);
	transition:   background-color 0.15s ease;
	vertical-align: middle;
}

.hq-ct-td.hq-ct-label {
	text-align:  left;
	font-weight: 500;
	color:       #374151;
}

.hq-ct-td.hq-ct-highlighted {
	background-color: #f0f7ff !important;
}

/* ── Icons */
.hq-ct-check {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
}

.hq-ct-x {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	color:           #d1d5db;
}

/* ── Add row */
.hq-ct-add-row {
	text-align: center;
	padding:    8px;
	background: #f9fafb;
}

/* ── Editor helpers */
.hq-ct-label-input,
.hq-ct-cell-input {
	width:      100%;
	border:     none;
	background: transparent;
	font-size:  inherit;
	font-family:inherit;
	color:      inherit;
	padding:    2px 0;
	border-bottom: 1px dashed rgba(0,0,0,0.2);
}
.hq-ct-label-input:focus,
.hq-ct-cell-input:focus { outline: none; border-bottom-color: #007cba; }

.hq-ct-toggle-btn {
	background: none;
	border:     none;
	cursor:     pointer;
	padding:    0;
	display:    inline-flex;
	align-items:center;
}
.hq-ct-toggle-btn:hover { opacity: 0.7; }

.hq-ct-row-remove { opacity: 0.3; margin-left: 6px; }
.hq-ct-row-remove:hover { opacity: 1; }

.hq-ct-plan-row {
	padding:       12px 0;
	border-bottom: 1px solid #f0f0f0;
	margin-bottom: 4px;
}

.hq-color-row { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.hq-color-label { flex:1; font-size:12px; font-weight:500; }
.hq-color-row input[type="color"] { width:40px; height:32px; padding:2px; border:1px solid #ccc; border-radius:4px; cursor:pointer; background:none; }

/* ── Responsive */
@media (max-width: 600px) {
	.hq-ct-th,
	.hq-ct-td { padding: 12px 12px; font-size: 0.85em; }
}