/* CE Fichas — comparador de cámaras */
.ce-cmp {
	--ce-ink: #15171c; --ce-muted: #5a6170; --ce-line: #e2e5ea; --ce-soft: #f6f7f9; --ce-accent: #157347; --ce-accent-soft: #e7f4ec; --ce-star: #e8a317;
	--ce-head: 72px;
	margin: 0 0 2em;
}
.admin-bar .ce-cmp { --ce-head: 104px; }
.ce-cmp__h1 { margin: .1em 0 .3em; }
.ce-cmp__lead { color: var(--ce-muted); font-size: 1.05rem; max-width: 760px; }

/* Buscador */
.ce-cmp__add { position: relative; display: flex; gap: 8px; flex-wrap: wrap; width: 100%; margin: 0; }
.ce-cmp__select { flex: 1 1 220px; min-height: 46px; border: 1px solid #cbd0d8; border-radius: 10px; padding: 0 12px; font: inherit; font-size: 15px; background: #fff; }
.ce-cmp__q { width: 100%; min-height: 50px; border: 1px solid #cbd0d8; border-radius: 12px; padding: 0 14px 0 42px; font: inherit; font-size: 16px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235a6170' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px 50%; }
.ce-cmp__q:focus { outline: none; border-color: var(--ce-accent); box-shadow: 0 0 0 3px var(--ce-accent-soft); }
.ce-cmp.has-js .ce-cmp__select, .ce-cmp.has-js .ce-cmp__go { display: none; }
.ce-cmp__results { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; max-height: 360px; overflow: auto; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--ce-line); border-radius: 12px; box-shadow: 0 16px 40px rgba(21, 23, 28, .14); text-align: left; }
.ce-cmp__results li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 15px; font-weight: 500; color: var(--ce-ink); }
.ce-cmp__results li[aria-selected="true"], .ce-cmp__results li:hover { background: var(--ce-soft); }
.ce-cmp__results img { width: 44px; height: 33px; object-fit: contain; flex: none; }
.ce-cmp__results small { margin-left: auto; color: var(--ce-muted); font-weight: 400; font-size: 12px; }
.ce-cmp__results .is-empty { cursor: default; color: var(--ce-muted); }
.ce-cmp__start { max-width: 640px; margin: 1.4em 0 2.2em; }

/* Populares */
.ce-cmp__popular ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ce-cmp__pop { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 16px; border: 1px solid var(--ce-line); border-radius: 14px; text-decoration: none; color: var(--ce-ink); font-weight: 650; line-height: 1.3; transition: border-color .15s, box-shadow .15s; }
.ce-cmp__pop:hover { border-color: var(--ce-accent); box-shadow: 0 10px 26px rgba(21, 23, 28, .08); color: var(--ce-ink); }
.ce-cmp__pop-img { display: flex; gap: 6px; }
.ce-cmp__pop-img img { width: 33%; max-width: 90px; aspect-ratio: 4/3; object-fit: contain; border-radius: 0 !important; }

