/* ============================
   BASE: tokens y reset general
   ============================ */

body {
    /* Valores por defecto (se sobreescriben por modo/tema) */
    --c-bg: #ffffff;
    --c-on-bg: #000000;
    --c-surface: #ffffff;
    --c-on-surface: #000000;

    --c-primary: #018786;
    --c-primary-variant: #03dac5;
    --c-on-primary: #ffffff;

    --c-secondary: #03dac5;
    --c-secondary-variant: #018786;
    --c-on-secondary: #000000;

    background-color: var(--c-bg);
    color: var(--c-on-bg);
}

/* ============================
   NEUTRALES POR MODO
   ============================ */

/* Light (coincide con backgroundColor / colorOnBackground / colorSurface / colorOnSurface) */
body.mode-light {
    --c-bg: #ffffff;
    --c-on-bg: #000000;

    --c-surface: #ffffff;
    --c-on-surface: #000000;
}

/* Night (background_dark / on_background_dark / surface_dark / on_surface_dark) */
body.mode-dark {
    --c-bg: #121212;
    --c-on-bg: #ffffff;

    --c-surface: #1e1e1e;
    --c-on-surface: #ffffff;
}

/* ============================
   PALETAS POR TEMA (LIGHT)
   ============================ */


/* Rojo (Theme.Comparor.Rojo) */
body.mode-light.theme-red {
    --c-primary: #d32f2f;          /* red_700 */
    --c-primary-variant: #ef9a9a;  /* red_200 */
    --c-on-primary: #ffffff;

    --c-secondary: #ef9a9a;
    --c-secondary-variant: #d32f2f;
    --c-on-secondary: #000000;
}

/* Azul (Theme.Comparor.Azul) */
body.mode-light.theme-default {
    --c-primary: #1976d2;          /* blue_700 */
    --c-primary-variant: #90caf9;  /* blue_200 */
    --c-on-primary: #ffffff;

    --c-secondary: #90caf9;
    --c-secondary-variant: #1976d2;
    --c-on-secondary: #000000;
}

/* Verde (Theme.Comparor.Verde) */
body.mode-light.theme-green {
    --c-primary: #388e3c;          /* green_700 */
    --c-primary-variant: #a5d6a7;  /* green_200 */
    --c-on-primary: #ffffff;

    --c-secondary: #a5d6a7;
    --c-secondary-variant: #388e3c;
    --c-on-secondary: #000000;
}

/* Amarillo (Theme.Comparor.Amarillo) */
body.mode-light.theme-yellow {
    --c-primary: #fbc02d;          /* yellow_700 */
    --c-primary-variant: #fff176;  /* yellow_200 */
    --c-on-primary: #000000;       /* como en Android light */

    --c-secondary: #fff176;
    --c-secondary-variant: #fbc02d;
    --c-on-secondary: #000000;
}

/* Grises (Theme.Comparor.Grises) */
body.mode-light.theme-gray {
    --c-primary: #616161;          /* gray_700 */
    --c-primary-variant: #bdbdbd;  /* gray_200 */
    --c-on-primary: #ffffff;

    --c-secondary: #bdbdbd;
    --c-secondary-variant: #616161;
    --c-on-secondary: #000000;
}

/* Púrpuras (Theme.Comparor.Purpuras) */
body.mode-light.theme-purple {
    --c-primary: #8e24aa;          /* purple_700 */
    --c-primary-variant: #ce93d8;  /* purple_200 */
    --c-on-primary: #ffffff;

    --c-secondary: #ce93d8;
    --c-secondary-variant: #8e24aa;
    --c-on-secondary: #000000;
}

/* Naranjas (Theme.Comparor.Naranjas) */
body.mode-light.theme-orange {
    --c-primary: #f57c00;          /* orange_700 */
    --c-primary-variant: #ffcc80;  /* orange_200 */
    --c-on-primary: #ffffff;

    --c-secondary: #ffcc80;
    --c-secondary-variant: #f57c00;
    --c-on-secondary: #000000;
}

