header {margin:  auto;  position: fixed;  top: 0;  left: 50%;  transform: translateX(-50%);  width: 90%;  z-index: 1000;  font-weight: bold;
display: flex;align-items: center;justify-content:center; font-size: calc(0.5vw + 0.5vh + 8px);  background-color: #F0EFEA; 
border-left: 20px solid GREY;    border-right: 20px solid GREY;   }
#botonera_principal {font-size: calc(0.5vw + 0.5vh + 10px);display: flex;justify-content: center;     }
#botonera_principal ul{height: 30px;margin:0;padding:5px;list-style:none;display:flex;align-items:center;margin-left: auto;margin-right: auto; }
#botonera_principal ul li {display: inline;}
#botonera_principal ul li a {color: white;    text-decoration: none;    padding: 10px;    display: inline-block;    background-color:blue;
 border-radius: 8px;   line-height: 10px;    margin-left:10px;;    font-size: calc(0.5vw + 0.5vh + 10px);align-items: center;}
#botonera_principal ul li a:hover {color: blue;background-color: white;border: 1px solid skyblue;border-radius: 8px;height:20px; text-align: center;}
#botonera_principal ul li img {    height: 30px;}
#logo-container {    text-align: center;    font-size: calc(0.5vw + 0.5vh + 10px);}
#logo-container img {    display: block;    margin: 0 auto;    height: 25px;}
body {font-family: Arial, sans-serif;margin:40px 0 0 0 ; ; padding: 0;    background: white;  font-size: calc(0.5vw + 0.5vh + 10px);}
#contenedor, #contenedor_pedido {width: 90%;height: 70%;display: flex;align-items: center;margin: auto;font-size: calc(0.5vw + 0.5vh + 10px);}
.arriba{width:90%;height:100%; border-left:20px solid #E8A735;border-right:20px solid #E8A735;align-items:center;margin:auto;font-size:calc(0.5vw + 0.5vh + 10px);}
.medio {width:90%; height:100%; border-left: 20px solid skyblue;border-right: 20px solid skyblue;align-items: center;margin: 0 auto auto auto;    font-size: calc(0.5vw + 0.5vh + 10px);}
.medio_in{width:90%; height:100%;border-left:20px solid skyblue;border-right: 20px solid skyblue;align-items: center;margin: 0 auto auto auto;  font-size: calc(0.5vw + 0.5vh + 10px);}
.filtro {align-items: center;    margin: auto;    font-size: calc(0.5vw + 0.5vh + 10px);}
.col-itm { width:  5%; }
.col-ser { width: 10%; }
.col-ani { width:  6%; }
.col-tip { width:  9%; }
.col-cap { width:  5%; }
.col-mar { width: 19%; }
.col-obs { width: 35%;}
.col-acc { width: 10%; }
#id             {display:inline-block;width:4%;    margin-right:5px;font-weight:bold;vertical-align:middle;}
#usuario        {display:inline-block;width:10%;   margin-right:5px;font-weight:bold;vertical-align:middle;}
#servicio       {display:inline-block;width:12%;   margin-right:5px;font-weight:bold;vertical-align:middle;}
#tipo           {display:inline-block;width:14%;   margin-right:5px;font-weight:bold;vertical-align:middle;}
#capacidad      {display:inline-block;width:12%;   margin-right:5px;font-weight:bold;vertical-align:middle;}
#marca          {display:inline-block;width:15%;   margin-right:5px;font-weight:bold;vertical-align:middle;}
#anio           {display:inline-block;width:10%;   margin-right:5px;font-weight:bold;vertical-align:middle;}
#observaciones  {display:inline-block;width:18%;   margin-right:5px;font-weight:bold;vertical-align:middle;}
#matafuegos .matafuego {    margin-bottom: 15px;}
#contenido {padding-top: 70px;padding-bottom: 150px;text-align: center; height: 500px;    background-color: blue;    border-left: 20px solid white;}
#ingreso {width:200px;padding: 20px;background-color: #FFF;    font-size: calc(0.5vw + 0.5vh + 10px);}
#marca {width: 60px;height: 40px;   margin-top: 5px;}
form {    max-width: 95%;    margin: auto;    background: #fff;    padding: 20px;
    border-radius: 10px;    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);    font-size: calc(0.5vw + 0.5vh + 10px);}
