:root {
  /* Colores generales */
  --color-bg: white;
  --color-title: #004e98;
  --color-text: #333;
  --color-border: #999;
  --color-btn-text: #333;
  --color-bg-button: #eee;
  --color-bg-button-hover: #eee;
  --color-font-weight-button: bold;

  /* Sidebar */
  --sidebar-bg: #f4f4f4;
  --sidebar-border: #ccc;
  --sidebar-text: #333;

  /* Links */
  --link-color: #0455eb;
  --link-hover-color: #003cac;

  --btn-contact-bg: #0455eb;
  --btn-contact-text: white;
  --btn-contact-hover-bg: #36558f;
  --btn-contact-hover-text: white;

  --card-bg: #f9f9f9;
  --card-title: #0068c9;
  --card-bg-hover: #003d76;
  --card-text-hover: white;

  --badge-text: white;
}

body.dark-mode {
  --color-bg: #121212;
  --color-title: #2787e0;
  --color-text: #e0e0e0;
  --color-border: #555;
  --color-btn-text: #e0e0e0;
  --color-bg-button: #333;
  --color-bg-button-hover: #333;
  --color-font-weight-button: bold;

  --sidebar-bg: #222;
  --sidebar-border: #444;
  --sidebar-text: #e0e0e0;

  --link-color: #008cdd;
  --link-hover-color: #0072b5;

  --btn-contact-bg: #008cdd;
  --btn-contact-text: white;
  --btn-contact-hover-bg: #0072b5;
  --btn-contact-hover-text: white;

  --card-bg: #333;
  --card-title: #408de0;
  --card-bg-hover: var(--color-bg);
  --card-text-hover: white;

  --card-glow: var(--link-color);

  --badge-text: #161442;
}

body.high-contrast {
  --color-bg: black;
  --color-title: white;
  --color-text: white;
  --color-border: yellow;
  --color-border2: yellow;
  --color-focus: blue;
  --color-btn-text: yellow;
  --color-bg-button: black;
  --color-bg-button-hover: black;
  --color-font-weight-button: bolder;

  --sidebar-bg: black;
  --sidebar-border: yellow;
  --sidebar-text: white;

  --link-color: blue;
  --link-hover-color: #0000b5;

  --btn-contact-bg: black;
  --btn-contact-text: white;
  --btn-contact-hover-bg: blue;
  --btn-contact-hover-text: white;

  --card-bg: black;
  --card-title: blue;
  --card-bg-hover: var(--color-bg);
  --card-text-hover: white;

  --card-glow: var(--link-color);

  --badge-text: white;
}

body.protanopia {
  --color-bg: #f5f7fa;
  --color-title: #006699;
  --color-text: #333;
  --color-border: #666;
  --color-btn-text: #333;
  --color-bg-button: #d1e0e0;
  --color-bg-button-hover: #a3c2c2;
  --color-font-weight-button: bold;

  --sidebar-bg: #dde7eb;
  --sidebar-border: #aabbcc;
  --sidebar-text: #333;

  --link-color: #004466;
  --link-hover-color: #002233;

  --btn-contact-bg: #006699;
  --btn-contact-text: white;
  --btn-contact-hover-bg: #004b71;
  --btn-contact-hover-text: white;

  --card-bg: #d1e0e0;
  --card-title: #006699;
  --card-bg-hover: #659797;
  --card-text-hover: white;

  --badge-text: white;
}

body.protanopia-dark {
  --color-bg: #121a1f;
  --color-title: #74aabb;
  --color-text: #a3c2c2;
  --color-border: #446677;
  --color-btn-text: #a3c2c2;
  --color-bg-button: #335566;
  --color-bg-button-hover: #557799;
  --color-font-weight-button: bold;

  --sidebar-bg: #203040;
  --sidebar-border: #557799;
  --sidebar-text: #a3c2c2;

  --link-color: #a3c2c2;
  --link-hover-color: #cee6f6;

  --btn-contact-bg: #5c8794;
  --btn-contact-text: white;
  --btn-contact-hover-bg: #74aabb;
  --btn-contact-hover-text: black;

  --card-bg: #335566;
  --card-title: #74aabb;
  --card-bg-hover: var(--color-bg);
  --card-text-hover: white;

  --card-glow: var(--link-color);

  --badge-text: #335566;
}

