*{font-family: sans-serif;}
h1{font-family: sans-serif;font-size: 1.2em;}

body {
/*    margin: 0;
    padding: 0;*/
    background-image: url('../img/background-11.png'); /* Ruta a tu imagen de fondo */
    background-size: cover; /* Asegura que la imagen cubra toda la pantalla */
    background-attachment: fixed; /* Hace que la imagen de fondo sea fija */
    background-position: center center; /* Centra la imagen de fondo */
}

input[type=text], textarea{
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
 
input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px #FFCD82;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #FFCD82;
}

#tablaaltomax                  {height:100%;}

#basic-modal-content {display:none;}

/* Overlay */
#simplemodal-overlay {background-color:#000;}

/* Container */
#simplemodal-container {height:360px; width:600px; color:#bbb; background-color:#fff; border:4px solid #000000; padding:12px;}
#simplemodal-container .simplemodal-data {padding:8px;}
#simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
#simplemodal-container a {color:#ddd;}
#simplemodal-container a.modalCloseImg {background:url(../img/icon_close_5.png) no-repeat; width:34px; height:34px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
#simplemodal-container h3 {color:#84b8d9;}
#simplemodal-container h2 {color:#84b8d9;}

tr.border-bottom-upload td {
  border-top:1px #BDBDBD;
  border-top-style:solid;
  padding-top: 8px;
  padding-bottom: 8px;
}

.circulo {
 /* width: 150px;
  height: 150px;*/
  border-radius: 50%;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  /*line-height: 50px;*/
  text-align: center;
  background: Red;
  padding: 8px;
}

.login-container {
    width: 300px;
    margin: 100px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.login-container form {
    display: flex;
    flex-direction: column;
}

.login-container form input {
    margin-bottom: 10px;
}

/* Estilo base para la tabla */
.SP-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 0.8em;
  font-family: sans-serif;
  min-width: 400px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

/* Estilo para las celdas de la tabla */
.SP-table th,
.SP-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #dddddd;
}

/* Estilo para la cabecera de la tabla */
.SP-table thead th {
  background-color: #00BFFF;
  color: white;
  text-transform: uppercase;
}

/* Estilo para filas alternas */
.SP-table tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

.SP-table tr:nth-of-type(odd) {
  background-color: #ffffff;
}

/* Estilo para enlaces dentro de la tabla */
.SP-table a {
  color: #0088cc;
  text-decoration: none;
}

/* Estilo para enlaces al pasar el mouse */
.SP-table a:hover {
  text-decoration: underline;
}

/* Media Queries para dispositivos móviles */
@media screen and (max-width: 768px) {
  .SP-table {
    min-width: 0; /* Remover el ancho mínimo para permitir el desplazamiento */
    border: 0;
    box-shadow: none;
  }

  .SP-table-container {
    overflow-x: auto; /* Permite el desplazamiento horizontal */
    margin: 10px -15px; /* Ajusta los márgenes para dispositivos móviles */
  }

  .SP-table thead th {
    font-size: 0.9em; /* Ajusta el tamaño de la fuente de la cabecera */
  }

  .SP-table th, .SP-table td {
    padding: 8px 10px; /* Ajusta el padding para un mejor manejo en pantallas pequeñas */
  }
}

