html {
    font-size: auto;
}
body {
    background-color: #f5f3f3
}
/* Antes vivía repartido en el preflight de Tailwind (assets/css/app.css, ya retirado
   de includes/head_assets.php). Se preserva aquí tal cual para no cambiar el
   comportamiento visual de las ~30 vistas que dependen de que sus títulos h1-h6
   salgan centrados por defecto. Es una regla heredada, no una decisión de diseño
   nueva — vale la pena revisarla vista por vista en una pasada de pulido visual. */
h1, h2, h3, h4, h5, h6 {
    text-align: center;
}

/* Imágenes/medios responsivos por defecto (antes en app.css) */
img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
}
img, video {
    max-width: 100%;
    height: auto;
}

/* Listas sin viñeta por defecto — de uso extendido en dropdowns/menús propios
   que no usan clases de Bootstrap para ocultar la viñeta (antes en app.css) */
ul, ol, menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

h2 {
    font-size: 3rem;
}
h4 {
    font-size: 16px;
    font-weight: 700;
}
header {
    padding: 20px 0 0 0;
    background: white;
    text-align: center;
}
@media (min-width: 750px) {
    header {
        text-align: left;
    }
}
.borrar-curso {
    background-color: red;
    border-radius: 50%;
    padding: 5px 10px;
    text-decoration: none;
    color: white;
    font-weight: bold;
}

ul {
    list-style: none;
      margin: 0px 0px 0px 500px!important; 
   
}
@media (min-width: 992px) {
    ul {
        list-style: none;
         margin: 0px 0px 0px 500px!important;
       
    }
}

/* @media (min-width: 992px) {
     .btn-menu{
    margin: 1px 1px 1px 50px;
} 
} */

/* .btn-menu{
    margin: 1px 1px 1px 50px;
} */


@media (min-width: 750px) {
    ul {
        list-style: none;
         margin: 0px 0px 0px 0px!important;
       
    }
}
@media (min-width: 550px) {
    ul {
        list-style: none;
         margin: 0px 0px 0px 0px!important;
       
    }
}

/* @media (max-width: 992px) {
    .busqueda-tabla{
        margin: 66px 1324px 0px -922px !important;
    }
} */
    




@media (min-width: 200px) {
    ul {
        list-style: none;
         margin: 0px 0px 0px 0px!important;
       
    }
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav {
        flex-direction: row;
        margin: 0px 0px 0px 25px !important;
    }
}

#logo{
    height: 65px;
    width: 134px;
    margin: 0px;
}
#hero {
    background-image:url(../../img/logoP.jpg);
    height: 350px;
    background-size: cover;
}
#encabezado {
    margin: 0px 0px 0px 300px !important;
}
.mapa {
    margin: 0px 0px 0px 100px;
}
.submenu {
    position: relative;
}

.submenu #carrito{
    display: none;
}
.submenu:hover #carrito{
    display: block;
    position: absolute;
    right:0;

    top:100%;
    z-index: 1;
    background-color: white;
    padding: 20px;
    min-height: 400px;
    min-width: 300px;
}
.vacio {
    padding: 10px;
    background-color: crimson;
    text-align: center;
    border-radius: 10px;
    color: white;
}
.contenido-hero {
    margin-top: 80px;
    color: white;
}
.contenido-hero form {
    position: relative;
    margin-bottom: 0;
}
.contenido-hero form #buscador {
    height: 50px;
    margin-bottom: 0;
}
.contenido-hero form .submit-buscador {
    position: absolute;
    right:0;
    top:0;
    height: 100%;
    padding: 0;
    display: block;
    text-indent: -9999px;
    width: 50px;
    background-image: url(../img/lupa.png);
    background-position: right center;
    background-repeat: no-repeat;
    border:none;
}

.form-control {
    width: none !important;
}


