body { 
   background-color:snow; 
   color:black; 
   background-image:url('es/media/fondo.jpg'); 
   background-repeat:no-repeat; 
   background-attachment:fixed;
   background-size:cover;
   font-family:Arial, Helvetica, sans-serif;  
   font-size:16px;  }

.linetop {
   position:fixed;
   top:0px;  left:0px;  right:0px;  height:28px;
   background:rgb(220,220,220);
   border-style:solid;
   border-color:grey;
   border-bottom-color:snow;
   border-width:1px;
   line-height:28px ;
   font-size:16px;
   text-align:center;
   color:rgb(10,10,10);
   z-index:5;  }

.linedown {
   position:fixed;
   bottom:0px ;  left:0px;  right:0px;  height:22px;
   background:rgb(220,220,220);
   border-style:solid;
   border-color:grey;
   border-top-color:snow;
   border-width:1px;
   line-height:20px ;
   font-size:65%;
   text-align:center;
   color:rgb(60,60,60);
   z-index:5;  }

.usrplace {
   position: fixed ;
   top: 2px;  right: 4px; text-align:right;
   font-weight: normal;  
   font-size:100%;
   color: rgb(50,50,50);
   background:transparent;
   z-index: 500;
}

.wkarea {  position:fixed;  top:30px;  left:2px;  right:2px;  bottom:24px;  overflow:none;  z-index:0;  }

.fullwin {  position:fixed;  top:0;  left:0;  width:100%;  height:100%;  background:rgba(0,0,0,0.6);  color:white;  z-index:5000;  }

.subtit, .nav, .sdata, .einszone { box-sizing:border-box;  position:absolute; }


.imgcover { 
   position:fixed;  z-index: 1;
   margin:auto;  display:block;
   top:50%;  left:50%;
   transform:translate(-50%,-50%);
   max-width:80vw;  max-height:84vh;
   object-fit:contain;
   background-color:transparent;
   box-shadow:4px 4px 8px rgb(140,140,140);  }

.full {  width:100%;  height:100%;  border:none;  overflow:hidden; }

.subtit {
   display:flex;  text-align:center;
   color:white;  mix-blend-mode:difference;
   justify-content:center;
   align-items:center;  
   background:transparent;
   z-index:1;  border:none;
   font-size:25px;  font-weight:bold;
   line-height:140%;
   text-shadow:3px 3px 6px rgb(180,180,180);
   font-family:TimesNewRoman ;  }

.nav { 
   background:rgba(220,220,220,0.9);
   z-index:1;
   border:2px solid gray;
   border-bottom-color:snow;
   border-right-color:snow;
   padding:6px 8px;
   overflow-y:auto;
   overflow-x:hidden;
   font-size:20px;
}

.sdata {  z-index:1;  border:2px solid gray;  border-bottom-color:snow;  border-right-color:snow;  }

.opn0, .opn1, .opn2 {
   border:1px solid transparent;
   background:transparent;
   color:rgb(20,20,20) ;
   padding:4px 10px;
   width:100%;
   max-width:800px;
   text-align:left;
   font-size:16px;
}

.opn1 { padding: 5px 5px 5px 20px; }
.opn2 { padding: 5px 5px 5px 40px; }
.opn0:hover, .opn1:hover, .opn2:hover { 
  border: 1px solid transparent;
  border-top-color: snow;
  border-left-color: snow;
  border-bottom-color: grey;
  border-right-color: grey;
  background: rgb(190,190,190); }

.av { border: 1 solid grey;  background:darkgreen; color:white; border-radius:10px; box-shadow:4px 4px 7px grey; 
      padding: 8px 16px;  cursor:pointer;  font-size:16px;  transition: all 0.15s ease-in-out;  }
.av:focus {  outline:none;  border: 2px solid black;  background: darkgreen;  color: white;  }
.av:active {  box-shadow: 2px 2px 4px grey inset;  transform: translateY(1px);  }

.opnul {  border: 1px solid transparent;  color: rgb(100,100,100);  }

.s-tab {  width:1200px;  color:white;  border:1px solid navy;  margin:auto;  padding:2px 6px;  
          background:rgb(100,100,255);  box-shadow: 4px 4px 8px rgb(140,140,140);  }

.t-tab {  width:1000px;  border:1px solid snow;  margin:4px auto;  color:white;  background:rgb(0,0,240);  padding:0 4px;  }

.l-tab {  width:780px;  border:1px solid snow;  margin:4px auto;  color:white;  background:rgb(0,0,180);  padding:0 4px;  }

.s-btn {  text-align:center;  width:120px;  color:white;  background:rgb(100,100,255);  border:1px solid rgb(100,100,255);
          padding:80px 6px;  font-size:120%;  margin:auto;  }
