@import url('botones.css');

@import url('experiment.css');
/*  Importación de fuentes desde Google Fonts  */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;800&display=swap');
/*  Importación de fuentes desde el mismo proyecto  */
@font-face {
  font-family : 'Proxima Nova Rg';
  src         : url('files/proxima-nova-bold.otf');
}

:root {  /*  Variables del proyecto  */
  
  /*  Anchura máxima del contenido en desktop */
  --max-contenido : 1200px;

  /*  Colores  */
  --color-principal     : #2a88f4;
  --color-principal-alt : #035dbf;
  --color-titulo        : #121f26;
  --color-texto         : #6f7367;
  --color-de-fondo      : #fafdff;
  --color-blanco        : #ffffff;
  --color               : var(--color-principal);
  --color-alt           : var(--color-principal-alt);

  /* colores para el semáforo */

  /* --color-n0  : rgb(60, 255, 0); */
  --color-n0  : rgb(130, 138, 60);
  --color-n1  : rgb(164, 130, 49);
  --color-n2  : rgb(134, 56, 145);
  --color-n3  : rgb(73, 65, 152);
  --color-n4  : rgb(41, 86, 54);
  --color-n5  : rgb(33, 136, 144);
  --color-luz : rgb(128, 0, 0);
  --color-na  : rgb(80, 35, 100);
  --color-nm  : rgb(136, 6, 206);
  --color-nb  : rgb(153, 102, 204);

  /*  colores para tabla  */

  --color-tabla-encabezado  : rgb(68, 114, 196);
  --color-tabla-borde       : rgb(142, 170, 219);
  --color-tabla-linea       : rgb(217, 226, 243);
  --color-tabla-hover-celda : rgb(179, 198, 231);
  --color-tabla-hover-linea : rgb(142, 170, 219);

  /* botones pequeños */

  --color-editar      : rgb(51, 122, 183);
  --color-iniciar     : rgb(91, 192, 222);
  --color-ver         : rgb(182, 220, 168);
  --color-verificar-f : rgb(240, 173, 78);
  --color-verificar-b : rgb(164, 124, 68);
  --color-verificar-h : rgb(236, 151, 31);

  /* colores para cuestuonarios */

  --color-cues-fondo       : rgb(217, 226, 243);
  --color-cues-boton       : rgb(136, 6, 206);
  --color-cues-boton-hover : rgb(153, 102, 204);

  /*  Fuentes  */
  --fuente-cuerpo : 'Open Sans', sans-serif;
  --fuente-titulo : 'Proxima Nova Rg', sans-serif;

  /*  Tamaños  */
  --altura-de-encabezado  : 3.5rem;
  --separacion-seccion    : 4rem;
  --separacion-bloque     : 2rem;
  --linea-entre-texto     : 1.6;
  --linea-entre-titulo    : 1.3;

  /* Tamaños de fuentes */
  --tamaño-fuente-h1          : 2rem;
  --tamaño-fuente-h2          : 1.5rem;
  --tamaño-fuente-h3          : 1.25rem;
  --tamaño-fuente-h4          : 1rem;
  --tamaño-fuente-grande      : 1rem;
  --tamaño-fuente-normal      : 0.875rem;
  --tamaño-fuente-pequeño     : 0.75rem;
  --tamaño-fuente-muy-pequeño : 0.6875rem;

  /* Capas */
  --z-back       : -10;
  --z-normal     : 1;
  --z-front      : 10;
  --z-tooltip    : 20;
  --z-overlay    : 30;
  --z-modal      : 40;
  --z-fixed      : 50;
  --z-off-canvas : 100;

  /* Otros */
  --radio-del-borde : 0.5rem;
  --sombreado    : 0 2px 2px rgba(36, 47, 66, 0.1);
  /* agregar mas */
}

@media screen and (min-width: 1024px) {
  /*  Variables de tamaño en computador  */
  :root {
    --altura-de-encabezado      : 5rem;
    --separacion-seccion        : 8rem;
    --separacion-bloque         : 4rem;
    --tamaño-fuente-h1          : 3rem;
    --tamaño-fuente-h2          : 2rem;
    --tamaño-fuente-h3          : 1.5rem;
    --tamaño-fuente-h4          : 1.25rem;
    --tamaño-fuente-grande      : 1.25rem;
    --tamaño-fuente-normal      : 1rem;
    --tamaño-fuente-pequeño     : 0.875rem;
    --tamaño-fuente-muy-pequeño : 0.75rem;
  }
}

