:root {
    --main-bg: #121212;
    --btn-bg: #1E3A8A;
    --btn-color: white;
    --btn-hover-bg: rgba(255, 255, 255, 0.075);
    --btn-disabled-bg: rgba(255, 255, 255, 0.075);
    --btn-disabled-color: #ccc;
    --tag-bg: #FACC15;
    --tag-color: black;
    --main-text-color: #EAEAEA;
    --secondary-text-color: #B0B0B0;
    --table-border-color: #2C2C2C;
    --success-tag-bg: #349959;
    --success-tag-color: white;
    --menu-bg: rgb(34 48 63 / 99%);
    --neon-underline-1: #18ff94;
    --neon-underline-2: #00baff;
    --neon-underline-3: #18ff94;
}
body {
    background-color: var(--main-bg)!important;
    margin-top: 50px;
    font-family: 'SpaceMono-Regular', monospace;
}
.badge-secondary {
    background-color: var(--tag-bg)!important;
    color: var(--tag-color)!important;
}
.dropdown-menu-dark {
    background-color: var(--menu-bg)!important;
}
.software-title {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2rem;
    color: rgb(224, 224, 224)
}
.seguro-title {
    --tw-text-opacity: 1;
    color: rgb(0 255 157 / var(--tw-text-opacity, 1));
}
@font-face {
    font-family: 'SpaceMono-Regular';
    src: url('https://fonts.gstatic.com/s/spacemono/v17/i7dPIFZifjKcF5UAWdDRYEF8RQ.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ShareTechMono';
    src: url('https://fonts.gstatic.com/s/sharetechmono/v15/J7aHnp1uDWRBEqV98dVQztYldFcLowEF.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SpaceMono-Bold';
    src: url('https://fonts.gstatic.com/s/spacemono/v17/i7dMIFZifjKcF5UAWdDRaPpZUFWaHg.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}
.item {
    background-color: white;
    padding: 15px;
    margin-bottom: 15px;
    border: transparent;
    border-radius: 5px;
    box-shadow: 0 0 1em #ccc;
    transition: all .2s ease-in-out;
}
.nav-link {
    font-family: 'SpaceMono-Regular', monospace;
    color: white!important;
}
p, ul, li, ol, a, td, span, label {
    font-family: 'SpaceMono-Regular', monospace;
    color: var(--main-text-color);
}
.main-text {
    color: var(--main-text-color);
}
.secondary-text {
    color: var(--secondary-text-color);
}
th {
    font-family: 'SpaceMono-Bold', monospace;
}
.table tr {
    border-color: var(--table-border-color);
}
.table td > span {
    height: 62px;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'ShareTechMono', monospace;
    color: var(--main-text-color);
}
.table img {
    border-radius: 8px;
    border: 1px solid #3a3a4a;
}
.table img.zoom-border {
  border-radius: 8px;
  border: 1px solid #3a3a4a;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
}

.table img.zoom-border:hover {
  transform: scale(1.1); /* zoom suave */
  box-shadow: 0 0 12px rgba(58, 58, 74, 0.8); /* resplandor */
  border-color: #6c63ff; /* cambio de color de borde */
}
.item:hover {
    box-shadow: 0 0 1em #aaa;
}

.item.completed {
    text-decoration: line-through;
}

.toggles {
    color: black;
}

.name {
    padding-top: 3px;
}

.remove {
    padding-left: 0;
}

button:focus {
    border: 1px solid #333;
}

.custom-button {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    border-radius: 8px;
    border: 0;
    cursor: pointer;
    display: inline-block;
    font-weight: 300;
    height: 2.5em;
    line-height: 2.5em;
    min-width: 7em;
    padding: 0 1.5em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    background-color: var(--btn-bg);
    color: var(--btn-color);
}
.success-tag {
    background-color: var(--success-tag-bg);
    color: var(--success-tag-color);
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: 10px;
}
.custom-button:disabled {
    background-color: var(--btn-disabled-bg);
    cursor: not-allowed; 
    color: var(--btn-disabled-color);
    opacity: 0.7;
}
.custom-button:hover {
    background-color: var(--btn-hover-bg);
}
.custom-link {
    transition: color 0.2s ease, border-bottom 0.2s ease;
    text-decoration: none;
    border-bottom: dotted 1px;
    color: inherit;
}
.custom-link:hover {
    color: #636363;
    border-bottom-color: transparent;
}
input.disabled {
    background-color: #373546!important;
    color: white;
    border: 0px;
}
.alert-danger {
    background-color: #df2c3c!important;
}
.alert-danger span {
    color: white;
}
.loading {
    width: 20px;
    height: 20px;
    border: 5px solid #ccc;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: block;
}
.loading-wrapper {
    position: absolute;
    margin-top: 10px;
    margin-left: -23px;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.content {
    flex: 1; /* Hace que el contenido ocupe el espacio disponible */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra verticalmente */
    align-items: center; /* Centra horizontalmente */
    text-align: center; /* Asegura que el texto esté centrado */
}
.footer {
    border-top: 1px solid lightgray;
    padding-top: 10px;
}
a.neon-underline {
    color: #fff; /* color del texto */
    text-decoration: none;
    background-image: linear-gradient(90deg, var(--neon-underline-1), var(--neon-underline-2), var(--neon-underline-3));
    background-repeat: no-repeat;
    background-position: 0 100%; /* en la parte inferior */
    background-size: 0% 2px; /* empieza invisible */
    transition: background-size 0.3s ease;
    box-shadow: inset 0 -0.5px 0 rgba(255, 255, 0, 0); /* para evitar salto de altura */
}

a.neon-underline:hover {
    background-size: 100% 2px; /* crece hacia la derecha */
}