/* Marrones (Theme.Comparor.Marrones) */
body.mode-light.theme-brown {
    --c-primary: #5d4037;          /* brown_700 */
    --c-primary-variant: #bcaaa4;  /* brown_200 */
    --c-on-primary: #ffffff;

    --c-secondary: #bcaaa4;
    --c-secondary-variant: #5d4037;
    --c-on-secondary: #000000;
}

/* Rosas (Theme.Comparor.Rosas) */
body.mode-light.theme-pink {
    --c-primary: #c2185b;          /* pink_700 */
    --c-primary-variant: #f8bbd0;  /* pink_200 */
    --c-on-primary: #ffffff;

    --c-secondary: #f8bbd0;
    --c-secondary-variant: #c2185b;
    --c-on-secondary: #000000;
}

/* ============================
   PALETAS POR TEMA (NIGHT)
   ============================ */

/* Rojo Night */
body.mode-dark.theme-red {
    --c-primary: #b71c1c;          /* red_700 night */
    --c-primary-variant: #e57373;  /* red_200 night */
    --c-on-primary: #ffffff;

    --c-secondary: #e57373;
    --c-secondary-variant: #b71c1c;
    --c-on-secondary: #000000;
}

/* Azul Night */
body.mode-dark.theme-default {
    --c-primary: #0d47a1;          /* blue_700 night */
    --c-primary-variant: #64b5f6;  /* blue_200 night */
    --c-on-primary: #ffffff;

    --c-secondary: #64b5f6;
    --c-secondary-variant: #0d47a1;
    --c-on-secondary: #000000;
}

/* Verde Night */
body.mode-dark.theme-green {
    --c-primary: #1b5e20;          /* green_700 night */
    --c-primary-variant: #81c784;  /* green_200 night */
    --c-on-primary: #ffffff;

    --c-secondary: #81c784;
    --c-secondary-variant: #1b5e20;
    --c-on-secondary: #000000;
}

/* Amarillo Night */
body.mode-dark.theme-yellow {
    --c-primary: #f9a825;          /* yellow_700 night */
    --c-primary-variant: #ffd54f;  /* yellow_200 night */
    --c-on-primary: #ffffff;       /* como en tu tema Night */

    --c-secondary: #ffd54f;
    --c-secondary-variant: #f9a825;
    --c-on-secondary: #000000;
}

/* Grises Night */
body.mode-dark.theme-gray {
    --c-primary: #424242;          /* gray_700 night */
    --c-primary-variant: #9e9e9e;  /* gray_200 night */
    --c-on-primary: #ffffff;

    --c-secondary: #9e9e9e;
    --c-secondary-variant: #424242;
    --c-on-secondary: #000000;
}

/* Púrpuras Night */
body.mode-dark.theme-purple {
    --c-primary: #6a1b9a;          /* purple_700 night */
    --c-primary-variant: #ba68c8;  /* purple_200 night */
    --c-on-primary: #ffffff;

    --c-secondary: #ba68c8;
    --c-secondary-variant: #6a1b9a;
    --c-on-secondary: #000000;
}

/* Naranjas Night */
body.mode-dark.theme-orange {
    --c-primary: #e65100;          /* orange_700 night */
    --c-primary-variant: #ffb74d;  /* orange_200 night */
    --c-on-primary: #ffffff;

    --c-secondary: #ffb74d;
    --c-secondary-variant: #e65100;
    --c-on-secondary: #000000;
}

/* Marrones Night */
body.mode-dark.theme-brown {
    --c-primary: #4e342e;          /* brown_700 night */
    --c-primary-variant: #a1887f;  /* brown_200 night */
    --c-on-primary: #ffffff;

    --c-secondary: #a1887f;
    --c-secondary-variant: #4e342e;
    --c-on-secondary: #000000;
}

/* Rosas Night */
body.mode-dark.theme-pink {
    --c-primary: #880e4f;          /* pink_700 night */
    --c-primary-variant: #f06292;  /* pink_200 night */
    --c-on-primary: #ffffff;

    --c-secondary: #f06292;
    --c-secondary-variant: #880e4f;
    --c-on-secondary: #000000;
}