.barra {
    padding: 20px 0;
    background: #741d51; /* Old browsers */
    background: -moz-linear-gradient(left, #741d51 0%, #e44e52 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #741d51 0%,#e44e52 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to left, #741d51 0%,#e44e52 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#741d51', endColorstr='#e44e52',GradientType=1 ); /* IE6-9 */
}

.barra p {
    margin:0;
    color: white;
}
.icono {
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 60px;
    background-size: 30px;
    margin-bottom: 40px;
    text-align: center;
}
@media (min-width: 750px) {
    .icono {
        margin-bottom:0;
    }
}
.icono1 {
    background-image: url(../img/icono1.png);
}
.icono2 {
    background-image: url(../img/icono2.png);
}
.icono3 {
    background-image: url(../img/icono3.png);
}

#lista-cursos{
    margin: 0px 100px;
}
.agregar-carrito {
    margin:10px 0;
}

.card {
    text-align: left !important;
    border: 1px solid #e1e1e1;
    background: white;
    
}
@media (min-width: 700px) {
    .card {
        text-align: center;
    }
}
@media (min-width: 992px) {
    .card {
        text-align: center;
    }
}
.info-card  {
    padding: 10px 20px;
}

.info-card p, 
.card h4 {
    margin-bottom: 5px;
}
.info-card .precio {
    text-decoration: line-through;
    font-size: 18px;
    margin-top: 10px;
}
.info-card .precio span {
    font-weight: 700;
    font-size: 22px;
}


.footer {
    margin-top: 40px;
    border-top:1px solid #aaa;;
    padding-top: 40px;   
}
.footer .menu a{
display: block;
margin-bottom: 10px;
text-decoration: none;
}

.figure{
    margin: 0rem;
}

/* .navbar-nav{
    margin: 0px 0px 0px 290px;
  }  */
 
.btn-nuevo{
    margin: 0px 0px 10px 0px;
}

.buscar{
    width: 120px;
    
}

.btn-buscar{
    width: 50px;
    margin: -55px 0px 0px 128px;
}

.btn-ver{
    width: 50px;
    margin: -78px 0px 0px 0px;
}

/* .btn-buscar-bd{    
    margin: -71px 0px 63px 923px;
} */

.icons{
    width: 100px !important;
    height: 100px;
    margin: auto;
}

/* .btn-menu{
    margin: 1px 1px 1px 50px;
} */

.lista{
    margin: 40px 1px 1px 1px !important;
}

th{
    margin: 5px 0;
}

.filtro{
    display: none;
}

.subLogo{
    width: 200px;
}
/* establecer alto y ancho automatico para el fondo de la tabla
.backTable{
    width: fit-content !important;
    position:absolute;    
    left: 10px;
    width:100rem !important;
} */

.align-card{
    max-width: 100% !important;
}

.toast-custom{
    margin: auto;
}

.dropdown-item .title{
    text-align: center;

}

.btn-position{
    margin: 0px 0px 0px 20px !important;
}

#canvas{
    
    border: 1px !important;
    border-color: black !important;
    border-style: solid !important;
}


.fechas{
    
    width: 14rem;
    
}

.form-paginas{
    margin: -46px 0px 10px 124px;
}

.form-fechas{
    margin: -60px 0px 0px 232px;
}

.form-fechas .date{
    margin: -78px 0px 0px 550px;
}

.form-fechas .dos{
    margin: 22px 0px 0px 93px;
}
.form-fechas .tres{
    margin: -40px 0px 0px 321px;
}
.form-fechas select{

    margin: -48px 229px 17px -116px;
}    


/* .busqueda{
    margin: 0px 210px 0px -492px;
} */

/* .busqueda-tabla{
    margin: 48px 794px -37px -596px;
} */

.busqueda-valoracion{
    margin: 0px 90px 0px 237px;

}

.form-fechas .btn-excel{
    width: 80px;
    height: 39px;
    margin: -95px 0px 0px 690px;
}

.btn-pdf{
    width: 40px;
    height: 39px;
    margin: -36px 0px 0px 45px;
}

