@charset "UTF-8";
/*
//══ 🅲🆂🆂 ═══════════════════════════════════════════════════════════════════
│  
│ 🩵 theme-colors.css — Configuracion de colores custom para todo Gemini
│
│ Carga recomendada (en template.php):
│   1) theme-colors.css   (Gemini)
│   2) all.css   (Limitless)
│   3) custom.css (Gemini) 
│
└─────────────────────────────────────────────────────────────────────────*/

 
/*────────────────────────────────────────────────────────
│ Root / Set Colors
└──────────────────────────────────────────────────────*/
:root {  
        
    /*── 🌈 Corporativos ──────────────────────────────
    │ Set Colores Corporativos
    └──────────────────────────────────────────────*/  
    /* --marca: #e6ca67;
    --complementario: #3b3a34;   */

    /*══ 〽️arca ───────────────────────────────────────────────────
    │ Variaciones de brillo/saturacion
    └──────────────────────────────────────────────────────────*/
    --marca-200: color-mix(in srgb, var(--marca) 55%, white);
    --marca-300: color-mix(in srgb, var(--marca) 70%, white);
    --marca-400: color-mix(in srgb, var(--marca) 85%, white);    
    --marca-500: var(--marca);    
    --marca-600: color-mix(in srgb, var(--marca) 85%, black);
    --marca-700: color-mix(in srgb, var(--marca) 70%, black); 
    --marca-800: color-mix(in srgb, var(--marca) 55%, black);
    
    /*══ ©️omplementario ──────────────────────────────────────────
    │ Variaciones de brillo/saturacion
    └──────────────────────────────────────────────────────────*/
    --complementario-200: color-mix(in srgb, var(--complementario) 55%, white);
    --complementario-300: color-mix(in srgb, var(--complementario) 70%, white);
    --complementario-400: color-mix(in srgb, var(--complementario) 85%, white);  
    --complementario-500: var(--marca);    
    --complementario-600: color-mix(in srgb, var(--complementario) 85%, black);
    --complementario-700: color-mix(in srgb, var(--complementario) 70%, black); 
    --complementario-800: color-mix(in srgb, var(--complementario) 55%, black);
     

    
    /*── 🌈 ──────────────────────────────────────────
    │ Set Colores Auxiliares
    └──────────────────────────────────────────────*/  
    --negro: #000000;
    --negro-400: #222222;
    --negro-300: #444444;
    --negro-200: #666666;
    --blanco: #ffffff;
    --blanco-600: #eeeeee;
    --blanco-700: #cccccc;
    --blanco-800: #aaaaaa;
 

    
 

    --teal: #26a69a;

    --green: #88ba00;
    --green-rgb: 136, 186, 0;
    
    --orange: rgb(255, 149, 0);
    --orange-rgb: 255, 149, 0; 
    
    --brown: #835322;
    --brown-rgb: 131, 83, 34;  
    
    --gold: #eeb544;
    --gold-rgb: 238, 181, 68;  
    
    --skin: #f3c481;
    --skin-rgb: 243, 196, 129;  


    --muted-xl: #eff0f6 !important;
    --muted-xl-rgb: 239, 240, 246 !important;
    --muted-l: #c6c9db !important;
    --muted-l-rgb: 198, 201, 219 !important;
    --muted: #9a9fbf !important;
    --muted-rgb: 154, 159, 191 !important;
    --muted-d: #707488 !important; 
    --muted-d-rgb: 112, 116, 136 !important;
     
 
    --bg-opacity: 1;
    --text-opacity: 1;

    
    --info-rgb: 44, 186, 204;
}
 
 