.s-btn:hover {  background:rgb(180,180,180);  color:black;  cursor:pointer;  box-shadow:1px 1px 7px snow;  }

.t-btn {  display:block;  text-align:center;  width:220px;  color:white;  background:rgb(0,0,240);
          border:1px solid rgb(0,0,240);  padding:18px 6px;  font-size:110%;  margin:auto;  }
.t-btn:hover {  background:rgb(180,180,180);  color:black;  cursor:pointer;  box-shadow:1px 1px 7px snow; }

.l-btn {  display:block;  text-align:center;  width:340px;  color:white;  background:rgb(0,0,180);
          border:1px solid rgb(0,0,180);  padding:8px 6px;  font-size:90%;  margin: auto;  }
.l-btn:hover {  background:rgb(180,180,180);  color:black;  cursor:pointer;  box-shadow:1px 1px 7px snow;  }

.c-btn {  position:relative;  display:block;  float:right;  text-align:left;  width:400px;  color:white;
          background:rgb(0,0,80);  border:1px solid snow;  padding:4px 6px;  font-size:80%;  margin:4px 4px;  }
.c-btn:hover {  background:rgb(180,180,180);  color:black;  cursor:pointer;  box-shadow:1px 1px 7px snow;  }

.modal {  display:none;  position:fixed;  top:0;  left:0;  width:100%;  height:100%;
          background-color:rgba(0,0,36,0.8);  justify-content:center;  align-items:center;  }
.modal-content {  position:fixed;  background-color:rgb(226,226,226 );  color:black;  padding:14px;
                  border:4px solid snow;  border-radius:10px;  width:65%;  max-height:65%;  top:80px; 
                  bottom:40px; text-align:center;  overflow-x:hidden;  overflow-y:auto;  }
.close {  margin-top:10px;  background-color:gray;  color:white;  border:none;  padding:8px 16px;  cursor:pointer;  }
.info {  width:100%;  text-align:left;  border-radius:6px;  border:1px solid gray;
         margin:3px 6px;  font-size:19px;  line-height:120%;  width:100%;  }

tool  {  font-weight:bold;  color:blue;  }  
tool:hover tip {  display:inline;  }
tip {  position:absolute;  display:none;  box-shadow:2px 2px 7px grey;  background-color:rgba(200,200,36,0.7);  padding:10px; 
       color:navy;  border-radius:10px;  font-size:80%;  font-style:oblique 10deg;  translate:-10px -30px;  z-index:10;  }

.infor { display:block; position:fixed; width:640px; height:440px; top:50%; left:50%;
         text-align:center; background:rgba(200,200,200,.8); color:black; border:1px solid grey;
         box-shadow:4px 4px 8px grey; translate: -50% -50%; padding:60px; z-index: 10;
         border-radius: 14px; font-size:18px; line-height:180%; } 

.userarea { display:block; position:fixed; width:680px; height:475px; top:50%; left:50%;
         text-align:center; background:rgba(220,220,220,.8); color:black; border:1px solid grey;
         box-shadow:4px 4px 8px grey; translate: -50% -50%; padding:40px; z-index: 10; font-weight: normal;
         border-radius: 14px; font-size:20px; font-family: "Times New Roman", Times, serif; }

.tdatac {  background:rgba(245,245,245,.9);  width:100%;  border-collapse:collapse;  }
.tdatac td:first-child {  text-align:right;  padding:2px 8px;  }
.tdatac td:not(:first-child) {  text-align:center;  padding:2px 4px;  }

.tdatal {  background:rgba(236,236,236,.9);  width:100%;  border-collapse:  collapse;  font-size:100%;  line-height:1.3%;  }
.tdatal td:first-child {  text-align:right;  padding:6px 8px;  }
.tdatal td:not(:first-child) {  text-align:left;  padding:6px 4px;  }

.tdataj {  background:rgba(245,245,245,.9);  width:100%;  border-collapse:collapse; }
.tdataj td:first-child {  text-align: right;  padding:2px 8px;  }
.tdataj td:not(:first-child) {  text-align:justify;  padding:2px 4px;  }

.inset {
    border-top: 2px solid gray;
    border-left: 2px solid gray;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    background:rgba(240,240,240,.9);  }

.Aviso { position:absolute;  width:420px;  top:50%;  left:50%;  transform:translate(-50%,-50%);  margin:auto; 
         color:rgb(0,12,36);  border-radius:16px;  border:2px solid white;  text-align:left;  font-size:140%; 
         padding:32px;  background-color:rgb(200,240,200);  z-index:1000;  box-shadow:4px 4px 7px 7px rgba(50,50,50,0.8); 
         background-image:url("media/bk2.jpg");  background-size:100% 100%;  background-position:center;  }
