:root {
    --background: 158 85% 3%;
    --foreground: 158 40% 95%;
    --card: 158 65% 8%;
    --card-foreground: 160 96% 87%;
    --popover: 160 67% 8%;
    --popover-foreground: 160 96% 87%;
    --primary: 158 60% 40%;
    --primary-foreground: 160 83% 4%;
    --secondary: 158 65% 19%;
    --secondary-foreground: 160 96% 87%;
    --muted: 160 67% 15%;
    --muted-foreground: 160 30% 65%;
    --accent: 158 95% 88%;
    --accent-foreground: 160 83% 4%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 160 96% 87%;
    --border: 158 50% 15%;
    --input: 158 50% 12%;
    --ring: 158 60% 40%;
    --radius: .75rem;
    --gradient-hero: linear-gradient(180deg, hsl(160 83% 4% / .3) 0%, hsl(160 83% 4% / .95) 100%);
    --glow-primary: 0 0 40px hsl(160 59% 40% / .3);
    --shadow-elegant: 0 10px 40px -10px hsl(160 83% 4% / .5);
    --transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1);
    
    --sidebar-background: 158 65% 10%;
    --sidebar-foreground: 158 40% 95%;
    --sidebar-primary: 158 60% 40%;
    --sidebar-primary-foreground: 158 85% 3%;
    --sidebar-accent: 158 65% 15%;
    --sidebar-accent-foreground: 158 40% 95%;
    --sidebar-border: 158 50% 15%;
    --sidebar-ring: 158 60% 40%;

    --gradient-card: linear-gradient(135deg, hsl(158 65% 8%) 0%, hsl(158 50% 6%) 100%);
    --gradient-primary: linear-gradient(135deg, hsl(158 60% 40%) 0%, hsl(158 70% 50%) 100%);
    --gradient-hover: linear-gradient(135deg, hsl(158 70% 12%) 0%, hsl(158 60% 10%) 100%);
}

/**
* Estilos para tags
*/
body {
    background-color: hsl(var(--background)) !important;
    color: hsl(var(--foreground)) !important;
    font-size: 1rem !important;
    font-family: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji" !important;
}

/**
Estilos para scroll
**/
::-webkit-scrollbar {
    display: block;
    width: 8px;
    height: 5px;
}
::-webkit-scrollbar-thumb {
    background-color: hsl(var(--secondary));
    border-radius: var(--radius);
} 
::-webkit-scrollbar-track {
    background-color: hsl(var(--background));
    border-radius: var(--radius);
}

/**
Clases para pla
**/
::placeholder {
    color: hsl(var(--muted-foreground)) !important;
}

/**
* Clases para text  
**/

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

.text-primary-foreground {
    color: hsl(var(--primary-foreground)) !important;
}

.text-foreground {
    color: hsl(var(--foreground)) !important;
}

.text-muted-foreground {
    color: hsl(var(--muted-foreground)) !important;
}

/**
* Clases para font size
*/
.text-sm {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
}
/*
* Clases para width
*/

.w-7 {
    width: 1.75rem;
}
.h-7 {
    height: 1.75rem;
}

.w-16 {
    width: 4rem !important;
}

/**
* Clases para height
*/
.h-16 {
    height: 4rem !important;
}

/**
* Clases para border
*/
.border-border{
    border-color:hsl(var(--border)) !important;
}

.border-border\/50 {
    border-color: hsl(var(--border) / .5) !important;
}

.border {
    border-bottom-width: 1px !important;
    border-bottom-style: solid !important;
    border-right-width: 1px !important;
    border-right-style: solid !important;
    border-top-width: 1px !important;
    border-top-style: solid !important;
    border-left-width: 1px !important;
    border-left-style: solid !important;
}

.border-05 {
    border-bottom-width: 0.5px !important;
    border-bottom-style: solid !important;
    border-right-width: 0.5px !important;
    border-right-style: solid !important;
    border-top-width: 0.5px !important;
    border-top-style: solid !important;
    border-left-width: 0.5px !important;
    border-left-style: solid !important;
}

