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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
	font-size:16px;
}
textarea {
	font-size:18px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
input[type="checkbox"] {
	width:auto;
}
input[type="radio"] {
	width:auto;
}
a {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

.menu {
    display: flex;
}

.menu ul {
    display: flex;
    list-style: none;
    gap: 1em;
}

.menu a {
    color: #fff;
    text-decoration: none;
    padding: 0.5em;
    transition: background 0.3s;
}

.menu a:hover {
    background-color: #555;
    border-radius: 5px;
	text-decoration: underline;
}

/* Botón hamburguesa */
.menu-toggle {
    font-size: 1.5em;
    background: none;
    border: none;
    color: #fff;
    display: none;
    cursor: pointer;
}

/* Estilos generales del menú */
#menu-burger {
  float:right;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  background: white;
  z-index: 9999;
  padding-right: 10px;
  padding-bottom: 10px;
}

/* Ocultar el menú desplegable en móviles por defecto */
#menu-items {
  display: flex;
  gap: 10px;
}
#burger-button {
  display: none;
  font-size: 28px;
  background: none;
  border: none;
  cursor: pointer;
  color: black;
  line-height: 1;
  margin-bottom: 0;
  width: auto;
}

/* Adaptación para pantallas pequeñas */
@media (max-width: 690px) {
  #burger-button {
    display: block;
  }
  #menu-items {
    display: none;
    flex-direction: column;
    width: 100%;
    margin-top: 10px;
  }
  #menu-items.show {
    display: contents;
  }
  #menu-items select,
  #menu-items a {
    width: fit-content;
	text-decoration:none;
  }
  #menu-items a:hover {
    text-decoration:underline;
  }
  #menu-burger {
    flex-direction: column;
    align-items: flex-end;
	width: 200px;
  }
}

/* Responsivo */
@media (max-width: 768px) {
    .menu-toggle {
    display: block;
}

.menu {
	display: none;
	position: absolute;
	top: 60px;
	right: 0;
	background: #333;
	width: 100%;
}

.menu.activo {
	display: block;
}

.menu ul {
	flex-direction: column;
	align-items: center;
	padding: 1em 0;
}

.menu ul li {
	width: 100%;
	text-align: center;
}

.menu a {
	display: block;
	width: 100%;
}
}

.contenedor {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
}
.contenedor-header {
    width: 95%;
    max-width: 600px;
    margin: 0 auto 20px;
    padding-top: 10px;
	height:70px;
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px 20px;
}
header {
    background-color: #0077cc;
    color: white;
    text-align:center;
}
header a {
	font-weight:600;
}
header h1 {
    
}

nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

nav a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

nav a:hover {
    color: #ffeeaa;
	text-decoration: underline;
}

main {
    background: white;
    padding: 2rem;
    margin-top: 1rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

footer {
    background-color: #222;
    color: #ccc;
    text-align: center;
    padding: 1rem 0;
    margin-top: 2rem;
}
footer a{
	color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}
footer a:hover {
	text-decoration: underline;
}
@media (max-width: 768px) {
    nav ul {
	flex-direction: column;
	align-items: flex-start;
    }
}
form, .card-profile, .page-view {
    background: white;
    max-width: 600px;
    margin: 2rem auto;
    padding: 0.5rem 1.5rem 1.5rem 1.5rem;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
	overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

form {
    background: white;
    max-width: 500px;
    margin: 2rem auto;
    padding: 0.5rem 1.5rem 1.5rem 1.5rem;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

input, textarea, button, .option, .input {
    width: 100%;
    margin-bottom: 1rem;
    padding: 0.7rem;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    background: #0077cc;
    color: white;
    border: none;
    cursor: pointer;
	text-decoration:none;
}

button:hover {
    background: #005fa3;
	text-decoration:none;
}


main a {
	color: #3485fe;
	text-decoration:none;
	font-weight:600;
}
main a:hover {
	text-decoration:underline;
}
.f-right {
	float:right;
}
 .feedback {
	font-size: 0.9em;
}

.valid {
	color: green;
}

.invalid {
	color: red;
}

button:disabled {
	background-color: #999;
}
.error { 
	color: red; 
}

.success { 
	color: green;
}

.message_info {
    background: white;
    max-width: 600px;
    margin: 2rem auto;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.field_title {
	font-weight:bold;
}
.space10 {
	margin-bottom:10px;
	width:100%;
	clear:both;
}
.space20 {
	margin-bottom:20px;
	width:100%;
	clear:both;
}
.prevStep {
	width: 48%;
	float:left;
	background: #D3D3D3;
    color: black;
}

.prevStep:hover {
    background: #9E9E9E;
}
.aTypeButtonGray {
	background: #EFEFEF !important;
    color: black;
	display: inline-block;
	padding: 5px 20px;
	text-decoration: none;
	border-radius: 5px;
	font-weight: bold;
	font-size: 0.9em;
	transition: background-color 0.3s ease;
}

.aTypeButtonGray:hover {
    background: #DBDBDB !important;
	text-decoration: none;
}
.aTypeButtonBlue {
	background: #4A5DF9 !important;
    color: #FFFFFF;
	display: inline-block;
	padding: 5px 20px;
	text-decoration: none;
	border-radius: 5px;
	font-weight: bold;
	font-size: 0.9em;
	transition: background-color 0.3s ease;
}

.aTypeButtonBlue:hover {
    background: #404FF4 !important;
	text-decoration: none;
}
.nextStep {
	width: 48%;
	float:right;
}
.center_info {
    background: white;
    max-width: 600px;
    margin: 0 auto;
}
form input, button {
	font-size:18px;
}
.resultado_username {
	font-size:0.9em;
}
.center_info_home {
    background: white;
    max-width: 600px;
    margin: 0 auto;
}
/* Estilo general para etiquetas */
span.tag {
  color: #1a73e8;          /* azul llamativo */
  font-weight: 500;
  background: #e8f0fe;     /* fondo suave */
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 0.9em;
  margin-right: 4px;
  display: inline-block;
}

/* Si quieres marcar solo las que empiezan con "+" */
span.tag::before {
  content: "+";            /* agrega el símbolo siempre */
  margin-right: 2px;
  color: #1558b0;          /* tono más oscuro para diferenciar */
  font-weight: bold;
}