:root {
  --bg-main: #ffffff;
  --bg-card: #ffffff;
  --text-main: #363636;
  --text-muted: #7a7a7a;
  --border: #dbdbdb;
  --navbar-bg: #ffffff;
  --navbar-text: #363636;
  --navbar-border: #dbdbdb;
  --panel-bg: #ffffff;
  --panel-text: #363636;
  --panel-muted: #7a7a7a;
  --panel-inner-bg: #f5f5f5;
  --default-text-color: #5a9bc5;
  --default-text-color-hover: #fa1977;
  --bulma-danger-h: 0;
  --bulma-danger-s: 100%;
  --bulma-danger-l: 50%;
  --bulma-warning-h: 16;
  --bulma-warning-s: 100%;
  --bulma-warning-l: 59%;
  --bulma-warning-light-l: 73%;
  --bg-navbar: hsl(233deg, 0%, 83%);
}

[data-theme="dark"] {
  --bg-main: #0f172a;
  --bg-card: #020617;
  --text-main: #e5e7eb;
  --text-muted: #9ca3af;
  --border: #1e293b;
  --navbar-bg: #0f172a;
  --navbar-text: #e5e7eb;
  --navbar-border: #1e293b;
  --panel-bg: #020617;
  --panel-text: #e5e7eb;
  --panel-muted: #9ca3af;
  --panel-inner-bg: #020617;
  --default-text-color: hsl(183, 98%, 55%);
  --default-text-color-hover: hsl(335, 96%, 54%);
  --bg-navbar: #353a46;
}

html,
body {
  background-color: var(--bg-main);
  color: var(--text-main);
}

.section,
.hero {
  background-color: transparent;
}

.box,
.card {
  background-color: var(--bg-card);
  color: var(--text-main);
  border-color: var(--border);
}

.has-background-degradado {
  position: relative;
  overflow: hidden;
}

.has-background-degradado::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><defs><linearGradient id='g' x1='0' x2='1'><stop stop-color='%230ea5e9'/><stop offset='1' stop-color='%2322d3ee'/></linearGradient></defs><circle cx='100' cy='100' r='100' fill='url(%23g)'/></svg>");
  background-repeat: no-repeat;
  background-size: 41rem 45rem;
  background-position: center -20rem top -20rem;
  /* transform: rotate(12deg);  */
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

.has-background-degradado > * {
  position: relative;
  z-index: 1;
}

.navbar {
  background-color: var(--navbar-bg);
  color: var(--navbar-text);
  border-bottom: 1px solid var(--navbar-border);
}
/* Nabvar styles */
.navbar-item,
.navbar-link {
  color: var(--navbar-text);
}

.navbar-item:hover,
.navbar-link:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.navbar-item:hover {
    color: var(--default-text-color);
}
a.navbar-item.is-active {
  background-color: var(--bg-navbar);
  color: var(--default-text-color) !important;
}
/* links */
.link-item {
    color: var(--default-text-color);
}

.link-item:hover {
  color: var(--default-text-color-hover) !important
}

.has-border-top {
  border-top: 1px solid var(--border); /* color estilo slate-800 */
}
/* icons */
.tech-icons i {
  font-size: 2.6rem;
  color: var(--default-text-color);
  transition: transform 0.2s ease, color 0.2s ease;
}

.tech-icons i:hover {
  color: var(--default-text-color-hover) !important; /* Color secundario del sitio */
  transform: scale(1.1);
}

.tag.is-dark {
  background-color: #1e293b !important;
  border: 1px solid #334155;
  color: #e2e8f0;
}

.servicio {
  transition: all 0.3s ease;
  cursor: pointer;
  padding: 2rem;
}

.servicio:hover {
  color: var(--default-text-color);
  border-radius: 3rem;
  background-color: var(--panel-inner-bg);
  /* border-color: black !important; */
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.2);
}

.tech-icons
.tech-icon {
  width: 2.6rem;      /* mismo tamaño que devicon */
  height: 2.6rem;
  color: var(--default-text-color);   /* color primario del sitio */
  display: inline-block;
}

.tech-icon:hover {
  color: var(--default-text-color-hover) !important;
}

.icon-exterro {
  width: 2.6rem;      /* mismo tamaño que devicon */
  height: 2.6rem;
  background-image: url(../img/ftk_imager_1.png);   /* mismo color que .has-text-info */
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  /* https://www.exterro.com/*/
}

.icon-exterro:hover {
  width: 2.6rem;      /* mismo tamaño que devicon */
  height: 2.6rem;
  z-index: 1;
  background-image: url(../img/ftk_imager_2.png);   /* mismo color que .has-text-info */
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
}

.icon-autopsy {
  width: 2.6rem;      /* mismo tamaño que devicon */
  height: 2.6rem;
  background-image: url(../img/autopsy.png);   /* mismo color que .has-text-info */
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  /* https://www.autopsy.com/*/
}

.icon-autopsy:hover {
  width: 2.6rem;      /* mismo tamaño que devicon */
  height: 2.6rem;
  z-index: 1;
  background-image: url(../img/autopsy_1.png);   /* mismo color que .has-text-info */
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
}

/* panels */

.theme-panel {
  background-color: var(--panel-bg);
  color: var(--panel-text);
}

.theme-title {
  color: var(--panel-text);
}

.theme-text {
  color: var(--panel-text);
}

.theme-muted {
  color: var(--panel-muted);
}

.theme-stat {
  background-color: var(--panel-inner-bg);
}

.theme-aux-text {
  color: var(--default-text-color);
}

.theme-aux-text-second {
  color: var(--default-text-color-hover);
}

/* theme dark */
[data-theme="dark"] .navbar-item:hover,
[data-theme="dark"] .navbar-link:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

[data-theme="light"].has-text-danger { color: hsl(0, 100%, 50%) !important; }
[data-theme="light"].has-text-warning { color: hsl(16, 100%, 63%) !important; }
[data-theme="light"].has-text-warning-light { color: hsl(39, 100%, 50%) !important; }