#Link {
  height: var(--altura-de-encabezado);
}

body {
  display          : flex;
  flex-direction   : column;
  min-height       : calc(100vh - var(--altura-de-encabezado));
  color            : var(--color-texto);
  padding-top      : var(--altura-de-encabezado);
  font-family      : var(--fuente-cuerpo);
  font-size        : var(--tamaño-fuente-normal);
  line-height      : var(--linea-entre-texto);
  background-color : var(--color-de-fondo);
}

a {
  color           : var(--color-texto);
  text-decoration : none;
}

p {
  margin-top : 0;
}

h1, h2, h3, h4, h5, h6 {
  margin-top  : 0;
  color       : var(--color-titulo);
  font-family : var(--fuente-titulo);
  line-height : var(--linea-entre-titulo);
  font-weight : 800;
}

h1 {
  font-size     : var(--tamaño-fuente-h1);
  margin-bottom : var(--separacion-bloque);
  padding-top   : var(--separacion-bloque);
  text-align    : center;

}

h2 {
  font-size  : var(--tamaño-fuente-h2);
  text-align : center;

}

h3 {
  font-size : var(--tamaño-fuente-h3);
}

h4 {
  font-size : var(--tamaño-fuente-h4);
}

.Contenido {
  width        : calc(100% - 2rem);
  max-width    : var(--max-contenido);
  margin-left  : 1rem;
  margin-right : 1rem;
}

@media screen and (min-width: 1024px) {
  .Contenido {
    width        : 100%;
    margin-left  : auto;
    margin-right : auto;
  }
}

.imagenContenida {
  width          : 100%;
  height         : 0;
  overflow       : hidden;
  position       : relative;
  padding-bottom : 56.25%;
}

.imagenContenida img {
  position   : absolute;
  top        : 0;
  left       : 0;
  width      : 100;
  height     : 100%;
  object-fit : cover;
}

/*********************** menu principal ***********************/

.EncabezadoPrincipal {
  display         : flex;
  position        : fixed;
  top             : 0;
  height          : var(--altura-de-encabezado);
  width           : 100%;
  background      : var(--color-blanco);
  box-shadow      : 0 3px 5px rgba(112, 126, 132, 0.1);
  z-index         : var(--z-fixed);
}

.EncabezadoPrincipal .Contenido {
  display     : flex;
  align-items : center;
}

.EncabezadoPrincipal .jam {
  margin-left : auto;
  color       : var(--color-titulo);
  font-size   : 1.5rem;
  cursor      : pointer;
}

@media screen and (min-width : 1024px) {
  .EncabezadoPrincipal .jam {
    display : none;
  }

  .MenuPrincipal {
    margin-left : auto;
  }

  .MenuPrincipal ul {
    display : flex;
    font-size: var(--tamaño-fuente-grande);
    text-align: center;
  }

  .MenuPrincipal ul li:last-of-type a {
    padding-right : 0;
  }
}

.EncabezadoPrincipal .jam:hover, .EncabezadoPrincipal a:hover {
  color : var(--color-principal);
}

.EncabezadoPrincipal img {
  height : var(--altura-de-encabezado);
}

.MenuPrincipal{
  display         : flex;
  justify-content : center;
  text-align      : center;
  align-items     : center;
  font-size       : var(--tamaño-fuente-h2);
}

@media screen and (max-width : 1024px) {
  .MenuPrincipal {
    position    : fixed;
    top         : 0;
    left        : 0;
    width       : 100%;
    height      : 100vh;
    background  : var(--color-blanco);
    z-index     : var(--z-off-canvas);
    transform   : scale(0);
    transition  : transform 0.25;
    /*will-change : transform;*/
  }
}

.MenuPrincipal.active {
  transform : initial;
}

.MenuPrincipal ul {
  list-style   : none;
  padding-left : 0;
  margin       : 0;
}