/* Estilo base para el formulario */
.SP-form {
  font-family: sans-serif;
  font-size: 0.8em;
  max-width: 500px;
  margin: 20px auto;
  padding: 20px;
  background: #f3f3f3;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Estilo para los elementos input y select */
.SP-form input[type="text"],
.SP-form input[type="email"],
.SP-form input[type="number"],
.SP-form input[type="password"],
.SP-form select {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

/* Estilo para el label */
.SP-form label {
  margin-bottom: 5px;
  display: block;
  font-weight: bold;
}

/* Estilo para el botón de envío */
.SP-form button[type="submit"],
.SP-form button[type="button"] {
/*  margin-top: 25px; */
  background-color: #00BFFF;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.SP-form .SP-form-btn {
  margin-top: 25px; 
}

.SP-form button[type="submit"]:hover,
.SP-form button[type="button"]:hover {
  background-color: #009fda;
}
 
/* Estilo para enfocar elementos con teclado o mouse */
.SP-form input[type="text"]:focus,
.SP-form input[type="email"]:focus,
.SP-form input[type="number"]:focus,
.SP-form input[type="password"]:focus,
.SP-form select:focus {
  outline: none;
  border-color: #00BFFF;
}

/* Estilo para los labels de los checkbox y radio */
.SP-form label.checkbox,
.SP-form label.radio {
  display: inline-block;
  margin-right: 10px;
  cursor: pointer;
  font-weight: normal;
}

/* Base para checkbox y radio (oculto por defecto, se personalizará) */
/*.SP-form input[type="checkbox"],
.SP-form input[type="radio"] {
  display: none;
}
*/
/* Estilo personalizado para checkbox */
.SP-form .checkbox + input[type="checkbox"] + span {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-right: 5px;
  position: relative;
}

/* Estilo cuando el checkbox está marcado */
.SP-form input[type="checkbox"]:checked + span {
  background-color: #00BFFF;
  border-color: #00BFFF;
}

/* Ícono o color adicional dentro del checkbox marcado */
.SP-form input[type="checkbox"]:checked + span::after {
  content: '✔';
  color: white;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
}

/* Estilo personalizado para radio */
.SP-form .radio + input[type="radio"] + span {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  border: 1px solid #ddd;
  border-radius: 50%;
  margin-right: 5px;
  position: relative;
}

/* Estilo cuando el radio está seleccionado */
.SP-form input[type="radio"]:checked + span {
  background-color: #00BFFF;
  border-color: #00BFFF;
}

/* Estilo base para los campos de fotos */
.SP-form .photo-field {
  display: flex;
  align-items: flex-start; /* Alineación al inicio para manejar múltiples líneas */
  margin-bottom: 15px; /* Espaciado entre los campos de fotos */
}

/* Estilo para la miniatura de la foto */
.SP-form .photo-thumbnail {
  width: 65px; /* Ancho de la miniatura */
  height: 65px; /* Altura de la miniatura para mantener la proporción */
  margin-right: 10px; /* Espaciado entre la miniatura y el resto */
}

/* Estilo para el contenedor derecho */
.SP-form .photo-info {
  flex-grow: 1;
}

/* Estilo para el número de la foto y el nombre de la foto */
.SP-form .photo-label,
.SP-form .photo-name {
  display: block; /* Asegura que cada elemento ocupe su propia línea */
  margin-bottom: 5px; /* Espaciado entre elementos */
}

/* Estilo para el input de tipo file */
.SP-form .photo-upload {
  display: block; /* Asegura que el campo de subida esté en su propia línea */
  margin-bottom: 5px; /* Espaciado entre el campo de subida y el ícono de eliminar */
}

/* Estilo para el ícono de eliminar */
.SP-form .delete-icon {
  width: 16px;
  height: 16px;
  cursor: pointer;
  /* Aquí puedes agregar un fondo o un ícono según tu preferencia */
}

.SP-form .form-title {
    color: #00BFFF; /* Color del texto */
    text-align: center; /* Alineación del texto */
    margin-bottom: 20px; /* Espaciado debajo del título */
    /* Otros estilos que desees aplicar */
}

.SP-form .error-message {
    color: red;
    text-align: center;
/*    margin-bottom: 5px;*/
}

/* Estilos generales para la cabecera */
.SP-header {
    background-color: #f3f3f3; /* Fondo de la cabecera */
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8em;
    font-family: sans-serif;
    border-bottom: 1px solid #e6e3e3; /* Borde negro delgado en la parte inferior */
}

.SP-header .logo-link img {
    height: 50px; /* Ajusta el tamaño del logo según sea necesario */
}

/* Estilos para el menú de navegación */
.nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.nav-item {
    position: relative;
    margin-left: 20px;
}

.nav-item a {
    text-decoration: none;
    color: #000;
    padding: 5px 10px;
    display: block;
}

/* Estilos para el menú desplegable */
.dropdown {
    display: none;
    position: absolute;
    background-color: #f3f3f3;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    padding: 10px;
    list-style: none;
}

.nav-item:hover .dropdown {
    display: block;
}

/* Estilos para los elementos del menú desplegable */
.dropdown li a {
    padding: 5px;
    display: block;
    text-decoration: none;
    color: #333;
}

.dropdown li a:hover {
    background-color: #ddd; /* Color al pasar el mouse */
}

/* Media Queries para dispositivos móviles */
@media screen and (max-width: 768px) {
    .SP-header {
        font-size: 1em; /* Aumenta el tamaño de la fuente para dispositivos móviles */
        padding: 15px 10px; /* Ajusta el padding para un mejor manejo en pantallas pequeñas */
    }

    .SP-header .logo-link img {
        height: 40px; /* Reduce el tamaño del logo para dispositivos móviles */
    }

    .nav-menu {
        flex-direction: column; /* Cambia la dirección del flex a columna para una mejor visualización en móviles */
        align-items: left; /* Alinea los elementos al centro */
    }

    .nav-item {
        margin-left: 0; /* Elimina el margen izquierdo para los ítems del menú */
        margin-bottom: 10px; /* Añade un margen inferior para separar los ítems */
    }

    .dropdown {
        position: static; /* Cambia la posición del menú desplegable para adaptarse a la vista móvil */
    }

    .dropdown li a {
        padding: 8px; /* Aumenta el padding para facilitar la interacción táctil */
    }
}

/* Estilo para el contenedor del radio button */
.SP-form .radio-container {
    display: flex;
    align-items: center; /* Alinea verticalmente el radio y el texto */
}

/* Estilo para el radio button */
.SP-form .radio-button {
    margin-right: 5px; /* Espacio entre el radio y el texto */
}

/* Estilo para la etiqueta del radio button */
.SP-form .radio-label {
    margin: 0; /* Elimina márgenes por defecto */
    /* Otros estilos para la etiqueta si es necesario */
}

/* Estilo para el contenedor del campo fecha y hora */
.SP-form .date-time-container {
    display: flex;
    align-items: center; /* Alineación vertical de los elementos */
    margin-bottom: 10px; /* Espaciado entre este y otros campos */
}

/* Estilo para los inputs de fecha y hora */
.SP-form .date-input,
.SP-form .time-input {
    margin-left: 5px; /* Espacio entre la etiqueta y el input */
    /* Puedes añadir otros estilos como ancho específico si lo necesitas */
}

/* Estilo para el contenedor del campo fecha y hora */
.SP-form .comision-container {
    display: flex;
    align-items: center; /* Alineación vertical de los elementos */
    margin-bottom: 10px; /* Espaciado entre este y otros campos */
}

/* Estilo para los inputs de fecha y hora */
.SP-form .precio-input,
.SP-form .porcentaje-input,
.SP-form .comision-input {
    margin-left: 5px; /* Espacio entre la etiqueta y el input */
    /* Puedes añadir otros estilos como ancho específico si lo necesitas */
}

#contenedor-grafico-ganancias {
    background-color: #f8f9fa; /* Color de fondo */
    border: 2px solid #ccc; /* Borde */
    padding: 20px;
    width: 600px;
    margin: auto;
    margin-bottom: 10px;
}

.dashboard-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Espacio entre los elementos */
}