body.protanopia-contrast {
  --color-bg: black;
  --color-title: #00ffff;
  --color-text: #e0fffc;
  --color-border: #00ffff;
  --color-border2: #00ffff;
  --color-focus: #00ffff;
  --color-btn-text: #00ffff;
  --color-bg-button: black;
  --color-bg-button-hover: #00ffff;
  --color-font-weight-button: bolder;

  --sidebar-bg: black;
  --sidebar-border: #00ffff;
  --sidebar-text: #00ffff;

  --link-color: #00ffff;
  --link-hover-color: #003333;

  --btn-contact-bg: black;
  --btn-contact-text: white;
  --btn-contact-hover-bg: #00ffff;
  --btn-contact-hover-text: black;

  --card-bg: black;
  --card-title: #00ffff;
  --card-bg-hover: var(--color-bg);
  --card-text-hover: white;

  --card-glow: var(--link-color);
  
  --badge-text: black;
}

body.deuteranopia {
  --color-bg: #f7f9f9;
  --color-title: #003366;
  --color-text: #444;
  --color-border: #666;
  --color-btn-text: #222;
  --color-bg-button: #bcd1c9;
  --color-bg-button-hover: #8aa6a1;
  --color-font-weight-button: bold;

  --sidebar-bg: #c0d0ca;
  --sidebar-border: #8ca59c;
  --sidebar-text: #222;

  --link-color: #001933;
  --link-hover-color: #000d1a;

  --btn-contact-bg: #004385;
  --btn-contact-text: white;
  --btn-contact-hover-bg: #003366;
  --btn-contact-hover-text: white;

  --card-bg: #bcd1c9;
  --card-title: #004385;
  --card-bg-hover: #8aa6a1;
  --card-text-hover: white;
  
  --badge-text: white;
}

body.deuteranopia-dark {
  --color-bg: #182021;
  --color-title: #7eb1bf;
  --color-text: #afcfcd;
  --color-border: #4c7c7c;
  --color-btn-text: #a1b2b1;
  --color-bg-button: #4b6867;
  --color-bg-button-hover: #679088;
  --color-font-weight-button: bold;

  --sidebar-bg: #355151;
  --sidebar-border: #578181;
  --sidebar-text: #a1b2b1;

  --link-color: #77b4b4;
  --link-hover-color: #82a4b1;

  --btn-contact-bg: #5d8590;
  --btn-contact-text: black;
  --btn-contact-hover-bg: #82a4b1;
  --btn-contact-hover-text: black;

  --card-bg: #4b6867;
  --card-title: #7eb1bf;
  --card-bg-hover: var(--color-bg);
  --card-text-hover: white;

  --card-glow: var(--link-color);
  
  --badge-text: white;
}

body.deuteranopia-contrast {
  --color-bg: black;
  --color-title: #aaff55;
  --color-text: #ccffaa;
  --color-border: #aaff55;
  --color-border2: #aaff55;
  --color-focus: #aaff55;
  --color-btn-text: #aaff55;
  --color-bg-button: black;
  --color-bg-button-hover: #aaff55;
  --color-font-weight-button: bolder;

  --sidebar-bg: black;
  --sidebar-border: #aaff55;
  --sidebar-text: #aaff55;

  --link-color: #aaff55;
  --link-hover-color: #003300;

  --btn-contact-bg: black;
  --btn-contact-text: white;
  --card-bg-hover: var(--color-bg);
  --btn-contact-hover-text: black;

  --card-bg: black;
  --card-title: #aaff55;
  --card-bg-hover: black;
  --card-text-hover: white;

  --card-glow: var(--link-color);
  
  --badge-text: black;
}

body.tritanopia {
  --color-bg: #f0f3f5;
  --color-title: #336699;
  --color-text: #333;
  --color-border: #555;
  --color-btn-text: #222;
  --color-bg-button: #c8d6de;
  --color-bg-button-hover: #9bb2c1;
  --color-font-weight-button: bold;

  --sidebar-bg: #b6c5d0;
  --sidebar-border: #8c9fac;
  --sidebar-text: #222;

  --link-color: #224477;
  --link-hover-color: #112233;

  --btn-contact-bg: #224477;
  --btn-contact-text: white;
  --btn-contact-hover-bg: #15325e;
  --btn-contact-hover-text: white;

  --card-bg: #c8d6de;
  --card-title: #336699;
  --card-bg-hover: #879eac;
  --card-text-hover: white;
  
  --badge-text: white;
}

body.tritanopia-dark {
  --color-bg: #152230;
  --color-title: #8caed8;
  --color-text: #a3bacc;
  --color-border: #445577;
  --color-btn-text: #a3bacc;
  --color-bg-button: #446688;
  --color-bg-button-hover: #6688aa;
  --color-font-weight-button: bold;

  --sidebar-bg: #2a466b;
  --sidebar-border: #5777a6;
  --sidebar-text: #a3bacc;

  --link-color: #7a9ac1;
  --link-hover-color: #a1c3f5;

  --btn-contact-bg: #7a9ac1;
  --btn-contact-text: black;
  --btn-contact-hover-bg: #86aad5;
  --btn-contact-hover-text: black;

  --card-bg: #446688;
  --card-title: #7a9bc4;
  --card-bg-hover: var(--color-bg);
  --card-text-hover: white;

  --card-glow: var(--link-color);
  
  --badge-text: #283e52;
}