.Aviso button { border: 1 solid grey;  background:darkgreen; color:white; border-radius:20px; box-shadow:4px 4px 7px grey; 
      padding: 8px 16px;  cursor:pointer;  font-size:90%;  transition: all 0.15s ease-in-out;  padding:10px 40px;  }
.Aviso button:focus {  outline:none;  border: 2px solid black;  background: darkgreen;  color: white;  }
.Aviso button:hover {  outline:none;  border: 2px solid black;  background: green;  color:lime;  }
.Aviso button:active {  box-shadow: 2px 2px 4px grey inset;  transform: translateY(1px);  color:black;  }

.inphone {  width:280px;  color:rgb(50,50,50);  padding:2px 2p;  font-size:84%;  background:white;  border-radius:5px;  }
.inphone2 {  width:110px;  color:rgb(40,40,40);  padding:2px 2p;  font-size:84%;  border-radius:5px;  }

.nofill {  background:Aqua;  }
.btninfo {  width:120px;  padding:6px 10px;  font-size:74%;  color:black;  margin: 6px 26px;  background:Thistle;  border-radius:10px;  }
.btninfo:hover { background:navy; color:white; }

.bigchk {  transform: scale(1.3);            /* 1.0 = 100%, 1.3 = 130% */
           -webkit-transform: scale(1.3);    /* compatibilidad Safari */
           -ms-transform: scale(1.3);        /* compatibilidad IE */
           margin-left: 6px;                 /* opcional, ajusta separación con el texto */
           vertical-align: middle;    }

.btn {  font-size:80%;  padding:8px 30px;  background:rgb(200,200,230);  border-radius:10px;  margin:10px auto;  }
.btn:hover {  background:rgb(240,240,240);  color:navy;  }

input, textarea {  font-family:"Times New Roman", Times, serif;  font-size:80%;  line-height:1.4;  color:#333;  }

.btins  {  font-size:80%;  width:118px;  margin:4px;  background:rgb(230,230,250);  color:black;  border:1px solid darkgrey;
           border-radius:5px;  }
.btins:hover {  background:rgb(80,80,250);  color:white;  }





@media (max-width: 599px) {
  .usrplace {  top:4px;  right:4px;  font-size:80% ;  }
  .linetop {  height:32px;  line-height:32px;  }
  .info { width:88%;  margin:0; font-size:18px;  line-height:110%;  }
  .userarea {  width:400px; height:550px; top:50%; left:50%;  }
  .tdatal td:first-child {  padding: 2px 8px; }
  .tdatal td:not(:first-child) {  padding: 2px 4px; }
  .Aviso {  width:320px;  padding:28px;  }
  .inphone { width:210px;  font-size:74%; }
  .btninfo {  font-size:74%;  }
  .subtit, .nav, .sdata {  width:100%;  left:0;  right:auto;  }
  .subtit {  top:6px;  height:20px;  font-size:20px;  }
  .tmin     {  height:30px;  }
  .nav {  top:38px;  height:155px;  }
  .nmin     {  top:140px; height:140px; }
  .sdata {  top:202px;  bottom:5px;  }
  .smin     {  top:286px; }
  .einszone {  top:35px;  left:15px;  height;40px;  }
}

@media (min-width: 600px) and (max-width: 959px) {
  .usrplace {  top: 4px;  right: 4px;  font-size:80% ;  }
  .linetop {  height:32px;  line-height:32px;  }
  .info { width:88%;  margin:0; font-size:18px;  line-height:110%;  }
  .userarea {  width:400px; height:550px; top:50%; left:50%;  }
  .tdatal td:first-child {  padding: 2px 8px; }
  .tdatal td:not(:first-child) {  padding: 2px 4px; }
  .Aviso {  width:320px;  padding:28px;  }
  .inphone {  width:210px;  font-size:74%; }
  .btninfo {  font-size:74%;  }
  .subtit, .nav, .sdata, .einszone  {  left:5px;  right:5px; }
  .subtit   {  top:16px;  height:20px;  font-size:24px;  }
  .tmin     {  height:30px;  }
  .nav      {  top:60px;  width:200px;  bottom:5px;  }
  .nmin     {  top:130px;  }
  .sdata    {  top:60px;  left:210px;  bottom:5px;  }
  .smin     {  top:130px; }
  .einszone {  top:50px;  left:15px;  height;40px;  }
}

@media (min-width: 960px) {
  .subtit   {  top:15px;  left:15px;  width:400px;  height:100px;  }
  .tmin     {  height:70px; }
  .nav      {  top:130px;  left:15px;  width:400px;  bottom:15px;  }
  .nmin     {  top:210px;  }
  .einszone {  top:100px;  left:15px;  width:400px;  height;40px;  }
  .sdata    {  top:15px;  left:430px;  right:15px;  bottom:15px;  }
}