/* Herramientas */
.ce-cmp__tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 1em 0 .8em; font-size: 15px; }
.ce-cmp__switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; color: var(--ce-ink); user-select: none; }
.ce-cmp__switch input { appearance: none; -webkit-appearance: none; width: 40px; height: 24px; margin: 0; border-radius: 99px; background: #cbd0d8; position: relative; cursor: pointer; transition: background .15s; }
.ce-cmp__switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.ce-cmp__switch input:checked { background: var(--ce-accent); }
.ce-cmp__switch input:checked::after { transform: translateX(16px); }
.ce-cmp__reset { color: var(--ce-muted); }

/* Tabla */
.ce-cmp__scroll { position: relative; }
.entry-content .ce-cmp__table, .ce-cmp__table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; border: 1px solid var(--ce-line); border-radius: 14px; overflow: visible; font-size: 14.5px; margin: 0 0 1em; display: table; }
.ce-cmp__table th, .ce-cmp__table td { padding: 11px 14px; border-top: 1px solid var(--ce-line); vertical-align: top; text-align: left; line-height: 1.45; overflow-wrap: anywhere; }
.ce-cmp__table tbody th[scope="row"] { width: 190px; background: var(--ce-soft); color: var(--ce-muted); font-weight: 600; font-size: 13.5px; }
.ce-cmp__table td + td, .ce-cmp__table th + td { border-left: 1px solid var(--ce-line); }
.ce-cmp__corner { width: 190px; border-top: 0 !important; background: #fff; }

/* Cabecera con las cámaras (fija al bajar) */
.ce-cmp__table thead th, .ce-cmp__table thead td { position: sticky; top: var(--ce-head); z-index: 5; background: #fff; border-top: 0; border-bottom: 2px solid var(--ce-line); box-shadow: 0 1px 0 var(--ce-line); }
.ce-cmp__table thead tr > :first-child { border-top-left-radius: 14px; }
.ce-cmp__table thead tr > :last-child { border-top-right-radius: 14px; }
.ce-cmp__cam { position: relative; text-align: center !important; vertical-align: bottom !important; padding: 14px 12px 16px !important; }
.ce-cmp__cam + .ce-cmp__cam { border-left: 1px solid var(--ce-line); }
.ce-cmp__img { display: block; margin: 0 auto 8px; }
.ce-cmp__img img { width: 100%; max-width: 200px; aspect-ratio: 4/3; object-fit: contain; margin: 0 auto; border-radius: 0 !important; transition: max-width .2s; }
.ce-cmp__name { display: block; font-family: var(--display, inherit); font-size: 1.05rem; font-weight: 750; color: var(--ce-ink); text-decoration: none; line-height: 1.2; margin-bottom: 6px; }
.ce-cmp__name:hover { color: var(--ce-accent); }
.ce-cmp__cam .ce-rating { justify-content: center; font-size: 12px; margin-bottom: 10px; }
.ce-cmp__buy { width: 100%; min-height: 40px; font-size: 14px; background: #e8a317; border-color: #e8a317; color: #15171c !important; }
.ce-cmp__buy:hover { background: #d29211; border-color: #d29211; }
.ce-cmp__remove { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--ce-muted); font-size: 20px; line-height: 1; text-decoration: none; background: var(--ce-soft); }
.ce-cmp__remove:hover { background: #fde8e8; color: #b42318; }
.ce-cmp__cam--add { vertical-align: middle !important; background: var(--ce-soft) !important; }
.ce-cmp__plus { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; border: 2px dashed #cbd0d8; color: var(--ce-muted); font-size: 28px; font-weight: 300; }
.ce-cmp__cam--add .ce-cmp__q { min-height: 44px; font-size: 15px; }
.ce-cmp__cam--add .ce-cmp__results { left: auto; right: 0; width: 320px; max-width: 80vw; }
.ce-cmp__cam--add .ce-cmp__select { flex-basis: 100%; }
.ce-cmp__cam--add .ce-cmp__go { width: 100%; }
.ce-cmp__pad { background: var(--ce-soft); }

/* Al bajar, la cabecera se compacta */
.ce-cmp.is-stuck .ce-cmp__img img { max-width: 70px; }
.ce-cmp.is-stuck .ce-cmp__cam .ce-rating, .ce-cmp.is-stuck .ce-cmp__plus { display: none; }
.ce-cmp.is-stuck .ce-cmp__buy { min-height: 34px; font-size: 13px; }

/* Grupos */
.ce-cmp__gh th { padding: 0 !important; background: #fff; border-top: 1px solid var(--ce-line); }
.ce-cmp__gh button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 16px; border: 0; background: none; font: inherit; font-family: var(--display, inherit); font-size: 1.02rem; font-weight: 750; color: var(--ce-ink); cursor: pointer; text-align: left; }
.ce-cmp__gh button::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -4px 4px 0 0; transition: transform .15s; }
.ce-cmp__group.is-open .ce-cmp__gh button::after { transform: rotate(-135deg); margin-top: 4px; }
.ce-cmp.has-js .ce-cmp__group:not(.is-open) tr:not(.ce-cmp__gh) { display: none; }

/* Destacados */
.ce-cmp__table td.is-best { background: var(--ce-accent-soft); color: var(--ce-ink); font-weight: 600; }
.ce-cmp__badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px; background: var(--ce-accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em; vertical-align: 1px; white-space: nowrap; }
.ce-cmp__table tr.is-same td { color: var(--ce-muted); }
.ce-cmp__na { color: #aab0ba; }
.ce-cmp.only-diff tr.is-same, .ce-cmp.only-diff .ce-cmp__group:not(.has-diff) { display: none !important; }
.ce-cmp__note { font-size: 13px; color: var(--ce-muted); }

/* Móvil y tabletas: desplazamiento lateral con la primera columna fija */
@media (max-width: 900px) {
	.ce-cmp { --ce-head: 0px; }
	.ce-cmp__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 0 16px 4px; }
	.entry-content .ce-cmp__table, .ce-cmp__table { width: max-content; min-width: 100%; table-layout: auto; }
	.ce-cmp__table th, .ce-cmp__table td { width: 172px; min-width: 172px; max-width: 172px; font-size: 14px; padding: 10px 12px; }
	.ce-cmp__table thead th, .ce-cmp__table thead td { position: relative; top: auto; }
	.ce-cmp__table tbody th[scope="row"], .ce-cmp__table thead .ce-cmp__corner { position: sticky; left: 0; z-index: 3; width: 104px; min-width: 104px; max-width: 104px; font-size: 12.5px; padding: 10px; box-shadow: 1px 0 0 var(--ce-line); }
	.ce-cmp__table tbody th[scope="row"] { background: var(--ce-soft); }
	.ce-cmp__table .ce-cmp__gh th { width: auto; max-width: none; min-width: 0; }
	.ce-cmp__gh button { position: sticky; left: 0; width: calc(100vw - 34px); }
	.ce-cmp__img img { max-width: 140px; }
	.ce-cmp.is-stuck .ce-cmp__img img { max-width: 140px; }
	.ce-cmp__buy { font-size: 13px; padding: 0 8px; }
	.ce-cmp__name { font-size: 1rem; }
}

/* Puntos fuertes (1.4.0) */
.ce-cmp__sum { margin: 1.2em 0 1.4em; }
.ce-cmp__sum h2 { font-size: 1.2rem; margin: 0 0 .6em; }
.ce-cmp__sum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.ce-cmp__sum-card { padding: 14px 16px; border: 1px solid var(--ce-line); border-radius: 14px; background: #fff; }
.ce-cmp__sum-name { display: block; font-weight: 750; color: var(--ce-ink); text-decoration: none; margin-bottom: 6px; }
.ce-cmp__sum-name:hover { color: var(--ce-accent); }
.ce-cmp__sum-card ul { margin: 0; padding: 0; list-style: none; font-size: 14px; }
.ce-cmp__sum-card li { position: relative; padding: 3px 0 3px 22px; line-height: 1.4; }
.ce-cmp__sum-card li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 10px; height: 6px; border-left: 2px solid var(--ce-accent); border-bottom: 2px solid var(--ce-accent); transform: rotate(-45deg); }
.ce-cmp__sum-card p { margin: 0; font-size: 14px; color: var(--ce-muted); }

/* Barras */
.ce-cmp__bar { display: block; height: 5px; margin-top: 7px; border-radius: 99px; background: var(--ce-line); overflow: hidden; }
.ce-cmp__bar i { display: block; height: 100%; border-radius: inherit; background: #9aa3b2; }
.ce-cmp__table td.is-best .ce-cmp__bar i { background: var(--ce-accent); }