/* ============================
   ENLACE GENERAL / TIPOGRAFÍA
   ============================ */

body {
    background-color: var(--c-bg);
    color: var(--c-on-bg);
}

a {
    color: var(--c-primary);
    text-decoration-color: rgba(0,0,0,0); /* quita subrayado fuerte */
}

body.mode-dark a {
    color: var(--c-on-primary);
    text-decoration-color: var(--c-on-primary);
}

a:hover {
    color: var(--c-primary-variant);
    text-decoration-color: var(--c-primary-variant);
}

/* Para que el contenido "cajitas" use la superficie */
.content-box,
#productos {
    background-color: var(--c-surface);
    color: var(--c-on-surface);
    border-radius: .5rem;
}

/* ============================
   BUSCADOR (search-group)
   ============================ */

.search-group {
    background-color: var(--c-surface);
    border: 1px solid var(--c-primary-variant);
}

.search-group .input-group-text {
    background-color: var(--c-primary);
    color: var(--c-on-primary);
}

.search-group .input-group-text i {
    color: var(--c-on-primary);
}

.search-group .form-control {
    background-color: transparent;
    color: var(--c-on-surface);
}

/* Placeholder adaptado por modo */
body.mode-light .search-group .form-control::placeholder {
    color: rgba(0, 0, 0, 0.45);
}

body.mode-dark .search-group .form-control::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

/* ============================
   MIGAS / BOTONES SECUNDARIOS
   ============================ */

.breadcrumb {
    background-color: transparent;
    padding-left: 0;
    margin-bottom: .75rem;
}

.breadcrumb i {
    margin-top: -4px;
    margin-left: -7px;
    margin-right: 2px;
}

.breadcrumb .btn {
    padding-left: 15px;
    padding-right: 15px;
}

.breadcrumb .btn.btn-secondary {
    background-color: var(--c-primary);
    color: var(--c-on-primary);
    border-color: var(--c-primary);
    border-radius: 999px;    
}

.breadcrumb .btn.btn-secondary i {
    color: inherit;
}

.breadcrumb .btn.btn-secondary:hover {
    background-color: var(--c-primary-variant);
    border-color: var(--c-primary);
    color: var(--c-on-primary);
}

/* ============================
   BOTÓN "Categorías" (collapse)
   ============================ */

.btn-outline-secondary {
    color: var(--c-on-primary);
    border-color: var(--c-primary);
    background-color: var(--c-primary);
}

.btn-outline-secondary i {
    color: inherit;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background-color: var(--c-primary);
    color: var(--c-on-primary);
    border-color: var(--c-primary);
}

/* ============================
   LISTA DE CATEGORÍAS
   ============================ */

.list-group-item {
    background-color: var(--c-surface);
    color: var(--c-on-surface);
    border-color: rgba(0, 0, 0, 0.05);
}

body.mode-dark .list-group-item {
    border-color: rgba(255, 255, 255, 0.08);
}

.list-group-item .nav-link {
    color: var(--c-on-surface);
}

.list-group-item .nav-link i {
    margin-right: .35rem;
}

.list-group-item .nav-link:hover {
    color: var(--c-primary-variant);
}

/* ============================
   PRODUCTOS (cards)
   ============================ */

