/* =========================
   Base
   ========================= */

body {
    font-family: 'Segoe UI', sans-serif;
    margin: 0;
    background-color: #ffffff;
    color: #1a1a1a;
}

header {
    background: #ffffff;
    padding: 1.5em 1em;
    border-bottom: 1px solid #ccc;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 1000;
}

header h1 {
    margin: 0;
    color: #e25100;
    font-size: 2rem;
}

nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 2em;
    margin-top: 1em;
    flex-wrap: wrap;
}

nav ul li a {
  color: black;
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s;
}

nav ul li a.active {
  border-bottom: 2px solid orange;
  font-weight: bold;
  color: orange;
}

/* =========================
   Layout columnas
   ========================= */

.config-container {
    display: flex;
    flex-wrap: wrap;
    padding: 2em;
    gap: 2em;
    justify-content: center;
}

/* Columna visual (2) */
.visual {
    flex: 1;
    min-width: 300px;
    max-width: 500px;
    text-align: center;
    position: sticky;
    top: 180px; /* espacio para que no tape la cabecera */
    margin-right: 3em;       /* antes 6em */
    align-self: flex-start;
}

.visual img {
    width: 100%;
    max-width: 500px;
    border-radius: 8px;
    background: #f5f5f5;
    padding: 1em;
    border: 1px solid #ddd;
}