.border-2 {
    border-bottom-width: 2px !important;
    border-bottom-style: solid !important;
    border-right-width: 2px !important;
    border-right-style: solid !important;
    border-top-width: 2px !important;
    border-top-style: solid !important;
    border-left-width: 2px !important;
    border-left-style: solid !important;
}
.border-b {
    border-bottom-width: 1px !important;
    border-bottom-style: solid !important;
}

.border-r {
    border-right-width: 1px !important;
    border-right-style: solid !important;
}

.border-t {
    border-top-width: 1px !important;
    border-top-style: solid !important;
}

.border-accent\/30{
    border-color: hsl(var(--accent) / .3) !important;
}

.border-accent\/20{
    border-color: hsl(var(--accent) / .2) !important;
}

.border-accent\/10{
    border-color: hsl(var(--accent) / .1) !important;
}


.border-primary {
    border-color: hsl(var(--primary)) !important;
}

.border-none {
    border-width: 0 !important;
}

/**
* Clases para background
*/
.bg-background {
    background-color: hsl(var(--background)) !important;
}

.bg-background-95 {
    background-color: hsl(var(--background) / .95) !important;
}

.bg-primary-20 {
    background-color: hsl(var(--primary) / .2);
}

.bg-secondary-100 {
    background-color: hsl(var(--secondary)) !important;
}



/**
Clases para card
**/
.bg-card-50 {
    background-color: hsl(var(--card) / .5) !important;
}

.bg-card {
    background-color: hsl(var(--card)) !important;
}

.bg-gradient-card {
    background: var(--gradient-card) !important;
}

.bg-accent\/10 {
    background-color: hsl(var(--accent) / .1) !important;
}

.bg-gradient-primary {
    background: var(--gradient-primary) !important;
}
/**
Clases para sidebar
**/
.bg-sidebar {
    background-color: hsl(var(--sidebar-background)) !important;
}

.border-sidebar-border {
    border-color: hsl(var(--sidebar-border)) !important;
}

.text-sidebar-foreground {
    color: hsl(var(--sidebar-foreground)) !important;
}

.text-sidebar-primary {
    color: hsl(var(--sidebar-primary)) !important;
}


/**
Clases para rounded 
**/
.rounded-lg {
    border-radius: var(--radius) !important;
}

.rounded-md {
    border-radius: calc(var(--radius) - 2px);
}

.rounded-full {
    border-radius: 9999px !important;
}

/**
Clases para hover
**/
.hover\:bg-sidebar-accent\/50:hover {
    background-color: hsl(var(--sidebar-accent) / .5) !important;
}

.hover\:text-primary-foreground:hover {
    color: hsl(var(--primary-foreground)) !important;
}

.hover-bg-secondary-50:hover {
    background-color: hsl(var(--secondary) / .5) !important;
}

.hover-text-foreground:hover {
    color: hsl(var(--foreground)) !important;
}
/**
Clases para stats card
**/
.stats-card {
    cursor: pointer !important;
    border-radius: var(--radius) !important;
}


.stats-card {
    border-width: 1px !important;
    border-color: hsl(var(--border) / .5) !important;
    background-color: hsl(var(--card) / .4) !important;
        /* --tw-shadow-color: var(--shadow-card);
        --tw-shadow: var(--tw-shadow-colored);
        --tw-backdrop-blur: blur(24px);
        -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
        backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
        transition-property: all; */
    transition-timing-function: cubic-bezier(.4,0,.2,1) !important;
    transition-duration: .3s !important;
    animation-duration: .3s !important;
}


.stats-card:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(0, 0) rotate(0) skew(0deg) skewY(0deg) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    /* --tw-shadow-color: var(--shadow-elevated);
    --tw-shadow: var(--tw-shadow-colored); */
}

/**Clases para input
**/
.bg-input {
    background-color: hsl(var(--input)) !important;
}

.focus\:ring-2:focus { 
    --tw-ring-color: hsl(var(--ring));
    box-shadow:0 0 0 2px hsl(var(--background)), 0 0 0 .25rem hsl(var(--ring)) !important;
}

/**Clases para transform hover  
**/
.hover-translate-primary:hover {
    transform: translateX(5px) !important;
}