.product {
    background-color: var(--c-surface);
    color: var(--c-on-surface);
    border-radius: .5rem;
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: .5rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

body.mode-dark .product {
    border-color: rgba(255, 255, 255, 0.08);
}

.product:hover {
    border-color: var(--c-primary);
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.product-image {
    border-radius: .35rem;
    background-color: #ffffff;
}

/* Títulos */
.product-title a {
    color: var(--c-primary);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 600;
}

body.mode-dark .product-title a {
    color: var(--c-on-primary);
}

.product-title a:hover {
    color: var(--c-primary-variant);
}

body.mode-dark .product-title a:hover {
    color: var(--c-primary-variant);
}

/* Descripción */
.product-description {
    color: var(--c-on-surface);
    font-size: .75rem;
    line-height: 1.35;
    -webkit-line-clamp: 4;
}

/* ============================
   PAGINACIÓN
   ============================ */

.pagination .page-link {
    color: var(--c-primary);
    border-color: transparent;
}

.pagination .page-link:hover {
    color: var(--c-on-primary);
    background-color: var(--c-primary-variant);
    border-color: var(--c-primary-variant);
}

.pagination .page-item.active .page-link {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-on-primary);
}

/* Texto "Siguiente" */
.pagination .prevnext {
    font-weight: 500;
}

/* ============================
   PEQUEÑOS AJUSTES DE FONDO
   ============================ */

/* Para que el contenedor principal respete el fondo del body */
body > .container {
    background-color: transparent;
}

/* Si tienes cajas tipo .content-box ya existentes */
.content-box {
    padding: 1rem;
}

/* Opcional: resaltar iconos dentro de botones o enlaces primarios */
.btn i,
a.btn i {
    vertical-align: middle;
}

/* ============================
   BOTONES PRINCIPALES
   ============================ */

.btn-primary {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-on-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--c-primary-variant);
    border-color: var(--c-primary-variant);
    color: var(--c-on-primary);
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: rgba(127,127,127,0.5);
    border-color: rgba(127,127,127,0.5);
    color: var(--c-on-primary);
}

/* ============================
   BADGES / SUCCESS
   ============================ */

.badge {
    border-radius: 999px;
    font-weight: 500;
}

/* bg-success y text-success se ligan al tema actual */
.badge.bg-success {
    background-color: var(--c-secondary);
    color: #fff;
}

.text-success {
    color: var(--c-primary) !important;
}

body.mode-dark .text-success {
    color: var(--c-primary-variant) !important;
}

/* ============================
   TABS BOOTSTRAP
   ============================ */

.nav-tabs {
    border-bottom: 1px solid var(--c-primary-variant);
}

.nav-tabs .nav-link {
    color: var(--c-on-surface);
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: .5rem 1rem;
}

.nav-tabs .nav-link:hover {
    color: var(--c-primary);
    border-bottom-color: var(--c-primary-variant);
}

.nav-tabs .nav-link.active {
    color: var(--c-on-primary);
    background-color: transparent;
    border-bottom-color: var(--c-primary);
    font-weight: 600;
}

/* ============================
   TABLAS BOOTSTRAP
   ============================ */

.table {
    color: var(--c-on-surface);
    background-color: var(--c-surface);
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    background-color: transparent;
    border-color: rgba(0,0,0,0.05);
}

body.mode-dark .table > :not(caption) > * > * {
    border-color: rgba(255,255,255,0.08);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(0,0,0,0.02);
}

body.mode-dark .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255,255,255,0.03);
}

/* ============================
   CATEGORÍAS LATERALES
   ============================ */

.list-group-item .nav-link {
    color: var(--c-on-surface);
    display: flex;
    align-items: center;
    gap: .35rem;
}

.list-group-item .nav-link i {
    min-width: 1rem;
}

/* Categoría seleccionada */
.list-group-item .nav-link.nav-selected {
    color: var(--c-primary-variant);
    font-weight: 600;
}

.list-group-item .nav-link.nav-selected i {
    color: var(--c-primary);
}

/* ============================
   BLOQUES DE OFERTA
   ============================ */

.offer-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border-radius: .5rem;
    background-color: var(--c-surface);
    color: var(--c-on-surface);
    border: 1px solid rgba(0,0,0,0.05);
    margin-bottom: .5rem;
}

body.mode-dark .offer-item {
    border-color: rgba(255,255,255,0.08);
}

.offer-left img {
    margin-right: .35rem;
    vertical-align: middle;
}

.store-price {
    font-size: 1.5rem;
}

.offer-item .offer-title {
  max-height: 70px;
  overflow: hidden;
}