.dashboard-title {
    width: 100%; /* Ocupa todo el ancho del contenedor */
    text-align: center; /* Centra el texto del título */
    font-size: 24px; /* Tamaño de fuente para el título */
    margin-top: 10px; /* Espacio debajo del título */
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
}

.dashboard-item {
    flex: 1 1 30%; /* Cada elemento intentará ocupar un tercio del espacio disponible */
    border: 1px solid #ccc; /* Solo para visualización */
    padding: 10px;
    box-sizing: border-box;
}


/* Media query para pantallas medianas: 2 columnas */
@media (max-width: 800px) {
    .dashboard-item {
        flex: 1 1 45%; /* Cada elemento intentará ocupar casi la mitad del espacio disponible */
    }
}

/* Media query para pantallas pequeñas: 1 columna */
@media (max-width: 500px) {
    .dashboard-item {
        flex: 1 1 100%; /* Cada elemento ocupará todo el ancho disponible */
    }
}

.dashboard-item {
/*    flex: 1 1 30%;
    border: 1px solid #ccc;
    padding: 10px;
    box-sizing: border-box;*/
    flex: 1 1 30%;
    border: 1px solid #ccc;
    padding: 10px;
    box-sizing: border-box;
    display: flex;           /* Añadido para flexbox */
    flex-direction: column;  /* Añadido para alinear los elementos verticalmente */
    align-items: center;     /* Añadido para centrar los elementos hijos */
}

.tabla-container {
    max-height: 300px; /* Altura máxima para mostrar 10 filas, ajusta según necesidad */
    overflow-y: auto; /* Activa la barra de desplazamiento vertical si es necesario */
    margin-top: 5px;
}

.tabla-stock {
    width: 600px;
    border-collapse: collapse;
    background-color: #ffffff;
}

.dashboard-item h3 {
    font-size: 12px;
    font-weight: bold;
    text-align: center;
}

.tabla-stock th, .tabla-stock td {
    border: 1px solid #ddd;
    padding: 5px;
    text-align: left;
    font-size: 11px;
}

.tabla-stock th {
    background-color: #f2f2f2;
}

/* Estilos adicionales para mejorar la apariencia */
.tabla-stock tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

