/* Estilo por defecto: pantallas grandes */
/*.imagen-carnet {
  width: 50%;
}*/

.imagen-carnet {
  display: block;         /* Hace que pueda centrarse */
  margin: 0 auto;         /* Centra horizontalmente */
  width: 50%;
  cursor: zoom-in;
}


/* Imagen original */
.imagen-carnet {
  width: 50%;
  cursor: zoom-in;
}

/* Modal oculto inicialmente */
.zoom-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
  text-align: center;
}

/* Imagen dentro del modal */
.zoom-modal-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 90%;
}

/* Botón de cerrar */
.zoom-modal .close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}


/* Estilos para móviles */
@media (max-width: 768px) {
  .imagen-carnet {
    width: 80%;
  }

  #contenedor-svg {
    width: 100%;
    margin: 0 auto;
  }

  #contenedor-svg svg {
    width: 100%;
    height: auto;
  }
}

/* Estilo para pantalla completa */
:fullscreen #contenedor-svg svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/*:fullscreen #imagenGafete .imagen-carnet {
  width: 100%;
  height: 100%;
  object-fit: contain;
}*/

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table th,
.table td {
    white-space: nowrap;
}


.tabla-firmas-wrapper {
    width: 100%;
    overflow-x: auto; /* scroll horizontal en móvil */
}

.tabla-firmas {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* clave para controlar ancho */
}

.tabla-firmas th,
.tabla-firmas td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Columna firma (texto largo tipo base64) */
.tabla-firmas td:nth-child(3) {
    word-break: break-all; /* rompe cadenas largas */
    font-size: 12px; /* opcional */
}

/* Responsive móvil */
@media (max-width: 768px) {
    .tabla-firmas th,
    .tabla-firmas td {
        font-size: 12px;
        padding: 6px;
    }
}