/* Multipaste VIP v1.0 - Blue Theme with Dark Mode - FIXED */

/* Variables CSS para temas */
:root {
    --primary-color: #3B82F6;       /* Azul moderno y suave */
    --primary-dark: #2563EB;
    --primary-light: #93C5FD;
    --secondary-color: #1E40AF;
    --accent-color: #60A5FA;
    --bg-color: #F9FAFB;
    --text-color: #374151;          /* Gris elegante */
    --border-color: #D1D5DB;
    --form-bg: #F3F4F6;
    --header-bg: #3B82F6;
    --header-gradient: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    --nav-bg: #2563EB;
    --nav-gradient: linear-gradient(135deg, #2563EB 0%, #1E3A8A 100%);
    --sidebar-title-bg: #3B82F6;
    --button-bg: #2563EB;
    --link-color: #3B82F6;
    --link-hover: #1D4ED8;
    --shadow-color: rgba(59, 130, 246, 0.2);
    --input-bg: #ffffff;
    --input-text: #1F2937;
}

/* Tema oscuro*/
[data-theme="dark"] {
    --primary-color: #60A5FA;
    --primary-dark: #3B82F6;
    --primary-light: #BFDBFE;
    --secondary-color: #1E3A8A;
    --accent-color: #93C5FD;
    --bg-color: #111827;
    --text-color: #E5E7EB;
    --border-color: #1F2937;
    --form-bg: #1E293B;
    --header-bg: #1E3A8A;
    --header-gradient: linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 100%);
    --nav-bg: #1E3A8A;
    --nav-gradient: linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 100%);
    --sidebar-title-bg: #1D4ED8;
    --button-bg: #1D4ED8;
    --link-color: #93C5FD;
    --link-hover: #BFDBFE;
    --shadow-color: rgba(147, 197, 253, 0.2);
    --input-bg: #2d3d53;
    --input-text: #E5E7EB;
}


/* Reset browser styles */
* {margin: 0; padding: 0}
html {min-height: 100%; padding-bottom: 1px; overflow: scroll;}
body {background: var(--bg-color); color: var(--text-color); font: 0.75em/1.5 "Arial", "Helvetica", sans-serif; transition: all 0.3s ease;}
[class] {list-style: none; padding: 8px}
h1, h2, h3, h4, h5, h6 {font-size: 1em; color: var(--text-color);}
dt {font-weight: 700; color: var(--text-color);}
table {border-collapse: collapse}
img {border: none; vertical-align: middle}
a {color: var(--link-color); text-decoration: none; outline: none; cursor: pointer; transition: color 0.3s ease;}
a:hover {color: var(--link-hover); text-decoration: underline}
textarea, input, select, option, optgroup, button {font: 1em "Arial", "Helvetica", sans-serif; color: var(--input-text);}
button, [type="radio"], [type="checkbox"], [type="submit"], [type="button"], [type="reset"], label[for], select {cursor: pointer}
input, select, textarea {outline: none}
fieldset {overflow: hidden; border: none;}
legend {display: none;}

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"]>input[type="button"]::-moz-focus-inner {padding: 0; border: none}

/* Global Styles */
h1 {margin: 0 0 10px; color: var(--primary-color); font: normal 2.5em "Arial",sans-serif;}
h2 {margin: 1em 0; padding-bottom: 5px; color: var(--text-color); font: normal 2em "Arial",sans-serif;}
h3 {margin: 1em 0 0; font: normal 1.75em "Arial",sans-serif; color: var(--text-color);}
h4 {margin: 1em 0 0; font: normal 1.5em "Arial",sans-serif; color: var(--text-color);}
h5 {margin: 1em 0 0; font-weight: normal 1.25em "Arial",sans-serif; color: var(--text-color);}
h6 {margin: 1em 0 0; font: 1.167em "Arial",sans-serif; color: var(--text-color);}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {font-family: "Arial",sans-serif; text-decoration: none; color: inherit;}
h2 a {font-family: "Arial",sans-serif;}
h2 a:hover {color: var(--text-color); text-decoration: none;}
blockquote {margin: 1.5em 0; padding: 10px 20px 10px 70px; border: 1px solid var(--border-color); border-radius: 5px; background: var(--form-bg) url("images/quotes.png") 15px 15px no-repeat; font-style: italic; color: var(--text-color);}
sub, sup {line-height: 1em;}
ul li, ol li {margin: 5px 20px; color: var(--text-color);}
dl {overflow: hidden; margin: 1em 0; }
dt {float: left; clear: left; width: 150px; margin: 0 0 1em; padding: 0; font-weight: bold; color: var(--text-color);}
dd {width: 500px; margin: 0 0 1em 150px; color: var(--text-color);}
p {margin: 1em 0; color: var(--text-color);}
table {margin: 1em auto; border: 1px solid var(--border-color); border-radius: 5px; }
table th, table th[class] {padding: 5px 10px; border: 1px solid var(--border-color); background: var(--form-bg); color: var(--text-color);}
table td, table td[class] {padding: 5px 10px; border: 1px solid var(--border-color); color: var(--text-color);}
table tr.alternate td {background: var(--form-bg);}