.MenuPrincipal .jam-close {
  position : absolute;
  right    : 1rem;
  top      : 0.5rem;
  font-size: var(--tamaño-fuente-h1);
}

.MenuPrincipal a {
  display         : block;
  padding         : 0.75rem 1rem;
  color           : var(--color-titulo);
  text-decoration : none;
  font-weight     : 600;
}

/************************** bienvenida **************************/

._1Inicio .Seccion {
  position   : relative;
  padding    : var(--separacion-bloque) 0;
  background : var(--color-principal);
  color      : black;
  text-align : center;
}

._1Inicio .Seccion .Contenido {
  position : relative;
  z-index  : var(--z-front);
}

._1Inicio .Seccion .Titulo {
  color : #370b4d;
}

._1Inicio .Seccion p {
  opacity       : 1;
  margin-bottom : 2rem;
  font-weight   : 600;
  font-size     : 1.25rem;
}

._1Inicio .Seccion .Fondo {
  position   : absolute;
  left       : 0;
  top        : 0;
  width      : 100%;
  height     : 100%;
  object-fit : cover;
  z-index    : var(--z-normal);
  opacity    : 0.3;
}

/************************** Solicitudes **************************/

.Contenido {
  display         : grid;
  gap             : 3rem;
  justify-content : center;
}

.Servicio {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  text-align     : center;
  max-width      : 290px;
  margin         : 0 auto;
}

.Servicio a {
  text-decoration : none;
}

.Servicio .jam {
  margin-bottom : 1rem;
  color         : var(--color-principal);
  font-size     : 4rem;
}

.Servicio h3 {
  margin-bottom : 0.5rem;
  margin-top    : 1rem;
}

.Servicio p {
  margin-bottom : 2rem;
}

@media screen and (min-width: 512px) {
  .Servicios .Contenido {
    grid-template-columns : repeat(1, 1fr);
  }
}
@media screen and (min-width: 768px) {
  .Servicios .Contenido {
    grid-template-columns : repeat(2, 1fr);
  }
}
@media screen and (min-width: 1024px) {
  .Servicios .Contenido {
    grid-template-columns : repeat(3, 1fr);
  }
}
@media screen and (min-width: 1280px) {
  .Servicios .Contenido {
    grid-template-columns : repeat(4, 1fr);
  }
}

/************************* -- semáforo -- *************************/

.Venta {
  --color-luz : var(--color-n5);
}

.Elaboracion {
  --color-luz : var(--color-n0);
}

.Cotizacion {
  --color-luz : var(--color-n1);
}

.Pedido {
  --color-luz : var(--color-n2);
}

.Remision{
  --color-luz : var(--color-n3);
}

.Nota{
  --color-luz : var(--color-n4);
}

.Contenido {
  display         : grid;
  gap             : 3rem;
  justify-content : center;
}

.Foco {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  text-align     : center;
  position       : relative;
  width          : 100%;
  min-width      : 200px;
  padding        : 4rem 0;
  border-radius  : 1rem;
  background     : var(--color-luz);
  transition     : .3s;
}

.Foco a {
  text-decoration : none;
  display         : none;
}

.Foco > div {
  padding : 0;
  z-index : 10;
}

.Foco .Fondo {
  position      : absolute;
  left          : 0;
  top           : 0;
  width         : 100%;
  height        : 100%;
  object-fit    : cover;
  border-radius : 1rem;
  z-index       : 1;
  opacity       : .1;
}

.Foco:hover {
  padding    : 1rem 0rem;
  background : rgb(51, 122, 183);
  transition : .3s;
}

.Foco:hover h3, .Foco:hover h2{
  margin : 0;
  color  : var(--color-blanco);
}

.Foco:hover a {
  display         : flex;
  justify-content : center;
  transition      : .3s;
}

@media screen and (min-width: 512px) {
  .Semaforo .Contenido {
    grid-template-columns : repeat(1, 1fr);
  }
}
@media screen and (min-width: 768px) {
  .Semaforo .Contenido {
    grid-template-columns : repeat(2, 1fr);
  }
}
@media screen and (min-width: 1024px) {
  .Semaforo .Contenido {
    grid-template-columns : repeat(3, 1fr);
  }
}
@media screen and (min-width: 1280px) {
  .Semaforo .Contenido {
    grid-template-columns : repeat(4, 1fr);
  }
}