.dashboard-form {
    width: 100%; /* Ocupa todo el ancho del contenedor */
    text-align: center; /* Centra los elementos del formulario */
    margin-bottom: 10px; /* Espacio debajo del formulario */
    padding: 10px; /* Relleno para el formulario */
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
}

.dashboard-form select,
.dashboard-form button {
    margin: 0 5px;
    padding: 5px 10px;
}

.filtro {
    margin-bottom: 10px;
    text-align: center;
}

.filtro input[type="text"],
.filtro input[type="number"],
.filtro select {
    padding: 5px;
    margin-right: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.filtro button {
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    background-color: #f2f2f2;
}

.filtro button:hover {
    background-color: #e2e2e2;
}

.mhamburguesa-menu-container {
    position: relative;
}

.mhamburguesa-menu-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 12px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 5px;
    border-radius: 3px;
    z-index: 1000;
}

.mhamburguesa-menu-content {
    display: none;
    position: absolute;
    right: 10px;
    top: 35px;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 10px;
    border-radius: 3px;
    z-index: 1000;
}

.mhamburguesa-menu-content a {
    font-size: 10px;
    display: block;
    color: black;
    padding: 5px 10px;
    text-decoration: none;
}

.mhamburguesa-menu-content a:hover {
    background-color: #f1f1f1;
}

@media screen and (max-width: 768px) {
    .mhamburguesa-menu-button {
        font-size: 16px; /* Tamaño más grande para facilitar el toque */
        padding: 10px; /* Espacio adicional para tocar fácilmente */
    }

    .mhamburguesa-menu-content {
        right: 10px; /* Asegúrate de que el menú no se extienda fuera de la pantalla */
    }

    .mhamburguesa-menu-content a {
        font-size: 11px;
        padding: 8px 15px; /* Espacio adicional para facilitar el toque */
    }
}

#botonSubir {
    display: none; /* Oculto inicialmente */
    position: fixed; /* Flotante en la página */
    bottom: 20px; /* Posición desde abajo */
    left: 50%; /* Centrado horizontalmente */
    transform: translateX(-50%); /* Ajuste fino para centrar exactamente */
    font-size: 12px; /* Tamaño de la flecha */
    border: none; /* Sin borde */
    background-color: rgba(0, 191, 255, 0.5); /* Semi-transparente */
    color: white; /* Color del texto */
    padding: 10px; /* Espaciado interno */
    border-radius: 50%; /* Redondeado */
    cursor: pointer; /* Cursor tipo puntero */
}

/* Ocultar en dispositivos móviles */
@media screen and (max-width: 768px) {
    #botonSubir {
        display: none;
    }
}

select[name="t_vgte"] {
    color: black; /* Color por defecto */
    font-weight: 400;
}

/* Cambia el color cuando se selecciona una opción específica */
select[name="t_vgte"]:has(option[value="S"]:checked) {
    color: #28a745;  /* Verde */
    font-weight: 700; /* Bold */
}

select[name="t_vgte"]:has(option[value="N"]:checked) {
    color: #dc3545;  /* Rojo */
    font-weight: 700; /* Bold */
}

select[name="t_esta"] {
    color: black; /* Color por defecto */
    font-weight: 400;
}

/* Cambia el color cuando se selecciona una opción específica */
select[name="t_esta"]:has(option[value="PUBLICADO"]:checked) {
    color: #28a745;  /* Verde */
    font-weight: 700; /* Bold */
}

select[name="t_esta"]:has(option[value="SIN_PUBLICAR"]:checked) {
    color: #dc3545;  /* Rojo */
    font-weight: 700; /* Bold */
}

select[name="t_esta_prod"] {
    color: black; /* Color por defecto */
    font-weight: 400;
}

/* Cambia el color cuando se selecciona una opción específica */
select[name="t_esta_prod"]:has(option[value="PUBLICADO"]:checked) {
    color: #28a745;  /* Verde */
    font-weight: 700; /* Bold */
}

select[name="t_esta_prod"]:has(option[value="SIN_PUBLICAR"]:checked) {
    color: #dc3545;  /* Rojo */
    font-weight: 700; /* Bold */
}

select[name="t_prod_ofer"] {
    color: black; /* Color por defecto */
    font-weight: 400;
}

/* Cambia el color cuando se selecciona una opción específica */
select[name="t_prod_ofer"]:has(option[value="S"]:checked) {
    color: #28a745;  /* Verde */
    font-weight: 700; /* Bold */
}

select[name="t_prod_ofer"]:has(option[value="N"]:checked) {
    color: #dc3545;  /* Rojo */
    font-weight: 700; /* Bold */
}