* { -moz-box-sizing: border-box; -moz-transition-duration: .2s; -moz-transition-timing-function: ease-out; -o-transition-duration: .2s; -o-transition-timing-function: ease-out; -webkit-border-radius: 0; -webkit-box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-transition-duration: .2s; -webkit-transition-timing-function: ease-out; border: 0; border-radius: 0; border-spacing: 0; box-sizing: border-box; margin: 0 auto; outline: 0 !important; padding: 0; transition-duration: .2s; transition-timing-function: ease-out }
:root { --c0: #fff; --cp: #2980b9; --cs: #093; --fsize: .7rem }
.fb, br, section { clear: both }
  .fb [type=button], .fb [type=submit], .fbuscar label, li, p { display: inline-block }
.enlace, .fBoton, .textocaja { text-transform: capitalize }
body > * { color: #34495e; font: var(--fsize) "Segoe UI",sans-serif }
h1 { color: var(--cp); font-size: 1.2rem; margin: 24px 0 5px 10px; width: 99% }
h2, h3, h4 { font-size: 1rem; margin: 0 0 20px }
input, select, textarea { background: rgba(209,233,255,.7); border-left: 3px solid #a08; border-radius: 3px; height: 27px; margin: 1px 0; padding: 0 0 0 8px }
  [type=text]:focus, select:focus, textarea:focus { background: #e6e6fa; box-shadow: 0 0 1px 1px rgba(54,65,80,.2); outline: 0 }
  input:-moz-placeholder, input::-webkit-input-placeholder, textarea:-moz-placeholder, textarea::-webkit-input-placeholder { color: #27575b }
[type=image] { background: 0 0; margin: 0; vertical-align: middle }
.close, .fbuscar label, .fgridPie, .fprecio, .ftvleaf, h1, legend { font-weight: 700 }
.fText { min-width: 200px }
.fdiv { border: 1px solid #dbdbdb; border-radius: 10px; box-shadow: 0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22); margin: .2rem; width: 99vw }
.fdiv, .fl, fieldset, li, p, section { float: left }
.fagregar, .fr { float: right }
fieldset { padding: 4px 0 0 20px; margin: 5px 10px; width: 420px }
  fieldset fLabel, fieldset input, fieldset label, fieldset select, fieldset span, fieldset textarea { display: block; float: left }
  fieldset .fLabel, fieldset .lbl, fieldset label { height: 27px; margin-right: 10px; text-align: right; width: 150px }
    fieldset fLabel::after, fieldset label:after, fieldset lbl:after { content: ":" }
  fieldset textarea { font-size: .8rem; height: 70px }
  [type=button], fieldset [type=submit] { background: #2f4050; border: 0; color: #ddd; line-height: 1px; margin: 4px 1px; min-width: 100px }
legend { color: #007cb0; padding: 5px; font-size: var(--fsize); text-align: center }
.fb, br { padding: 8px 0 0 10px }
.login { border: 1px solid #f5f5f5; border-top: 3px solid var(--cp); height: 282px; margin: 120px auto; padding: 20px 20px 20px 50px }
.mLogo { font-size: 1.3em }
.fbuscar { background: linear-gradient(90deg,#2f4050 70%,#141d25 90%); padding: 1px; width: 99% }
  .fbuscar [type=text], .fbuscar select, .fbuscar textarea { background: #f1f3f5; border-radius: 15px; margin-left: 10px }
  .fbuscar label { color: var(--c0); text-align: right }
.fBoton { background: #2f4050; border: 0; color: #ddd; min-width: 100px }
  .fBoton:hover { background: var(--cp) }
.fgrid { margin: 10px 0; font-size: .82rem }
  .fgrid, .fgrid th { border-bottom: 1px solid #e1e1e1 }
    .fgrid td { padding: 4.5px 5.7px }
    .fgrid th { padding: 0 5px; background: #2980b9; color: #ecf0f1; height: 10px; text-transform: uppercase }
      .fgrid th:first-child { border-left: 0; border-radius: 7px 0 0 }
      .fgrid th:last-child { border-radius: 0 7px 0 0 }
.fcarro, .ftv { border: 1px solid #dbdbdb }
.fgrid th a:link { color: #ecf0f1; font-weight: 700 }
.fgrid tr:hover { background: #e1e1e1 }
.fgrid [type=checkbox] { margin: 0 30% }
.fgridAlterna { background: #f5f5f5 }
.fgridPie { background: var(--cp); color: var(--c0) }
.fbsearch { padding: 0 20px 0 0 }
.ftv { background: #fafafa; margin: 0 10px; padding: 15px; width: 25% }
.b0, .fcarro, .fgridFila { background: var(--c0) }
.ftvleaf, .ftvroot, .ftvtree { font-size: 11px; width: 100% }
.ftvleaf { padding: 4px }
.fcarro { border-radius: 6px 6px 0 0; display: flex; flex-direction: column; height: 230px; justify-content: space-between; margin: 4px; padding: 0 10px 5px; width: 190px }
.fimagen { height: 110px }
.fagregar { display: flex; height: 35px; justify-content: flex-end }
.fprecio { color: #084e96 }
.mContent, .mError, .mExito, .mFooter, .mHeader, .mInfo, .mLeft, .modal { position: fixed; width: 100vw }
.mContent { border-radius: 8px 0 0 8px; bottom: 20px; margin: 0 0 0 190px; overflow: auto; padding: 12px; top: 35px }
.mHeader { height: 40px; top: 0 }
.mLeft { height: 100vh; top: 23px; width: 190px }
.mFooter { bottom: 0; height: 30px; left: 170px; right: 0 }
.usuario { border-radius: 50%; height: 35px; width: 35px }
li, p { list-style-type: none; margin: 0 2px }
a:link { font-weight: 600; text-decoration: none }
.fLinkButton, a:link, a:visited, section a:visited { color: #007cb0 }
.mMenu { border-top: 1px solid #293241 }
  .mMenu a { color: #e1e1e1 }
    .c0, .fBoton:hover, .header, .mHeader, .mMenu a:hover, .mlevel a, .mlevel a:hover { color: var(--c0) }
.menuSelected { color: #adff2f !important }
.xcenter { align-items: center; display: flex; justify-content: center }
.tal { text-align: left }
.header, .tac { text-align: center }
.taj { text-align: justify }
.w1, ul { width: 100% }
.x0 { width: 40px }
.x1 { width: 80px }
.x1m { width: 130px }
.x2 { width: 160px }
.x3 { width: 240px }
.x4 { width: 320px }
.x5 { width: 400px }
.x6 { width: 480px }
.x7 { width: 560px }
.x8 { width: 640px }
.x9 { width: 720px }
.x10 { width: 800px }
.x11 { width: 880px }
.x12 { width: 960px }
.y0 { height: 50px }
.y1 { height: 100px }
.y15 { height: 150px }
.y2 { height: 200px }
.y25 { height: 250px }
.y3 { height: 300px }
.y35 { height: 350px }
.y4 { height: 400px }
.y5 { height: 500px }
.y55 { height: 550px }
.y6 { height: 600px }
.y7 { height: 700px }
.y8 { height: 800px }
.px1 { padding: 0 10px }
.px2 { padding: 0 20px }
.px3 { padding: 0 30px }
.py1 { padding: 10px 0 }
.py2 { padding: 20px 0 }
.py4 { padding: 40px 0 }
.py5 { padding: 50px 0 }
.mError, .mExito, .mInfo { color: var(--c0); text-align: center; top: 0 }
.mExito { background: #37bc9b }
.mError { background: #da4453 }
.mInfo { background: rgba(74,137,220,.95) }
.opt { background: #ccc /*rgba(237,237,237,.8)*/; border: 0 }
.selected { background: var(--cp) !important }
.modalBackground { background: rgba(0,0,0,.6) }
.modal .header, .modalPopup .header { background: #364150; height: 30px; border-radius: 8px 8px 0 0; color: var(--c0); font-weight: 600; text-align: center }
.modalPopup .body { margin-left: 40px; padding: 5px }
.imgcontainer { margin: 11px; position: relative; text-align: center }
.modalPopup { background: var(--c0); border-radius: 8px; padding: 20px; margin: 0 auto; border: 1px solid #888; width: auto }
  .modal, .modalPopup h2 { left: 0; top: 0; width: 100% }
  .modalPopup h2 { padding: 5px 10px; position: absolute; background: var(--cp); color: var(--c0); border-radius: 7px 7px 0 0 }
.modal { background: rgba(0,0,0,.4); display: none; height: 100%; overflow: auto; padding-top: 50px; position: fixed }
.close, .mexit { position: absolute }
.modal .header { position: relative; top: -12px }
.modalCampos { padding-left: 60px }
.modal-content { background: #fafafa; border: 1px solid #888; border-radius: 12px; height: 260px; margin: 65px auto; width: 300px }
  .modal-content [type=submit] { color: var(--c0); font-size: 12px; padding: 0; text-transform: capitalize; width: 100px }
  .modal-content [type=text] { font-size: 12px; padding-left: 7px; width: 100px }
.close { color: #888; font-size: 35px; right: 15px; top: -24px; z-index: 99 }
  .close:focus, .close:hover { color: red; cursor: pointer }
.animate { -webkit-animation: .6s animatezoom; animation: .6s animatezoom }
.mexit { z-index: 2; right: 2px; top: 1px }
.textopregunta, a:hover { text-decoration: underline }
.menu1 { color: #333; font-size: 11px }
.menucombo { color: #666; font-size: 10px; margin: 1px }
.textopregunta { color: #069; font-size: 12px; font-weight: 400 }
.textocuerpo { color: #000; font-size: 9px }
.titulos { color: #000; font-size: 18px }
.tittulotabla { color: #676767; font-size: .7em; font-weight: 700; overflow: hidden }
.tituloitem { border: 1px solid #999; color: #f90; font-size: 12px; font-weight: 700 }
.cabeceratabla { color: var(--c0); font-size: 11px; margin-left: 2px; width: 237px }
.datostabla { color: #000; font-size: 11px }
.textokursivo { color: #069; font-size: 12px; font-style: oblique; font-weight: 400 }
.derecha, .requerido, .textoforma { font-style: normal }
.textoforma { color: #666; font-size: 68% }
.enlace { color: #00f !important; font-size: .6em !important }
.enlacepopup { border: 0 outset #f8d047; cursor: pointer }
.titular { color: #069 }
.valornumerototal { color: #900; font-weight: 700 }
.textotablas { color: #f0f; font-weight: 700 }
.textolabel { color: #666; font-weight: 700 }
.caja { background: #fffdf2; text-align: center }
.mensajes { color: Red }
.derecha, .tar { text-align: right }

@media (max-width: 1200px) {
  body > * { font-size: 14px; /* Ajuste para pantallas medianas */ }
}

@media (max-width: 768px) {
  body > * { font-size: 14px; /* Ajuste para tabletas */ }
}

@media (max-width: 480px) {
  * { font-size: 14px; /* Ajuste para móviles */ }
}