/**
Clases para animaciones
**/
@keyframes fade-in {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.animate-fade-in {
    animation: fade-in .5s ease-out;
}

/** ============================================ 
   Sobreescritura de clases personalizadas 
   definida en index.css
 ============================================ */

.navbar-nav .nav-link{
color: hsl(var(--foreground)) !important;
}


/* ============================================
   ESTILOS DE PAGINACIÓN MODERNOS
   ============================================ */

   .pagination {
    gap: 0.25rem !important;
    margin-bottom: 0;
}

.pagination .page-link {
    color: var(--campo-green-primary) !important;
    background-color: transparent !important;
    border: 1px solid var(--border) !important;
    border-radius: 0.375rem !important;
    padding: 0.5rem 0.75rem !important;
    transition: all 0.2s ease !important;
    font-weight: 500;
}

.pagination .page-link:hover {
    background-color: var(--campo-green-lightest) !important;
    border-color: var(--campo-green-primary) !important;
    color: var(--campo-green-secondary) !important;
}

.pagination .page-item.active .page-link {
    background-color: var(--campo-green-primary) !important;
    border-color: var(--campo-green-primary) !important;
    color: white !important;
    font-weight: 600;
}

.pagination .page-item.disabled .page-link {
    color: var(--muted-foreground) !important;
    background-color: transparent !important;
    border-color: var(--border) !important;
    opacity: 0.6;
}

/* Texto informativo de paginación */
.pagination + nav p,
nav p.small {
    color: var(--muted-foreground) !important;
}

nav p.small .fw-semibold {
    color: var(--foreground) !important;
}

/* Responsive para paginación móvil */
@media (max-width: 576px) {
    .pagination .page-link {
        padding: 0.375rem 0.5rem !important;
        font-size: 0.875rem;
    }
}


/* ============================================
   ESTILOS DE QUILL.JS
   ============================================ */

/* Quill.js styling */
#description-editor {
    border-width: 1px;
    border-color:hsl(var(--border)) !important;
    border-radius: calc(var(--radius) - 2px);
}

#description-editor .ql-toolbar {
    border-top: 1px solid #ced4da;
    border-left: 1px solid #ced4da;
    border-right: 1px solid #ced4da;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}

#description-editor .ql-container {
    border-bottom: 1px solid #ced4da;
    border-left: 1px solid #ced4da;
    border-right: 1px solid #ced4da;
    border-bottom-left-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

#description-editor .ql-editor {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
}

#description-editor .ql-editor.ql-blank::before {
    color: #6c757d;
    font-style: normal;
}

.ql-editor p, .ql-editor ol, .ql-editor ul, .ql-editor pre, .ql-editor blockquote, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6 {
    color: hsl(var(--foreground)) !important;
}

.ql-toolbar.ql-snow{
    color: hsl(var(--foreground)) !important;
    border-color:hsl(var(--border)) !important;
    border-radius: calc(var(--radius) - 2px);
    border-width: 1px;
}

.ql-snow .ql-stroke {
    color: hsl(var(--foreground)) !important;
    stroke: hsl(var(--foreground)) !important;
}



/** ============================================ 
   Estilos para corrector ortográfico en inputs y textareas
   ============================================ */
/* Estilos para corrector ortográfico - mantener color del texto consistente */
input::spelling-error,
textarea::spelling-error,
input::-webkit-spelling-error,
textarea::-webkit-spelling-error {
    color: hsl(var(--foreground)) !important;
    -webkit-text-fill-color: hsl(var(--foreground)) !important;
}

input::grammar-error,
textarea::grammar-error,
input::-webkit-grammar-error,
textarea::-webkit-grammar-error {
    color: hsl(var(--foreground)) !important;
    -webkit-text-fill-color: hsl(var(--foreground)) !important;
}



/** ============================================ 
   Estilos para autofill en inputs y textareas
   ============================================ */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px hsl(var(--input)) inset !important;
  box-shadow: 0 0 0 1000px hsl(var(--input)) inset !important;
  -webkit-text-fill-color: hsl(var(--foreground)) !important;
  color: hsl(var(--foreground)) !important;
  background-color: hsl(var(--input)) !important;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: hsl(var(--foreground)) !important;
}