/* Galeria WEBShop - colores alineados con ALButtonGroup_DSK (primary #387780, FRosa #e914b4, danger #E83151)
   REGLA: la tarjeta NUNCA recorta ni oculta informacion. Si algo no cabe, baja de linea
   (nada de overflow:hidden, ellipsis ni anchos fijos que corten). */

:root {
    --g-bg: #f3f5f6;
    --g-card: #ffffff;
    --g-text: #1f2a30;
    --g-muted: #6b7a82;
    --g-line: #e2e7ea;
    --g-primary: #387780;
    --g-rosa: #e914b4;
    --g-verde: #2e9e5b;
    --g-rojo: #E83151;
    --g-naranja: #e8872b;
    --g-morado: #6a4bc4;
}

html, body { margin: 0; padding: 0; height: 100%; }
#controlAddIn { height: 100%; }
* { box-sizing: border-box; }

.g-app {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--g-bg);
    color: var(--g-text);
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 14px;
}

/* ---- cabecera ---- */
.g-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    padding: 10px 14px; background: var(--g-card); border-bottom: 1px solid var(--g-line);
}
.g-titulo { flex: 1; min-width: 120px; display: flex; flex-direction: column; line-height: 1.2; }
.g-titulo b { font-size: 18px; }
.g-titulo span { color: var(--g-muted); font-size: 12px; }
.g-carro {
    border: 0; border-radius: 20px; padding: 8px 14px; cursor: pointer;
    background: var(--g-primary); color: #fff; font-size: 14px;
}