/* Columna controles (3) */
.controls {
    flex: 1;
    min-width: 300px;
    max-width: 620px;        /* antes 500px: “un poco” más ancha */
    padding: 1em;

    /* scroll interno */
    max-height: 90vh;
    overflow-y: auto;
    scrollbar-width: thin;
}
.controls::-webkit-scrollbar { width: 6px; }
.controls::-webkit-scrollbar-thumb { background-color: #e25100; border-radius: 10px; }

/* =========================
   Option card (visual buttons)
   ========================= */

.option-group {
    display: flex;
    gap: 1em;
    margin-bottom: 1.5em;
    flex-wrap: wrap;
}

.option-card {
    cursor: pointer;
    padding: 1em;
    border-radius: 12px;
    background-color: #f3f3f3;
    text-align: center;
    width: 65px;
    transition: 0.3s ease;
    border: 2px solid transparent;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.option-card:hover { background-color: #e9e9e9; }
.option-card.active { border: 2px solid #e25100; background-color: #fff3ec; }

.option-card img {
    width: 70px; height: 70px; object-fit: contain;
    margin-bottom: 0.5em; border-radius: 8px; display: block; margin-left: auto; margin-right: auto;
}

.option-card p { margin: 0.3em 0 0.2em; font-weight: bold; color: #1a1a1a; }
.option-card span { font-size: 0.85em; color: #444; }

#total { font-weight: bold; font-size: 1.5em; color: #e25100; display: inline-block; margin-top: 1em; }

/* =========================
   Colores gabinete
   ========================= */

.color-group { display: flex; gap: 1em; margin: 1em 0 2em; flex-wrap: wrap; }

.color-circle {
    width: 50px; height: 50px; border-radius: 50%;
    border: 1px solid #000; background-color: #ccc;
    cursor: pointer; transition: 0.3s ease; box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    position: relative;
}
.color-circle:hover { box-shadow: 0 0 0 3px rgba(226, 81, 0, 0.3); }
.color-circle.active { border: 3px solid #e25100; }

/* =========================
   Accesorios
   ========================= */

.accessory-group { display: flex; gap: 1em; flex-wrap: wrap; margin-top: 1em; }

.accessory-card {
    width: 75px; padding: 1em; border-radius: 24px; background-color: #f3f3f3;
    text-align: center; cursor: pointer; transition: 0.3s ease; border: 2px solid transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.accessory-card:hover { background-color: #e9e9e9; }
.accessory-card.active { border: 2px solid #e25100; background-color: #fff3ec; }
.accessory-card img { width: 60px; height: 60px; object-fit: contain; margin-bottom: 0.5em; border-radius: 10px; }
.accessory-card p { margin: 0.3em 0; font-weight: bold; color: #1a1a1a; }
.accessory-card span { font-size: 0.85em; color: #444; }

/* =========================
   Grupos de opciones por sección
   ========================= */

.processor-group,
.mb-group,
.graphics-group,
.ram-group,
.storage-group,
.enfriamiento-group,
.ps-group {
    display: flex;
    gap: 1em;
    flex-wrap: wrap;
    margin-bottom: 1.5em;
}

.processor-card, .mb-card, .graphics-card, .ram-card, .storage-card, .enfriamiento-card, .ps-card {
    width: 75px; padding: 1em; border-radius: 24px; background-color: #f3f3f3;
    text-align: center; cursor: pointer; transition: 0.3s ease; border: 2px solid transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.processor-card:hover, .mb-card:hover, .graphics-card:hover, .ram-card:hover, .storage-card:hover, .enfriamiento-card:hover, .ps-card:hover { background-color: #e9e9e9; }
.processor-card.active, .mb-card.active, .graphics-card.active, .ram-card.active, .storage-card.active, .enfriamiento-card.active, .ps-card.active { border: 2px solid #e25100; background-color: #fff3ec; }

.processor-card img, .mb-card img, .graphics-card img, .ram-card img, .storage-card img, .enfriamiento-card img, .ps-card img {
    width: 60px; height: 60px; object-fit: contain; margin-bottom: 0.5em; border-radius: 10px;
}
.processor-card p, .mb-card p, .graphics-card p, .ram-card p, .storage-card p, .enfriamiento-card p, .ps-card p {
    margin: 0.3em 0; font-weight: bold; color: #1a1a1a;
}
.processor-card span, .mb-card span, .graphics-card span, .ram-card span, .storage-card span, .enfriamiento-card span, .ps-card span {
    font-size: 0.85em; color: #444;
}

/* =========================
   Placeholder / mensajes
   ========================= */

.placeholder-msg { font-style: italic; color: #777; padding: 1em; text-align: center; width: 100%; }

/* =========================
   RAM sub-opciones
   ========================= */

.sub-ram-group {
    display: flex; flex-direction: row; gap: 1em; overflow-x: auto; flex-wrap: nowrap;
    width: 100%; padding-bottom: 0.5em;
}
.ram-sub-group { display: flex; flex-wrap: nowrap; gap: 1em; overflow-x: auto; margin-top: 1em; }

.ram-sub-card {
    width: 75px; padding: 1em; border-radius: 24px; background-color: #f3f3f3; flex: 0 0 auto;
    text-align: center; cursor: pointer; transition: 0.3s ease; border: 2px solid transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.ram-sub-card:hover { background-color: #e9e9e9; }
.ram-sub-card.active { border: 2px solid #e25100; background-color: #fff3ec; }
.ram-sub-card img {
    width: 60px; height: 60px; object-fit: contain; margin-bottom: 0.5em; border-radius: 10px;
    display: block; margin-left: auto; margin-right: auto;
}
.ram-sub-card p { margin: 0.3em 0; font-weight: bold; color: #1a1a1a; }
.ram-sub-card span { font-size: 0.85em; color: #444; }

.ram-type-card {
    width: 100px; padding: 1em; border-radius: 24px; background-color: #f3f3f3; text-align: center;
    cursor: pointer; transition: 0.3s ease; border: 2px solid transparent; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    font-weight: bold; color: #1a1a1a;
}
.ram-type-card:hover { background-color: #e9e9e9; }
.ram-type-card.active { border: 2px solid #e25100; background-color: #fff3ec; }

.ram-base-group { display: flex; gap: 1em; flex-wrap: wrap; margin-bottom: 1em; }
.ram-type-card img { width: 60px; height: 60px; object-fit: contain; margin-bottom: 0.5em; border-radius: 10px; display: block; margin-left: auto; margin-right: auto; }

/* =========================
   Botón volver
   ========================= */

.volver-btn {
    background-color: #f0f0f0; color: #e25100; border: 2px solid #e25100;
    border-radius: 12px; padding: 0.7em 1.2em; font-weight: bold; font-size: 0.95em;
    cursor: pointer; transition: background 0.3s ease, color 0.3s ease; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
}
.volver-btn:hover { background-color: #e25100; color: #ffffff; }

/* =========================
   Gráficas y tooltips
   ========================= */

.processor-sub-group {
    display: flex; flex-direction: row; gap: 1em; overflow-x: auto; padding: 1em 0; align-items: stretch;
}
.graphics-sub-group {
  display: flex; flex-wrap: nowrap; overflow-x: visible; gap: 1em; padding: 1em 0;
  position: relative; z-index: 1;
}
.graphics-card { position: relative; }
.graphics-card .tooltip {
  visibility: hidden; background-color: #e25100; color: white; text-align: left; padding: 8px; border-radius: 6px;
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 0.75rem;
  opacity: 0; transition: opacity 0.3s ease; max-width: 220px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); z-index: 9999;
}
.graphics-card:hover .tooltip { visibility: visible; opacity: 1; }

/* TEST PRODUCT CARDS */
.product-card { position: relative; display: inline-block; margin: 10px; }
.tooltip {
  visibility: hidden; background-color: #1d1d1d; color: #fff; text-align: left; padding: 8px; border-radius: 6px;
  position: absolute; z-index: 10; bottom: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 0.85rem; opacity: 0; transition: opacity 0.3s;
}
.product-card:hover .tooltip { visibility: visible; opacity: 1; }
/* TERMINAN TEST PRODUCT CARDS */

.graphics-scroll-wrapper { overflow-x: auto; position: relative; z-index: 0; width: 100%; }
.graphics-sub-group { display: flex; flex-wrap: nowrap; gap: 1em; padding: 1em 0; overflow-x: initial; }
.global-tooltip {
  position: absolute; background-color: #e25100; color: white; padding: 8px 12px; border-radius: 6px; font-size: 0.75rem; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); z-index: 10000; pointer-events: none; transform: translateY(-4px); transition: opacity 0.2s ease;
}

/* =========================
   Monitores
   ========================= */

.monitor-sub-card {
  border: 2px solid #ccc; padding: 10px; text-align: center; cursor: pointer; border-radius: 10px; width: 160px; margin: 5px; transition: all 0.2s ease;
}
.monitor-sub-card img { width: 100%; height: auto; margin-bottom: 8px; border-radius: 6px; }
.monitor-sub-card.active { border-color: #1D99A5; background-color: #f0faff; }

/* =========================
   Regresar opción (barra)
   ========================= */

.regresar-opcion {
  width: 60px; height: 220px; background-color: #f4f4f4; border: 2px solid #e25100; border-radius: 12px; color: #e25100; font-size: 2em; font-weight: bold;
  display: flex; align-items: center; justify-content: center; cursor: pointer; margin-right: 10px; user-select: none; transition: background 0.3s ease, color 0.3s ease;
}
.regresar-opcion:hover { background-color: #c74300; }

/* =========================
   Resumen (sticky)
   ========================= */

#resumen {
    position: sticky; bottom: 30px; background: white; padding: 1em; box-shadow: 0 0 10px rgba(0,0,0,0.05); z-index: 2;
}

/* Visual wrapper (columna 2) */
.visual-wrapper {
    display: flex; flex-direction: column; align-items: center;
    max-width: 500px;
    margin-right: 3em;        /* antes 6em */
    align-self: flex-start; height: calc(100vh - 200px);
    position: sticky; top: 180px; padding-bottom: 1em;
}
.visual { flex-grow: 1; width: 100%; display: flex; align-items: center; justify-content: center; }
.visual img {
    max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; background: #f5f5f5; padding: 1em; border: 1px solid #ddd;
}

#resumen {
    width: 100%; background: white; padding: 1em; margin-top: auto; border-radius: 8px;
    box-shadow: 0 0 8px rgba(0,0,0,0.05); text-align: center;
}
#resumen h2 { margin: 0; font-weight: bold; color: #e25100; }
#resumen input { width: 100%; padding: 5px; margin: 10px 0; }
#btnGenerarPDF { padding: 10px 20px; background-color: #1D99A5; color: white; border: none; border-radius: 5px; cursor: pointer; }

.botonera-cotizacion { display: flex; gap: 1em; flex-wrap: wrap; justify-content: center; margin-top: 1em; }
#btnTelegram { padding: 10px 20px; background-color: #0088cc; color: white; border: none; border-radius: 5px; cursor: pointer; }
#btnTelegram:hover { background-color: #0075b8; }

/* =========================
   Kits base
   ========================= */

.kit-base-group { display: flex; gap: 1em; flex-wrap: wrap; margin-bottom: 1em; }
.kit-type-card {
    width: 100px; padding: 1em; border-radius: 24px; background-color: #f3f3f3; text-align: center; cursor: pointer; transition: 0.3s ease; border: 2px solid transparent; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    font-weight: bold; color: #1a1a1a;
}
.kit-type-card:hover { background-color: #e9e9e9; }
.kit-type-card.active { border: 2px solid #e25100; background-color: #fff3ec; }
.kit-type-card img { width: 60px; height: 60px; object-fit: contain; margin-bottom: 0.5em; border-radius: 10px; display: block; margin-left: auto; margin-right: auto; }

.kit-sub-group { display: flex; flex-wrap: nowrap; gap: 1em; overflow-x: auto; margin-top: 1em; }
.kit-sub-card {
  width: 75px; padding: 1em; border-radius: 24px; background-color: #f3f3f3; flex: 0 0 auto; text-align: center; cursor: pointer; transition: 0.3s ease; border: 2px solid transparent; box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.kit-sub-card:hover { background-color: #e9e9e9; }
.kit-sub-card.active { border: 2px solid #e25100; background-color: #fff3ec; }
.kit-sub-card img {
  width: 60px; height: 60px; object-fit: contain; margin-bottom: 0.5em; border-radius: 10px; display: block; margin-left: auto; margin-right: auto;
}
.kit-sub-card p { margin: 0.3em 0; font-weight: bold; color: #1a1a1a; }
.kit-sub-card span { font-size: 0.85em; color: #444; }

/* =========================
   Bocinas
   ========================= */

.bocinas-base-group { display: flex; gap: 1em; flex-wrap: wrap; margin-bottom: 1em; }
.bocina-type-card {
  width: 100px; padding: 1em; border-radius: 24px; background-color: #f3f3f3; text-align: center; cursor: pointer; transition: 0.3s ease; border: 2px solid transparent; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-weight: bold; color: #1a1a1a;
}
.bocina-type-card:hover { background-color: #e9e9e9; }
.bocina-type-card.active { border: 2px solid #e25100; background-color: #fff3ec; }
.bocina-type-card img { width: 60px; height: 60px; object-fit: contain; margin-bottom: 0.5em; border-radius: 10px; display: block; margin-left: auto; margin-right: auto; }

.bocinas-sub-group { display: flex; flex-wrap: nowrap; gap: 1em; overflow-x: auto; margin-top: 1em; }
.bocina-sub-card {
  width: 75px; padding: 1em; border-radius: 24px; background-color: #f3f3f3; flex: 0 0 auto; text-align: center; cursor: pointer; transition: 0.3s ease; border: 2px solid transparent; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.bocina-sub-card:hover { background-color: #e9e9e9; }
.bocina-sub-card.active { border: 2px solid #e25100; background-color: #fff3ec; }
.bocina-sub-card img {
  width: 60px; height: 60px; object-fit: contain; margin-bottom: 0.5em; border-radius: 10px; display: block; margin-left: auto; margin-right: auto;
}
.bocina-sub-card p { margin: 0.3em 0; font-weight: bold; color: #1a1a1a; }
.bocina-sub-card span { font-size: 0.85em; color: #444; }

/* =========================
   Audífonos
   ========================= */

.audifonos-base-group { display: flex; gap: 1em; flex-wrap: wrap; margin-bottom: 1em; }
.audifono-type-card {
  width: 100px; padding: 1em; border-radius: 24px; background-color: #f3f3f3; text-align: center; cursor: pointer; transition: 0.3s ease; border: 2px solid transparent; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-weight: bold; color: #1a1a1a;
}
.audifono-type-card:hover { background-color: #e9e9e9; }
.audifono-type-card.active { border: 2px solid #e25100; background-color: #fff3ec; }
.audifono-type-card img {
  width: 60px; height: 60px; object-fit: contain; margin-bottom: 0.5em; border-radius: 10px; display: block; margin-left: auto; margin-right: auto;
}

.audifonos-sub-group { display: flex; flex-wrap: nowrap; gap: 1em; overflow-x: auto; margin-top: 1em; }
.audifono-sub-card {
  width: 75px; padding: 1em; border-radius: 24px; background-color: #f3f3f3; flex: 0 0 auto; text-align: center; cursor: pointer; transition: 0.3s ease; border: 2px solid transparent; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.audifono-sub-card:hover { background-color: #e9e9e9; }
.audifono-sub-card.active { border: 2px solid #e25100; background-color: #fff3ec; }
.audifono-sub-card img {
  width: 60px; height: 60px; object-fit: contain; margin-bottom: 0.5em; border-radius: 10px; display: block; margin-left: auto; margin-right: auto;
}
.audifono-sub-card p { margin: 0.3em 0; font-weight: bold; color: #1a1a1a; }
.audifono-sub-card span { font-size: 0.85em; color: #444; }

/* =========================
   Sistema Operativo
   ========================= */

.so-base-group { display: flex; gap: 1em; flex-wrap: wrap; margin-bottom: 1em; }
.so-type-card {
  width: 100px; padding: 1em; border-radius: 24px; background-color: #f3f3f3; text-align: center; cursor: pointer; transition: 0.3s ease; border: 2px solid transparent; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-weight: bold; color: #1a1a1a;
}
.so-type-card:hover { background-color: #e9e9e9; }
.so-type-card.active { border: 2px solid #e25100; background-color: #fff3ec; }
.so-type-card img { width: 60px; height: 60px; object-fit: contain; margin-bottom: 0.5em; border-radius: 10px; display: block; margin-left: auto; margin-right: auto; }
.so-type-card span { font-size: 0.85em; color: #444; }

.so-sub-group { display: flex; flex-wrap: nowrap; gap: 1em; overflow-x: auto; margin-top: 1em; }
.so-sub-card {
  width: 75px; padding: 1em; border-radius: 24px; background-color: #f3f3f3; flex: 0 0 auto; text-align: center; cursor: pointer; transition: 0.3s ease; border: 2px solid transparent; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.so-sub-card:hover { background-color: #e9e9e9; }
.so-sub-card.active { border: 2px solid #e25100; background-color: #fff3ec; }
.so-sub-card img {
  width: 60px; height: 60px; object-fit: contain; margin-bottom: 0.5em; border-radius: 10px; display: block; margin-left: auto; margin-right: auto;
}
.so-sub-card p { margin: 0.3em 0; font-weight: bold; color: #1a1a1a; }
.so-sub-card span { font-size: 0.85em; color: #444; }

/* =========================
   Pólizas
   ========================= */

.polizas-base-group { display: flex; gap: 1em; flex-wrap: wrap; margin-bottom: 1em; }
.poliza-type-card {
  width: 120px; padding: 1em; border-radius: 24px; background-color: #f3f3f3; text-align: center; cursor: pointer; transition: 0.3s ease; border: 2px solid transparent; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-weight: bold; color: #1a1a1a;
}
.poliza-type-card:hover { background-color: #e9e9e9; }
.poliza-type-card.active { border: 2px solid #e25100; background-color: #fff3ec; }
.poliza-type-card img {
  width: 60px; height: 60px; object-fit: contain; margin-bottom: 0.5em; border-radius: 10px; display: block; margin: 0 auto;
}

.polizas-sub-group { display: flex; flex-wrap: nowrap; gap: 1em; overflow-x: auto; margin-top: 1em; padding: 1em 0; align-items: flex-start; }
.polizas-sub-group > * { flex: 0 0 auto; }
.polizas-sub-group img {
  width: auto; height: 160px; max-height: 160px; object-fit: contain; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

.poliza-sub-card { width: 140px; text-align: center; }

/* =========================
   Scroll horizontal genérico
   ========================= */

.scroll-container { display: flex; overflow-x: auto; gap: 1rem; scroll-snap-type: x mandatory; padding-bottom: 10px; }
.scroll-container::-webkit-scrollbar { height: 8px; }
.scroll-container::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.storage-card { flex: 0 0 auto; scroll-snap-align: start; }

/* =========================================================
   AJUSTES POR SECCIÓN
   ========================================================= */

/* ALMACENAMIENTO: título visible + fila horizontal propia */
#almacenamiento .scroll-container { display: block; overflow: visible; padding-bottom: 0; }
#almacenamiento h2 { margin: 0 0 .75em; }
#almacenamiento .storage-group {
  display: flex; flex-wrap: nowrap; gap: 1em; overflow-x: auto; padding-bottom: 10px; align-items: flex-start;
}
#almacenamiento .storage-group::-webkit-scrollbar{ height: 8px; }
#almacenamiento .storage-group::-webkit-scrollbar-thumb{ background: #ccc; border-radius: 4px; }
#almacenamiento .storage-card { flex: 0 0 110px; text-align: center; }
#almacenamiento .storage-card img { width: 90px; height: 60px; object-fit: contain; border-radius: 8px; }

/* ==== FIX específico para Almacenamiento ==== */
#almacenamiento > .storage-group{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 1em;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: flex-start;
  padding-bottom: .5em;
}
#almacenamiento .storage-card{
  flex: 0 0 auto !important;
}
#almacenamiento h2{
  display: block;
  margin-top: 1.5em;
  margin-bottom: .5em;
}
/* ==== FIX específico para #almacenamiento ==== */
#almacenamiento > .storage-group{
  display: flex !important;
  flex-wrap: nowrap !important;   /* una sola fila */
  gap: 1em;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: flex-start;
  padding-bottom: 10px;
}
#almacenamiento .storage-card{ flex: 0 0 auto !important; }
#almacenamiento h2{ margin: 0 0 .75em; }

/* --- Pólizas: evitar que la imagen se salga de la card --- */
#polizas .poliza-sub-card{
  width: 160px;              /* o 140px si lo tenías así */
  text-align: center;
  overflow: hidden;          /* clave para que nada se desborde */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Imágenes dentro de la card */
#polizas .poliza-sub-card img{
  max-width: 100%;
  max-height: 160px;         /* mismo alto que el resto de pólizas */
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Por si alguna imagen quedó suelta directamente dentro del carrusel */
#polizas .polizas-sub-group > img{
  max-width: 100%;
  max-height: 160px;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  display: block;
}

/* Pólizas: card UI + estado activo */
#polizas .poliza-sub-card{
  width: 160px;
  padding: 1em;
  border-radius: 24px;
  background-color: #f3f3f3;
  text-align: center;
  cursor: pointer;
  transition: 0.3s ease;
  border: 2px solid transparent;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
#polizas .poliza-sub-card:hover{ background-color: #e9e9e9; }
#polizas .poliza-sub-card.active{
  border: 2px solid #e25100;
  background-color: #fff3ec;
}
#polizas .poliza-sub-card img{
  max-width: 100%;
  max-height: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* Cards bloqueadas (deshabilitadas) */
.is-disabled {
  opacity: 0.45;         /* se ven más oscuras */
  cursor: not-allowed;   /* cursor prohibido */
  filter: grayscale(20%); /* opcional: un toque gris extra */
  transition: opacity 0.2s ease-in-out;
}

.is-disabled.active {
  /* asegurar que no se vean como seleccionadas */
  border: none !important;
}
  box-shadow: none !important;
  
  .color-circle {
  font-size: 0 !important;
  color: transparent !important;
  text-indent: -9999px;   /* manda cualquier texto muy lejos */
}
/* Círculos de color: fondo sólido y sin texto */
#color .color-circle{
  display:inline-block;
  width:28px; height:28px;
  border-radius:50%;
  vertical-align:middle;
  background-color:#fff !important;   /* fondo por defecto sólido */
  font-size:0 !important;              /* oculta cualquier texto */
  line-height:0 !important;
  color:transparent !important;
  text-indent:-9999px !important;      /* por si queda algo, lo saca del área */
  overflow:hidden !important;
  position:relative;
}

/* Colores específicos (por si el JS no alcanzó a pintarlos) */
#color .color-circle[data-color="#ffffff"]{ background-color:#ffffff !important; border:2px solid #000; }
#color .color-circle[data-color="#1a1a1a"]{ background-color:#1a1a1a !important; }
#color .color-circle[data-color="#93cddb"]{ background-color:#93cddb !important; }
#color .color-circle[data-color="#feb5d8"]{ background-color:#feb5d8 !important; }
#color .color-circle[data-color="#3c6947"]{ background-color:#3c6947 !important; }

/* Por si algún estilo previo inyectó contenido con pseudo-elementos */
#color .color-circle::before,
#color .color-circle::after{
  content:none !important;
}

.monitores-sub-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.monitor-sub-card {
  width: 170px;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease;
}

.monitor-sub-card.active {
  outline: 2px solid #1D99A5; /* o tu color */
  box-shadow: 0 0 0 3px rgba(29, 153, 165, .15);
  transform: translateY(-1px);
}
/* === Garantías: coherencia visual con el resto de las cards === */
.card-garantia {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background-color: #fff;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card-garantia:hover {
  transform: translateY(-3px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
}

.card-garantia.active {
  outline: 2px solid #1D99A5;
  outline-offset: 2px;
}

/* Imágenes dentro de las cards */
.card-garantia img {
  width: 100%;
  max-width: 80px;   /* igual que las RAM o gráficas pequeñas */
  height: auto;
  object-fit: contain;
  margin-bottom: 4px;
}

/* Textos */
.card-garantia .card-title {
  font-weight: 700;
  font-size: 1.1rem;
  text-align: center;
}

.card-garantia .card-subtitle {
  opacity: 0.8;
  font-size: 0.9rem;
  text-align: center;
}

.card-garantia .card-precio {
  font-weight: 700;
  font-size: 1.05rem;
  color: #000;
  text-align: center;
}
/* === Garantías - Disposición horizontal igual que otras secciones === */
#garantias-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 20px; /* espacio entre cards */
}

.card-garantia {
  flex: 1 1 160px;   /* ancho base de 180px y ajustable */
  max-width: 160px;  /* no excede tamaño típico de otras cards */
  text-align: center;
}
/* === Monitores: mismas dimensiones y estilo que el resto de cards === */
#monitores .monitores-sub-group{
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  align-items: flex-start;
}

#monitores .monitor-sub-card{
  width: 170px;                 /* igual que tus sub-cards típicas */
  padding: 1em;
  border-radius: 24px;
  background-color: #f3f3f3;
  text-align: center;
  cursor: pointer;
  transition: 0.3s ease;
  border: 2px solid transparent;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

#monitores .monitor-sub-card:hover{ background-color: #e9e9e9; }
#monitores .monitor-sub-card.active{
  border: 2px solid #e25100;    /* mismo naranja que usas en otras secciones */
  background-color: #fff3ec;
}

#monitores .monitor-sub-card img{
  width: 140px;                 /* controla el “tamaño grande” */
  height: 90px;
  object-fit: contain;
  margin-bottom: .5em;
  border-radius: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#monitores .monitor-sub-card p{
  margin: .3em 0;
  font-weight: bold;
  color: #1a1a1a;
}

#monitores .monitor-sub-card span{
  font-size: .85em;
  color: #444;
}
/* === MONITORES (ajuste visual como garantías / fuente / bocinas) === */
#monitores .option-group[data-group="monitores"] {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: flex-start;
}

#monitores .option-group[data-group="monitores"] .option-card {
  width: 150px;
  padding: 10px;
  border-radius: 20px;
  background-color: #f5f5f5;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  border: 2px solid transparent;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

#monitores .option-group[data-group="monitores"] .option-card:hover {
  transform: translateY(-3px);
  background-color: #ececec;
}

#monitores .option-group[data-group="monitores"] .option-card.active {
  border: 2px solid #e25100; /* color naranja de selección */
  background-color: #fff3ec;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

#monitores .option-group[data-group="monitores"] .option-card img {
  width: 115px;
  height: 75px;
  object-fit: contain;
  margin-bottom: 8px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
}

#monitores .option-group[data-group="monitores"] .option-card p {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 4px;
  color: #1a1a1a;
}

#monitores .option-group[data-group="monitores"] .option-card span {
  font-size: 0.85rem;
  color: #444;
}
/* === MONITORES - SUBGRUPOS (alinear 4 por fila) === */
#monitores .monitores-sub-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 18px;
}

#monitores .monitores-sub-group .monitor-sub-card {
  flex: 1 1 calc(25% - 18px);  /* 4 cards por fila */
  max-width: calc(25% - 18px);
  box-sizing: border-box;
  padding: 12px;
  border-radius: 20px;
  background-color: #f5f5f5;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  border: 2px solid transparent;
}

#monitores .monitores-sub-group .monitor-sub-card:hover {
  transform: translateY(-3px);
  background-color: #ececec;
}

#monitores .monitores-sub-group .monitor-sub-card.active {
  border: 2px solid #e25100;
  background-color: #fff3ec;
}

#monitores .monitores-sub-group .monitor-sub-card img {
  width: 115px;
  height: 75px;
  object-fit: contain;
  margin-bottom: 6px;
}

#monitores .monitores-sub-group .monitor-sub-card p {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

#monitores .monitores-sub-group .monitor-sub-card span {
  font-size: 0.85rem;
  color: #444;
}
/* === MONITORES: subgrupo con scroll horizontal (como RAM) === */
#monitores .monitores-sub-group {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  gap: 18px;
  padding-bottom: 8px;
}

/* Ocultar barra en navegadores WebKit (opcional) */
#monitores .monitores-sub-group::-webkit-scrollbar {
  height: 8px;
}
#monitores .monitores-sub-group::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}

/* Tarjetas internas */
#monitores .monitores-sub-group .monitor-sub-card {
  flex: 0 0 auto;       /* ancho fijo, no se encoge */
  width: 160px;         /* mismo tamaño que otras secciones */
  padding: 10px;
  border-radius: 20px;
  background-color: #f5f5f5;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
  border: 2px solid transparent;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

#monitores .monitores-sub-group .monitor-sub-card:hover {
  transform: translateY(-3px);
  background-color: #ececec;
}

#monitores .monitores-sub-group .monitor-sub-card.active {
  border: 2px solid #e25100;
  background-color: #fff3ec;
}

#monitores .monitores-sub-group .monitor-sub-card img {
  width: 110px;
  height: 70px;
  object-fit: contain;
  margin-bottom: 6px;
}

#monitores .monitores-sub-group .monitor-sub-card p {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 4px;
}

#monitores .monitores-sub-group .monitor-sub-card span {
  font-size: 0.85rem;
  color: #444;
}
/* === Mantenimientos: igualar estilo a Guarantees === */

.card-mantenimiento.option-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px;
    width: 160px;
    height: 200px;
    text-align: center;
    border-radius: 16px;
    background: #fff;
    transition: all 0.2s ease;
}

.card-mantenimiento.option-card img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 10px;
}

.card-mantenimiento .card-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
}

.card-mantenimiento .card-precio {
    color: #444;
    font-size: 14px;
}

/* borde naranja cuando está activo (igual que las demás) */
.card-mantenimiento.active {
    border: 2px solid #ff6a00;
}
#mantenimientos-cards {
    display: flex;
    gap: 20px;
}