body.tritanopia-contrast {
  --color-bg: black;
  --color-title: #55ffff;
  --color-text: #aaffff;
  --color-border: #55ffff;
  --color-border2: #55ffff;
  --color-focus: #55ffff;
  --color-btn-text: #55ffff;
  --color-bg-button: black;
  --color-bg-button-hover: #55ffff;
  --color-font-weight-button: bolder;

  --sidebar-bg: black;
  --sidebar-border: #55ffff;
  --sidebar-text: #55ffff;

  --link-color: #55ffff;
  --link-hover-color: #003333;

  --btn-contact-bg: black;
  --btn-contact-text: white;
  --btn-contact-hover-bg: #55ffff;
  --btn-contact-hover-text: black;

  --card-bg: black;
  --card-title: #55ffff;
  --card-bg-hover: var(--color-bg);
  --card-text-hover: white;

  --card-glow: var(--link-color);
  
  --badge-text: black;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  cursor: context-menu;
}

h1, h2 {
  color: var(--color-title);
  font-weight: bolder;
  margin: 2rem auto;
  text-align: center;
}

h1 {
  font-size: 2.6em;
}

#sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 170px;
  height: 100vh;
  background-color: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  padding: 1rem;
  color: var(--sidebar-text);
}

#sidebar h3 {
  margin-bottom: 1.5rem;
  text-align: center;
}

#sidebar label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

#sidebar ul {
  list-style: none;
  padding: 0;
}

#sidebar ul li {
  margin-bottom: 0.7rem;
}

#sidebar ul li a {
  text-decoration: none;
  color: var(--color-focus);
  font-weight: bold;
}

#sidebar ul li a:hover,
#sidebar ul li a:focus {
  color: var(--link-hover-color);
}

#sidebar i {
  font-size: 1.2em;
}

#sidebar hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 1.5rem 0;
}

main#main-content {
  margin-left: 200px;
  padding: 2rem;
  background-color: var(--color-bg);
  min-height: 100vh;
}

.intro-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  animation: fadeInUp 0.6s ease both;
}

.intro-text, .intro-image {
  flex: 1;
  max-width: 600px;
  justify-content: center;
  text-align: center;
}

.intro-text h2 {
  font-size: 1.8em;
}

.intro-text p {
  font-size: 1.3em;
  line-height: 1.5;
  text-align: justify;
}

.intro-text ul {
  margin-top: 1rem;
  padding-left: 1.2rem;
  text-align: left;
}

.intro-text ul li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.intro-image img {
  width: 100%;
  max-width: 350px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px #0000001a;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.intro-image img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px #00000033;
}

.btn-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.btn-row button {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.4rem 0.6rem;
  font-size: 1em;
  font-weight: var(--color-font-weight-button);
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-button);
  color: var(--color-btn-text);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.btn-primary {
  display: inline-block;
  font-size: 1.1em;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--color-focus);
  background-color: var(--btn-contact-bg);
  color: var(--btn-contact-text);
  border-radius: 6px;
  font-weight: var(--color-font-weight-button);
  text-decoration: none;
  max-width: max-content;
  margin-top: 0.5rem;
}

.btn-row button:hover,
.btn-row button:focus {
  border-color: var(--color-focus);
  outline: none;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--btn-contact-hover-bg);
  color: var(--btn-contact-hover-text);
  outline: none;
}

#color-blindness-select {
  width: 100%;
  padding: 0.5rem;
  font-size: 1em;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background-color: var(--color-bg-button);
  color: var(--color-btn-text);
}

#color-blindness-select:focus,
#color-blindness-select:hover {
  border-color: var(--color-focus);
  outline: none;
}

.formulario-contacto {
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
  background-color: var(--color-bg-button);
  border-radius: 10px;
  border: 1px solid var(--color-border2);
  box-shadow: 0 0 10px #0000001a;
  cursor: crosshair
}

.campo-form {
  margin-bottom: 1rem;
  cursor: crosshair;
}

.campo-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: var(--color-text);
  cursor: crosshair;
}

.campo-form input,
.campo-form textarea {
  width: 100%;
  padding: 0.75rem;
  font-size: 1em;
  font-family: monospace;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: border-color 0.3s, box-shadow 0.3s;
  cursor: crosshair;
}