.ancho-filtro-servicio{
    width: 15rem !important;
    margin: -100px 0px -40px 1041px;
}

.ancho-filtro-turno{
    width: 15rem !important;
    margin: -50px 0px 0px 1042px;
}


thead {
  position: sticky;
  top: 0;
  z-index: 1; /* Para asegurar que la cabecera esté por encima del contenido */
}

/* ── Fondo de página de marca (reemplaza el antiguo bg-slate-300 tipo Tailwind) ── */
.bg-app {
    background-color: var(--sis-bg);
}

/* ── Layout de sidebar compartido (includes/sidebar.php), reemplaza a la
   antigua navbar superior de navegacion.php en las vistas internas ── */
.app-shell {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}
.app-main {
    flex: 1 1 auto;
    min-width: 0;
}
.sidebar-topbar {
    background: var(--sis-primary-dark);
}
/* #sisresSidebar (id) + .sidebar-panel (clase): la combinación le da más
   especificidad que cualquier regla de Bootstrap para .offcanvas/.offcanvas-lg
   (que solo usan clases) — así se garantiza que gane sin importar el orden de
   carga ni si Bootstrap llega a usar !important en su propia media query del
   breakpoint lg. Ver head_assets.php: bootstrap.min.css se carga DESPUÉS de
   custom.css a propósito, así que a igual especificidad Bootstrap gana. */
