/* Light-green Light scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme="light"],
:root:not([data-theme="dark"]) {
    --primary: #7cb342;
    --primary-hover: #689f38;
    --primary-focus: rgba(124, 179, 66, 0.125);
    --primary-inverse: #FFF;
}

/* Light-green Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --primary: #7cb342;
        --primary-hover: #8bc34a;
        --primary-focus: rgba(124, 179, 66, 0.25);
        --primary-inverse: #FFF;
    }
}

/* Light-green Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
    --primary: #7cb342;
    --primary-hover: #8bc34a;
    --primary-focus: rgba(124, 179, 66, 0.25);
    --primary-inverse: #FFF;
}

/* Light-green (Common styles) */
:root {
    --form-element-active-border-color: var(--primary);
    --form-element-focus-color: var(--primary-focus);
    --switch-color: var(--primary-inverse);
    --switch-checked-background-color: var(--primary);
}

/* TAGs */


/* IDs */
#logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

#logo img {
    width: 190px;
}

/* 1) Convierte el UL en un contenedor flex */
nav.container > ul {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* 2) Empuja el segundo logo al final */
#logo2 {
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* 3) (Opcional) Ajusta el img si quieres */
#logo2 img {
  width: 190px;
  /* borra el margin-left:100px; */
}



#footer {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: smaller;
}

#footer p {
    font-size: medium;
}

#progresClient {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 20px;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
}

/* CLASSES */
.tabs {
    display: flex;
    margin-bottom: 20px;
}

.tittleForm {
    text-align: center;
    margin-top: 100px;
    margin-bottom: 100px;
}

.grid-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.twoButtons button:first-child {
    margin-right: 25px;
}

.threePoints {
    color: rgb(155, 155, 155);
    font-weight: 900;
    font-size: x-large;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 17px;
}

/* Eliminar flechas en el input type ="number" */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

/* Style del boton */
.add-local {
    position: absolute;
    bottom: -15px;
    right: -15px;
    width: 50px;
    height: 50px;
    border: solid 5px #ffffff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.delete-local {
    position: absolute;
    bottom: -15px;
    right: 40px;
    width: 50px;
    height: 50px;
    border: solid 5px #ffffff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.delete-contact {
    position: absolute;
    bottom: -15px;
    right: 40px;
    width: 50px;
    height: 50px;
    border: solid 5px #ffffff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.add-contact {
    position: absolute;
    bottom: -15px;
    right: -15px;
    width: 50px;
    height: 50px;
    border: solid 5px #ffffff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

article {
    position: relative !important; /* Esto es necesario para que el botón se posicione correctamente dentro del artículo */
}



/* Custom styles for Pico CSS modal */
dialog > article {
    max-width: none !important;
    width: 80% !important;
}

.disabled-checkbox {
    pointer-events: none; /* Deshabilita la interacción */
    opacity: 1; /* Mantiene la opacidad como un checkbox normal */
}