.form-group {   margin-bottom: 15px;    border: 2px solid blue;    border-radius: 10px;    padding: 5px;}
.form-group input,.form-group select {    width: calc(90% - 10px);    padding: 8px;    border: 1px solid #ddd;    border-radius: 5px;}
.form-group label {    width:50%;    display: block;    margin-bottom: 5px;}
.form-group-2col .form-group {    width: calc(50% - 10px);}
.form-group-2col {display: flex;    justify-content: space-between;}
.form-group-3col .form-group {    width: calc(33% - 10px);}
.form-group-3col {   display: flex;    justify-content: space-between;   flex-wrap: wrap;}
.form-group-4col {width: calc(25% - 10px);}
.form-group-4col {display: flex;    justify-content: space-between;   flex-wrap: wrap;}
.matafuego{padding:10px;margin-bottom:5px;border-radius:10px;background:linear-gradient(to bottom,WHITE,skyblue);font-size:calc(0.5vw+0.5vh+10px);}
.matafuegos-table {    width: 100%;    table-layout: fixed;    border-collapse: collapse;}
.matafuegos-table th,.matafuegos-table td {  border: 1px solid #000;padding: 8px;overflow-wrap: break-word;white-space: normal;   text-align: center;}
.matafuegos-table button {background-color: blue;color: white; padding:5px 10px;border: none;border-radius:5px;font-weight: bold;   cursor: pointer;}
.matafuegos-table button:hover {background-color: white;    color: blue;}
.pedido-container{display: flex;flex-direction: column;align-items: center;padding: 10px;font-size: calc(0.5vw + 0.5vh + 10px);}
.pedido-info{margin-bottom: 10px;}
.pedido-info table {    border-collapse: collapse;    width: 80%;}
.pedido-info table td,.pedido-info table th {    border: 1px solid #000;    padding: 8px;}
.pedido-info th {background-color: #f2f2f2; font-weight: bold;}
a {color: #F1DCC9;    text-decoration: none;    font-size: calc(0.5vw + 0.5vh + 10px);}
button,input[type="submit"] {    background-color: blue;    color: white;    padding: 10px 20px;    border: none; border-radius: 8px;cursor: pointer;margin-top: 10px;margin-left: 5px; font-weight: bold;    font-size: calc(0.5vw + 0.5vh + 10px);}
button:hover,input[type="submit"]:hover {background-color: lightgrey;   color: blue;    border: 1px solid blue;    border-radius: 5px;
    padding-bottom: 9px;}
h1 {margin: 0 0 0 40px;font-size: calc(  1vw +   1vh + 20px);color: #333;text-align: center;}
h2 {margin: 0 0 0 40px;font-size: calc(0.8vw + 0.8vh + 15px);color: #333;text-align: center;}
hr {margin: 0;    height: 8px; color:red}
pedido{background-color: #fff;border: 2px solid #FF000F;border-radius: 5px;margin-bottom: 20px;padding: 10px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
pedido-header {background-color: #BFBFBF;padding: 1px;    border: 2px solid blue;    border-radius: 5px;}
pedido-header p {    margin: 5px 0;}
pedido-matafuegos {    padding: 8px;}
pedido-matafuegos h4 {    margin-top: 0;    font-size: calc(0.5vw + 0.5vh + 10px);}
p {    margin: 5px;    font-size: calc(0.5vw + 0.5vh + 10px);}
table {    width: 100%;    border-collapse: collapse;    border-radius: 5px;    font-size: calc(0.5vw + 0.5vh + 10px);}
table th {    background-color: #CBCBCB;}
table th,table td {    border: 1px solid #ddd;    padding: 2px;    text-align: left;}table tr:nth-child(even) {    background-color: #C3C3C3;}
footer {    position: fixed;    bottom: 0;    width: 90%;    background-color: #F0EFEA;    border-left: 20px solid GREY;    border-right: 20px solid GREY;    font-weight: bold;    text-align: center;    left: 50%;    transform: translateX(-50%);    font-size: calc(0.5vw + 0.5vh + 15px);    margin: 0 auto;}
footer a {  color: white;    text-decoration: none;}footer a:hover {    color: BLUE;}
.font_foot {    color: black;    text-align: center;    font-size: calc(1vw + 0.45vh);    overflow: hidden;    text-overflow: ellipsis;}
@media (min-width: 2560px)                         {    html { font-size: calc(var(--base-font-size) * 3); }}
@media (min-width: 1920px) and (max-width: 2559px) {    html { font-size: calc(var(--base-font-size) * 2.25); }}
@media (min-width: 1280px) and (max-width: 1919px) {    html { font-size: calc(var(--base-font-size) * 1.5); }}
@media (min-width: 960px) and (max-width: 1279px)  {    html { font-size: calc(var(--base-font-size) * 1.125); }}
@media (max-width: 959px)                          {    html { font-size: calc(var(--base-font-size) * 1); }}
.col-itm { width:  5%; }
.col-ser { width: 10%; }
.col-ani { width:  6%; }
.col-tip { width:  9%; }
.col-cap { width:  5%; }
.col-mar { width: 19%; }
.col-obs { width: 30%;}
.col-acc { width: 10%; }
  .btn-opds {
    display: none;
  }