body{
	font-family: Calibri;
    background: linear-gradient(180deg, rgba(170, 200, 240,1) 0%, rgba(40,60,70,1) 100%);
}
A:link {text-decoration: none; color:#06A;  cursor: pointer; }
A:visited {text-decoration: none; color:#69F;  cursor: pointer;}
A:active {text-decoration: none; color:#9CF;  cursor: pointer;}
A:hover {text-decoration: none; color: #03C; cursor:pointer}

.estilo40 {
    color: white; /* Color del texto */
    text-shadow: 
        -2px -2px 0 #000,  
         2px -2px 0 #000,
        -2px  2px 0 #000,
         2px  2px 0 #000; /* Sombra para crear bordes negros */
    font-size: 24px; /* Tamaño de la fuente */
}
.titulo{text-shadow: 3px 2px 3px rgb(140, 170, 200);font-family:Verdana;color:rgb(80,130,170);font-size:28px}
.titulo2{text-shadow: 3px -2px 3px rgb(90, 90, 90);font-family:Verdana;color:#E0E0E5;font-size:22px}
.titulo3{text-shadow: 3px -2px 3px rgb(120, 150, 250);font-family:Verdana;color:rgb(40,120,170);font-size:18px}
.glass {
  background-image: linear-gradient(0deg, transparent 0%, rgba(200, 200, 255, .3) 10%, rgba(255, 255, 255, .9) 90%, transparent 100%);
  border-radius:10px;border: 1px solid #AAA;
  padding: 0;
}
.glass2{
  background-image: linear-gradient(0deg, transparent 0%, rgba(180, 210, 255, .3) 10%, rgba(155, 155, 155, .9) 90%, transparent 100%);
  border-radius:10px;border: 1px solid #AAA;
  padding: 8;
}
.glass3{
  background-image: linear-gradient(0deg, transparent 0%, rgba(170, 220, 230, .3) 10%, rgba(200, 220, 230, .9) 90%, transparent 100%);
  border-radius:10px;border: 1px solid #AAA;
  padding: 8;
}
.tabla2 {text-align: center; }
.tabla {font-weight: bold;	text-align: center; }
.tabla tbody tr td table tr td .glass1 .Sglass table tr td {
	font-weight: normal;
	text-align: left;
}

input[type="button"] {
    height: 30px;
/*    font-size: 14px;  Ajusta el tamaño de fuente según sea necesario */
}

input[type=button]:hover {
    background-color:rgb(180,210,230);
}

input[type=submit]{
     font-size:16px;
     font-family:Verdana,Helvetica;
     font-weight:bold;
     color:#638cb5;
     background:white;
     border:1px solid #808080;
     height:23px;
     cursor:hand;
}

    #calendario {
      font-family: Arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }

    #calendario th,
    #calendario td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: center;
    }

    #calendario th {
      background-color: #f2f2f2;
    }

    #calendario td:hover { background-color: #ddd;}
    #tablaProductosVendidos td:hover { background-color: #ddd;}
    #tablaProductos td:hover { background-color: #ddd; font-size:16pt; cursor: pointer;}
    #tablastock td:hover { background-color: #ddd;}
    #calendario .dia-actual {
      background-color: #a6dcef;
    }

    #botones {
      margin-top: 10px;
    }

    #graficoContainer {
      width: 98%;
      margin: 20px auto;
      border: 2px solid #ddd;
    }

    #calendarioDiv {
      display: none;
    }
    
    :root {
    --neon-color: white; /* Color principal cian */
    --bg-glow: rgba(0, 212, 255, 0.1);
    --font-size: 11px;
}

.btn-futurista {
    /* Dimensiones y Forma */
    height: 28px;
    padding: 0 12px;
    border-radius: 4px; /* Redondeado sutil para ahorrar espacio */
    margin: 2px;
    
    /* Estilo Visual */
    background: var(--bg-glow);
    border: 1px solid var(--neon-color);
    color: var(--neon-color);
    
    /* Tipografía */
    font-family: 'Segoe UI', Roboto, sans-serif;
    font-size: var(--font-size);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    
    /* Interactividad */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    outline: none;
    box-shadow: inset 0 0 5px rgba(0, 212, 255, 0.1);
}

/* Efecto al pasar el mouse */
.btn-futurista:hover {
    background: var(--neon-color);
    color: #000;
    box-shadow: 0 0 12px var(--neon-color);
    transform: translateY(-1px);
}

/* Efecto al hacer click */
.btn-futurista:active {
    transform: translateY(1px);
    filter: brightness(0.8);
}

/* Versión circular para el botón de ayuda */
.btn-ayuda {
    width: 28px;
    padding: 0;
    border-radius: 50%;
}