/* ---- herramientas ---- */
.g-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px 4px; }
.g-buscar { flex: 1 1 220px; min-width: 0; padding: 8px 10px; border: 1px solid var(--g-line); border-radius: 6px; font-size: 14px; }
.g-select { padding: 7px; border: 1px solid var(--g-line); border-radius: 6px; background: #fff; }
.g-seg { display: inline-flex; border: 1px solid var(--g-line); border-radius: 6px; overflow: hidden; }
.g-seg button { border: 0; background: #fff; padding: 6px 10px; cursor: pointer; font-size: 15px; }
.g-seg button.on { background: var(--g-primary); color: #fff; }
.g-check { display: inline-flex; gap: 4px; align-items: center; color: var(--g-muted); }

.g-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 14px; }
.g-chip {
    border: 1px solid var(--g-line); background: #fff; border-radius: 16px;
    padding: 4px 12px; cursor: pointer; white-space: nowrap;
}
.g-chip small { color: var(--g-muted); }
.g-chip.on { background: var(--g-text); color: #fff; border-color: var(--g-text); }
.g-chip.on small { color: #ccc; }

/* ---- paginacion (arriba y abajo) ---- */
.g-pag { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; padding: 10px 14px; color: var(--g-muted); }
.g-pag.arriba { padding: 4px 14px 8px; }
.g-grid .g-pag { grid-column: 1 / -1; padding: 16px; }
.g-pag:empty { display: none; }
.g-pagtxt b { color: var(--g-text); }
.g-spin {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid var(--g-line); border-top-color: var(--g-primary); animation: g-giro .8s linear infinite;
}
@keyframes g-giro { to { transform: rotate(360deg); } }

/* ---- rejilla ---- */
.g-grid {
    flex: 1; overflow-y: auto; padding: 4px 14px 20px;
    display: grid; gap: 14px; align-content: start;
}
.g-grid.grande { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.g-grid.compacta { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.g-grid.lista { grid-template-columns: 1fr; }

/* ---- tarjeta ---- */
.g-card {
    background: var(--g-card); border-radius: 10px; min-width: 0;
    border: 2px solid transparent; box-shadow: 0 1px 3px rgba(0,0,0,.08);
    display: flex; flex-direction: column;
}
.g-card.en-carro { border-color: var(--g-verde); }

/* Foto: altura FIJA + imagen en absoluto. No usar aspect-ratio aqui: dentro de la columna
   flex de la tarjeta, Firefox dejaba la caja con 0 px de alto y la foto no se veia. */
.g-foto { position: relative; flex: none; height: 240px; background: #eef1f2; cursor: zoom-in; border-radius: 8px 8px 0 0; overflow: hidden; }
.g-foto img, .g-foto .g-nofoto, .g-foto .g-cargando { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-foto img { object-fit: cover; display: block; }
.g-nofoto { display: flex; align-items: center; justify-content: center; color: var(--g-muted); }
.g-cargando {
    background: linear-gradient(90deg, #eef1f2 25%, #f8f9fa 50%, #eef1f2 75%);
    background-size: 200% 100%; animation: g-brillo 1.2s infinite;
}
@keyframes g-brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.g-badges { position: absolute; left: 8px; top: 8px; right: 50px; display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-start; }
.g-badge { font-size: 11px; font-weight: 600; color: #fff; padding: 2px 8px; border-radius: 10px; }
.g-badge.verde { background: var(--g-verde); }
.g-badge.naranja { background: var(--g-naranja); }
.g-badge.gris { background: #7d8a90; }
.g-badge.morado { background: var(--g-morado); }
.g-fav {
    position: absolute; right: 8px; top: 8px; width: 34px; height: 34px; border-radius: 50%;
    border: 0; background: rgba(255,255,255,.9); color: var(--g-rojo); font-size: 18px; cursor: pointer;
}

.g-cuerpo { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.g-nombre { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.g-especie { color: var(--g-muted); font-style: italic; margin-top: -6px; }

/* campos "etiqueta valor": bloques que se reparten en 2 columnas y bajan de linea si no caben */
.g-datos { display: flex; flex-wrap: wrap; gap: 3px 14px; font-size: 12px; }
.g-dato {
    flex: 1 1 40%; min-width: 125px;
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 6px;
    border-bottom: 1px dotted var(--g-line); padding-bottom: 2px;
}
.g-dato span { color: var(--g-muted); }
.g-dato b { font-weight: 600; text-align: right; overflow-wrap: anywhere; margin-left: auto; }
.g-dato .ok { color: var(--g-verde); }
.g-dato .ko { color: var(--g-rojo); }
.g-dato .fuerte { color: var(--g-primary); font-weight: 700; }

.g-precio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.g-pvp { font-size: 22px; font-weight: 700; color: var(--g-primary); white-space: nowrap; }
.g-precio small { color: var(--g-muted); }
.g-precio s { color: var(--g-muted); font-size: 13px; white-space: nowrap; }

.g-tramos { display: flex; flex-wrap: wrap; gap: 4px; font-size: 11px; }
.g-tramos b { font-weight: 600; color: var(--g-muted); margin-right: 2px; }
.g-encarro { font-size: 12px; color: var(--g-verde); background: #eef8f2; border-radius: 6px; padding: 4px 8px; }
.g-tramos span { border: 1px solid var(--g-line); border-radius: 4px; padding: 1px 6px; color: var(--g-muted); white-space: nowrap; }
.g-tramos span.on { border-color: var(--g-primary); color: var(--g-primary); font-weight: 700; }

.g-prog { height: 6px; background: var(--g-line); border-radius: 3px; overflow: hidden; }
.g-prog div { height: 100%; background: var(--g-naranja); }
.g-prog-txt { font-size: 12px; color: var(--g-naranja); }

/* selector: un contador por fila (etiqueta a la izquierda, - n + a la derecha) */
.g-sel { display: flex; flex-direction: column; gap: 4px; background: #f7f9fa; border-radius: 8px; padding: 6px 8px; }
.g-contador { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.g-contador label { font-size: 12px; color: var(--g-muted); text-transform: uppercase; letter-spacing: .03em; }
.g-contador > div { display: flex; align-items: center; gap: 4px; }
.g-contador .g-btn.g-mini { width: 32px; height: 32px; padding: 0; font-size: 18px; }
.g-contador.bloq label { opacity: .6; }
.g-contador.bloq .g-num { background: #eef1f2; color: var(--g-muted); }
.g-contador.bloq .g-btn { background: #c5ced2; }
.g-num { width: 70px; height: 32px; padding: 2px; text-align: center; border: 1px solid var(--g-line); border-radius: 6px; font-size: 15px; }
.g-num::-webkit-inner-spin-button { -webkit-appearance: none; }

.g-rapidos { display: flex; gap: 4px 12px; flex-wrap: wrap; }
.g-link { border: 0; background: none; color: var(--g-primary); cursor: pointer; padding: 0; font-size: 12px; text-decoration: underline; }
.g-total { font-size: 13px; }

.g-acciones { display: flex; gap: 6px; margin-top: auto; align-items: stretch; }
.g-acciones .g-btn { display: flex; align-items: center; justify-content: center; }
.g-anadir { flex: 1; flex-direction: column; gap: 1px; line-height: 1.2; }
.g-anadir span { display: inline-flex; align-items: center; gap: 6px; }
.g-anadir small { font-weight: 400; font-size: 12px; opacity: .95; }

.g-btn {
    border: 0; border-radius: 6px; padding: 8px 12px; cursor: pointer;
    font-size: 14px; font-weight: 600; color: #fff; background: var(--g-primary);
}
.g-btn:disabled { opacity: .45; cursor: default; }
.g-rosa { background: var(--g-rosa); }
.g-verde { background: var(--g-verde); }
.g-rojo { background: var(--g-rojo); }
.g-azul { background: var(--g-primary); }

.g-mas summary { cursor: pointer; color: var(--g-muted); font-size: 12px; }
.g-mas p { margin: 4px 0 0; font-size: 12px; }

/* ---- vista compacta: misma informacion, foto mas baja ---- */
.compacta .g-foto { height: 160px; }
.compacta .g-pvp { font-size: 18px; }

/* ---- vista lista: foto a la izquierda, datos y compra al lado ---- */
.lista .g-card { flex-direction: row; }
.lista .g-foto { width: 200px; height: auto; min-height: 160px; border-radius: 8px 0 0 8px; }

/* ---- avisos y foto ampliada ---- */
.g-toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 10; }
.g-toast {
    padding: 10px 16px; border-radius: 8px; color: #fff; background: var(--g-text);
    box-shadow: 0 4px 12px rgba(0,0,0,.2); transition: opacity .4s, transform .4s;
}
.g-toast.ok { background: var(--g-verde); }
.g-toast.error { background: var(--g-rojo); }
.g-toast.fuera { opacity: 0; transform: translateY(10px); }

.g-lightbox {
    display: none; position: fixed; inset: 0; z-index: 20; cursor: zoom-out;
    background: rgba(0,0,0,.85); align-items: center; justify-content: center;
}
.g-lightbox.on { display: flex; }
.g-lightbox img { max-width: 95%; max-height: 95%; }

@media (max-width: 560px) {
    .g-grid.grande, .g-grid.compacta { grid-template-columns: 1fr; gap: 10px; padding: 4px 8px 16px; }
    .lista .g-card { flex-direction: column; }
    .lista .g-foto { width: auto; height: 220px; border-radius: 8px 8px 0 0; }
}