/*══ 〽️arca ══════════════════════════════════════════════════════════════════
║  
║ Clases  →  Color MARCA
║  
╚════════════════════════════════════════════════════════════════════════*/
/* #region   */ 

    /*────────────────────────────────────────
    │ Textos   →    
    └───────────────────────────────────────*/ 
    .text-marca-200 { color: var(--marca-200) !important; } 
    .text-marca-300 { color: var(--marca-300) !important; } 
    .text-marca-400 { color: var(--marca-400) !important; } 
    .text-marca     { color: var(--marca)     !important; }   /* Equivalente a -500 */
    .text-marca-600 { color: var(--marca-600) !important; } 
    .text-marca-700 { color: var(--marca-700) !important; } 
    .text-marca-800 { color: var(--marca-800) !important; } 

 
    /*────────────────────────────────────────
    │ Background   →    
    └───────────────────────────────────────*/ 
    .bg-marca     { background-color: rgba(var(--marca-rgb), var(--bg-opacity)) !important; }   /* Equivalente a -500 */    
    .bg-marca-200 { background-color: var(--marca-200) !important; } 
    .bg-marca-300 { background-color: var(--marca-300) !important; } 
    .bg-marca-400 { background-color: var(--marca-400) !important; } 
    .bg-marca-500 { background-color: rgba(var(--marca-rgb), var(--bg-opacity)) !important; }   /* Equivalente a -500 */    
    .bg-marca-600 { background-color: var(--marca-600) !important; } 
    .bg-marca-700 { background-color: var(--marca-700) !important; } 
    .bg-marca-800 { background-color: var(--marca-800) !important; } 

 
    /*────────────────────────────────────────
    │ Botones   →   button / .btn
    └───────────────────────────────────────*/  
    .btn-marca     { color: var(--blanco)    !important;  background: var(--marca)     !important; border-color: var(--marca)     !important;  }
    .btn-marca-200 { color: var(--negro)    !important;  background: var(--marca-200) !important; border-color: var(--marca-200) !important;  }
    .btn-marca-300 { color: var(--negro)    !important;  background: var(--marca-300) !important; border-color: var(--marca-300) !important;  }
    .btn-marca-400 { color: var(--negro)    !important;  background: var(--marca-400) !important; border-color: var(--marca-400) !important;  }
    .btn-marca-500 { color: var(--blanco)    !important;  background: var(--marca)     !important; border-color: var(--marca)     !important;  }
    .btn-marca-600 { color: var(--blanco)   !important;  background: var(--marca-600) !important; border-color: var(--marca-600) !important;  }
    .btn-marca-700 { color: var(--blanco)   !important;  background: var(--marca-700) !important; border-color: var(--marca-700) !important;  }
    .btn-marca-800 { color: var(--blanco)   !important;  background: var(--marca-800) !important; border-color: var(--marca-800) !important;  }
  
    .btn[class*="btn-marca"]:hover { background: var(--marca-600) !important; border-color: var(--marca-600) !important; }

 
    /*────────────────────────────────────────
    │ Borders   →    ⬆️➡️⬇️⬅️
    └───────────────────────────────────────*/ 
    .border-marca {
        --border-opacity: 1;
        border-color: rgba(var(--marca-rgb), var(--border-opacity)) !important; 
    }
    
    .border-marca-200 { border-color: var(--marca-200) !important; } 
    .border-marca-300 { border-color: var(--marca-300) !important; } 
    .border-marca-400 { border-color: var(--marca-400) !important; } 
    .border-marca-500 { border-color: var(--marca-500) !important; } 
    .border-marca-600 { border-color: var(--marca-600) !important; } 
    .border-marca-700 { border-color: var(--marca-700) !important; } 
    .border-marca-800 { border-color: var(--marca-800) !important; } 



/* #endregion */
/* Funciones  >  Crear Contenido */

  
/*══ ©️omplementario ════════════════════════════════════════════════════════
║  
║ Clases  →  Color COMPLEMENTARIO
║  
╚════════════════════════════════════════════════════════════════════════*/
/* #region   */ 

    /*────────────────────────────────────────
    │ Textos   →    
    └───────────────────────────────────────*/ 
    .text-complementario-200 { color: var(--complementario-200) !important; } 
    .text-complementario-300 { color: var(--complementario-300) !important; } 
    .text-complementario-400 { color: var(--complementario-400) !important; } 
    .text-complementario     { color: var(--complementario) !important; }   /* Equivalente a -500 */
    .text-complementario-600 { color: var(--complementario-600) !important; } 
    .text-complementario-700 { color: var(--complementario-700) !important; } 
    .text-complementario-800 { color: var(--complementario-800) !important; } 

 
    /*────────────────────────────────────────
    │ Background   →    
    └───────────────────────────────────────*/ 
    .bg-complementario     { background-color: rgba(var(--complementario-rgb), var(--bg-opacity)) !important; }   /* Equivalente a -500 */    
    .bg-complementario-200 { background-color: var(--complementario-200) !important; } 
    .bg-complementario-300 { background-color: var(--complementario-300) !important; } 
    .bg-complementario-400 { background-color: var(--complementario-400) !important; }  
    .bg-complementario-500 { background-color: rgba(var(--complementario-rgb), var(--bg-opacity)) !important; }   /* Equivalente a -500 */    
    .bg-complementario-600 { background-color: var(--complementario-600) !important; } 
    .bg-complementario-700 { background-color: var(--complementario-700) !important; } 
    .bg-complementario-800 { background-color: var(--complementario-800) !important; } 



    /*────────────────────────────────────────
    │ Botones   →   button / .btn
    └───────────────────────────────────────*/  
    .btn-complementario-200 { color: var(--blanco) !important;  background: var(--complementario-200) !important; border-color: var(--complementario-200) !important;  }
    .btn-complementario-300 { color: var(--blanco) !important;  background: var(--complementario-300) !important; border-color: var(--complementario-300) !important;  }
    .btn-complementario-400 { color: var(--blanco) !important;  background: var(--complementario-400) !important; border-color: var(--complementario-400) !important;  }
    .btn-complementario     { color: var(--blanco) !important;  background:     var(--complementario) !important; border-color:     var(--complementario) !important;  }
    .btn-complementario-600 { color: var(--blanco) !important;  background: var(--complementario-600) !important; border-color: var(--complementario-600) !important;  }
    .btn-complementario-700 { color: var(--blanco) !important;  background: var(--complementario-700) !important; border-color: var(--complementario-700) !important;  }
    .btn-complementario-800 { color: var(--blanco) !important;  background: var(--complementario-800) !important; border-color: var(--complementario-800) !important;  }
 
        
    .btn[class*="btn-complementario"]:hover{
        background: var(--complementario-400) !important;
        border-color: var(--complementario-400) !important;
    }


/* #endregion */
/* Funciones  >  Crear Contenido */

  

.btn[class*="btn-marca"],
.btn[class*="btn-complementario"]{
  transition: background-color .5s ease, border-color .5s ease, color .5s ease;
}

.btn[class*="btn-marca"]:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--marca) 35%, transparent);
}