.campo-form input:focus,
.campo-form textarea:focus {
  border-color: var(--link-color);
  box-shadow: 0 0 5px var(--link-color);
  outline: none;
}

.aviso {
  margin-top: 1rem;
  font-size: 0.9em;
  color: var(--color-text);
  text-align: center;
}

#layout-wrapper {
  padding: 0;
}

.inicio {
  height: 100vh;
}

.info {
  min-height: 60vh;
}

a {
  color: var(--link-color);
}

a:hover,
a:focus {
  color: var(--link-hover-color);
  outline: none;
}

.hide-images img,
.hide-images .intro-image {
  display: none !important;
}

.no-links a {
  color: var(--color-text);
  text-decoration: none;
  cursor: default;
}

.font-arial {
  font-family: Arial, Helvetica, sans-serif;
}

.font-times {
  font-family: 'Times New Roman', Times, serif;
}

.font-verdana {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 400px) {
  .intro-section {
    flex-direction: column;
    text-align: center;
  }

  .intro-text p {
    max-width: 100%;
  }

  .btn-primary {
    width: 100%;
    max-width: none;
  }
}

.hero-cv {
  padding: 3rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: 1000px;
  width: auto;
}

.hero-text2 {
  font-size: 1.3em;
  line-height: 1.5;
  text-align: center;
}

.hero-text h1 {
  font-size: 2.5em;
  color: var(--color-title);
}

.hero-text h2 {
  font-size: 1.5em;
  margin: 0.5rem 0;
  color: var(--color-text);
}

.hero-text h1,
.hero-text h2,
.hero-quote {
  margin: .5rem 0;
  padding: 0;
}

.hero-quote {
  display: inline-block;
  font-size: 1.1em;
  font-style: italic;
  color: var(--color-text);
  margin-top: 0.5rem;
  font-weight: bold;
}

.hero-text, .hero-image {
  flex: 1;
  max-width: 200px;
  justify-content: center;
  text-align: center;
  margin: 0px 20px 0px 20px;
}

.hero-text {
  flex: 1 1 300px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-image img {
  width: auto;
  max-width: 250px;
  height: auto;
  box-shadow: 0 4px 8px #0000001a;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 50%;
}

.hero-image img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px #00000033;
}

.hide-images .hero-content {
  justify-content: center;
  text-align: center;
}

.hide-images .hero-image {
  display: none !important;
}

.cv-section {
  max-width: 900px;
  margin: 0 auto;
}

.cv-section h2 {
  font-size: 1.8em;
  color: var(--color-title);
  margin-top: auto;
  margin-bottom: 1rem;
}

.sobre-mi {
  background-color: var(--color-bg-button);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 2.5rem 2rem;
  box-shadow: 0 0 10px #0000000a;
  font-weight: bold;
}

.sobre-mi p {
  font-size: 1.1em;
  line-height: 1.6;
  color: var(--color-text);
  text-align: justify;
}

.experiencia-grid {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 2fr));
  gap: 1rem;
}

.experiencia-card {
  background-color: var(--color-bg);
  border: 1px solid var(--link-color);
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  transition: transform 0.2s ease;
  color: var(--card-title);
  font-weight: bold;
}

.experiencia-card h3 {
  font-size: 1.4em;
  margin-bottom: 1rem;
}

.experiencia-card:hover {
  transform: translateY(-4px);
  background-color: var(--card-bg-hover);
  border-color: var(--link-color);
  box-shadow: 0 0 10px var(--card-glow);
  color: var(--card-text-hover);
}

.badges {
  margin-top: 1rem;
}

.badge {
  display: inline-block;
  background-color: var(--card-title);
  color: var(--badge-text);
  padding: 0.3rem 0.6rem;
  margin: 0.2rem;
  border-radius: 4px;
  font-size: .9em;
  font-weight: bolder;
}

.icons-social h2 {
  font-size: 1.5em;
  color: var(--color-text);
  text-align: center;
  margin-top: 3em;
  margin-bottom: 2em;
}

.iconos-redes-sociales {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2em;
}

.iconos-redes-sociales h2 {
  font-size: 1.5em;
  color: var(--color-text);
  text-align: center;
}

.iconos-redes-sociales a {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  transition: all 0.2s ease-in;
  margin-bottom: 2em;
}

.iconos-redes-sociales i {
  color: var(--color-text);
  font-size: 1.5em;
  transition: all 0.2s ease-in;
}

.iconos-redes-sociales a:hover {
  background-color: var(--color-bg);
  border-color: var(--link-color);
  box-shadow: 0 0 5px var(--link-color);
}

.iconos-redes-sociales a:hover i {
  color: var(--color-focus);
}