/******************** -- TABLAS EN GENERAL -- ********************/

.Verificaciones{
  display        : flex;
  flex-direction : column;
  text-align     : center;
  align-items    : center;
}

.Usuario {
  display        : flex;
  flex-direction : column;
  text-align     : center;
  align-items    : center;
}

.Item {
  display        : flex;
  flex-direction : column;
  text-align     : center;
  align-items    : center;
}

.SolicitudesDeOrnenDeServicio {
  display        : flex;
  flex-direction : column;
  text-align     : center;
  align-items    : center;
}

caption {
  margin-bottom : 1rem;
  font-weight   : 800;
  font-size     : 1.525rem;
  color         : var(--color-texto);
}

table {
  border-collapse : collapse;
  table-layout    : fixed;
  width           : 90%;
  empty-cells     : hide;
  color           : black;
  font-size       : 1.1rem;
}

tr:nth-of-type(2n) {
  background : var(--color-tabla-linea);
}

thead {
  background : var(--color-tabla-encabezado);
  color      : var(--color-blanco);
  font-size  : 1.15rem;
  position   : sticky;
  top        : var(--altura-de-encabezado);
}

th, td {
  border : 1px solid var(--color-tabla-borde);
  height : 40px;
}


tbody .E {
  background : var(--color-n0);
  color      : var(--color-blanco);
}

tbody .C {
  background : var(--color-n1);
  color      : var(--color-blanco);
}

tbody .P {
  background : var(--color-n2);
  color      : var(--color-blanco);
}

tbody .R {
  background : var(--color-n3);
  color      : var(--color-blanco);
}

tbody .N {
  background : var(--color-n4);
  color      : var(--color-blanco);
}

tbody .D {
  background : var(--color-luz);
  color      : var(--color-blanco);
}

tbody .NA {
  background : var(--color-na);
  color      : var(--color-blanco);
}

tbody .NM {
  background : var(--color-nm);
  color      : var(--color-blanco);
}

tbody .NB {
  background : var(--color-nb);
  color      : var(--color-blanco);
}

tbody .Luz {
  background : var(--color-luz);
  color      : var(--color-blanco);
}


tbody tr:hover {
  background : var(--color-tabla-hover-linea);
}

tbody td:hover {
  background : var(--color-tabla-hover-celda);
  font-size  : 1rem;
  color      : black;
}

td:hover .jam {
  font-size : 2rem;
}

.botonTabla {
  margin        : 0;
  padding       : 3px 7px;
  border-radius : 3px;
  color         : black;
  font-size     : 0.8rem;
  font-weight   : 400;
  min-width     : 5rem;
}

.botonTabla::before {
  content : attr(data-tipo);
}

[data-tipo="TICKET"],
[data-tipo="Iniciar"] {
  background : var(--color-iniciar);
}

[data-tipo="Editar"] {
  background : var(--color-editar);
}

[data-tipo="TERMINAR"],
[data-tipo="Ver"] {
  background : var(--color-ver);
}

[data-tipo="PASAR A PEDIDO"],
[data-tipo="SOL. FACTURAR"],
[data-tipo="Verificar"] {
  background : var(--color-verificar-f);
  border: 1px solid var(--color-verificar-b);
}

[data-tipo="Verificar"]:hover {
  background: var(--color-verificar-h);
}

@media screen and (max-width: 600px)
{
  table
  {
    font-size : 0.5rem;
    width     : 98%;
  }

  thead
  {
    font-size : 0.6rem;
  }

  .botonTabla {
      /* margin        : 0; */
      padding       : 2px 1px;
      /* border-radius : 3px; */
      /* color         : black; */
      /* font-weight   : 400; */
    font-size     : 0.5rem;
    min-width     : 1.25rem;
  }

  th, td {
    height : 1rem;
  }

  caption {
    font-size     : 1.2rem;
  }

  tbody td:hover {
    font-size  : 0.6rem;
  }

  td:hover .jam {
    font-size : 0.6rem;
  }
}