#sisresSidebar.sidebar-panel {
    --bs-offcanvas-width: 260px !important;
    width: 260px !important;
    background: var(--sis-primary-dark) !important;
    color: #fff !important;
}
.sidebar-brand {
    padding: 1.1rem 1.25rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: #fff;
    text-decoration: none;
    font-size: 1.05rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.sidebar-nav {
    padding: .5rem 0;
    overflow-y: auto;
}
.sidebar-nav .nav-link {
    color: rgba(255, 255, 255, .82);
    padding: .55rem 1.25rem;
    border-radius: 0;
}
.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link:focus {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}
.sidebar-nav .nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, .14);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--sis-accent);
}
.sidebar-nav .nav-link.sub {
    padding-left: 2.5rem;
    font-size: .85rem;
    color: rgba(255, 255, 255, .65);
}
.sidebar-nav .nav-link.sub:hover,
.sidebar-nav .nav-link.sub:focus {
    color: #fff;
}
.sidebar-nav .chevron {
    transition: transform .2s ease;
}
.sidebar-nav [aria-expanded="true"] .chevron {
    transform: rotate(90deg);
}
.sidebar-divider {
    border-color: rgba(255, 255, 255, .15);
    margin: .35rem 1.25rem;
}
.sidebar-user {
    padding: .85rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

/* ── Encabezado corporativo Aerosanidad ── */
.thead-aero th {
    background-color: var(--sis-primary) !important;
    color: #FFFFFF !important;
    border-color: var(--sis-accent) !important;
    position: sticky;
    top: 0;
    z-index: 3;
}

/* ── Filas alternadas y hover corporativos ── */
/* !important necesario: Bootstrap define estas mismas variables directamente
   en su propia clase .table (misma especificidad, cargada después de
   custom.css), así que sin esto gana el gris genérico de Bootstrap en vez
   del color corporativo. */
.table-aero {
    --bs-table-striped-bg: var(--sis-stripe) !important;
    --bs-table-hover-bg: var(--sis-accent-tint) !important;
}

/* ── Cabecera fija (antes duplicada como <style> embebido en mostrarServicios.php,
   mostrarPacientes.php y mostrarLog.php — misma regla que .thead-aero, solo
   que estas tablas no traían la clase de la variante con scroll interno).
   Mismos valores exactos que .thead-aero (incluido !important y border-color)
   para que el color de cabecera sea idéntico en las 10 tablas del sistema. ── */
.encabezado-fijo th {
    background-color: var(--sis-primary) !important;
    color: #FFFFFF !important;
    border-color: var(--sis-accent) !important;
    position: sticky;
    top: 0;
    z-index: 3;
}

/* ── Altura fija para el contenedor con scroll de las tablas "mostrar*.php" ──
   Sin esto, una tabla con muchas filas crece indefinidamente y la barra de
   desplazamiento horizontal queda al final de TODA la tabla — hay que bajar
   toda la página para alcanzarla. Con la altura acotada, la barra horizontal
   siempre queda visible dentro del viewport, sin desplazamiento vertical
   adicional para llegar a ella. Usar en el <div class="table-responsive"> que
   envuelve cada tabla: class="table-responsive tabla-altura-fija" ── */
.tabla-altura-fija {
    max-height: 80vh;
    overflow: auto;
}

table {
  /* Aquí se puede configurar un alto máximo para el contenedor de la tabla */
  max-height: 400px; /* Ejemplo */
  overflow-y: auto; /* Opcional: para habilitar el scroll solo si es necesario */
}

/*ESTILOS PERSONALIZADOS PARA REGISTRO DE MANTENIMIENTO BIOMÉDICA*/
/* Recoloreado a la paleta corporativa Aerosanidad (antes era un azul genérico
   de "dashboard SaaS" sin relación con la marca). Los nombres de variable se
   conservan para no tocar las ~40 reglas que ya las consumen abajo. */
:root {
      --azul-oscuro: var(--sis-primary-dark);
      --negro-medio: #212529;
      --azul-acento: var(--sis-primary);
      --azul-claro: var(--sis-accent-tint);
      --verde: var(--sis-success);
      --rojo: var(--sis-danger);
      --gris-linea: #d0d7e3;
      --gris-fondo: #f4f6fb;
      --texto: #1a2340;
      --texto-suave: #5a6480;
    }

    * { box-sizing: border-box; }

    body {
      font-family: 'IBM Plex Sans', sans-serif;
      background: var(--gris-fondo);
      color: var(--texto);
      min-height: 100vh;
    }

    /* ── ENCABEZADO ── */
    .form-header {
      background: var(--azul-oscuro);
      color: #fff;
      padding: 0;
    }

    .header-inner {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: stretch;
    }

    .header-title {
      padding: 28px 36px;
      border-right: 1px solid rgba(255,255,255,0.12);
    }

    .header-title h1 {
      font-size: 1.15rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin: 0 0 4px;
      color: #fff;
    }

    .header-title p {
      font-size: 0.78rem;
      color: rgba(255,255,255,0.5);
      margin: 0;
      font-family: 'IBM Plex Mono', monospace;
    }

    .header-meta {
      padding: 20px 28px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 6px;
      min-width: 220px;
    }

    .meta-item {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      font-size: 0.72rem;
      font-family: 'IBM Plex Mono', monospace;
    }

    .meta-label { color: rgba(255,255,255,0.45); text-transform: uppercase; }
    .meta-value { color: #fff; font-weight: 600; letter-spacing: 0.04em; }

    /* ── CONTENEDOR PRINCIPAL ── */
    .form-body {
      max-width: 960px;
      margin: 0 auto;
      padding: 32px 20px 60px;
    }

    /* ── SECCIONES ── */
    .seccion {
      background: #fff;
      border: 1px solid var(--gris-linea);
      border-radius: 10px;
      margin-bottom: 24px;
      overflow: hidden;
      box-shadow: 0 1px 6px rgba(10,22,40,0.06);
    }

    .seccion-header {
      background: var(--negro-medio);
      color: #fff;
      padding: 12px 24px;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .seccion-header .dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--verde);
      flex-shrink: 0;
    }

    .seccion-body { padding: 24px; }

    /* ── CAMPOS ── */
    .campo-label {
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--texto-suave);
      margin-bottom: 6px;
    }

    .form-control, .form-select {
      border: 1.5px solid var(--gris-linea);
      border-radius: 6px;
      font-family: 'IBM Plex Sans', sans-serif;
      font-size: 0.88rem;
      color: var(--texto);
      background: #fafbfd;
      transition: border-color .2s, box-shadow .2s;
    }

    .form-control:focus, .form-select:focus {
      border-color: var(--azul-acento);
      box-shadow: 0 0 0 3px rgba(26,115,232,0.12);
      background: #fff;
    }

    /* ── TIPO DE MANTENIMIENTO ── */
    .tipo-mtto {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .tipo-btn {
      flex: 1;
      min-width: 140px;
      border: 2px solid var(--gris-linea);
      border-radius: 8px;
      padding: 14px 20px;
      cursor: pointer;
      transition: all .2s;
      display: flex;
      align-items: center;
      gap: 12px;
      background: #fafbfd;
      user-select: none;
    }

    .tipo-btn input { display: none; }

    .tipo-btn .tipo-icon {
      width: 36px; height: 36px;
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.1rem;
      flex-shrink: 0;
      transition: background .2s;
    }

    .tipo-btn .tipo-text strong {
      display: block;
      font-size: 0.85rem;
      font-weight: 600;
    }

    .tipo-btn .tipo-text span {
      font-size: 0.72rem;
      color: var(--texto-suave);
    }

    .tipo-btn.preventivo:has(input:checked),
    .tipo-btn.preventivo.active {
      border-color: var(--verde);
      background: #f0fdf8;
    }

    .tipo-btn.preventivo .tipo-icon { background: #d4f5ea; }
    .tipo-btn.preventivo:has(input:checked) .tipo-icon,
    .tipo-btn.preventivo.active .tipo-icon { background: var(--verde); color: #fff; }

    .tipo-btn.correctivo:has(input:checked),
    .tipo-btn.correctivo.active {
      border-color: var(--rojo);
      background: #fff5f5;
    }

    .tipo-btn.correctivo .tipo-icon { background: #fde8e8; }
    .tipo-btn.correctivo:has(input:checked) .tipo-icon,
    .tipo-btn.correctivo.active .tipo-icon { background: var(--rojo); color: #fff; }

    .tipo-btn.calibracion:has(input:checked),
    .tipo-btn.calibracion.active {
      border-color: var(--sis-accent);
      background: var(--sis-accent-tint);
    }

    .tipo-btn.calibracion .tipo-icon { background: var(--sis-accent-tint); }
    .tipo-btn.calibracion:has(input:checked) .tipo-icon,
    .tipo-btn.calibracion.active .tipo-icon { background: var(--sis-accent); color: #fff; }

    /* ── LISTADO DE CHEQUEO ── */
    .checklist-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    @media (max-width: 600px) {
      .checklist-grid { grid-template-columns: 1fr; }
    }

    .check-item {
      border: 1.5px solid var(--gris-linea);
      border-radius: 8px;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      transition: all .18s;
      background: #fafbfd;
      user-select: none;
    }

    .check-item input { display: none; }

    .check-box {
      width: 22px; height: 22px;
      border: 2px solid var(--gris-linea);
      border-radius: 5px;
      flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      transition: all .18s;
      font-size: 0.7rem;
      color: transparent;
    }

    .check-item:has(input:checked) {
      border-color: var(--azul-acento);
      background: var(--azul-claro);
    }

    .check-item:has(input:checked) .check-box {
      background: var(--azul-acento);
      border-color: var(--azul-acento);
      color: #fff;
    }

    .check-item:has(input:checked) .check-label { color: var(--azul-acento); font-weight: 600; }

    .check-label {
      font-size: 0.83rem;
      color: var(--texto);
      transition: color .18s;
    }

    /* ── OBSERVACIONES SI/NO ── */
    .obs-tabla {
      border: 1.5px solid var(--gris-linea);
      border-radius: 8px;
      overflow: hidden;
    }

    .obs-fila {
      display: grid;
      grid-template-columns: 1fr auto auto;
      align-items: center;
      padding: 12px 20px;
      border-bottom: 1px solid var(--gris-linea);
      gap: 16px;
      transition: background .15s;
    }

    .obs-fila:last-child { border-bottom: none; }
    .obs-fila:hover { background: var(--gris-fondo); }

    .obs-texto { font-size: 0.84rem; font-weight: 500; }

    .obs-radio-group { display: flex; gap: 12px; }

    .radio-opt {
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      padding: 4px 10px;
      border-radius: 20px;
      border: 1.5px solid var(--gris-linea);
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      transition: all .15s;
      user-select: none;
    }

    .radio-opt input { display: none; }

    .radio-opt.si:has(input:checked) { background: #d4f5ea; border-color: var(--verde); color: #00895e; }
    .radio-opt.no:has(input:checked) { background: #fde8e8; border-color: var(--rojo); color: var(--rojo); }

    /* ── TABLA REPUESTOS ── */
    .repuestos-header {
      display: grid;
      grid-template-columns: 2fr 2fr 1fr auto;
      gap: 10px;
      padding: 8px 0;
      border-bottom: 2px solid var(--gris-linea);
      margin-bottom: 10px;
    }

    .rep-col-label {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--texto-suave);
    }

    .repuesto-fila {
      display: grid;
      grid-template-columns: 2fr 2fr 1fr auto;
      gap: 10px;
      margin-bottom: 10px;
      align-items: center;
    }

    .btn-add-rep {
      border: 2px dashed var(--azul-acento);
      color: var(--azul-acento);
      background: transparent;
      border-radius: 8px;
      padding: 10px;
      width: 100%;
      font-size: 0.82rem;
      font-weight: 600;
      cursor: pointer;
      transition: all .15s;
      margin-top: 4px;
    }

    .btn-add-rep:hover { background: var(--azul-claro); }

    .btn-del-rep {
      border: none;
      background: #fde8e8;
      color: var(--rojo);
      border-radius: 6px;
      width: 34px; height: 34px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      font-size: 1rem;
      transition: background .15s;
      flex-shrink: 0;
    }

    .btn-del-rep:hover { background: #f5b8b8; }

    /* ── FIRMA ── */
    .firma-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
    }

    @media (max-width: 576px) {
      .firma-grid { grid-template-columns: 1fr; }
    }

    .firma-box {
      border: 1.5px solid var(--gris-linea);
      border-radius: 8px;
      padding: 20px;
    }

    .firma-box h6 {
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--texto-suave);
      margin-bottom: 16px;
    }

    .firma-area {
      border: 1.5px dashed var(--gris-linea);
      border-radius: 6px;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.75rem;
      color: var(--texto-suave);
      background: var(--gris-fondo);
      margin-top: 12px;
    }

    /* ── BOTÓN ENVIAR ── */
    .btn-submit {
      background: var(--azul-acento);
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 14px 40px;
      font-family: 'IBM Plex Sans', sans-serif;
      font-size: 0.9rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      cursor: pointer;
      transition: background .2s, transform .1s;
    }

    .btn-submit:hover { background: #1557b0; }
    .btn-submit:active { transform: scale(0.98); }

    .btn-secondary-action {
      background: transparent;
      color: var(--texto-suave);
      border: 1.5px solid var(--gris-linea);
      border-radius: 8px;
      padding: 13px 28px;
      font-family: 'IBM Plex Sans', sans-serif;
      font-size: 0.88rem;
      font-weight: 600;
      cursor: pointer;
      transition: all .2s;
    }

    .btn-secondary-action:hover { border-color: var(--azul-acento); color: var(--azul-acento); }

    textarea.form-control { resize: vertical; min-height: 90px; }

    .custom-btn-bio{
     margin: -38px 10px 0px 200px
    }

    /*FIN DE ESTILOS PERSONALIZADOS PARA REGISTRO DE MANTENIMIENTO BIOMÉDICA*/