form, form[class] {margin: 1.5em 0; padding: 10px 20px; border: 1px solid var(--border-color); border-radius: 5px; background: var(--form-bg);}
label {float: left; clear: left; width: 150px; padding: 5px 0; font-weight: bold; color: var(--text-color);}
input, select, select[class], textarea {width: 300px; margin: 5px 0; padding: 5px 10px; border: 1px solid var(--border-color); border-radius: 3px; background: var(--input-bg); color: var(--input-text); vertical-align: middle; }
select option {padding: 0 5px; background: var(--input-bg); color: var(--input-text);}
input[type="radio"], input[type="checkbox"], input[type="submit"] {width: auto; border: none; background: none;}
span.required {padding: 0 5px; color: var(--primary-color); font-weight: bold; font-size: 1.333em;}
textarea {width: 95%; min-width: 95%; max-width: 95%;}
p.form-submit, p.form-allowed-tags {margin-left: 150px;}
button, input[type="submit"] {height: 25px; padding: 0 15px; border:none; border-radius: 3px; background: var(--button-bg); color: #fff; font: normal 1.25em/25px "Arial",sans-serif; vertical-align: middle; transition: background 0.3s ease;}
button:hover, input[type="submit"]:hover {background: var(--primary-dark);}
.searchform button {overflow: hidden; width: 30px; margin: 0 0 0 5px; padding: 0; background: url("images/button-search.png") 0 0 no-repeat; text-indent: -500em;}

/* Main Layout */
body {min-width: 980px; background: var(--bg-color);}

.header {border-bottom: 1px solid #707070; background: var(--header-gradient);}
.header>div {overflow: hidden; width: 960px; margin: 0 auto; padding: 15px 0;}
.header p {margin: 0;}
.header p.title {margin: 15px 0 0; padding: 0; color: #fff; font: normal 3em/1em "Arial",sans-serif; text-shadow: #000 0 0 2px;}
.header p.title a {color: #fff; font-family: "Arial",sans-serif;}
.header p.title a:hover {color: #eee; text-decoration: none;}
.header p.tagline {margin: 0 0 25px; padding: 5px 0; color: #fff; font: normal 1.5em "Arial",sans-serif; text-shadow: #000 0 0 2px;}
.header form {float: right; width: 223px; height: 35px; margin: 25px 0 0 50px; padding: 0; border: none; background: url("images/search.png"); text-align: center;}
.header form input {width: 155px;}

.nav {width: 950px; margin: -20px auto 0; padding-bottom: 12px; background: url("images/menu-shadow.png") center bottom no-repeat;}
.nav>div {width: 940px; margin: 0 auto; padding: 0 10px; border-radius: 5px; background: var(--nav-gradient);}
.nav ul.menu {list-style: none; margin: 0; padding: 0; min-height: 30px; font-size: 1.167em;}
.nav ul.menu>li {float: left; position: relative; overflow: hidden; height: 30px; margin: 0; padding: 0; border-left: 1px solid var(--secondary-color); border-right: 1px solid var(--primary-dark);}
.nav ul.menu>li:hover {overflow: visible; z-index: 150;}
.nav ul.menu>li>a {float: left; height: 30px; padding: 0 15px; background: url("images/mm-link.png") left -50px repeat-x; color: #fff; font-family: "Arial",sans-serif; line-height: 30px; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.30);}
.nav ul.menu>li>a:hover, .nav ul.menu>li:hover>a, .nav ul.menu>li.current-menu-item>a, .nav ul.menu>li.current_page_item>a {height: 30px; padding: 0 15px; background-position: left center; color: #fff; line-height: 30px; text-decoration: none;}
.nav ul.menu>li ul {position: absolute; left: 0; top: 30px; width: 200px; list-style: none; margin: 0; background: var(--nav-bg); font-size: 0.8em;}
.nav ul.menu>li ul li {float: none; position: relative; overflow: hidden; margin: 0; padding: 0;}
.nav ul.menu>li ul li:hover {overflow: visible;}
.nav ul.menu>li ul li a {display: block; padding: 5px 15px; border-bottom: 1px solid var(--primary-light); color: #fff; font-family: "Arial",sans-serif; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.30);}
.nav ul.menu>li ul li a:hover, .nav ul.menu>li ul li:hover>a {background: var(--primary-color); color: #fff; text-decoration: none;}
.nav ul.menu>li ul li:first-child>a {border-top: none;}
.nav ul.menu>li ul li ul {top: 0; left: 200px; font-size: 1em;}

.content {overflow: hidden; width: 970px; margin: 0 auto; padding: 20px 0;}
.main {float: left; overflow: hidden; width: 670px;}
.main>h1 {margin: 0 20px 10px;}
.main.post {width: 630px;}
.main.post>h1 {margin: 0 0 10px;}
.sidebar {float: right; width: 290px;}

.footer {width: 960px; margin: 0 auto; padding: 0 0 20px;}
.footer .nav {margin: 0; padding-bottom: 13px; background: url("images/footer-shadow.png") center bottom no-repeat;}
.footer p {margin: 0; color: var(--text-color); font-size: 0.917em; line-height: 1.5em; text-align: center;}
.footer p a {color: var(--text-color);}

/* sidebar */
.widget {margin-bottom: 1.5em; padding: 6px 20px; background: url("images/sidebox.png") center top no-repeat;}
.widget select {width: 230px; margin: 5px 0;}
.sidebar h3 {margin: 0 -15px 15px; padding: 0 15px; border-radius: 5px 5px 0 0; background: var(--sidebar-title-bg) url("images/sidebox-title.png") top repeat-x; color: #fff; font: normal 1.25em/30px "Arial", sans-serif; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.30);}
.sidebar ul {list-style: none; margin: 0; padding: 0;}
.sidebar ul li {margin: 0; padding: 5px 0; border-top: 1px solid var(--border-color); color: var(--text-color);}
.sidebar ul li.current-menu-item>a, .sidebar ul li.current_page_item>a, .sidebar ul li.current-cat>a,
.sidebar ul li.current-menu-item>a:visited, .sidebar ul li.current_page_item>a:visited, .sidebar ul li.current-cat>a:visited {font-weight: bold; color: var(--text-color);}
.sidebar ul li a {color: var(--primary-color);}
.sidebar ul li a:hover {color: var(--link-hover); text-decoration: none;}
.sidebar ul li a:visited, .sidebar .tagcloud a:visited {color: var(--primary-light);}
.sidebar ul li ul {margin: 5px 0 -5px;}
.sidebar ul ul li {padding-left: 15px;}
.sidebar ul ul ul li {padding-left: 30px;}

.sidebar form {width: 260px; margin: 15px 0 0; padding: 0; border: none; background: none; }
.sidebar form input {width: 195px;}

/* misc */
.clear {height: 0; margin: 0; padding: 0; clear: both; float: none; overflow: hidden; border: none;}
.alignleft {float: left; margin: 5px 15px 5px 0; padding: 0; }
.alignright {float: right; margin: 5px 0 5px 15px; padding: 0; }
.aligncenter {display: block; margin: 1em auto; text-align: center;}
.wp-caption-text {margin: 0.5em 0; color: var(--text-color); font-size: 0.917em;}
.nocomments {clear: both;}
img.size-thumbnail {margin: 5px;}
a.post-edit-link {font-size: 0.5em;}
img {margin: 0; max-width: 630px; height: auto;}
img.attachment-post-thumbnail, img.attachment-thumbnail {padding: 2px; border: 1px solid var(--border-color); border-radius: 5px; }
a:hover img.attachment-post-thumbnail, a:hover img.attachment-thumbnail {border-color: var(--link-hover);}
embed {max-width: 630px;}

p.pagination {overflow: hidden; clear: both; }
p.pagination a {height: 22px; background: url("images/icons.png") no-repeat; font: normal 1.083em/22px "Arial",sans-serif;}
p.pagination a:hover {color: var(--text-color); text-decoration: none;}
p.pagination .prev a {float: left; padding: 0 0 0 25px; background-position: 0 -140px;  }
p.pagination .next a {float: right; padding: 0 25px 0 0; background-position: 100% -120px;}
p.pages {clear: both;}

p label {display: inline; margin-bottom: 0; color: var(--text-color);}
.main h3, .main h2 {clear: both;}
p.comment-form-comment label {display: block; float: left;}

.jdbtn {
height: 35px !important;
width: 300px !important;
border: 1px solid !important;
color: var(--input-text) !important;
background: var(--input-bg) !important;
}

.jd {
width: 300px;
background: none !important;
margin-bottom: -3px !important;
margin-top: 10px !important;
color: var(--text-color);
}

.welcomeuser {
padding: 2px;
width: 700px;
margin: auto;
border: 1px solid var(--border-color);
border-radius: 5px;
color: #fff;
background: var(--primary-color);
text-align: center;
}

.loginlabel {
    width: 70px;
    color: var(--text-color);
}

.vipbbcodebuton {
    padding: 0 15px !important;
}

.vip{
    border: 1px solid var(--border-color);
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    background: var(--form-bg);
    color: var(--text-color);
}

/* Link with Favicon - Redesigned */
.link-with-favicon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.375rem 0;
    transition: all 0.2s ease-in-out;
    border-radius: 0.25rem;
    font-weight:bold;
}

.link-with-favicon:hover {
    transform: translateX(2px);
}

.favicon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.link-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
/* Theme Toggle Button */
.theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 2px 10px var(--shadow-color);
    transition: all 0.3s ease;
    z-index: 1000;
}

.theme-toggle:hover {
    background: var(--primary-dark);
    transform: scale(1.05);
}