/*********************** Cuestionarios ***********************/

.Formulario {
  display         : grid;
  gap             : 3rem;
  justify-content : center;
  align-items     : center;
  flex-direction  : column; 
}

form {
  justify-content : flex-start;
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  gap             : 2rem;
  background      : var(--color-cues-fondo);
  padding         : 1.5rem;
  border-radius   : 0.7rem;
  box-shadow      : 0 2px 4px rgba(0, 0, 0, .25);
  max-width       : 500px;
}

.Servicios .Formulario  form{
  margin-top      : 3rem;
  flex-direction  : row;
  justify-content : flex-start;
  max-width       : 100%;
}

form p, form h3 {
  text-align : center;
  max-width  : 500px;
}

fieldset {
  border         : none;
  display        : flex;
  flex-direction : column;
  flex-wrap      : wrap;
  gap            : 1rem;
}

legend {
  font-weight   : 600;
  margin-bottom : .5rem;
  font-size     : 1.25rem;
  color         : black;
}

.Pregunta {
  display        : flex;
  flex-direction : column;
  flex-grow      : 1;
}

.Pregunta label {
  order     : -1;
  font-size : 1.1rem;
}

.PreguntaOpcion p {
  font-size     : 1.1rem;
  text-align    : left;
  margin-bottom : 0rem;
}

.Pregunta textarea {
  resize        : none;
  border        : 1px solid #ddd;
  border-radius : 0.3rem;
}

.Pregunta input {
  border        : 1px solid #ddd;
  border-radius : 0.3rem;
  margin-bottom : 0.25rem;
  padding       : 0.3rem 0;
  width         : 200px;
  /* width         : 90%; */
}

.Pregunta select {
  border        : 1px solid #ddd;
  border-radius : 0.3rem;
  margin-bottom : 0.25rem;
  padding       : 0.3rem 0;
  width         : 100%;
}

/*.Fin {
  width           : 100%;
  display         : flex;
  justify-content : center;
}*/

input[type="submit"] {
  background    : var(--color-cues-boton);
  color         : var(--color-blanco);
  border        : none;
  padding       : 5px 13px;
  margin-top    : 5px;
  border-radius : 8px;
  cursor        : pointer;
}

.Descarga input[type="submit"] {
  background    : rgb(51, 122,183);
  color         : var(--color-blanco);
  border        : 1px solid rgb(46, 109, 164);
  padding       : 5px 13px;
  margin-top    : 5px;
  border-radius : 4px;
  cursor        : pointer;
}

.Fin .positivo {
  background : rgb(92, 184, 92);
  border     : 1px solid rgb(53, 123, 53);
}

.Fin .negativo {
  background : rgb(217, 83, 79);
  border     : 1px solid rgb(160, 38, 35);
}

fieldset:hover legend {
  color : red;
}

.Pregunta:hover label {
  color : red;
}

.PreguntaOpcion:hover > p {
  color : red;
}

.Pregunta input:focus + label {
  color : var(--color);
}

.Pregunta textarea:focus + label {
  color : var(--color);
}

fieldset:focus-within legend {
  color : var(--color);
}

input[type="submit"]:hover {
  background : var(--color-cues-boton-hover);
}

.Descarga input[type="submit"]:hover {
  background : rgb(40, 96, 144);
}

.Fin .positivo:hover {
  background : rgb(53, 123, 53);
}

.Fin .negativo:hover {
  background : rgb(160, 38, 35);
}

/* Servicios */

/**********************  ----- FOOTER -----  **********************/


footer {
/*
  position       : absolute;
  bottom         : 1rem;
  left           : 50%;
  transform      : translate(-50%);
*/

  display        : flex;
  flex-direction : column;
  align-items    : center;
  text-align     : center;
  margin-top     : 4rem;
  margin-bottom  : 1rem;
}

.PieDePagina p {
  margin-bottom : 0;
}

.Centrado { 
  position: absolute;
  /* top: 50%; */
  left: 50%;
  transform: translate(-88%, -210%);
}

@import url('alertas.css');

/* @import url('experimento.css'); */